From 8bb3c977966352f37a31f4cdbf9c6c1c5a4a97bd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 9 Jul 2020 15:05:02 +1200 Subject: [PATCH] Classic Block: Move the convert to blocks option from menu to own toolbar button (#23704) * Move the convert to blocks option from menu to own toolbar button * Make convert to block buttons a separate component * implement new convert-to-blocks-button component * Add dependency to useSelect hook Co-authored-by: Riad Benguella * change button casing * put default export back * Move toolbar component back to edit * Update end-to-end tests. * Remove obsolete title * Add fix for e2e test * Remove space from type check * Change wording of arguments * Revise clickBlockToolbarButton param names again. * Clearer types in JSDoc. * Update test to match changes in helper args Co-authored-by: Glen Davies Co-authored-by: Ben Dwyer Co-authored-by: Riad Benguella Co-authored-by: Zebulan Stanphill --- .../block-settings-dropdown.js | 6 --- .../block-unknown-convert-button.js | 34 -------------- .../src/classic/convert-to-blocks-button.js | 32 +++++++++++++ packages/block-library/src/classic/edit.js | 46 ++++++++++++------- packages/e2e-test-utils/README.md | 3 +- .../src/click-block-toolbar-button.js | 20 ++++++-- .../specs/editor/blocks/classic.test.js | 7 +-- 7 files changed, 81 insertions(+), 67 deletions(-) delete mode 100644 packages/block-editor/src/components/block-settings-menu/block-unknown-convert-button.js create mode 100644 packages/block-library/src/classic/convert-to-blocks-button.js diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index be6e545bb5896..3dac0a9fd9bc4 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -25,7 +25,6 @@ import { serialize } from '@wordpress/blocks'; import BlockActions from '../block-actions'; import BlockModeToggle from './block-mode-toggle'; import BlockHTMLConvertButton from './block-html-convert-button'; -import BlockUnknownConvertButton from './block-unknown-convert-button'; import __experimentalBlockSettingsMenuFirstItem from './block-settings-menu-first-item'; import BlockSettingsMenuControls from '../block-settings-menu-controls'; @@ -106,11 +105,6 @@ export function BlockSettingsDropdown( { <__experimentalBlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } /> - { count === 1 && ( - - ) } { count === 1 && ( { - const block = select( 'core/block-editor' ).getBlock( clientId ); - - return { - block, - shouldRender: - block && block.name === getFreeformContentHandlerName(), - }; - } ), - withDispatch( ( dispatch, { block } ) => ( { - onClick: () => - dispatch( 'core/block-editor' ).replaceBlocks( - block.clientId, - rawHandler( { HTML: serialize( block ) } ) - ), - } ) ) -)( BlockConvertButton ); diff --git a/packages/block-library/src/classic/convert-to-blocks-button.js b/packages/block-library/src/classic/convert-to-blocks-button.js new file mode 100644 index 0000000000000..36956dcaa6efa --- /dev/null +++ b/packages/block-library/src/classic/convert-to-blocks-button.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { ToolbarButton } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { rawHandler, serialize } from '@wordpress/blocks'; + +const ConvertToBlocksButton = ( { clientId } ) => { + const { replaceBlocks } = useDispatch( 'core/block-editor' ); + const block = useSelect( + ( select ) => { + return select( 'core/block-editor' ).getBlock( clientId ); + }, + [ clientId ] + ); + + return ( + + replaceBlocks( + block.clientId, + rawHandler( { HTML: serialize( block ) } ) + ) + } + > + { __( 'Convert to blocks' ) } + + ); +}; + +export default ConvertToBlocksButton; diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index b29766aa75b02..bc824228bd094 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -6,10 +6,17 @@ import { debounce } from 'lodash'; /** * WordPress dependencies */ +import { BlockControls } from '@wordpress/block-editor'; +import { Toolbar } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes'; +/** + * Internal dependencies + */ +import ConvertToBlocksButton from './convert-to-blocks-button'; + const { wp } = window; function isTmceEmpty( editor ) { @@ -235,22 +242,29 @@ export default class ClassicEdit extends Component { // from the KeyboardShortcuts component to stop their propagation. /* eslint-disable jsx-a11y/no-static-element-interactions */ - return [ -
( this.ref = ref ) } - className="block-library-classic__toolbar" - onClick={ this.focus } - data-placeholder={ __( 'Classic' ) } - onKeyDown={ this.onToolbarKeyDown } - />, -
, - ]; + return ( + <> + + + + + +
( this.ref = ref ) } + className="block-library-classic__toolbar" + onClick={ this.focus } + data-placeholder={ __( 'Classic' ) } + onKeyDown={ this.onToolbarKeyDown } + /> +
+ + ); /* eslint-enable jsx-a11y/no-static-element-interactions */ } } diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index f0d4c28b01fe4..0d127b4cd2dac 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -46,7 +46,8 @@ Clicks a block toolbar button. _Parameters_ -- _buttonAriaLabel_ `string`: The aria label of the button to click. +- _label_ `string`: The text string of the button label. +- _type_ `[string]`: The type of button label: 'ariaLabel' or 'content'. # **clickButton** diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js index 40d2118343d15..dc27849e36d5e 100644 --- a/packages/e2e-test-utils/src/click-block-toolbar-button.js +++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js @@ -6,15 +6,25 @@ import { showBlockToolbar } from './show-block-toolbar'; /** * Clicks a block toolbar button. * - * @param {string} buttonAriaLabel The aria label of the button to click. + * @param {string} label The text string of the button label. + * @param {string} [type] The type of button label: 'ariaLabel' or 'content'. */ -export async function clickBlockToolbarButton( buttonAriaLabel ) { +export async function clickBlockToolbarButton( label, type = 'ariaLabel' ) { await showBlockToolbar(); + const BLOCK_TOOLBAR_SELECTOR = 'block-editor-block-toolbar'; + let button; - const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar'; - const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`; + if ( type === 'ariaLabel' ) { + const BUTTON_SELECTOR = `.${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ label }"]`; + button = await page.waitForSelector( BUTTON_SELECTOR ); + } + + if ( type === 'content' ) { + [ button ] = await page.$x( + `//*[@class='${ BLOCK_TOOLBAR_SELECTOR }']//button[contains(text(), '${ label }')]` + ); + } - const button = await page.waitForSelector( BUTTON_SELECTOR ); await button.evaluate( ( element ) => element.scrollIntoView() ); await button.click(); } diff --git a/packages/e2e-tests/specs/editor/blocks/classic.test.js b/packages/e2e-tests/specs/editor/blocks/classic.test.js index 2e2f127487816..b9302e3a8217e 100644 --- a/packages/e2e-tests/specs/editor/blocks/classic.test.js +++ b/packages/e2e-tests/specs/editor/blocks/classic.test.js @@ -15,7 +15,6 @@ import { insertBlock, pressKeyWithModifier, clickBlockToolbarButton, - clickButton, } from '@wordpress/e2e-test-utils'; describe( 'Classic', () => { @@ -84,8 +83,7 @@ describe( 'Classic', () => { ); // Convert to blocks and verify it worked correctly. - await clickBlockToolbarButton( 'More options' ); - await clickButton( 'Convert to Blocks' ); + await clickBlockToolbarButton( 'Convert to blocks', 'content' ); await page.waitForSelector( '.wp-block[data-type="core/gallery"]' ); expect( await getEditedPostContent() ).toMatch( /