Link Control - Add support for text only labels #47930

abhi3315 · 2023-02-09T13:25:40Z

What?

Shows the text labels only in the Link Control popover.

Why?

#47545
When the Show button text labels toggle is enabled from the Gutenberg preferences, LinkControl is only showing the setting icon. This PR will display the text label or icon in LinkControl according to preferences.

How?

Getting the showIconLabels from the preferences data store.
Add the show-icon-labels CSS class to the component accordingly to hide or display the icon/text.

Testing Instructions

Open the Gutenberg preferences and toggle the Show button text labels.
Check if the icon and text labels are showing accordingly in the LinkControl.

Testing Instructions for Keyboard

Screenshots or screencast

github-actions · 2023-02-09T13:26:06Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @abhi3315! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

getdave · 2023-02-09T14:28:06Z

@abhi3315 Thank you for the PR. I have looped in @tellthemachines who has implemented labels like this before and may have a view.

I think it's safe to shorten the toggle text to just Link Settings as the aria- attributes probably do enough to communicate the function of the control.

packages/block-editor/src/components/link-control/settings-drawer.js

tellthemachines

Thanks for picking this up! I left some suggestions below.

tellthemachines · 2023-02-13T03:50:30Z

packages/block-editor/src/components/link-control/index.js

+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-post',


This is a block editor component, so it gets used across both post and site editors. Unfortunately the text label settings are specific to each editor, so using edit-post preferences here means that if the preference is set differently in the site editor, this component won't reflect it there.

Great spot @tellthemachines. Some more context on @abhi3315. Basically the block editor package is designed to be used standalone outside of "WordPress". Therefore we can't query anything like core store or even preferences namespaces.

To work around this we often create editor "settings" which we:

set in the editor instances (post, widgets and site) - passing through to the block editor component

consume within the block editor package (e.g. here in Link Control) to access the data

And example of this can be found in

packages/edit-site/src/components/block-editor/index.js

If you do it like this you could have a single setting for the text labels passed into the block editor. Then you could consume that value.

Does that sound suitable @tellthemachines?

Thanks @getdave @tellthemachines for explaining to me thoroughly. 🙇🏻‍♂️

In this case we don't need to create an editor setting, because the classname we hook the styles onto is being applied to the interface component in both the post and the site editor, so we can make this change just by adding some CSS ✨

tellthemachines · 2023-02-13T03:53:34Z

packages/block-editor/src/components/link-control/index.js

