diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php index a8a0e6ee9a254c..0cc7566f3e5f10 100644 --- a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php +++ b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php @@ -12,7 +12,7 @@ */ function enqueue_inner_blocks_allowed_blocks_script() { wp_enqueue_script( - 'gutenberg-test-block-icons', + 'gutenberg-test-inner-blocks-allowed-blocks', plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ), array( 'wp-blocks', @@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() { true ); } - -add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' ); +add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' ); diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js index 88585a87a84882..e6c35785d1a5d1 100644 --- a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js @@ -1,87 +1,46 @@ ( function () { - const { withSelect } = wp.data; + const { useSelect } = wp.data; const { registerBlockType } = wp.blocks; const { createElement: el } = wp.element; const { InnerBlocks } = wp.blockEditor; - const __ = wp.i18n.__; const divProps = { className: 'product', style: { outline: '1px solid gray', padding: 5 }, }; - const template = [ - [ 'core/image' ], - [ 'core/paragraph', { placeholder: __( 'Add a description' ) } ], - [ 'core/quote' ], - ]; + const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ]; const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ]; - const save = function () { - return el( 'div', divProps, el( InnerBlocks.Content ) ); - }; - registerBlockType( 'test/allowed-blocks-unset', { - title: 'Allowed Blocks Unset', - icon: 'carrot', - category: 'text', - - edit() { - return el( 'div', divProps, el( InnerBlocks, { template } ) ); - }, - - save, - } ); - - registerBlockType( 'test/allowed-blocks-set', { - title: 'Allowed Blocks Set', - icon: 'carrot', - category: 'text', - - edit() { - return el( - 'div', - divProps, - el( InnerBlocks, { - template, - allowedBlocks: [ - 'core/button', - 'core/gallery', - 'core/list', - 'core/media-text', - 'core/quote', - ], - } ) - ); - }, - - save, - } ); - registerBlockType( 'test/allowed-blocks-dynamic', { title: 'Allowed Blocks Dynamic', icon: 'carrot', category: 'text', - edit: withSelect( function ( select, ownProps ) { - const getBlockOrder = select( 'core/block-editor' ).getBlockOrder; - return { - numberOfChildren: getBlockOrder( ownProps.clientId ).length, - }; - } )( function ( props ) { + edit: function Edit( props ) { + const numberOfChildren = useSelect( + ( select ) => { + const { getBlockCount } = select( 'core/block-editor' ); + return getBlockCount( props.clientId ); + }, + [ props.clientId ] + ); + return el( 'div', { ...divProps, - 'data-number-of-children': props.numberOfChildren, + 'data-number-of-children': numberOfChildren, }, el( InnerBlocks, { allowedBlocks: - props.numberOfChildren < 2 + numberOfChildren < 2 ? allowedBlocksWhenSingleEmptyChild : allowedBlocksWhenMultipleChildren, } ) ); - } ), - - save, + }, + save() { + return el( 'div', divProps, el( InnerBlocks.Content ) ); + } } ); } )(); diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js deleted file mode 100644 index aec9987f596a86..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - getAllBlockInserterItemTitles, - insertBlock, - openGlobalBlockInserter, - closeGlobalBlockInserter, - clickBlockToolbarButton, - canvas, -} from '@wordpress/e2e-test-utils'; - -describe( 'Allowed Blocks Setting on InnerBlocks', () => { - const paragraphSelector = - '.block-editor-rich-text__editable[data-type="core/paragraph"]'; - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' ); - } ); - - it( 'allows all blocks if the allowed blocks setting was not set', async () => { - const parentBlockSelector = '[data-type="test/allowed-blocks-unset"]'; - const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`; - await insertBlock( 'Allowed Blocks Unset' ); - await closeGlobalBlockInserter(); - await canvas().waitForSelector( childParagraphSelector ); - await canvas().click( childParagraphSelector ); - await openGlobalBlockInserter(); - await expect( - ( - await getAllBlockInserterItemTitles() - ).length - ).toBeGreaterThan( 20 ); - } ); - - it( 'allows the blocks if the allowed blocks setting was set', async () => { - const parentBlockSelector = '[data-type="test/allowed-blocks-set"]'; - const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`; - await insertBlock( 'Allowed Blocks Set' ); - await closeGlobalBlockInserter(); - await canvas().waitForSelector( childParagraphSelector ); - await canvas().click( childParagraphSelector ); - await openGlobalBlockInserter(); - const allowedBlocks = await getAllBlockInserterItemTitles(); - expect( allowedBlocks.sort() ).toEqual( [ - 'Button', - 'Gallery', - 'List', - 'Media & Text', - 'Quote', - ] ); - } ); - - it( 'correctly applies dynamic allowed blocks restrictions', async () => { - await insertBlock( 'Allowed Blocks Dynamic' ); - await closeGlobalBlockInserter(); - const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]'; - const blockAppender = '.block-list-appender button'; - const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; - await canvas().waitForSelector( appenderSelector ); - await canvas().click( appenderSelector ); - expect( await getAllBlockInserterItemTitles() ).toEqual( [ - 'Image', - 'List', - ] ); - const insertButton = ( - await page.$x( `//button//span[contains(text(), 'List')]` ) - )[ 0 ]; - await insertButton.click(); - // Select the list wrapper so the image is insertable. - await page.keyboard.press( 'ArrowUp' ); - await insertBlock( 'Image' ); - await closeGlobalBlockInserter(); - await page.waitForSelector( '.product[data-number-of-children="2"]' ); - await clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' ); - // This focus shouldn't be neessary but there's a bug in trunk right now - // Where if you open the inserter, don't do anything and click the "appender" on the canvas - // the appender is not opened right away. - // It needs to be investigated on its own. - await page.focus( appenderSelector ); - await page.click( appenderSelector ); - expect( await getAllBlockInserterItemTitles() ).toEqual( [ - 'Gallery', - 'Video', - ] ); - } ); -} ); diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js new file mode 100644 index 00000000000000..a859a2204de032 --- /dev/null +++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js @@ -0,0 +1,146 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Allowed Blocks Setting on InnerBlocks', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( + 'gutenberg-test-inner-blocks-allowed-blocks' + ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( + 'gutenberg-test-inner-blocks-allowed-blocks' + ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'allows all blocks if the allowed blocks setting was not set', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { + name: 'core/group', + attributes: { + layout: { type: 'constrained' }, + }, + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { placeholder: 'Add a description' }, + }, + ], + } ); + + await editor.canvas + .getByRole( 'document', { + name: 'Empty block', + } ) + .click(); + + const blockInserter = page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockInserter.click(); + await expect( blockLibrary ).toBeVisible(); + expect( + await blockLibrary.getByRole( 'option' ).count() + ).toBeGreaterThan( 10 ); + } ); + + test( 'limits the blocks if the allowed blocks setting was set', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { + name: 'core/group', + attributes: { + layout: { type: 'constrained' }, + allowedBlocks: [ + 'core/paragraph', + 'core/heading', + 'core/image', + ], + }, + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { placeholder: 'Add a description' }, + }, + ], + } ); + + // Select inner block. + await editor.canvas + .getByRole( 'document', { + name: 'Empty block', + } ) + .click(); + + const blockInserter = page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ); + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockInserter.click(); + await expect( blockLibrary ).toBeVisible(); + await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [ + 'Paragraph', + 'Heading', + 'Image', + ] ); + } ); + + // Note: This behavior isn't fully supported. See https://github.com/WordPress/gutenberg/issues/14515. + test( 'correctly applies dynamic allowed blocks restrictions', async ( { + editor, + page, + } ) => { + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Allowed Blocks Dynamic' ); + await page.keyboard.press( 'Enter' ); + + const blockAppender = editor.canvas.getByRole( 'button', { + name: 'Add block', + } ); + await expect( blockAppender ).toBeVisible(); + await blockAppender.click(); + + const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } ); + await expect( blockListBox ).toBeVisible(); + await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [ + 'Image', + 'List', + ] ); + + // Insert list block. + await blockListBox.getByRole( 'option', { name: 'List' } ).click(); + // Select the list wrapper and then parent block. + await page.keyboard.press( 'ArrowUp' ); + await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' ); + + // Insert the image. + await blockAppender.click(); + await blockListBox.getByRole( 'option', { name: 'Image' } ).click(); + + await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' ); + await blockAppender.click(); + + // It should display a different allowed block list. + await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [ + 'Gallery', + 'Video', + ] ); + } ); +} );