Use button block appender in widget areas

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)

packages/block-editor/README.md

@@ -253,12 +253,18 @@ Undocumented declaration.
 
 Undocumented declaration.
 
-<a name="ButtonBlockerAppender" href="#ButtonBlockerAppender">#</a> **ButtonBlockerAppender**
+<a name="ButtonBlockAppender" href="#ButtonBlockAppender">#</a> **ButtonBlockAppender**
 
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md>
 
+<a name="ButtonBlockerAppender" href="#ButtonBlockerAppender">#</a> **ButtonBlockerAppender**
+
+> **Deprecated** 
+
+Use `ButtonBlockAppender` instead.
+
 <a name="ColorPalette" href="#ColorPalette">#</a> **ColorPalette**
 
 Undocumented declaration.

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 (
 		<BlockToolsBackCompat>
 			<Root className={ className }>
-				<BlockListItems __experimentalLayout={ __experimentalLayout } />
+				<BlockListItems { ...props } />
 			</Root>
 		</BlockToolsBackCompat>
 	);

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
  */

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';

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( {
 					<BlockSelectionClearer>
 						<WritingFlow>
 							<ObserveTyping>
-								<BlockList />
+								<BlockList
+									renderAppender={ ButtonBlockAppender }
+								/>
 							</ObserveTyping>
 						</WritingFlow>
 					</BlockSelectionClearer>

packages/e2e-tests/specs/widgets/editing-widgets.test.js

@@ -122,13 +122,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',
@@ -273,7 +266,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( {
@@ -333,7 +329,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.

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 }
 		/>
 	);
 }