@@ -283,7 +294,9 @@ function LinkControl( {
 		<div
 			tabIndex={ -1 }
 			ref={ wrapperNode }
-			className="block-editor-link-control"
+			className={ classnames( 'block-editor-link-control', {


The classname doesn't need to be added here, because it's already added at the top level of the interface skeleton.

Instead, I'd suggest re-structuring the CSS below so it takes advantage of that top-level classname, similarly to the block toolbar CSS.

abhi3315 · 2023-02-13T10:06:21Z

Thanks, @tellthemachines for the feedback.
I have made the changes. Please review it again.

tellthemachines

Thanks for the update, it's working well now! Just a little niggle about the CSS structure, but otherwise looks OK!

tellthemachines · 2023-02-14T01:03:48Z

packages/block-editor/src/components/link-control/style.scss

@@ -22,6 +23,22 @@ $preview-image-height: 140px;
 		width: 90vw;
 		max-width: $modal-min-width;
 	}
+
+	.show-icon-labels & {
+		#{$root}__tools {


We don't need it to be this specific, it's fine to nest .components-button.has-icon directly under .show-icon-labels &. The decreased specificity also has the advantage that if we ever add another icon button to the link control, text label should just work for it out of the box 🙂

abhi3315 · 2023-02-14T06:11:16Z

@tellthemachines I have made the changes. Please review it again.

getdave · 2023-02-21T09:35:21Z

The way I do this is.

checkout trunk and update it.
switch to my branch
git rebase trunk
resolve conflicts (you may need git rebase --continue
you should end up with a branch with your changes played on top of the changes in trunk.

packages/block-editor/src/components/link-control/style.scss

draganescu

In this shape the code of the PR is great. Tested and works 🚢 it

getdave · 2023-02-22T09:27:23Z

Re-running the failed e2e tests here. I'd like to be sure that we didn't introduce any regressions especially as the failures were regarding modal focus management. There's an outside chance that adding the slot may have caused an unexcepted knock on effect.

Let's see. Would also be good to get a 👍 on this from @tellthemachines.

getdave · 2023-02-22T14:03:12Z

Looks like test failures should be fixed by #48236. Let's rebase against trunk again to bring this one in and see if it fixes the test for us.

…the label text

abhi3315 · 2023-02-22T15:13:26Z

@getdave I have rebased the branch.

abhi3315 · 2023-02-22T15:35:11Z

@getdave All the tests are cleared. 🎉

github-actions · 2023-02-22T15:52:48Z

Congratulations on your first merged pull request, @abhi3315! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

getdave · 2023-02-22T15:52:54Z

Congrats on this PR @abhi3315 👏 You can check trunk now to see it available.

abhi3315 requested a review from getdave as a code owner February 9, 2023 13:25

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Feb 9, 2023

abhi3315 mentioned this pull request Feb 9, 2023

Link Control - Add support for text only labels instead of relying on icons alone to communicate meaning. #47545

Closed

abhi3315 changed the title ~~feat(link-control): show text only labels~~ Link Control - Add support for text only labels Feb 9, 2023

getdave requested a review from tellthemachines February 9, 2023 14:26

getdave assigned abhi3315 Feb 9, 2023

getdave added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [a11y] Labelling labels Feb 9, 2023

abhi3315 requested review from ntwb, nerrad and ajitbohra as code owners February 9, 2023 16:14

getdave reviewed Feb 9, 2023

View reviewed changes

packages/block-editor/src/components/link-control/settings-drawer.js Show resolved Hide resolved

tellthemachines reviewed Feb 13, 2023

View reviewed changes

abhi3315 requested review from tellthemachines and getdave and removed request for ntwb, ajitbohra, nerrad, tellthemachines and getdave February 13, 2023 10:05

tellthemachines reviewed Feb 14, 2023

View reviewed changes

abhi3315 requested a review from tellthemachines February 14, 2023 06:11

abhi3315 requested review from spacedmonkey and kevin940726 as code owners February 14, 2023 06:53

getdave requested review from tellthemachines, MaggieCabrera, scruffian, draganescu and ajlende February 21, 2023 09:42

getdave reviewed Feb 21, 2023

View reviewed changes

packages/block-editor/src/components/link-control/style.scss Show resolved Hide resolved

getdave mentioned this pull request Feb 21, 2023

Button: Standardise text labels for icon buttons #48272

Open

draganescu approved these changes Feb 22, 2023

View reviewed changes

abhi3315 added 6 commits February 22, 2023 20:24

feat(link-control): show text only labels

23d7547

chore(link-control): change setting button title

01094a1

fix(link-control): update tests

9f0c6f2

chore(link-control): use editor top level interface css class to add …

16d9149

…the label text

fix(link-control): reduce show-icon-labels css specificity

3b42811

fix: pass slot in off-canvas-editor and navigation-link

9f2673e

abhi3315 force-pushed the feat/link-control-show-labels-only branch from 065eae1 to 9f2673e Compare February 22, 2023 14:57

getdave merged commit 2f294e1 into WordPress:trunk Feb 22, 2023

github-actions bot added this to the Gutenberg 15.3 milestone Feb 22, 2023

abhi3315 deleted the feat/link-control-show-labels-only branch February 22, 2023 15:55

abhi3315 mentioned this pull request Feb 23, 2023

Keep the Link Control settings drawer persistent #47989

Draft

jorgefilipecosta mentioned this pull request Mar 1, 2023

Fix: Custom link UI does appears outside canvas on the sidebar navigation. #48633

Merged

femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023

femkreations mentioned this pull request Jul 13, 2023

[HelpHub]: Link Control Page WordPress/Documentation-Issue-Tracker#970

Open

17 tasks

priethor removed the [a11y] Labelling label Jul 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Link Control - Add support for text only labels #47930

Link Control - Add support for text only labels #47930

abhi3315 commented Feb 9, 2023

github-actions bot commented Feb 9, 2023

getdave commented Feb 9, 2023

tellthemachines left a comment

tellthemachines Feb 13, 2023

getdave Feb 13, 2023

abhi3315 Feb 13, 2023

tellthemachines Feb 14, 2023

tellthemachines Feb 13, 2023

abhi3315 commented Feb 13, 2023

tellthemachines left a comment

tellthemachines Feb 14, 2023

abhi3315 commented Feb 14, 2023 •

edited

Loading

getdave commented Feb 21, 2023

draganescu left a comment

getdave commented Feb 22, 2023

getdave commented Feb 22, 2023

abhi3315 commented Feb 22, 2023

abhi3315 commented Feb 22, 2023

github-actions bot commented Feb 22, 2023

getdave commented Feb 22, 2023

Link Control - Add support for text only labels #47930

Link Control - Add support for text only labels #47930

Conversation

abhi3315 commented Feb 9, 2023

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Feb 9, 2023

getdave commented Feb 9, 2023

tellthemachines left a comment

Choose a reason for hiding this comment

tellthemachines Feb 13, 2023

Choose a reason for hiding this comment

getdave Feb 13, 2023

Choose a reason for hiding this comment

abhi3315 Feb 13, 2023

Choose a reason for hiding this comment

tellthemachines Feb 14, 2023

Choose a reason for hiding this comment

tellthemachines Feb 13, 2023

Choose a reason for hiding this comment

abhi3315 commented Feb 13, 2023

tellthemachines left a comment

Choose a reason for hiding this comment

tellthemachines Feb 14, 2023

Choose a reason for hiding this comment

abhi3315 commented Feb 14, 2023 • edited Loading

getdave commented Feb 21, 2023

draganescu left a comment

Choose a reason for hiding this comment

getdave commented Feb 22, 2023

getdave commented Feb 22, 2023

abhi3315 commented Feb 22, 2023

abhi3315 commented Feb 22, 2023

github-actions bot commented Feb 22, 2023

getdave commented Feb 22, 2023

abhi3315 commented Feb 14, 2023 •

edited

Loading