From abf541d24d64ef052d5d5cace31182d168d00360 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 9 Nov 2018 11:01:57 +0100 Subject: [PATCH] Further improve columns block. This PR is a followup to thoughts in https://github.com/WordPress/gutenberg/pull/11620#issuecomment-437110753. It improves the columns block further by doing two things: 1. It hides the hover effect on the individual _column_ block in the initial state. 2. It changes the non-block "fake" appender to be a textarea instead of an input. To elaborate on 1, in https://github.com/WordPress/gutenberg/pull/11620 we used pointer-events to disable the individual column blocks as selectable using the mouse. This is because those columns are not actionable at the moment, and in the current implementation of the column, being able to hover and select them only causes issues with selecting the parent columns block, which _is_ actionable. However pointer events was not enough for the _empty_ state of a columns block. In this state, the block features no inner blocks, except the individual column blocks, because no content has yet been inserted yet. In this state, you see the "appender", which is not actually a block even though it looks exactly the same as an empty paragraph. Because this is not technically a block, the deepest nested child is a _column_, which is then allowed to be hovered. In 1 I add a workaround to that, to simply visually hide the hover effect. I expect this to be refactored in a future columns update, but for the time being it makes it far more usable. To elaborate on 2, there has been a long time issue with the appender (again, not the block, the fake version that we use before an empty paragraph is inserted) wrapping text in translations. This is because text _cannot_ wrap in an `input` field, which the appender is. By changing this to a `textarea`, the text can wrap. This might affect themes which specify the input element for increased specificity in their editor styles, but overall it still seems like a worthwhile change to make, since it's the only way we can allow the writing prompt to wrap its text. --- packages/block-library/src/columns/editor.scss | 17 +++++++++++++++-- .../components/default-block-appender/index.js | 3 +-- .../default-block-appender/style.scss | 9 ++++----- .../test/__snapshots__/index.js.snap | 9 +++------ .../default-block-appender/test/index.js | 4 ++-- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index a96a6dcf8c1ea3..4492a75ca7cbe2 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -128,11 +128,24 @@ } // In absence of making the individual columns resizable, we prevent them from being clickable. -// This makes them less fiddly. This will be revisited as the interface is refined. +// This makes them less fiddly. @todo: This should be revisited as the interface is refined. .wp-block-columns [data-type="core/column"] { pointer-events: none; + + // The empty state of a columns block has the default appenders. + // Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. + // Because the column shouldn't be hovered as part of this temporary passhthrough, we unset the hover style. + &.is-hovered { + > .editor-block-list__block-edit::before { + content: none; + } + + .editor-block-list__breadcrumb { + display: none; + } + } } -:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > .editor-inner-blocks { +:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-inner-blocks { pointer-events: all; } diff --git a/packages/editor/src/components/default-block-appender/index.js b/packages/editor/src/components/default-block-appender/index.js index 8cc05c140878ed..4d2db765304032 100644 --- a/packages/editor/src/components/default-block-appender/index.js +++ b/packages/editor/src/components/default-block-appender/index.js @@ -51,11 +51,10 @@ export function DefaultBlockAppender( { return (
- - @@ -35,13 +34,12 @@ exports[`DefaultBlockAppender should match snapshot 1`] = ` data-root-client-id="" > - @@ -57,13 +55,12 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = ` data-root-client-id="" > - diff --git a/packages/editor/src/components/default-block-appender/test/index.js b/packages/editor/src/components/default-block-appender/test/index.js index 94b6030ce0947d..9e687304847f4f 100644 --- a/packages/editor/src/components/default-block-appender/test/index.js +++ b/packages/editor/src/components/default-block-appender/test/index.js @@ -31,7 +31,7 @@ describe( 'DefaultBlockAppender', () => { const onAppend = jest.fn(); const wrapper = shallow( ); - wrapper.find( 'input.editor-default-block-appender__content' ).simulate( 'focus' ); + wrapper.find( 'textarea.editor-default-block-appender__content' ).simulate( 'focus' ); expect( wrapper ).toMatchSnapshot(); @@ -41,7 +41,7 @@ describe( 'DefaultBlockAppender', () => { it( 'should optionally show without prompt', () => { const onAppend = jest.fn(); const wrapper = shallow( ); - const input = wrapper.find( 'input.editor-default-block-appender__content' ); + const input = wrapper.find( 'textarea.editor-default-block-appender__content' ); expect( input.prop( 'value' ) ).toEqual( '' );