Block Library: Update Columns block to use Patterns API by gziolo · Pull Request #18283 · WordPress/gutenberg

gziolo · 2019-11-05T10:36:19Z

Description

Part 2 of #16283.

Continuation of #18270. This branch is based on the ~~add/patterns-api~~ master branch.

This PR refactors Columns block to use this new API making the placeholder open for customization.

Selector

This PR also introduces a new selector which lets to find the default pattern:

/**
 * Returns the default block pattern for the given block type.
 * If there is no default pattern set, it returns the first item.
 *
 * @param {Object} state      Data state.
 * @param {string} blockName  Block type name.
 *
 * @return {?WPBlockPattern} The default block pattern.
 */
function __experimentalGetDefaultBlockPattern( state, blockName );

To ensure that icons have a shared size in the layout selection, this PR also adds a new prop to the IconButton component: size to make it possible to enforce one value for icons passed in various formats.

Components

__experimental BlockPatternPicker

I refactored an internal component InnerBlocksTemplatePicker from the InnerBlocks implementation. It's now called BlockPatternPicker and is exposed as an experimental feature __experimental BlockPatternPicker from @wordpress/block-editor package.

In addition, I slightly tweaked wordings in the UI to use the pattern keyword. It's also reflected in the name of props.

InnerBlocksTemplatePicker is no longer included in InnerBlocks as discussed in this PR. I updated all the corresponding documentation. This API was experimental so we don't need any further actions.

IconButton

I added a new size prop to IconButton component to make it possible to scale all icons to the same size in the block pattern picker.

How has this been tested?

npm run test-unit – new unit tests were added.

Columns block UI

Create a new post or open an existing one.
Add the Column block.
Click one of the layouts and double-check it was properly initialized.
Add another Column block.
Click the skip link and double-check that the default pattern was applied – 2 columns.

Extensibility

To add a new pattern to the Columns block:

wp.blocks.__experimentalRegisterBlockPattern( 'core/columns', { name: 'custom', label: 'Custom', isDefault: true, innerBlocks: [ [ 'core/column' ], [ 'core/column' ], [ 'core/column' ], [ 'core/column' ] ], icon: 'smiley' } );

To remove a pattern from the Columns block:

wp.blocks.__experimentalUnregisterBlockPattern( 'core/columns', 'two-columns-equal' );

When those two commands get executed, then the custom pattern becomes the default one. In effect, when you add a Column block and click the skip link, then 4 columns will be inserted.

IconButton

You can test in Storybook the IconButton and its new size prop. To do it run npm run design-system:dev and navigate to the proper page. You can use knobs to play with sizes:

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.

gziolo · 2019-11-27T15:22:31Z

@youknowriad, I applied some of the changes which were included in #18343. In particular, I added the wrapper for edit implementation which handles the process of the pattern selection automatically. This is the same approach as you could see in #18343 for Media & Text block which we decided to abandon because the UX wasn't good enough.

I really think we should build this as an implementation detail of BlockEdit (or other block editor components) from the start. Registering patterns for blocks, should be enough to tweak the behavior of the block (like styles, transforms)

This is very close to the vision shared. I'd like to refactor one more block to identify some potential issues with the current proposal. At the moment the wrapper which handles the pattern selection is presented when there are no nested blocks added to the block. In the case of Columns block, it's perfectly fine as it always needs to have at least 2 nested blocks. However, this might not fit all use cases as some blocks might assume that there might be no blocks provided when the block gets created. In addition, it doesn't cover also blocks that don't have inner blocks where we want to use Patterns API to offer some initial setup.

youknowriad

This is looking very good in my testing

gziolo · 2019-11-28T12:23:07Z

It looks like 13b6cae solves all the issues discussed. Icon component seems to work great. Let's see what Travis thinks.

gziolo · 2019-11-28T12:34:43Z

Nice, Travis likes the changes proposed. Thanks @youknowriad for the great tip 🥇

The only question remaining is whether we should remove TemplatePicker integration with InnerBlocks in this PR.

youknowriad · 2019-11-28T12:37:58Z

Using Icon in the IconButton can cause some breakage. Notably I see that DropIt icon is broken in the more menu, that said I'm fine if we can consider this a plugin issue but we should check quickly how many issues this could introduce.

gziolo · 2019-11-28T12:42:09Z

Using Icon in the IconButton can cause some breakage. Notably I see that DropIt icon is broken in the more menu, that said I'm fine if we can consider this a plugin issue but we should check quickly how many issues this could introduce.

I see why it can happen, it's the Inception issue 😄 Can we add the case in the Icon to merge props when it happens? I can give it a try.

gziolo · 2019-11-28T12:47:04Z

Using Icon in the IconButton can cause some breakage. Notably I see that DropIt icon is broken in the more menu, that said I'm fine if we can consider this a plugin issue but we should check quickly how many issues this could introduce.

I see why it can happen, it's the Inception issue 😄 Can we add the case in the Icon to merge props when it happens? I can give it a try.

It looks like the issue is different, there is size prop which gets overriden:

