From 54103e00b3bab2e16d93cfc64c515fbe58ffa356 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 11 Jun 2021 18:04:25 +0800 Subject: [PATCH] Use button block appender in widget areas (#32580) --- packages/block-editor/CHANGELOG.md | 4 ++++ packages/block-editor/README.md | 8 +++++++- .../src/components/block-list/index.js | 4 ++-- .../components/button-block-appender/index.js | 14 +++++++++++++ packages/block-editor/src/components/index.js | 6 +++++- .../components/sidebar-block-editor/index.js | 5 ++++- .../specs/widgets/editing-widgets.test.js | 20 ++++++++++--------- .../blocks/widget-area/edit/inner-blocks.js | 2 +- 8 files changed, 48 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 73badf8f522fab..d143158c96b437 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### New Features + +- `ButtonBlockerAppender` is now `ButtonBlockAppender`, the original name was a typo, but is still being exported for backward compatibility. + ## 6.1.0 (2021-05-20) ## 6.0.0 (2021-05-14) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 8d2a07876a9fa8..a8a19f6f830211 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -253,12 +253,18 @@ Undocumented declaration. Undocumented declaration. -# **ButtonBlockerAppender** +# **ButtonBlockAppender** _Related_ - +# **ButtonBlockerAppender** + +> **Deprecated** + +Use `ButtonBlockAppender` instead. + # **ColorPalette** Undocumented declaration. diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 96e46284d6b95d..87784cef2fbf53 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -69,12 +69,12 @@ function Root( { className, children } ) { ); } -export default function BlockList( { className, __experimentalLayout } ) { +export default function BlockList( { className, ...props } ) { usePreParsePatterns(); return ( - + ); diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index eecd1bf51af174..6fa49f5f614252 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -10,6 +10,7 @@ import { Button, Tooltip, VisuallyHidden } from '@wordpress/components'; import { forwardRef } from '@wordpress/element'; import { _x, sprintf } from '@wordpress/i18n'; import { Icon, plus } from '@wordpress/icons'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -81,6 +82,19 @@ function ButtonBlockAppender( ); } +/** + * Use `ButtonBlockAppender` instead. + * + * @deprecated + */ +export const ButtonBlockerAppender = forwardRef( ( props, ref ) => { + deprecated( `wp.blockEditor.ButtonBlockerAppender`, { + alternative: 'wp.blockEditor.ButtonBlockAppender', + } ); + + return ButtonBlockAppender( props, ref ); +} ); + /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md */ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 51d9ba8c1a0dbe..bf906202779fee 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -34,7 +34,11 @@ export { BlockVerticalAlignmentControl, } from './block-vertical-alignment-control'; export { default as __experimentalBorderStyleControl } from './border-style-control'; -export { default as ButtonBlockerAppender } from './button-block-appender'; +export { + // This is a typo, but kept here for back-compat. + ButtonBlockerAppender, + default as ButtonBlockAppender, +} from './button-block-appender'; export { default as ColorPalette } from './color-palette'; export { default as ColorPaletteControl } from './color-palette/control'; export { default as ContrastChecker } from './contrast-checker'; diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js index 8ba9182a9209dd..40592021000aff 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js @@ -18,6 +18,7 @@ import { WritingFlow, BlockEditorKeyboardShortcuts, __unstableBlockSettingsMenuFirstItem, + ButtonBlockAppender, } from '@wordpress/block-editor'; import { uploadMedia } from '@wordpress/media-utils'; @@ -116,7 +117,9 @@ export default function SidebarBlockEditor( { - + diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js index b5d7e480d9d8de..4471506c317a6f 100644 --- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js @@ -123,13 +123,6 @@ describe( 'Widgets screen', () => { ).toBe( true ); } - async function getInlineInserterButton() { - return await find( { - role: 'combobox', - name: 'Add block', - } ); - } - it( 'Should insert content using the global inserter', async () => { const updateButton = await find( { role: 'button', @@ -274,7 +267,10 @@ describe( 'Widgets screen', () => { 10 ); - let inlineInserterButton = await getInlineInserterButton(); + let inlineInserterButton = await find( { + role: 'combobox', + name: 'Add block', + } ); await inlineInserterButton.click(); let inlineQuickInserter = await find( { @@ -334,7 +330,13 @@ describe( 'Widgets screen', () => { secondParagraphBlockBoundingBox.y - 10 ); - inlineInserterButton = await getInlineInserterButton(); + // There will be 2 matches here. + // One is the in-between inserter, + // and the other one is the button block appender. + [ inlineInserterButton ] = await findAll( { + role: 'combobox', + name: 'Add block', + } ); await inlineInserterButton.click(); // TODO: Convert to find() API from puppeteer-testing-library. diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js index 7b27a404a2f6c8..15ca45640a4c1a 100644 --- a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js +++ b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js @@ -15,7 +15,7 @@ export default function WidgetAreaInnerBlocks() { onInput={ onInput } onChange={ onChange } templateLock={ false } - renderAppender={ InnerBlocks.DefaultBlockAppender } + renderAppender={ InnerBlocks.ButtonBlockAppender } /> ); }