-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Inserter: Fix handling of child blocks (#23231)
* Inserter: Fix handling of child blocks
When a block C specifies `parent: [ P ]`, it means that C may only be
added to P. It does NOT mean that P may *only* contain C. (Which is what
`<InnerBlocks allowedBlocks={ [ C ] }>` means.)
This fixes the Inserter so that the correct blocks are shown when
inserting into a block that is referenced by `parent`. It does so by
leaning on `getInserterItems()` which does the right thing.
* Inserter: Make ChildBlocks have a similar API to InserterPanel
* E2E Tests: Add Child Blocks tests and test plugin
* Inserter: Clarify inline comment- Loading branch information
1 parent
8828d9c
commit e1a6a78
Showing
6 changed files
with
231 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <?php | ||
| /** | ||
| * Plugin Name: Gutenberg Test Child Blocks | ||
| * Plugin URI: https://github.com/WordPress/gutenberg | ||
| * Author: Gutenberg Team | ||
| * | ||
| * @package gutenberg-test-child-blocks | ||
| */ | ||
|
|
||
| /** | ||
| * Registers a custom script for the plugin. | ||
| */ | ||
| function enqueue_child_blocks_script() { | ||
| wp_enqueue_script( | ||
| 'gutenberg-test-child-blocks', | ||
| plugins_url( 'child-blocks/index.js', __FILE__ ), | ||
| array( | ||
| 'wp-blocks', | ||
| 'wp-block-editor', | ||
| 'wp-element', | ||
| 'wp-i18n', | ||
| ), | ||
| filemtime( plugin_dir_path( __FILE__ ) . 'child-blocks/index.js' ), | ||
| true | ||
| ); | ||
| } | ||
|
|
||
| add_action( 'init', 'enqueue_child_blocks_script' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| ( function() { | ||
| const { InnerBlocks } = wp.blockEditor; | ||
| const { createElement: el } = wp.element; | ||
| const { registerBlockType } = wp.blocks; | ||
|
|
||
| registerBlockType( 'test/child-blocks-unrestricted-parent', { | ||
| title: 'Child Blocks Unrestricted Parent', | ||
| icon: 'carrot', | ||
| category: 'text', | ||
|
|
||
| edit() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| el( InnerBlocks ) | ||
| ); | ||
| }, | ||
|
|
||
| save() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| el( InnerBlocks.Content ) | ||
| ); | ||
| }, | ||
| } ); | ||
|
|
||
| registerBlockType( 'test/child-blocks-restricted-parent', { | ||
| title: 'Child Blocks Restricted Parent', | ||
| icon: 'carrot', | ||
| category: 'text', | ||
|
|
||
| edit() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| el( | ||
| InnerBlocks, | ||
| { allowedBlocks: [ 'core/paragraph', 'core/image' ] } | ||
| ) | ||
| ); | ||
| }, | ||
|
|
||
| save() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| el( InnerBlocks.Content ) | ||
| ); | ||
| }, | ||
| } ); | ||
|
|
||
| registerBlockType( 'test/child-blocks-child', { | ||
| title: 'Child Blocks Child', | ||
| icon: 'carrot', | ||
| category: 'text', | ||
|
|
||
| parent: [ | ||
| 'test/child-blocks-unrestricted-parent', | ||
| 'test/child-blocks-restricted-parent', | ||
| ], | ||
|
|
||
| edit() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| 'Child' | ||
| ); | ||
| }, | ||
|
|
||
| save() { | ||
| return el( | ||
| 'div', | ||
| {}, | ||
| 'Child' | ||
| ); | ||
| }, | ||
| } ); | ||
| } )(); |
65 changes: 65 additions & 0 deletions
65
packages/e2e-tests/specs/editor/plugins/child-blocks.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| activatePlugin, | ||
| closeGlobalBlockInserter, | ||
| createNewPost, | ||
| deactivatePlugin, | ||
| getAllBlockInserterItemTitles, | ||
| insertBlock, | ||
| openGlobalBlockInserter, | ||
| } from '@wordpress/e2e-test-utils'; | ||
|
|
||
| describe( 'Child Blocks', () => { | ||
| beforeAll( async () => { | ||
| await activatePlugin( 'gutenberg-test-child-blocks' ); | ||
| } ); | ||
|
|
||
| beforeEach( async () => { | ||
| await createNewPost(); | ||
| } ); | ||
|
|
||
| afterAll( async () => { | ||
| await deactivatePlugin( 'gutenberg-test-child-blocks' ); | ||
| } ); | ||
|
|
||
| it( 'are hidden from the global block inserter', async () => { | ||
| await openGlobalBlockInserter(); | ||
| await expect( await getAllBlockInserterItemTitles() ).not.toContain( | ||
| 'Child Blocks Child' | ||
| ); | ||
| } ); | ||
|
|
||
| it( 'shows up in a parent block', async () => { | ||
| await insertBlock( 'Child Blocks Unrestricted Parent' ); | ||
| await closeGlobalBlockInserter(); | ||
| await page.waitForSelector( | ||
| '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' | ||
| ); | ||
| await page.click( | ||
| '[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender' | ||
| ); | ||
| await openGlobalBlockInserter(); | ||
| const inserterItemTitles = await getAllBlockInserterItemTitles(); | ||
| expect( inserterItemTitles ).toContain( 'Child Blocks Child' ); | ||
| expect( inserterItemTitles.length ).toBeGreaterThan( 20 ); | ||
| } ); | ||
|
|
||
| it( 'display in a parent block with allowedItems', async () => { | ||
| await insertBlock( 'Child Blocks Restricted Parent' ); | ||
| await closeGlobalBlockInserter(); | ||
| await page.waitForSelector( | ||
| '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' | ||
| ); | ||
| await page.click( | ||
| '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' | ||
| ); | ||
| await openGlobalBlockInserter(); | ||
| expect( await getAllBlockInserterItemTitles() ).toEqual( [ | ||
| 'Child Blocks Child', | ||
| 'Image', | ||
| 'Paragraph', | ||
| ] ); | ||
| } ); | ||
| } ); |