Allow the specification of blocks allowed within columns #25778

JesserH · 2020-10-01T15:06:33Z

Description

This an updated version of #25183.
I and @aristath developed a solution to the issue where an individual column could not define any specifically allowed blocks to be added in it. This also applies to newly added columns in the columns block (from the slider at the columns settings) also specify the blocks allowed to be added into that column. We believe that this is important to custom Gutenberg block development to nest blocks in a good and effective way.

How has this been tested?

Me and @aristath have tested this locally.

Screenshots

Types of changes

We have added a new attribute called allowedBlocks in the column, and a childAllowedBlocks attribute within the columns block, which allows for defining the allowed blocks per individual column.

Example of use:

const allowedBlocks = [
  "core/paragraph",
  "core/separator",
  "core/cover",
];

//the code below can be used in a template
[ [ 'core/columns', { allowedChildBlocks: allowedBlocks }, [
      [ 'core/column', { allowedBlocks }, [
          //here a block is added, but with the allowedBlocks property more specifically allowed blocks can be added
          [ 'cgb/recipe-name-block', { name: attributes.name, allowedBlocks },  ],
      ] ],
      [ 'core/column', { allowedBlocks }, [
        [ 'cgb/recipe-description-block', { recipeDescription: attributes.description, allowedBlocks },  ],          
     ] ],
  ] ] ],

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

fixes #18161

Sync with master repo

Update branch with new master from gutenberg

ajitbohra · 2020-10-01T19:24:48Z

@JesserH this seems to be a duplicate of #25183 which is already merged.

aristath · 2020-10-02T05:00:18Z

Reopening this one.
@ajitbohra #25183 appears merged in the Github UI but was not actually merged. There was a git mix-up and a force-push on the master branch just seconds after that PR got merged by mistake. As a result, the PR is marked as merged (even though it wasn't merged) and there is no way to reopen it.

aristath · 2020-10-02T05:11:58Z

Tested and confirmed this works, details on #25183 (comment)

raphaelparent · 2020-12-01T14:50:46Z

Hi! I was wondering if there was any progress on this? Or if it was merged in part of another PR?

The last commits is dated of October 23rd, it was confirmed as working but the merge is blocked because of failed checks. I've looked around quit a bit and this is the most recent and up to date PR I've seen concerning the issue of allowed blocks in column elements.

aristath · 2020-12-01T14:53:18Z

@JesserH could you please sync your fork with the main repo? I believe most of the failing tests have been fixed since then

…master

packages/block-library/src/column/block.json

aristath · 2020-12-08T12:43:55Z

cc @talldan @ajitbohra

talldan · 2020-12-09T03:29:32Z

I was wondering if it'd be possible to use block context to just declare the attribute once on the parent columns block:
https://developer.wordpress.org/block-editor/developers/block-api/block-context/

The individual column could consume that context and pass it to the inner blocks of the column.

This way there would be a single source of truth for the allowedBlocks rather than duplicated attributes and there would then be less risk of them becoming out of sync.

talldan · 2020-12-09T04:43:27Z

Though I've maybe changed my mind looking at how the templateLock attribute was defined here - #26128

It seems like that PR specifically went for a solution where columns could have different template lock settings. It didn't really tackle whether users could modify the column count after the fact.

Given the main use-case for both would be templating, I wonder if it's worth matching that implementation for consistency as a first step, and then considering how it might work in the columns block as a separate change. What do you think?

JesserH · 2020-12-09T15:58:28Z

@talldan I chose to implement the allowedChildBlocks for the blocks individually because of the columns block which has a slider. To my understanding it's not ideal to pass the value to the new block when the slider is moved upwards (so new blocks spawned).
Additionally, since it is used mostly for templating I think it is valuable to give the creator the customisability over his pre-defined columns, which is only improved functionality if you ask me. 😄 I'd personally prefer to keep the code as it is, but understand if you do want a refactor.
What is your view on this? 😃

raphaelparent · 2021-01-05T19:00:35Z

@aristath thanks for the follow up on this feature!

It seems like the merge is only awaiting your validation for the requested changes. Once it's merged and part of an update (not sure of the flow here) I'll be able to test it and give feedback if I find some problems with it.

aristath · 2021-01-07T09:59:20Z

@aristath thanks for the follow up on this feature! It seems like the merge is only awaiting your validation for the requested changes. Once it's merged and part of an update (not sure of the flow here) I'll be able to test it and give feedback if I find some problems with it.

I was part of this feature's development so I can't (ethically) review it, I wouldn't be objective. We'll wait for someone else to properly review it when it's time 👍

