From b1183258d330a3918a14b6cffe4cf1eaba995266 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 11 Mar 2021 10:05:10 +0000 Subject: [PATCH 1/8] Rotate the inserter icon and switch the label when pressed --- .../src/components/header/header-toolbar/index.js | 15 +++++++++++---- .../components/header/header-toolbar/style.scss | 10 ++++++++++ packages/edit-site/src/components/header/index.js | 15 +++++++++++---- .../edit-site/src/components/header/style.scss | 10 ++++++++++ 4 files changed, 42 insertions(+), 8 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index cc2efea4bf657a..80a80117b7c49a 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -142,10 +142,17 @@ function HeaderToolbar() { icon={ plus } /* translators: button label text should, if possible, be under 16 characters. */ - label={ _x( - 'Add block', - 'Generic label for block inserter button' - ) } + label={ + isInserterOpened + ? _x( + 'Close block inserter', + 'Generic label for block inserter button' + ) + : _x( + 'Add block', + 'Generic label for block inserter button' + ) + } showTooltip={ ! showIconLabels } > { showIconLabels && __( 'Add' ) } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index c71dfebddfc66f..2f08d588ba8bd8 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -15,6 +15,16 @@ .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle { display: inline-flex; + + svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + } + + &.is-pressed { + svg { + transform: rotate(45deg); + } + } } // Hide table of contents and block navigation on mobile. diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index eff62335460e43..a8de9557eed44c 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -105,10 +105,17 @@ export default function Header( { openEntitiesSavedStates } ) { } } } icon={ plus } - label={ _x( - 'Add block', - 'Generic label for block inserter button' - ) } + label={ + isInserterOpen + ? _x( + 'Close block inserter', + 'Generic label for block inserter button' + ) + : _x( + 'Add block', + 'Generic label for block inserter button' + ) + } /> { isLargeViewport && ( <> diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 322fd25f86fe00..3673fe1726d225 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -81,6 +81,16 @@ body.is-navigation-sidebar-open { width: $grid-unit-40; height: $grid-unit-40; padding: 0; + + svg { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + } + + &.is-pressed { + svg { + transform: rotate(45deg); + } + } } } From a680c1d914cc34b7558318786246f1ea9220b9dc Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 17 Mar 2021 14:52:39 +0000 Subject: [PATCH 2/8] Use a single label rather than toggling. Include reduce-motion mixin. --- .../src/components/header/header-toolbar/index.js | 15 ++++----------- .../components/header/header-toolbar/style.scss | 1 + packages/edit-site/src/components/header/index.js | 15 ++++----------- .../edit-site/src/components/header/style.scss | 1 + 4 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 80a80117b7c49a..e2d287346bc899 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -142,17 +142,10 @@ function HeaderToolbar() { icon={ plus } /* translators: button label text should, if possible, be under 16 characters. */ - label={ - isInserterOpened - ? _x( - 'Close block inserter', - 'Generic label for block inserter button' - ) - : _x( - 'Add block', - 'Generic label for block inserter button' - ) - } + label={ _x( + 'Toggle block inserter', + 'Generic label for block inserter button' + ) } showTooltip={ ! showIconLabels } > { showIconLabels && __( 'Add' ) } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 2f08d588ba8bd8..f1be46ff3c2803 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -18,6 +18,7 @@ svg { transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + @include reduce-motion("transition"); } &.is-pressed { diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index a8de9557eed44c..9e6a6fbf31a18d 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -105,17 +105,10 @@ export default function Header( { openEntitiesSavedStates } ) { } } } icon={ plus } - label={ - isInserterOpen - ? _x( - 'Close block inserter', - 'Generic label for block inserter button' - ) - : _x( - 'Add block', - 'Generic label for block inserter button' - ) - } + label={ _x( + 'Toggle block inserter', + 'Generic label for block inserter button' + ) } /> { isLargeViewport && ( <> diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 3673fe1726d225..413788ecdf984f 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -84,6 +84,7 @@ body.is-navigation-sidebar-open { svg { transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + @include reduce-motion("transition"); } &.is-pressed { From 9dbcc7401b2757902a26644d521fddd44c60c5a6 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 18 Mar 2021 11:52:55 +0000 Subject: [PATCH 3/8] Update tests --- packages/e2e-test-utils/src/inserter.js | 4 ++-- packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 4c907efab7a18b..9f855f92449b93 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -41,7 +41,7 @@ export async function closeGlobalBlockInserter() { async function isGlobalInserterOpen() { return await page.evaluate( () => { return !! document.querySelector( - '.edit-post-header [aria-label="Add block"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed' + '.edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed' ); } ); } @@ -50,7 +50,7 @@ async function isGlobalInserterOpen() { */ export async function toggleGlobalBlockInserter() { await page.click( - '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"]' + '.edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Add block"]' ); } diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index a9b0181d4e47fc..65dc9d5d17dce9 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -27,7 +27,7 @@ describe( 'cpt locking', () => { expect( await page.evaluate( () => { const inserter = document.querySelector( - '.edit-post-header [aria-label="Add block"]' + '.edit-post-header [aria-label="Toggle block inserter"]' ); return inserter.getAttribute( 'disabled' ); } ) @@ -159,7 +159,7 @@ describe( 'cpt locking', () => { it( 'should allow blocks to be inserted', async () => { expect( - await page.$( '.edit-post-header [aria-label="Add block"]' ) + await page.$( '.edit-post-header [aria-label="Toggle block inserter"]' ) ).not.toBeNull(); await insertBlock( 'List' ); await page.keyboard.type( 'List content' ); From e3a8268193dc9be464e90872c9f34120d1b8b031 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 18 Mar 2021 17:38:43 +0000 Subject: [PATCH 4/8] formatting --- packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 65dc9d5d17dce9..862bbf8e9ab5c1 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -159,7 +159,9 @@ describe( 'cpt locking', () => { it( 'should allow blocks to be inserted', async () => { expect( - await page.$( '.edit-post-header [aria-label="Toggle block inserter"]' ) + await page.$( + '.edit-post-header [aria-label="Toggle block inserter"]' + ) ).not.toBeNull(); await insertBlock( 'List' ); await page.keyboard.type( 'List content' ); From dd59a7f84406085d5a474f87689c08513c6e0a25 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 18 Mar 2021 17:41:59 +0000 Subject: [PATCH 5/8] Update test snapshots --- .../control-group/test/__snapshots__/index.js.snap | 4 ++-- .../control-label/test/__snapshots__/index.js.snap | 12 ++++++------ .../ui/form-group/test/__snapshots__/index.js.snap | 8 ++++---- .../src/ui/text/test/__snapshots__/text.js.snap | 8 ++++---- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap index 5424bcfd068637..8b76670df18854 100644 --- a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap @@ -997,8 +997,8 @@ exports[`props should render mixed control types 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); display: block; diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap index b29cd6d788b001..360b5d7f92c901 100644 --- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap @@ -33,8 +33,8 @@ exports[`props should render correctly 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); display: inline-block; @@ -105,8 +105,8 @@ exports[`props should render no truncate 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); display: inline-block; @@ -181,8 +181,8 @@ exports[`props should render size 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); display: inline-block; diff --git a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap index 8005b5772213a1..288e655271f9b6 100644 --- a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap @@ -55,8 +55,8 @@ exports[`props should render alignLabel 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); text-align: right; @@ -165,8 +165,8 @@ exports[`props should render vertically 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); text-align: left; diff --git a/packages/components/src/ui/text/test/__snapshots__/text.js.snap b/packages/components/src/ui/text/test/__snapshots__/text.js.snap index 77f8835bbbbb6b..199b820be1f32c 100644 --- a/packages/components/src/ui/text/test/__snapshots__/text.js.snap +++ b/packages/components/src/ui/text/test/__snapshots__/text.js.snap @@ -16,8 +16,8 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); } @@ -71,8 +71,8 @@ exports[`Text snapshot tests should render correctly 1`] = ` color: var(--wp-g2-color-text); line-height: 1.2; line-height: var(--wp-g2-font-line-height-base); - font-size: calc(1 * 13px); - font-size: calc(1 * var(--wp-g2-font-size)); + font-size: calc((13 / 13) * 13px); + font-size: calc((13 / 13) * var(--wp-g2-font-size)); font-weight: normal; font-weight: var(--wp-g2-font-weight); } From 128b6ed07a97b3791904b9e8dd485f2bb84905e9 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 26 Mar 2021 11:15:38 +0000 Subject: [PATCH 6/8] Update labels --- packages/e2e-test-utils/src/inserter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 9f855f92449b93..be9462f85a17e3 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -41,7 +41,7 @@ export async function closeGlobalBlockInserter() { async function isGlobalInserterOpen() { return await page.evaluate( () => { return !! document.querySelector( - '.edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed' + '.edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Toggle block inserter"].is-pressed' ); } ); } @@ -50,7 +50,7 @@ async function isGlobalInserterOpen() { */ export async function toggleGlobalBlockInserter() { await page.click( - '.edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Add block"]' + '.edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Toggle block inserter"]' ); } From 94264f7c8558b122f53ae0e002c2518eefc21261 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 29 Mar 2021 14:47:41 +0200 Subject: [PATCH 7/8] Add old selectors --- packages/e2e-test-utils/src/inserter.js | 4 ++-- packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index be9462f85a17e3..6e1b2f0aaf00cb 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -41,7 +41,7 @@ export async function closeGlobalBlockInserter() { async function isGlobalInserterOpen() { return await page.evaluate( () => { return !! document.querySelector( - '.edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Toggle block inserter"].is-pressed' + '.edit-post-header [aria-label="Add block"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed, .edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Toggle block inserter"].is-pressed' ); } ); } @@ -50,7 +50,7 @@ async function isGlobalInserterOpen() { */ export async function toggleGlobalBlockInserter() { await page.click( - '.edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Toggle block inserter"]' + '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Toggle block inserter"]' ); } diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 862bbf8e9ab5c1..05ff4adbc68e72 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -27,7 +27,7 @@ describe( 'cpt locking', () => { expect( await page.evaluate( () => { const inserter = document.querySelector( - '.edit-post-header [aria-label="Toggle block inserter"]' + '.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]' ); return inserter.getAttribute( 'disabled' ); } ) @@ -160,7 +160,7 @@ describe( 'cpt locking', () => { it( 'should allow blocks to be inserted', async () => { expect( await page.$( - '.edit-post-header [aria-label="Toggle block inserter"]' + '.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]' ) ).not.toBeNull(); await insertBlock( 'List' ); From 944fd6c1ac9f616e7bb1a435058698ad2897bd7a Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 29 Mar 2021 15:40:38 +0200 Subject: [PATCH 8/8] Add comment --- packages/e2e-test-utils/src/inserter.js | 4 ++++ packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 6e1b2f0aaf00cb..b5041992f2bbc4 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -40,6 +40,8 @@ export async function closeGlobalBlockInserter() { async function isGlobalInserterOpen() { return await page.evaluate( () => { + // "Add block" selector is required to make sure performance comparison + // doesn't fail on older branches where we still had "Add block" as label. return !! document.querySelector( '.edit-post-header [aria-label="Add block"].is-pressed, .edit-site-header [aria-label="Add block"].is-pressed, .edit-post-header [aria-label="Toggle block inserter"].is-pressed, .edit-site-header [aria-label="Toggle block inserter"].is-pressed' ); @@ -49,6 +51,8 @@ async function isGlobalInserterOpen() { * Toggles the global inserter. */ export async function toggleGlobalBlockInserter() { + // "Add block" selector is required to make sure performance comparison + // doesn't fail on older branches where we still had "Add block" as label. await page.click( '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"], .edit-site-header [aria-label="Toggle block inserter"]' ); diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 05ff4adbc68e72..aee6398871a9b1 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -159,6 +159,8 @@ describe( 'cpt locking', () => { it( 'should allow blocks to be inserted', async () => { expect( + // "Add block" selector is required to make sure performance comparison + // doesn't fail on older branches where we still had "Add block" as label. await page.$( '.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]' )