From 175d09c93a9dc4e3ff1ecc575403fd3e2db8a11f Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 27 Apr 2018 19:22:50 +0100 Subject: [PATCH] Removed block transforms from the toolbars. --- .../components/header/header-toolbar/index.js | 2 - editor/components/block-switcher/index.js | 119 ------------- .../block-switcher/multi-blocks-switcher.js | 29 ---- editor/components/block-switcher/style.scss | 52 ------ .../test/__snapshots__/index.js.snap | 10 -- .../multi-blocks-switcher.js.snap | 13 -- .../components/block-switcher/test/index.js | 158 ------------------ .../test/multi-blocks-switcher.js | 42 ----- editor/components/block-toolbar/index.js | 2 - editor/components/index.js | 1 - 10 files changed, 428 deletions(-) delete mode 100644 editor/components/block-switcher/index.js delete mode 100644 editor/components/block-switcher/multi-blocks-switcher.js delete mode 100644 editor/components/block-switcher/style.scss delete mode 100644 editor/components/block-switcher/test/__snapshots__/index.js.snap delete mode 100644 editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap delete mode 100644 editor/components/block-switcher/test/index.js delete mode 100644 editor/components/block-switcher/test/multi-blocks-switcher.js diff --git a/edit-post/components/header/header-toolbar/index.js b/edit-post/components/header/header-toolbar/index.js index 452656debf362..c6b079efb3534 100644 --- a/edit-post/components/header/header-toolbar/index.js +++ b/edit-post/components/header/header-toolbar/index.js @@ -15,7 +15,6 @@ import { TableOfContents, EditorHistoryRedo, EditorHistoryUndo, - MultiBlocksSwitcher, NavigableToolbar, } from '@wordpress/editor'; @@ -34,7 +33,6 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) { - { hasFixedToolbar && isLargeViewport && (
diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js deleted file mode 100644 index 0cd9392bf05c3..0000000000000 --- a/editor/components/block-switcher/index.js +++ /dev/null @@ -1,119 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Dropdown, Dashicon, IconButton, Toolbar, NavigableMenu } from '@wordpress/components'; -import { getBlockType, getPossibleBlockTransformations, switchToBlockType, BlockIcon, withEditorSettings } from '@wordpress/blocks'; -import { compose } from '@wordpress/element'; -import { keycodes } from '@wordpress/utils'; -import { withSelect, withDispatch } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import './style.scss'; - -/** - * Module Constants - */ -const { DOWN } = keycodes; - -export function BlockSwitcher( { blocks, onTransform, isLocked } ) { - const allowedBlocks = getPossibleBlockTransformations( blocks ); - - if ( isLocked || ! allowedBlocks.length ) { - return null; - } - - const sourceBlockName = blocks[ 0 ].name; - const blockType = getBlockType( sourceBlockName ); - - return ( - { - const openOnArrowDown = ( event ) => { - if ( ! isOpen && event.keyCode === DOWN ) { - event.preventDefault(); - event.stopPropagation(); - onToggle(); - } - }; - const label = __( 'Change block type' ); - - return ( - - } - onClick={ onToggle } - aria-haspopup="true" - aria-expanded={ isOpen } - label={ label } - tooltip={ label } - onKeyDown={ openOnArrowDown } - > - - - - ); - } } - renderContent={ ( { onClose } ) => ( -
- - { __( 'Transform into:' ) } - - - { allowedBlocks.map( ( { name, title, icon } ) => ( - { - onTransform( blocks, name ); - onClose(); - } } - className="editor-block-switcher__menu-item" - icon={ ( - - - - ) } - role="menuitem" - > - { title } - - ) ) } - -
- ) } - /> - ); -} - -export default compose( - withSelect( ( select, ownProps ) => { - return { - blocks: ownProps.uids.map( ( uid ) => select( 'core/editor' ).getBlock( uid ) ), - }; - } ), - withDispatch( ( dispatch, ownProps ) => ( { - onTransform( blocks, name ) { - dispatch( 'core/editor' ).replaceBlocks( - ownProps.uids, - switchToBlockType( blocks, name ) - ); - }, - } ) ), - withEditorSettings( ( settings ) => { - const { templateLock } = settings; - - return { - isLocked: !! templateLock, - }; - } ), -)( BlockSwitcher ); diff --git a/editor/components/block-switcher/multi-blocks-switcher.js b/editor/components/block-switcher/multi-blocks-switcher.js deleted file mode 100644 index 1dc4cc21974fe..0000000000000 --- a/editor/components/block-switcher/multi-blocks-switcher.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * WordPress dependencies - */ -import { withSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import './style.scss'; -import BlockSwitcher from './'; - -export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) { - if ( ! isMultiBlockSelection ) { - return null; - } - return ( - - ); -} - -export default withSelect( - ( select ) => { - const selectedBlockUids = select( 'core/editor' ).getMultiSelectedBlockUids(); - return { - isMultiBlockSelection: selectedBlockUids.length > 1, - selectedBlockUids, - }; - } -)( MultiBlocksSwitcher ); diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss deleted file mode 100644 index 8a0936e267ca1..0000000000000 --- a/editor/components/block-switcher/style.scss +++ /dev/null @@ -1,52 +0,0 @@ -.editor-block-switcher { - position: relative; - - .components-toolbar { - border-left: none; - } -} - -.editor-block-switcher__toggle { - width: auto; - margin: 0; - padding: 8px; - border-radius: 0; - - &:focus:before { - top: -3px; - right: -3px; - bottom: -3px; - left: -3px; - } -} - -.editor-block-switcher__popover .components-popover__content { - width: 200px; -} - -.editor-block-switcher__menu { - box-shadow: $shadow-popover; - border: 1px solid $light-gray-500; - background: $white; - padding: 3px 3px 0; -} - -.editor-block-switcher__menu-title { - display: block; - padding: 6px; - color: $dark-gray-300; -} - -.editor-block-switcher__menu-item { - color: $dark-gray-500; - display: flex; - align-items: center; - width: 100%; - padding: 6px; - text-align: left; - - .editor-block-switcher__block-icon { - margin-right: 8px; - height: 20px; - } -} diff --git a/editor/components/block-switcher/test/__snapshots__/index.js.snap b/editor/components/block-switcher/test/__snapshots__/index.js.snap deleted file mode 100644 index 3c19baa2d4fd1..0000000000000 --- a/editor/components/block-switcher/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,10 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BlockSwitcher should render switcher with blocks 1`] = ` - -`; diff --git a/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap b/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap deleted file mode 100644 index 30fe0ea13763f..0000000000000 --- a/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MultiBlocksSwitcher should return a BlockSwitcher element matching the snapshot. 1`] = ` - -`; diff --git a/editor/components/block-switcher/test/index.js b/editor/components/block-switcher/test/index.js deleted file mode 100644 index 16d6ee1720725..0000000000000 --- a/editor/components/block-switcher/test/index.js +++ /dev/null @@ -1,158 +0,0 @@ -/** - * External dependencies - */ -import { shallow } from 'enzyme'; - -/** - * WordPress dependencies - */ -import { registerCoreBlocks } from '@wordpress/core-blocks'; -import { keycodes } from '@wordpress/utils'; - -/** - * Internal dependencies - */ -import { BlockSwitcher } from '../'; - -const { DOWN } = keycodes; - -describe( 'BlockSwitcher', () => { - const headingBlock1 = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - - const textBlock = { - attributes: { - content: [ 'I am great!' ], - nodeName: 'P', - }, - isValid: true, - name: 'core/text', - originalContent: '

I am great!

', - uid: 'b1303fdb-3e60-43faf-a770-2e1ea656c5b8', - }; - - const headingBlock2 = { - attributes: { - content: [ 'I am the greatest!' ], - nodeName: 'H3', - }, - isValid: true, - name: 'core/text', - originalContent: '

I am the greatest!

', - uid: 'c2403fd2-4e63-5ffa-b71c-1e0ea656c5b0', - }; - - beforeAll( () => { - registerCoreBlocks(); - } ); - - test( 'should not render block switcher without blocks', () => { - const wrapper = shallow( ); - - expect( wrapper.html() ).toBeNull(); - } ); - - test( 'should render switcher with blocks', () => { - const blocks = [ - headingBlock1, - ]; - const wrapper = shallow( ); - - expect( wrapper ).toMatchSnapshot(); - } ); - - test( 'should not render block switcher with multi block of different types.', () => { - const blocks = [ - headingBlock1, - textBlock, - ]; - const wrapper = shallow( ); - - expect( wrapper.html() ).toBeNull(); - } ); - - test( 'should not render a component when the multi selected types of blocks match.', () => { - const blocks = [ - headingBlock1, - headingBlock2, - ]; - const wrapper = shallow( ); - - expect( wrapper.html() ).toBeNull(); - } ); - - describe( 'Dropdown', () => { - const blocks = [ - headingBlock1, - ]; - - const onTransformStub = jest.fn(); - const getDropdown = () => { - const blockSwitcher = shallow( ); - return blockSwitcher.find( 'Dropdown' ); - }; - - test( 'should dropdown exist', () => { - expect( getDropdown() ).toHaveLength( 1 ); - } ); - - describe( '.renderToggle', () => { - const onToggleStub = jest.fn(); - const mockKeyDown = { - preventDefault: () => {}, - stopPropagation: () => {}, - keyCode: DOWN, - }; - - afterEach( () => { - onToggleStub.mockReset(); - } ); - - test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => { - const toggleClosed = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: false } ) ); - const iconButtonClosed = toggleClosed.find( 'IconButton' ); - - iconButtonClosed.simulate( 'keydown', mockKeyDown ); - - expect( onToggleStub ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'should simulate a click event, which should call onToggle.', () => { - const toggleOpen = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: true } ) ); - const iconButtonOpen = toggleOpen.find( 'IconButton' ); - - iconButtonOpen.simulate( 'keydown', mockKeyDown ); - - expect( onToggleStub ).toHaveBeenCalledTimes( 0 ); - } ); - } ); - - describe( '.renderContent', () => { - const onCloseStub = jest.fn(); - - const getIconButtons = () => { - const content = shallow( getDropdown().props().renderContent( { onClose: onCloseStub } ) ); - return content.find( 'IconButton' ); - }; - - test( 'should create the iconButtons for the chosen block. A heading block will have 3 items', () => { - expect( getIconButtons() ).toHaveLength( 3 ); - } ); - - test( 'should simulate the click event by closing the switcher and causing a block transform on iconButtons.', () => { - getIconButtons().first().simulate( 'click' ); - - expect( onCloseStub ).toHaveBeenCalledTimes( 1 ); - expect( onTransformStub ).toHaveBeenCalledTimes( 1 ); - } ); - } ); - } ); -} ); diff --git a/editor/components/block-switcher/test/multi-blocks-switcher.js b/editor/components/block-switcher/test/multi-blocks-switcher.js deleted file mode 100644 index 37935f47788f6..0000000000000 --- a/editor/components/block-switcher/test/multi-blocks-switcher.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * External dependencies - */ -import { shallow } from 'enzyme'; - -/** - * Internal dependencies - */ -import { MultiBlocksSwitcher } from '../multi-blocks-switcher'; - -describe( 'MultiBlocksSwitcher', () => { - test( 'should return null when the selection is not a multi block selection.', () => { - const isMultiBlockSelection = false; - const selectedBlockUids = [ - 'an-uid', - ]; - const wrapper = shallow( - - ); - - expect( wrapper.html() ).toBeNull(); - } ); - - test( 'should return a BlockSwitcher element matching the snapshot.', () => { - const isMultiBlockSelection = true; - const selectedBlockUids = [ - 'an-uid', - 'another-uid', - ]; - const wrapper = shallow( - - ); - - expect( wrapper ).toMatchSnapshot(); - } ); -} ); diff --git a/editor/components/block-toolbar/index.js b/editor/components/block-toolbar/index.js index 75826e7cd5dc1..72adadb2f67bd 100644 --- a/editor/components/block-toolbar/index.js +++ b/editor/components/block-toolbar/index.js @@ -8,7 +8,6 @@ import { withSelect } from '@wordpress/data'; * Internal Dependencies */ import './style.scss'; -import BlockSwitcher from '../block-switcher'; function BlockToolbar( { block, mode } ) { if ( ! block || ! block.isValid || mode !== 'visual' ) { @@ -17,7 +16,6 @@ function BlockToolbar( { block, mode } ) { return (
-
diff --git a/editor/components/index.js b/editor/components/index.js index 57bb528463ca8..7e65d7a1cb0b7 100644 --- a/editor/components/index.js +++ b/editor/components/index.js @@ -63,7 +63,6 @@ export { default as CopyHandler } from './copy-handler'; export { default as DefaultBlockAppender } from './default-block-appender'; export { default as ErrorBoundary } from './error-boundary'; export { default as Inserter } from './inserter'; -export { default as MultiBlocksSwitcher } from './block-switcher/multi-blocks-switcher'; export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view'; export { default as NavigableToolbar } from './navigable-toolbar'; export { default as ObserveTyping } from './observe-typing';