From 01852beebf7dd0f0925ead9f363337a5e2ea7fef Mon Sep 17 00:00:00 2001 From: John Godley Date: Tue, 10 Jul 2018 15:51:17 +0100 Subject: [PATCH 1/7] Block warning: add option for hidden actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds an ellipsis dropdown menu so additional actions can be added outside of the primary buttons Note this just adds the capability for additional actions, but doesn’t actually include any --- .../block-list/block-invalid-warning.js | 2 +- .../editor/src/components/warning/index.js | 36 +++++++++++++++++-- .../src/components/warning/test/index.js | 13 +++++-- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/block-list/block-invalid-warning.js b/packages/editor/src/components/block-list/block-invalid-warning.js index 58583dc3175ac2..d244fc2f27fe67 100644 --- a/packages/editor/src/components/block-list/block-invalid-warning.js +++ b/packages/editor/src/components/block-list/block-invalid-warning.js @@ -20,7 +20,7 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { return ( { __( 'Convert to Blocks' ) } , diff --git a/packages/editor/src/components/warning/index.js b/packages/editor/src/components/warning/index.js index 9914401c20f24b..06c83f9cff0d2e 100644 --- a/packages/editor/src/components/warning/index.js +++ b/packages/editor/src/components/warning/index.js @@ -7,16 +7,18 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Children } from '@wordpress/element'; +import { Dropdown, IconButton, MenuGroup, MenuItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; -function Warning( { className, actions, children } ) { +function Warning( { className, primaryActions, children, hiddenActions } ) { return (

{ children }

- { Children.count( actions ) > 0 && ( + { Children.count( primaryActions ) > 0 && (
- { Children.map( actions, ( action, i ) => ( + { Children.map( primaryActions, ( action, i ) => ( { action } @@ -24,6 +26,34 @@ function Warning( { className, actions, children } ) {
) }
+ + { hiddenActions && ( +
+ ( + + ) } + renderContent={ () => ( +
+ + { hiddenActions.map( ( item, pos ) => + + { item.title } + + ) } + +
+ ) } + /> +
+ ) }
); } diff --git a/packages/editor/src/components/warning/test/index.js b/packages/editor/src/components/warning/test/index.js index 805b649a018b45..3a5eb0b6f90c5e 100644 --- a/packages/editor/src/components/warning/test/index.js +++ b/packages/editor/src/components/warning/test/index.js @@ -15,15 +15,16 @@ describe( 'Warning', () => { expect( wrapper ).toMatchSnapshot(); } ); - it( 'should has valid class', () => { + it( 'should have valid class', () => { const wrapper = shallow( ); expect( wrapper.hasClass( 'editor-warning' ) ).toBe( true ); expect( wrapper.find( '.editor-warning__actions' ) ).toHaveLength( 0 ); + expect( wrapper.find( '.editor-warning__hidden' ) ).toHaveLength( 0 ); } ); it( 'should show child error message element', () => { - const wrapper = shallow( }>Message ); + const wrapper = shallow( }>Message ); const actions = wrapper.find( '.editor-warning__actions' ); const action = actions.childAt( 0 ); @@ -32,4 +33,12 @@ describe( 'Warning', () => { expect( action.hasClass( 'editor-warning__action' ) ).toBe( true ); expect( action.childAt( 0 ).type() ).toBe( 'button' ); } ); + + it( 'should show hidden actions', () => { + const wrapper = shallow( Message ); + + const actions = wrapper.find( '.editor-warning__hidden' ); + + expect( actions ).toHaveLength( 1 ); + } ); } ); From 09fc65a237b4eeb0aaa2e4addcf4cd99464d3a2b Mon Sep 17 00:00:00 2001 From: John Godley Date: Wed, 11 Jul 2018 13:58:52 +0100 Subject: [PATCH 2/7] Block warning: add convert to classic option Makes use of the new ellipsis menu to present the sa,e convert to blocks option along with a convert to classic block --- .../components/block-list/block-invalid-warning.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/block-invalid-warning.js b/packages/editor/src/components/block-list/block-invalid-warning.js index d244fc2f27fe67..b42e0a896e96cd 100644 --- a/packages/editor/src/components/block-list/block-invalid-warning.js +++ b/packages/editor/src/components/block-list/block-invalid-warning.js @@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data'; */ import Warning from '../warning'; -function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { +function BlockInvalidWarning( { convertToHTML, convertToBlocks, convertToClassic } ) { const hasHTMLBlock = !! getBlockType( 'core/html' ); return ( @@ -30,6 +30,10 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { ), ] } + hiddenActions={ [ + { title: __( 'Convert to Blocks' ), onClick: convertToBlocks }, + { title: __( 'Convert to Classic Block' ), onClick: convertToClassic }, + ] } > { __( 'This block has been modified externally.' ) } @@ -39,6 +43,11 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) { export default withDispatch( ( dispatch, { block } ) => { const { replaceBlock } = dispatch( 'core/editor' ); return { + convertToClassic() { + replaceBlock( block.uid, createBlock( 'core/freeform', { + content: block.originalContent, + } ) ); + }, convertToHTML() { replaceBlock( block.clientId, createBlock( 'core/html', { content: block.originalContent, From 41c6a454b21a9a7d37b2b58f38574703581c3712 Mon Sep 17 00:00:00 2001 From: John Godley Date: Tue, 24 Jul 2018 10:26:41 +0100 Subject: [PATCH 3/7] Tweak block warning dropdown menu position The menu is slightly vertically off-centred when on full screen desktop. This moves it a bit while still looking ok on mobile --- packages/editor/src/components/warning/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss index a9553dd17fe5f9..2fd24e1ae820e8 100644 --- a/packages/editor/src/components/warning/style.scss +++ b/packages/editor/src/components/warning/style.scss @@ -31,4 +31,8 @@ margin: 0 6px 0 0; margin-left: 0; } + + .editor-warning__hidden { + margin-top: 3px; + } } From 2d7533a1da1a61aadbec5f2d54d4a5d072d90a6d Mon Sep 17 00:00:00 2001 From: John Godley Date: Mon, 27 Aug 2018 14:14:09 +0100 Subject: [PATCH 4/7] Change hidden actions to secondary actions Matches primary actions --- .../src/components/block-list/block-invalid-warning.js | 2 +- packages/editor/src/components/warning/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/block-list/block-invalid-warning.js b/packages/editor/src/components/block-list/block-invalid-warning.js index b42e0a896e96cd..b0341bd5a6214d 100644 --- a/packages/editor/src/components/block-list/block-invalid-warning.js +++ b/packages/editor/src/components/block-list/block-invalid-warning.js @@ -30,7 +30,7 @@ function BlockInvalidWarning( { convertToHTML, convertToBlocks, convertToClassic ), ] } - hiddenActions={ [ + secondaryActions={ [ { title: __( 'Convert to Blocks' ), onClick: convertToBlocks }, { title: __( 'Convert to Classic Block' ), onClick: convertToClassic }, ] } diff --git a/packages/editor/src/components/warning/index.js b/packages/editor/src/components/warning/index.js index 06c83f9cff0d2e..66d782e519c6bb 100644 --- a/packages/editor/src/components/warning/index.js +++ b/packages/editor/src/components/warning/index.js @@ -10,7 +10,7 @@ import { Children } from '@wordpress/element'; import { Dropdown, IconButton, MenuGroup, MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -function Warning( { className, primaryActions, children, hiddenActions } ) { +function Warning( { className, primaryActions, children, secondaryActions } ) { return (
@@ -27,7 +27,7 @@ function Warning( { className, primaryActions, children, hiddenActions } ) { ) }
- { hiddenActions && ( + { secondaryActions && (
(
- { hiddenActions.map( ( item, pos ) => + { secondaryActions.map( ( item, pos ) => { item.title } From 2374f054cf50d3c072a9988d080c39b0baa9f0a1 Mon Sep 17 00:00:00 2001 From: John Godley Date: Mon, 27 Aug 2018 14:43:06 +0100 Subject: [PATCH 5/7] Fix unit test to match secondaryActions change --- packages/editor/src/components/warning/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/warning/test/index.js b/packages/editor/src/components/warning/test/index.js index 3a5eb0b6f90c5e..d619959e6a8974 100644 --- a/packages/editor/src/components/warning/test/index.js +++ b/packages/editor/src/components/warning/test/index.js @@ -35,7 +35,7 @@ describe( 'Warning', () => { } ); it( 'should show hidden actions', () => { - const wrapper = shallow( Message ); + const wrapper = shallow( Message ); const actions = wrapper.find( '.editor-warning__hidden' ); From e1623e7280b578f019ec60dc49e6df831a3f487e Mon Sep 17 00:00:00 2001 From: John Godley Date: Tue, 28 Aug 2018 06:56:42 +0100 Subject: [PATCH 6/7] Split warning dropdown style away from more dropdown CSS is minimal, and can be refactored into a new component later --- .../editor/src/components/warning/index.js | 46 +++++++++---------- .../editor/src/components/warning/style.scss | 22 ++++++++- 2 files changed, 41 insertions(+), 27 deletions(-) diff --git a/packages/editor/src/components/warning/index.js b/packages/editor/src/components/warning/index.js index 66d782e519c6bb..ac68bf0f57c6c1 100644 --- a/packages/editor/src/components/warning/index.js +++ b/packages/editor/src/components/warning/index.js @@ -28,31 +28,27 @@ function Warning( { className, primaryActions, children, secondaryActions } ) {
{ secondaryActions && ( -
- ( - - ) } - renderContent={ () => ( -
- - { secondaryActions.map( ( item, pos ) => - - { item.title } - - ) } - -
- ) } - /> -
+ ( + + ) } + renderContent={ () => ( + + { secondaryActions.map( ( item, pos ) => + + { item.title } + + ) } + + ) } + /> ) }
); diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss index 2fd24e1ae820e8..3fa9fa93be3093 100644 --- a/packages/editor/src/components/warning/style.scss +++ b/packages/editor/src/components/warning/style.scss @@ -31,8 +31,26 @@ margin: 0 6px 0 0; margin-left: 0; } +} + +.editor-warning__secondary { + margin: 3px 0 0 -4px; + + // the padding and margin of the more menu is intentionally non-standard + .components-icon-button { + width: auto; + padding: 8px 2px; + } + + @include break-small() { + margin-left: 4px; + + .components-icon-button { + padding: 8px 4px; + } + } - .editor-warning__hidden { - margin-top: 3px; + .components-button svg { + transform: rotate(90deg); } } From 29153d1db80311a0c52087ef272efc37a05e123a Mon Sep 17 00:00:00 2001 From: John Godley Date: Tue, 28 Aug 2018 07:08:32 +0100 Subject: [PATCH 7/7] Update unit test to match new class name --- packages/editor/src/components/warning/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/warning/test/index.js b/packages/editor/src/components/warning/test/index.js index d619959e6a8974..9ef516e80dd60b 100644 --- a/packages/editor/src/components/warning/test/index.js +++ b/packages/editor/src/components/warning/test/index.js @@ -37,7 +37,7 @@ describe( 'Warning', () => { it( 'should show hidden actions', () => { const wrapper = shallow( Message ); - const actions = wrapper.find( '.editor-warning__hidden' ); + const actions = wrapper.find( '.editor-warning__secondary' ); expect( actions ).toHaveLength( 1 ); } );