Understanding the layout field

Iā€™ve got some questions about the layout field, I hope itā€™s ok to ask two questions in one topic.

  1. How do I extend a core block in a layout field?
    Iā€™m currently using the following code which seems to work fine in the panel but the extended blocks (image, heading) donā€™t render in the template.
layout:
  type: layout
  layouts:
    - "1/1"
    - "1/2, 1/2"
    - "1/4, 1/4, 1/4, 1/4"
    - "1/3, 2/3"
    - "2/3, 1/3"
    - "1/3, 1/3, 1/3"
  fieldsets:
    - text
    - image
      extends: blocks/image
      fields:
        class:
          label: class
          type: text
    - heading
      extends: blocks/heading
      fields:
        text:
          type: writer
          marks: false
    - list
    - markdown
    - quote
    - gallery
    - video
    - code
  1. I noticed I can set layouts up to 12 columns:
layout:
  type: layout
  layouts:
    - "1/1"
    - "1/2, 1/2"
    - "1/4, 1/4, 1/4, 1/4"
    - "1/3, 2/3"
    - "2/3, 1/3"
    - "1/3, 1/3, 1/3"
    - "1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3"

How can I check for empty columns?

$column->blocks()->isEmpty()

Ok, thank you.

Any thoughts about how to extend a block in a layout?

I wonder if the issue is the hyphen before the extended ones?

Removing the hyphens doesnā€™t seem to make any difference.
Panel:

Front with missing headings and images:

Hm, Iā€™d try and define that extended block in a separate blocks blueprint, then just list it there. Not tested.

This seems to works, extending all the fields. If I donā€™t extend theme all I only get the image and heading field to choose from.

fieldsets:
  image:
    extends: blocks/image
    fields:
      class:
        label: class
        type: text
  heading:
    extends: blocks/heading
    fields:
      text:
        type: writer
        marks: false
  text:
    extends: blocks/text
  list:
    extends: blocks/list
  markdown:
    extends: blocks/markdown
  quote:
    extends: blocks/quote
  gallery:
    extends: blocks/gallery
  video:
    extends: blocks/video
  code:
    extends: blocks/code

btw: Front end renders this properly

According: https://getkirby.com/docs/reference/panel/fields/blocks#custom-block-types
Custom block types are defined after the core types?

Because this works and is obviously better than the example above (extending all the fields):

fieldsets:
  - text
  - list
  - markdown
  - quote
  - gallery
  - video
  - code
  image:
    extends: blocks/image
    fields:
      class:
        label: Class
        type: text
  heading:
    extends: blocks/heading
    fields:
      text:
        type: writer
        marks: false

Would be nice if in the reference this text:
Custom blocks are defined directly in the fieldsets list:
Into something like this:
Custom blocks are defined directly in the fieldsets list after the core types:
?

Hello,

I have the same issue, also discussed in another ticket, yet this one seems to be very similar to my problem.
I checked your solution yet I couldnā€™t figure out how to solve my problem. Do you have an idea? :slight_smile:

Hereā€™s my blueprint:

layout:
	type: layout
	layouts:
		- "1/1"
		- "1/2, 1/2"
	fieldsets:
		feedimage:
			extends: blocks/image
			fields:
				image:
					type: files
					query: site.find('albums').children.images
				link:
					label: Redirection Link
					type: select
					options: query
					query: site.find('albums').children.published
					width: 1/1
				margin:
					type: radio
					label: 'Size'
					options:
						normal: 'Normal'
						margin: 'Thumbnail centred'
				ratio: false
				crop: false
				caption: false
				alt: false

What exactly is your issue? Once you add custom block types, you have to spell out all the other ones you want to use (in no particular order).

So before and/or after your fieldset,

fieldsets:
  - heading
  feedimage:
    extends: blocks/image 
    # rest of your fieldset
  - text
  - code

Hello Sonja,

Thanks for your quick answer.

Hereā€˜s what I need to do:

				layout:
					type: layout
					layouts:
						- "1/1"
						- "1/2, 1/2"
					fieldsets:
						- heading
						imageblock:
							extends: blocks/image
							fields:
								image:
									type: files
									query: site.find('albums').children.images
								link:
									label: Redirection Link
									type: select
									options: query
									query: site.find('albums').children.published
									width: 1/1
								margin:
									type: radio
									label: 'Size'
									options:
										normal: 'Normal'
										margin: 'Thumbnail centred'
								ratio: false
								crop: false
								caption: false
								alt: false

However, I doesnā€™t render my images set. The Heading block works fine!

Ah, but if you give the block type a different name than the original, you need a snippet with that name.

In the frontend. The panel is all fine! :slight_smile:

I have overwritten my own post, so see above.

Or use the same fieldset name, ie. image instead of imageblock.

Iā€™m sorry but to be clear, which part I need to rename then? :slight_smile:

Either replace ā€œimageblockā€ in the blueprint with ā€œimageā€, or create a custom block snippet called ā€œimageblockā€

That did work ! I didnā€™t know that the name had to be the same.

Thanks a lot !! :smiley:

Oh in fact it worked very fine for the image. It does append in the frontend. However for the other field such as ā€˜marginā€™ which is a radio field, I canā€™t achieve to append this column field in the front.

Here is my code:

layout:
	type: layout
	layouts:
		- "1/1"
		- "1/2, 1/2"
	fieldsets:
		image:
			extends: blocks/image
			fields:
				image:
					type: files
					query: site.find('albums').children.images
				link:
					label: Redirection Link
					type: select
					options: query
					query: site.find('albums').children.published
					width: 1/1
				margin:
					type: radio
					label: 'Size'
					options:
						normal: 'Normal'
						margin: 'Thumbnail centred'
				ratio: false
				crop: false
				caption: false
				alt: false

and hereā€™s what I tried for the template:

<?php foreach ($page->layout()->toLayouts() as $layout): ?>
<section class="section grid">
  <?php foreach ($layout->columns() as $column): ?>
  <div class="column" style="--columns: <?= $column->width() ?>">


	<?php foreach ($column->blocks()->image() as $block): ?>
      <div class="block block-type-<?= $block->type() ?>">
        <?php snippet('blocks/' . $block->type(), ['block' => $block, 'layout' => $layout]) ?>
      </div>
    <?php endforeach ?>


  </div>
  <?php endforeach ?>
</section>
<?php endforeach ?>

Thanks a lot :slight_smile:

Right, if you add fields, you would have to overwrite the snippet and put your custom snippet in site/snippets/blocks. If you donā€™t want to apply this to all image blocks, using a custom name + a custom snippet is probably the better option.

It works ! Thanks a lot !!