talldan · 2021-01-13T01:47:57Z

packages/block-library/src/columns/edit.js

@@ -72,6 +72,7 @@ function ColumnsEditContainer( {
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
+		allowedChildBlocks,


I think this line can be removed, allowedChildBlocks isn't a recognized property for inner blocks:
https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md#props

Yes, I agree that this line should be removed.

talldan · 2021-01-13T02:41:54Z

@JesserH From testing, I think allowedChildBlocks is misleading, because it sounds like it'd allow an implementor to define the allowed blocks once at the parent columns level. I experimented with the following template:

function myplugin_register_book_post_type() {
	$args = array(
		'public'        => true,
		'label'         => 'Books',
		'show_in_rest'  => true,
		'template'      => array(
			array(
				'core/columns',
				array(
					'allowedChildBlocks' => array( 'core/paragraph' ),
				),
				array(
					array(
						'core/column',
					),
					array(
						'core/column',
					),
				),
			),
		),
	);
	register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

This didn't work, I still need to specify allowedBlocks on each column. It looks like all allowedChildBlocks does is control the allowed blocks for newly added columns.

It could be renamed, but I think this needs some more thought. I'd be inclined to strip this PR back to just include the changes to the column block allowedBlock attribute, and explore the columns block changes in a separate PR.

Also cc'ing @jorgefilipecosta and @mcsf for a review, as it looks like Jorge worked on the template lock for column and Miguel code reviewed.

jorgefilipecosta

I think the allowedBlocks attribute in columns is good addition, it follows the same approach as in #26128 👍

Regarding the mechanism to control allowed blocks for newly created columns I agree with @talldan, it seems safer to not include it for now.
I guess if we needed it after we can create something with specific names saying that is for new columns that covers, allowedBlocks and templateLock.

jorgefilipecosta · 2021-01-15T17:43:26Z

packages/block-library/src/columns/edit.js

@@ -72,6 +72,7 @@ function ColumnsEditContainer( {
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
+		allowedChildBlocks,


Yes, I agree that this line should be removed.

JesserH · 2021-01-18T09:54:02Z

@jorgefilipecosta I updated the PR accordingly 😄

talldan · 2021-01-19T04:11:55Z

@JesserH The changes seem the opposite to what was recommended, I think it'd be best to keep only the changes on the column block.

This reverts commit cf358e6.

This reverts commit 7f9d656.

This reverts commit c205d34.

Merge master from gutenberg

JesserH · 2021-01-22T11:57:22Z

@talldan Sorry, that's my bad 😅 . I have updated the PR 😄

LucaPipolo · 2021-10-01T09:05:17Z

Any update to this? Would be really great to have this feature! 🙏🏼 😬

draganescu

I think this is updated according to the requested changes now, right @talldan?

gziolo · 2021-10-04T08:27:22Z

packages/block-library/src/column/edit.js

@@ -67,6 +72,7 @@ function ColumnEdit( {
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock,
+		allowedBlocks,


What happens when allowedBlocks is undefined?

packages/block-library/src/column/block.json

aristath · 2021-10-05T09:25:44Z

Unfortunately we can't push any fixes or update the PR since it's on a fork, and @JesserH has since moved on to other projects.
In order to move this forward, I'm closing this PR and re-submitting it in #35342
The new PR uses this branch as a starting point, and I simply rebased it, resolved conflicts etc. I'll be addressing the feedback there. Feel free to comment on the new PR, review and push additional changes as needed. The new PR is from the main repo and not a fork so it will be easier to move forward. 👍

JesserH added 5 commits September 9, 2020 10:18

Merge pull request #1 from WordPress/master

18e551b

Sync with master repo

allowedChildBlocks within columns implementation

1e46bec

Add inline documentation

fae4052

Merge branch 'master' into pr/3

2545dd1

Merge pull request #4 from JesserH/pr/3

6b2652b

Update branch with new master from gutenberg

JesserH requested review from ajitbohra, Soean and talldan as code owners October 1, 2020 15:06

Merge branch 'master' into master

db39fde

ajitbohra closed this Oct 1, 2020

aristath reopened this Oct 2, 2020

Merge branch 'master' into master

001c2f6

JesserH added 2 commits December 8, 2020 12:02

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

1ee9e83

…master

Fix column and columns cs

de1bd75

aristath requested changes Dec 8, 2020

View reviewed changes

packages/block-library/src/column/block.json Outdated Show resolved Hide resolved

Fix indentation

1105f28

talldan mentioned this pull request Dec 9, 2020

Individual Column(s) should be able to define allowed blocks #18161

Closed

talldan reviewed Jan 13, 2021

View reviewed changes

jorgefilipecosta reviewed Jan 15, 2021

View reviewed changes

JesserH added 3 commits January 18, 2021 10:14

Remove unnessecary line

c205d34

Remove allowedBlocks prop for column

7f9d656

Move to single line

cf358e6

JesserH added 8 commits January 22, 2021 10:18

Revert "Move to single line"

c8ab41f

This reverts commit cf358e6.

Revert "Remove allowedBlocks prop for column"

164a4ea

This reverts commit 7f9d656.

Revert "Remove unnessecary line"

6a37644

This reverts commit c205d34.

Remove columns allowedChlidBlocks

0a1aa6f

Fix columns edit cs

3c570b6

Merge pull request #5 from WordPress/master

07b4b8b

Merge master from gutenberg

Update edit.js

bcad775

Fix cs

328b68a

gziolo mentioned this pull request Jan 26, 2021

Variations (formerly patterns) API for blocks #16283

Closed

16 tasks

gziolo requested a review from a team January 26, 2021 07:17

gziolo added the [Block] Columns Affects the Columns Block label Jan 26, 2021

gziolo requested a review from mtias January 26, 2021 07:18

Base automatically changed from master to trunk March 1, 2021 15:44

ajotka mentioned this pull request Apr 29, 2021

allowedBlocks attribute implementation at cover #31312

Closed

gziolo mentioned this pull request Jun 18, 2021

Introduce Block type level lock control #32457

Merged

draganescu approved these changes Oct 1, 2021

View reviewed changes

gziolo requested a review from jorgefilipecosta October 4, 2021 08:25

gziolo reviewed Oct 4, 2021

View reviewed changes

talldan reviewed Oct 5, 2021

View reviewed changes

packages/block-library/src/column/block.json Show resolved Hide resolved

aristath mentioned this pull request Oct 5, 2021

Allow the specification of blocks allowed within columns #35342

Merged

7 tasks

aristath closed this Oct 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow the specification of blocks allowed within columns #25778

Allow the specification of blocks allowed within columns #25778

JesserH commented Oct 1, 2020

ajitbohra commented Oct 1, 2020

aristath commented Oct 2, 2020 •

edited

aristath commented Oct 2, 2020

raphaelparent commented Dec 1, 2020

aristath commented Dec 1, 2020 •

edited

aristath commented Dec 8, 2020

talldan commented Dec 9, 2020

talldan commented Dec 9, 2020 •

edited

JesserH commented Dec 9, 2020

raphaelparent commented Jan 5, 2021 •

edited

aristath commented Jan 7, 2021

talldan Jan 13, 2021

jorgefilipecosta Jan 15, 2021

talldan commented Jan 13, 2021

jorgefilipecosta left a comment

jorgefilipecosta Jan 15, 2021

JesserH commented Jan 18, 2021

talldan commented Jan 19, 2021

JesserH commented Jan 22, 2021

LucaPipolo commented Oct 1, 2021

draganescu left a comment

gziolo Oct 4, 2021

aristath commented Oct 5, 2021

Allow the specification of blocks allowed within columns #25778

Allow the specification of blocks allowed within columns #25778

Conversation

JesserH commented Oct 1, 2020

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ajitbohra commented Oct 1, 2020

aristath commented Oct 2, 2020 • edited

aristath commented Oct 2, 2020

raphaelparent commented Dec 1, 2020

aristath commented Dec 1, 2020 • edited

aristath commented Dec 8, 2020

talldan commented Dec 9, 2020

talldan commented Dec 9, 2020 • edited

JesserH commented Dec 9, 2020

raphaelparent commented Jan 5, 2021 • edited

aristath commented Jan 7, 2021

talldan Jan 13, 2021

Choose a reason for hiding this comment

jorgefilipecosta Jan 15, 2021

Choose a reason for hiding this comment

talldan commented Jan 13, 2021

jorgefilipecosta left a comment

Choose a reason for hiding this comment

jorgefilipecosta Jan 15, 2021

Choose a reason for hiding this comment

JesserH commented Jan 18, 2021

talldan commented Jan 19, 2021

JesserH commented Jan 22, 2021

LucaPipolo commented Oct 1, 2021

draganescu left a comment

Choose a reason for hiding this comment

gziolo Oct 4, 2021

Choose a reason for hiding this comment

aristath commented Oct 5, 2021

aristath commented Oct 2, 2020 •

edited

aristath commented Dec 1, 2020 •

edited

talldan commented Dec 9, 2020 •

edited

raphaelparent commented Jan 5, 2021 •

edited