Skip to content

Commit

Permalink
Use button block appender in widget areas (#32580)
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 authored and youknowriad committed Jun 14, 2021
1 parent a68b766 commit 207ceec
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 15 deletions.
4 changes: 4 additions & 0 deletions packages/block-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-list/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
*/
Expand Down
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
WritingFlow,
BlockEditorKeyboardShortcuts,
__unstableBlockSettingsMenuFirstItem,
ButtonBlockAppender,
} from '@wordpress/block-editor';
import { uploadMedia } from '@wordpress/media-utils';

Expand Down Expand Up @@ -116,7 +117,9 @@ export default function SidebarBlockEditor( {
<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList />
<BlockList
renderAppender={ ButtonBlockAppender }
/>
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
Expand Down
20 changes: 11 additions & 9 deletions packages/e2e-tests/specs/widgets/editing-widgets.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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( {
Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function WidgetAreaInnerBlocks() {
onInput={ onInput }
onChange={ onChange }
templateLock={ false }
renderAppender={ InnerBlocks.DefaultBlockAppender }
renderAppender={ InnerBlocks.ButtonBlockAppender }
/>
);
}

0 comments on commit 207ceec

Please sign in to comment.