Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow the specification of blocks allowed within columns #25183

Merged
merged 3 commits into from
Oct 1, 2020

Conversation

JesserH
Copy link
Contributor

@JesserH JesserH commented Sep 9, 2020

Description

This an updated version of #18164.
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

Screenshot 2020-09-09 at 12 14 13

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

@aristath aristath added [Block] Columns Affects the Columns Block [Type] Enhancement A suggestion for improvement. labels Sep 9, 2020
@aristath
Copy link
Member

aristath commented Sep 9, 2020

Tested and confirmed this works as expected:

  • Case 1 (columns): If in a columns block we add "allowedChildBlocks":["core/paragraph"] in its attributes (just by switching to the code editor), all columns inside the column will only be able to add paragraph blocks.
  • Case 2 (column): If inside a single column's attributes we add "allowedBlocks":["core/paragraph", "core/cover"], then that column will only be able to add paragraph and cover blocks.

This can allow plugins to build complex structures. For example a "book"or a "recipe" block would have to allow specific blocks to be added in it - including columns that in their turn should only allow the same specific block types in order to have a properly structured schema.
In addition to that, FSE themes could also use it in their FSE templates depending on what they want to do with their default templates.

If a plugin gets updated and adds more allowed blocks, we already have a mechanism that can take care of deprecations (see example deprecations in columns) so the plugin could implement a similar method in their own complex block (which contains nested columns). This way their update methods can take care of backwards-compatibility and update processes. But it will ultimately need to be the plugin's responsibility.

This change has the potential to allow building more robust & versatile complex structures.
The only alternative authors have right now is to clone the columns & column block on their own plugin, namespace them and write tons of code that could have easily been avoided with this PR.

@aristath aristath merged this pull request into WordPress:master Oct 1, 2020
@JesserH
Copy link
Contributor Author

JesserH commented Oct 1, 2020

New issue above due to some github problems

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Individual Column(s) should be able to define allowed blocks
2 participants