Fix: Remove font weight on toolbar tab button - #61254

[hbhalodia]

What?

• Issue - Remove font weight on toolbar tab button #61254

Why?

• This PR would resolve the consistency of the font-weight in the block toolbar.

How?

• This PR removes the specifically adding the Font Weight - 500 to the Custom HTML block toolbar.

Testing Instructions

• Open the site.
• Edit any page
• Add the Custom HTML block
• Inspect the Toolbar Button HTML and Preview, you can see the font weight is now 400.

Testing Instructions for Keyboard

• NIL

Screenshots or screencast

• Before

• After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: hbhalodia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

This PR makes sense to me, but I would suggest further improvements.

These two buttons on the HTML block toolbar are the only elements with the CSS class .components-tab-button. Additionally, this CSS class applies styles to the internal span elements, but these two buttons do not have span elements.

In other words, you should be able to delete everything below.

gutenberg/packages/components/src/toolbar/toolbar/style.scss

Lines 92 to 102 in 8cf7f34

	// @todo We should extract the tabs styles to the tabs component itself
	&.components-tab-button {
	font-weight: 500;
	span {
	display: inline-block;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	}
	}

gutenberg/packages/block-library/src/html/edit.js

Line 48 in 8cf7f34

className="components-tab-button"

gutenberg/packages/block-library/src/html/edit.js

Line 55 in 8cf7f34

className="components-tab-button"

[hbhalodia]

Thanks @t-hamano, I would make the changes asap.

[jasmussen]

Good PR 👍 👍

[hbhalodia]

Hi @t-hamano, I have reworked on the PR and updated it based on your inputs.

Thank You.

[t-hamano]

LGTM! Thanks for the update.

Before:

After:

Normally we would need to update CHANGELOG when changes are made to the components package, but for this PR we're just removing styles that are no longer in use, so I think we don't need to.