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

Add nested settings mechanism with a template configuration and allowedBlock blocks logic. #6546

Merged
merged 1 commit into from
May 3, 2018

Conversation

jorgefilipecosta
Copy link
Member

@jorgefilipecosta jorgefilipecosta commented May 2, 2018

Description

We extracted this PR from #5452, so we can merge the logic changes without changing UI and UX for now. From the the code point of view the original PR with this changes was already approved, and was waiting UX enhancements.

This PR makes easy to set settings that configure how a given nested area behaves. For now, the only settings implemented are allowedBlocks and template.
"allowedBlocks" restricts what blocks we can nest inside a nesting area.
"template" defines a set of blocks that are "prefilled" inside a nesting area, using the same syntax of CPT templates.

How has this been tested?

For testing purposes change the columns block InnerBlocks component to:

					<InnerBlocks
						template={ [
							[ 'core/paragraph', {
								placeholder: 'Enter column 1 content…',
								layout: 'column-1',
							} ],
							[ 'core/paragraph', {
								placeholder: 'Enter column 2 content…',
								layout: 'column-2',
							} ],
						] }
						allowedBlocks={ [ 'core/button', 'core/paragraph' ] }
						layouts={ getColumnLayouts( columns ) }
					/>

Verify that after the change to the block, the initial two columns have placeholders and that using the inserter we can only use buttons and paragraphs.
This PR can also be tested in cover image of PR https://github.com/WordPress/gutenberg/pull/5452/files as it still contains all these changes.

@jorgefilipecosta jorgefilipecosta added this to the 2.8 milestone May 2, 2018
Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This totally works. Thanks @jorgefilipecosta!

@@ -72,6 +72,8 @@ $z-layers: (
'.components-autocomplete__results': 1000000,

'.skip-to-selected-block': 100000,

'.wp-block-cover-image__inner-container': 0,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This CSS change should be a part of #5452 and not this PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch @noisysocks!

@jorgefilipecosta jorgefilipecosta self-assigned this May 3, 2018
@jorgefilipecosta jorgefilipecosta added the [Type] Enhancement A suggestion for improvement. label May 3, 2018
…edBlock blocks logic.

In blocks like cover image, there is a need to customize the nesting to fit its use case.
@jorgefilipecosta jorgefilipecosta merged commit 9870e81 into master May 3, 2018
@jorgefilipecosta jorgefilipecosta deleted the add/nesting-settings-mechanism branch May 3, 2018 10:13
@jorgefilipecosta
Copy link
Member Author

Thank you for the review @noisysocks!

@aduth
Copy link
Member

aduth commented Jul 2, 2018

Should we have documented the template prop ?

@jorgefilipecosta
Copy link
Member Author

Hi @aduth nice catch, I will create a PR documenting the missing props of InnerBlocks.

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

Successfully merging this pull request may close these issues.

3 participants