Skip to content

Commit

Permalink
Link Control - Add support for text only labels (#47930)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@abhi3315
abhi3315 authored Feb 22, 2023
1 parent 5263902 commit 2f294e1
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 19 deletions.
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/link-control/settings-drawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -46,7 +47,7 @@ function LinkSettingsDrawer( {
aria-expanded={ settingsOpen }
onClick={ () => setSettingsOpen( ! settingsOpen ) }
icon={ settingsIcon }
label={ __( 'Toggle link settings' ) }
label={ __( 'Link Settings' ) }
aria-controls={ settingsDrawerId }
/>
<MaybeAnimatePresence>
Expand Down
26 changes: 18 additions & 8 deletions packages/block-editor/src/components/link-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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%;
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/link-control/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1670,7 +1670,7 @@ describe( 'Addition Settings UI', () => {
render( <LinkControlConsumer /> );

const settingsToggle = screen.queryByRole( 'button', {
name: 'Toggle link settings',
name: 'Link Settings',
ariaControls: 'link-settings-1',
} );

Expand All @@ -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',
} );

Expand Down Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/off-canvas-editor/link-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export function LinkUI( props ) {
placement="bottom"
onClose={ props.onClose }
anchor={ props.anchor }
__unstableSlotName={ '__unstable-block-tools-after' }
shift
>
<LinkControl
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation-link/link-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ export function LinkUI( props ) {
placement="bottom"
onClose={ props.onClose }
anchor={ props.anchor }
__unstableSlotName={ '__unstable-block-tools-after' }
shift
>
<LinkControl
Expand Down
14 changes: 7 additions & 7 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,7 @@ describe( 'Links', () => {
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' );

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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' );

Expand Down

1 comment on commit 2f294e1

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 2f294e1.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4244485888
📝 Reported issues:

Please sign in to comment.