From 2f294e19f51b3c6087497ef4b798e4f00b03dd02 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Wed, 22 Feb 2023 21:22:17 +0530 Subject: [PATCH] Link Control - Add support for text only labels (#47930) * feat(link-control): show text only labels * chore(link-control): change setting button title * fix(link-control): update tests * chore(link-control): use editor top level interface css class to add the label text * fix(link-control): reduce show-icon-labels css specificity * fix: pass slot in off-canvas-editor and navigation-link --- .../link-control/settings-drawer.js | 3 ++- .../src/components/link-control/style.scss | 26 +++++++++++++------ .../src/components/link-control/test/index.js | 6 ++--- .../components/off-canvas-editor/link-ui.js | 1 + .../src/navigation-link/link-ui.js | 1 + .../specs/editor/various/links.test.js | 14 +++++----- 6 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js index e58b4409645b33..0cb12f2c5904c6 100644 --- a/packages/block-editor/src/components/link-control/settings-drawer.js +++ b/packages/block-editor/src/components/link-control/settings-drawer.js @@ -11,6 +11,7 @@ import { settings as settingsIcon } from '@wordpress/icons'; import { useReducedMotion, useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; + /** * Internal dependencies */ @@ -46,7 +47,7 @@ function LinkSettingsDrawer( { aria-expanded={ settingsOpen } onClick={ () => setSettingsOpen( ! settingsOpen ) } icon={ settingsIcon } - label={ __( 'Toggle link settings' ) } + label={ __( 'Link Settings' ) } aria-controls={ settingsDrawerId } /> diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 743ebcebc23c21..0de8091938dfeb 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -22,6 +22,20 @@ $preview-image-height: 140px; width: 90vw; max-width: $modal-min-width; } + + .show-icon-labels & { + .components-button.has-icon { + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + // Uses ::before as ::after is already used for active tab styling. + &::before { + content: attr(aria-label); + } + } + } } // Provides positioning context for reset button. Without this then when an @@ -72,7 +86,7 @@ $preview-image-height: 140px; } .block-editor-link-control__search-error { - margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button + margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button } .block-editor-link-control__search-actions { @@ -103,7 +117,7 @@ $preview-image-height: 140px; } &::before { - height: $grid-unit-20*0.5; + height: $grid-unit-20 * 0.5; top: 0; bottom: auto; } @@ -123,7 +137,7 @@ $preview-image-height: 140px; .block-editor-link-control__search-results { margin: 0; - padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5; + padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5; max-height: 200px; overflow-y: auto; // allow results list to scroll @@ -224,7 +238,6 @@ $preview-image-height: 140px; max-height: 32px; } - .block-editor-link-control__search-item-info, .block-editor-link-control__search-item-title { overflow: hidden; @@ -344,16 +357,13 @@ $preview-image-height: 140px; width: 100%; } - .block-editor-link-control__search-item.is-fetching { - .block-editor-link-control__search-item-description { &::before, &::after { animation: loadingpulse 1s linear infinite; animation-delay: 0.5s; // avoid animating for fast network responses } - } .block-editor-link-control__search-item-image { @@ -403,7 +413,7 @@ $preview-image-height: 140px; &::before { content: ""; position: absolute; - top: -#{$block-selected-child-margin*2}; + top: -#{$block-selected-child-margin * 2}; left: 0; display: block; width: 100%; diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index e030e6cce5ca3f..68fa00a22762c9 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -1670,7 +1670,7 @@ describe( 'Addition Settings UI', () => { render( ); const settingsToggle = screen.queryByRole( 'button', { - name: 'Toggle link settings', + name: 'Link Settings', ariaControls: 'link-settings-1', } ); @@ -1690,7 +1690,7 @@ describe( 'Addition Settings UI', () => { const user = userEvent.setup(); const settingsToggle = screen.queryByRole( 'button', { - name: 'Toggle link settings', + name: 'Link Settings', ariaControls: 'link-settings-1', } ); @@ -2241,7 +2241,7 @@ describe( 'Controlling link title text', () => { async function toggleSettingsDrawer( user ) { const settingsToggle = screen.queryByRole( 'button', { - name: 'Toggle link settings', + name: 'Link Settings', } ); await user.click( settingsToggle ); diff --git a/packages/block-editor/src/components/off-canvas-editor/link-ui.js b/packages/block-editor/src/components/off-canvas-editor/link-ui.js index f6b5e2538d9e7c..c5a0af653703c6 100644 --- a/packages/block-editor/src/components/off-canvas-editor/link-ui.js +++ b/packages/block-editor/src/components/off-canvas-editor/link-ui.js @@ -137,6 +137,7 @@ export function LinkUI( props ) { placement="bottom" onClose={ props.onClose } anchor={ props.anchor } + __unstableSlotName={ '__unstable-block-tools-after' } shift > { await waitForURLFieldAutoFocus(); await page.keyboard.type( 'w.org' ); - // Toggle link settings open + // Link settings open await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' ); @@ -605,7 +605,7 @@ describe( 'Links', () => { await pressKeyWithModifier( 'primary', 'K' ); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' + '//button[contains(@aria-label, "Link Settings")]' ); await settingsToggle.click(); @@ -638,7 +638,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' + '//button[contains(@aria-label, "Link Settings")]' ); await settingsToggle.click(); @@ -702,7 +702,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' + '//button[contains(@aria-label, "Link Settings")]' ); await settingsToggle.click(); @@ -737,7 +737,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' + '//button[contains(@aria-label, "Link Settings")]' ); await settingsToggle.click(); @@ -788,7 +788,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' + '//button[contains(@aria-label, "Link Settings")]' ); await settingsToggle.click(); @@ -1001,7 +1001,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); - // Toggle link settings open + // Link settings open await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' );