function Icon({ size = "small", borderless = false, color = "unsplash" }) {

https://github.com/youknowriad/dropit/blob/b0bd499ba85e9795fbb88199fff776123f60bdd5/scripts/sidebar/components/icon/index.js#L71-L83

youknowriad · 2019-11-28T12:49:42Z

yeah! I'm fine for this being a Dropit issue :)

youknowriad

LGTM 👍

…attern

gziolo requested review from Soean, ajitbohra, ellatrix, jorgefilipecosta, talldan and youknowriad as code owners November 5, 2019 10:36

gziolo self-assigned this Nov 5, 2019

gziolo added [Package] Block library /packages/block-library [Feature] Block API API that allows to express the block paradigm. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels Nov 5, 2019

gziolo requested review from aduth, mcsf and mtias November 5, 2019 12:25

gziolo mentioned this pull request Nov 5, 2019

Variations (formerly patterns) API for blocks #16283

Closed

16 tasks

gziolo force-pushed the update/columns-block-patterns-api branch from 582aaaf to 3d385da Compare November 5, 2019 12:38

gziolo requested a review from chrisvanpatten as a code owner November 5, 2019 12:52

gziolo mentioned this pull request Nov 6, 2019

Block library: Patterns API integration with Media & Text block #18343

Closed

5 tasks

aduth mentioned this pull request Nov 6, 2019

Blocks: Add initial API for Block Variations (formerly Patterns) #18270

Merged

gziolo changed the base branch from add/patterns-api to master November 8, 2019 06:59

gziolo force-pushed the update/columns-block-patterns-api branch from c659e2e to 5744f19 Compare November 8, 2019 07:02

youknowriad reviewed Nov 11, 2019

View reviewed changes

Comment thread packages/block-editor/src/components/index.js

youknowriad reviewed Nov 11, 2019

View reviewed changes

Comment thread packages/block-editor/src/components/inner-blocks/index.js Outdated

gziolo mentioned this pull request Nov 12, 2019

allowedBlock attribute implementation at column #18164

Closed

5 tasks

gziolo mentioned this pull request Nov 27, 2019

Add props for InnerBlocksTemplatePicker icon, label and instructions #18738

Closed

gziolo force-pushed the update/columns-block-patterns-api branch from 5744f19 to f6b2034 Compare November 27, 2019 15:16

gziolo force-pushed the update/columns-block-patterns-api branch 2 times, most recently from 435f520 to 356703a Compare November 27, 2019 15:29

gziolo commented Nov 27, 2019

View reviewed changes

Comment thread packages/components/src/placeholder/index.js Outdated

youknowriad reviewed Nov 28, 2019

View reviewed changes

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

youknowriad reviewed Nov 28, 2019

View reviewed changes

Comment thread packages/components/src/icon-button/index.js

youknowriad reviewed Nov 28, 2019

View reviewed changes

gziolo force-pushed the update/columns-block-patterns-api branch from 356703a to 13b6cae Compare November 28, 2019 12:16

gziolo commented Nov 28, 2019

View reviewed changes

Comment thread packages/block-editor/src/components/inner-blocks/index.js

gziolo requested a review from richtabor November 28, 2019 12:34

youknowriad approved these changes Nov 28, 2019

View reviewed changes

gziolo added 7 commits November 29, 2019 09:42

Block library: Refactor Columns block to use Patterns API

9dc4fa6

Blocks: Add support for the default block pattern

ec0a133

Components: Add size prop to the IconButton component

742fa89

Change the behavior of the selector which returns the default block p…

2e0c26e

…attern

Block editor: Extract BLockPatternPicker component

02b04b3

Abstract columns picker selection with __experimentalBlockPatternPicker

efa4876

Use Icon component to unify the way icons are handled

e522171

gziolo force-pushed the update/columns-block-patterns-api branch from 13b6cae to e522171 Compare November 29, 2019 08:43

gziolo merged commit ae327b2 into master Nov 29, 2019

gziolo deleted the update/columns-block-patterns-api branch November 29, 2019 09:08

youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019

gziolo mentioned this pull request Mar 2, 2020

Block API: Extract common logic as an initial screen for blocks that define variations #20582

Open

himanshupathak95 mentioned this pull request May 18, 2026

Columns block: remove the Skip button/link when adding a new column block #78378

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Block Library: Update Columns block to use Patterns API#18283

Block Library: Update Columns block to use Patterns API#18283
gziolo merged 7 commits into
masterfrom
update/columns-block-patterns-api

gziolo commented Nov 5, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

gziolo commented Nov 27, 2019 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

youknowriad left a comment

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

youknowriad commented Nov 28, 2019

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

gziolo commented Nov 28, 2019 •

edited

Loading

Uh oh!

youknowriad commented Nov 28, 2019

Uh oh!

youknowriad left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

gziolo commented Nov 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Selector

Components

__experimental BlockPatternPicker

IconButton

How has this been tested?

Columns block UI

Extensibility

IconButton

Checklist:

Uh oh!

Uh oh!

Uh oh!

gziolo commented Nov 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

youknowriad commented Nov 28, 2019

Uh oh!

gziolo commented Nov 28, 2019

Uh oh!

gziolo commented Nov 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

youknowriad commented Nov 28, 2019

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gziolo commented Nov 5, 2019 •

edited

Loading

gziolo commented Nov 27, 2019 •

edited

Loading

gziolo commented Nov 28, 2019 •

edited

Loading