From 1ee7f1a853c14945c1c14c562e156f0e2a6df947 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Wed, 22 Jan 2020 19:44:54 +0100 Subject: [PATCH 1/3] Rich text: prefix is-selected class --- packages/block-editor/src/components/rich-text/index.js | 2 +- packages/block-editor/src/components/rich-text/style.scss | 2 +- packages/block-library/src/navigation-link/editor.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 78ac7b4dfa4b2..140b25a976342 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -386,7 +386,7 @@ class RichTextWrapper extends Component { onSelectionChange={ onSelectionChange } tagName={ tagName } className={ classnames( classes, className, { - 'is-selected': originalIsSelected, + 'is-rich-text-selected': originalIsSelected, 'keep-placeholder-on-focus': keepPlaceholderOnFocus, } ) } placeholder={ placeholder } diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 5d0971d4847c0..014cb66c86f7f 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -37,7 +37,7 @@ } // Could be unset for individual rich text instances. - &.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { + &.is-rich-text-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { display: none; } } diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index a61d103abac4a..d01c6d2d21fa5 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -51,7 +51,7 @@ margin-left: 4px; } - .block-editor-rich-text__editable.is-selected:not(.keep-placeholder-on-focus):not(:focus) [data-rich-text-placeholder]::after { + .block-editor-rich-text__editable.is-rich-text-selected:not(.keep-placeholder-on-focus):not(:focus) [data-rich-text-placeholder]::after { display: inline-block; } } From 7fdeec74c806660946442eb8806f44e72386b0ae Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Wed, 22 Jan 2020 20:44:07 +0100 Subject: [PATCH 2/3] Adjust more cases --- packages/e2e-tests/specs/editor/blocks/navigation.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index 37e9db2c27611..e94107bf47af4 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -59,7 +59,7 @@ async function updateActiveNavigationLink( { url, label } ) { } if ( label ) { - await page.click( '.wp-block-navigation-link__label.is-selected' ); + await page.click( '.wp-block-navigation-link__label.is-rich-text-selected' ); // Ideally this would be `await pressKeyWithModifier( 'primary', 'a' )` // to select all text like other tests do. From e1c060ee2a0266c496e6ff696d6e3445e7941b50 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 23 Jan 2020 11:01:56 +0100 Subject: [PATCH 3/3] Remove the class --- .../src/components/rich-text/index.js | 1 - .../src/components/rich-text/style.scss | 23 +++++++++---------- .../src/navigation-link/editor.scss | 4 ---- .../specs/editor/blocks/navigation.test.js | 2 +- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 140b25a976342..cae2f37ce7139 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -386,7 +386,6 @@ class RichTextWrapper extends Component { onSelectionChange={ onSelectionChange } tagName={ tagName } className={ classnames( classes, className, { - 'is-rich-text-selected': originalIsSelected, 'keep-placeholder-on-focus': keepPlaceholderOnFocus, } ) } placeholder={ placeholder } diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 014cb66c86f7f..bfcf0c0e02e24 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -16,15 +16,6 @@ font-size: inherit; // This is necessary to override upstream CSS. } - &:focus { - // Removes outline added by the browser. - outline: none; - - *[data-rich-text-format-boundary] { - border-radius: 2px; - } - } - [data-rich-text-placeholder] { pointer-events: none; } @@ -36,9 +27,17 @@ opacity: 0.62; } - // Could be unset for individual rich text instances. - &.is-rich-text-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { - display: none; + &:focus { + // Removes outline added by the browser. + outline: none; + + [data-rich-text-format-boundary] { + border-radius: 2px; + } + + &:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { + display: none; + } } } diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index d01c6d2d21fa5..13d7ce777e36f 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -50,10 +50,6 @@ .wp-block-navigation-link__submenu-icon { margin-left: 4px; } - - .block-editor-rich-text__editable.is-rich-text-selected:not(.keep-placeholder-on-focus):not(:focus) [data-rich-text-placeholder]::after { - display: inline-block; - } } [data-type="core/navigation-link"] { diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index e94107bf47af4..bdb237c0aee04 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -59,7 +59,7 @@ async function updateActiveNavigationLink( { url, label } ) { } if ( label ) { - await page.click( '.wp-block-navigation-link__label.is-rich-text-selected' ); + await page.click( '.is-selected .wp-block-navigation-link__label' ); // Ideally this would be `await pressKeyWithModifier( 'primary', 'a' )` // to select all text like other tests do.