-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an alternative block appender when the container doesn't support …
…the default block (#10136) * Add an alternative block appender when the container doesn't support the default bloock * Tweak the appender style * Code style tweak * Update appendder styles as suggested * Adding an e2e test for the alternative appender * Polish the visuals a little bit. * chore: Tidy up code
- Loading branch information
1 parent
0332aa9
commit 590cf72
Showing
13 changed files
with
258 additions
and
94 deletions.
There are no files selected for viewing
81 changes: 81 additions & 0 deletions
81
packages/editor/src/components/block-list-appender/index.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,81 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { last } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { withSelect } from '@wordpress/data'; | ||
| import { getDefaultBlockName } from '@wordpress/blocks'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Button, Dashicon } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import IgnoreNestedEvents from '../ignore-nested-events'; | ||
| import DefaultBlockAppender from '../default-block-appender'; | ||
| import Inserter from '../inserter'; | ||
|
|
||
| function BlockListAppender( { | ||
| blockClientIds, | ||
| layout, | ||
| isGroupedByLayout, | ||
| rootClientId, | ||
| canInsertDefaultBlock, | ||
| isLocked, | ||
| } ) { | ||
| if ( isLocked ) { | ||
| return null; | ||
| } | ||
|
|
||
| const defaultLayout = isGroupedByLayout ? layout : undefined; | ||
|
|
||
| if ( canInsertDefaultBlock ) { | ||
| return ( | ||
| <IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }> | ||
| <DefaultBlockAppender | ||
| rootClientId={ rootClientId } | ||
| lastBlockClientId={ last( blockClientIds ) } | ||
| layout={ defaultLayout } | ||
| /> | ||
| </IgnoreNestedEvents> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="block-list-appender"> | ||
| <Inserter | ||
| rootClientId={ rootClientId } | ||
| layout={ defaultLayout } | ||
| renderToggle={ ( { onToggle, disabled, isOpen } ) => ( | ||
| <Button | ||
| aria-label={ __( 'Add block' ) } | ||
| onClick={ onToggle } | ||
| className="block-list-appender__toggle" | ||
| aria-haspopup="true" | ||
| aria-expanded={ isOpen } | ||
| disabled={ disabled } | ||
| > | ||
| <Dashicon icon="insert" /> | ||
| </Button> | ||
| ) } | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default withSelect( ( select, { rootClientId } ) => { | ||
| const { | ||
| getBlockOrder, | ||
| canInsertBlockType, | ||
| getTemplateLock, | ||
| } = select( 'core/editor' ); | ||
|
|
||
| return { | ||
| isLocked: !! getTemplateLock( rootClientId ), | ||
| blockClientIds: getBlockOrder( rootClientId ), | ||
| canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ), | ||
| }; | ||
| } )( BlockListAppender ); |
17 changes: 17 additions & 0 deletions
17
packages/editor/src/components/block-list-appender/style.scss
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,17 @@ | ||
| .block-list-appender > .editor-inserter { | ||
| display: block; | ||
| } | ||
|
|
||
| .block-list-appender__toggle { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: $grid-size-large; | ||
| outline: $border-width dashed $dark-gray-150; | ||
| width: 100%; | ||
| color: $dark-gray-500; | ||
|
|
||
| &:hover { | ||
| outline: $border-width dashed $dark-gray-500; | ||
| } | ||
| } |
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
File renamed without changes.
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
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 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| newPost, | ||
| insertBlock, | ||
| switchToEditor, | ||
| getEditedPostContent, | ||
| } from '../support/utils'; | ||
| import { activatePlugin, deactivatePlugin } from '../support/plugins'; | ||
|
|
||
| describe( 'InnerBlocks Template Sync', () => { | ||
| beforeAll( async () => { | ||
| await activatePlugin( 'gutenberg-test-innerblocks-templates' ); | ||
| } ); | ||
|
|
||
| beforeEach( async () => { | ||
| await newPost(); | ||
| } ); | ||
|
|
||
| afterAll( async () => { | ||
| await deactivatePlugin( 'gutenberg-test-innerblocks-templates' ); | ||
| } ); | ||
|
|
||
| const insertBlockAndAddParagraphInside = async ( blockName, blockSlug ) => { | ||
| const paragraphToAdd = ` | ||
| <!-- wp:paragraph --> | ||
| <p>added paragraph</p> | ||
| <!-- /wp:paragraph --> | ||
| `; | ||
| await insertBlock( blockName ); | ||
| await switchToEditor( 'Code' ); | ||
| await page.$eval( '.editor-post-text-editor', ( element, _paragraph, _blockSlug ) => { | ||
| const blockDelimiter = `<!-- /wp:${ _blockSlug } -->`; | ||
| element.value = element.value.replace( blockDelimiter, `${ _paragraph }${ blockDelimiter }` ); | ||
| }, paragraphToAdd, blockSlug ); | ||
| // Press "Enter" inside the Code Editor to fire the `onChange` event for the new value. | ||
| await page.click( '.editor-post-text-editor' ); | ||
| await page.keyboard.press( 'Enter' ); | ||
| await switchToEditor( 'Visual' ); | ||
| }; | ||
|
|
||
| it( 'Ensures blocks without locking are kept intact even if they do not match the template ', async () => { | ||
| await insertBlockAndAddParagraphInside( 'Test Inner Blocks no locking', 'test/test-inner-blocks-no-locking' ); | ||
| expect( await getEditedPostContent() ).toMatchSnapshot(); | ||
| } ); | ||
|
|
||
| it( 'Removes blocks that are not expected by the template if a lock all exists ', async () => { | ||
| await insertBlockAndAddParagraphInside( 'Test InnerBlocks locking all', 'test/test-inner-blocks-locking-all' ); | ||
| expect( await getEditedPostContent() ).toMatchSnapshot(); | ||
| } ); | ||
| } ); | ||
|
|
||
| describe( 'Container block without paragraph support', () => { | ||
| beforeAll( async () => { | ||
| await activatePlugin( 'gutenberg-test-container-block-without-paragraph' ); | ||
| } ); | ||
|
|
||
| beforeEach( async () => { | ||
| await newPost(); | ||
| } ); | ||
|
|
||
| afterAll( async () => { | ||
| await deactivatePlugin( 'gutenberg-test-container-block-without-paragraph' ); | ||
| } ); | ||
|
|
||
| it( 'ensures we can use the alternative block appender properly', async () => { | ||
| await insertBlock( 'Container without paragraph' ); | ||
|
|
||
| // Open the specific appender used when there's no paragraph support. | ||
| await page.click( '.editor-inner-blocks .block-list-appender .block-list-appender__toggle' ); | ||
|
|
||
| // Insert an image block. | ||
| await page.click( '.editor-inserter__results button[aria-label="Image"]' ); | ||
|
|
||
| // Check the inserted content. | ||
| expect( await getEditedPostContent() ).toMatchSnapshot(); | ||
| } ); | ||
| } ); |
Oops, something went wrong.