Fix: FontSize conflict between link and social-links blocks

Mayank-Tripathi32 commented 2 days ago

resolves #67133

What?

This PR addresses issue #67133 by adding the .wp-block-social-link-anchor class to the a:where(:not()) specifier in the CSS generated by the Gutenberg block editor.

Why?

Currently, the global font size settings override custom font sizes defined within the Social Links block. This issue arises due to the order of CSS rules being applied. To resolve this, the native block class .wp-block-social-link-anchor must be included in the CSS selector to prevent the global styles from interfering with the Social Links block styles.

How?

The PR updates the WP_Theme_JSON_Gutenberg file by modifying the link key value from:

'a:where(:not(.wp-element-button))'

to:

'a:where(:not(.wp-element-button, .wp-block-social-link-anchor))'

This change ensures that the global font size settings do not apply to Social Links, allowing the block-specific styles to take precedence.

Testing Instructions

Set Up the Environment:

Add the following configuration to your theme’s theme.json file to define a global font size for links:

{
 "styles": {
     "elements": {
         "link": {
             "typography": {
                 "fontSize": "var(--wp--preset--font-size--small)"
             }
         }
     }
 }
}

Open the Gutenberg Editor:
- Go to the WordPress admin panel.
- Open any post or page in the Gutenberg editor.
Insert a Social Links Block:
- Use the block inserter to add a "Social Links" block to the page.
Set a Custom Font Size for Social Links:
- Select the Social Links block.
- In the block settings panel, customize the font size for the links within the Social Links block.
Check the Font Size Behavior:
- Observe whether the font size applied to the Social Links block respects the custom size set in the block settings or is overridden by the global font size defined in theme.json.
Apply the PR Changes:
- Implement the changes in the PR by modifying the WP_Theme_JSON_Gutenberg file as follows:
```
'link' => 'a:where(:not(.wp-element-button, .wp-block-social-link-anchor))'
```
Retest the Behavior:
- Reload the Gutenberg editor.
- Repeat steps 3-5.
- Confirm that the Social Links block now respects the custom font size set in the block settings, unaffected by the global font size.
Verify No Regressions:
- Test other blocks (e.g., Paragraph, Heading) to ensure global font size settings still apply correctly to their links without unexpected behavior.

github-actions[bot] commented 2 days ago

:wave: Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Mayank-Tripathi32! In case you missed it, we'd love to have you join us in our Slack community.

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

github-actions[bot] commented 2 days ago

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
Labels found: First-time Contributor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions[bot] commented 2 days ago

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @CallMarl.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: CallMarl.

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>

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

WordPress / gutenberg