Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link Control - Add support for text only labels #47930

Merged
merged 6 commits into from
Feb 22, 2023
Merged

Link Control - Add support for text only labels #47930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23d7547
feat(link-control): show text only labels
abhi3315 Feb 9, 2023
01094a1
chore(link-control): change setting button title
abhi3315 Feb 9, 2023
9f0c6f2
fix(link-control): update tests
abhi3315 Feb 9, 2023
16d9149
chore(link-control): use editor top level interface css class to add …
abhi3315 Feb 13, 2023
3b42811
fix(link-control): reduce show-icon-labels css specificity
abhi3315 Feb 14, 2023
9f2673e
fix: pass slot in off-canvas-editor and navigation-link
abhi3315 Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/link-control/settings-drawer.js
View file
Open in desktop
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' ) }
getdave marked this conversation as resolved.
Show resolved Hide resolved
aria-controls={ settingsDrawerId }
/>
<MaybeAnimatePresence>
Expand Down
26 changes: 18 additions & 8 deletions packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
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);
}
}
}
}
getdave marked this conversation as resolved.
Show resolved Hide resolved

// 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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