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

Jump to bottom

Elements: Fix block instance element styles for links applying to buttons #59114

Merged
merged 3 commits into from
Feb 16, 2024
Merged

Elements: Fix block instance element styles for links applying to buttons #59114

merged 3 commits into from
Feb 16, 2024

Conversation

aaronrobertshaw
Copy link
Contributor

What?

Prevents link element styles from applying to buttons.

Why?

This brings it in line with link elements styled through theme.json and prevents conflicts between the link and button element styles.

How?

Apply the same selector to target only links and not buttons that theme.json uses i.e. a:not(.wp-element-button).

Testing Instructions

  1. On trunk, add a paragraph containing a link. and a button, within a group block
  2. Select the group block and apply a link color.
  3. Save the post and view on the frontend
  4. Note that the button got the custom link color while it didn't in the editor
  5. Switch to think PR and refresh the frontend, the button should now have the correct color
  6. Confirm unit tests are passing: npm run test:unit:php:base -- --filter WP_Block_Supports_Elements_Test

Screenshots or screencast

Before After
Screenshot 2024-02-16 at 3 00 57 pm Screenshot 2024-02-16 at 3 00 41 pm

@aaronrobertshaw aaronrobertshaw added [Type] Bug An existing feature does not function as intended Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Feb 16, 2024
@aaronrobertshaw aaronrobertshaw self-assigned this Feb 16, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 16, 2024 •
edited
Loading

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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

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

@github-actions GitHub Actions
Copy link

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/block-supports/elements.php
❔ phpunit/block-supports/elements-test.php

andrewserong
andrewserong approved these changes Feb 16, 2024
View reviewed changes
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Nice simple fix!

✅ Confirmed that on trunk, it works in the editor, but the site frontend's element styles override the Button color
✅ With this PR applied, the link color continues to work as expected but doesn't override the Button color

Trunk This PR
image image

LGTM! ✨

@ramonjd
Copy link
Member

ramonjd commented Feb 16, 2024

@andrewserong is too quick

Before

Screenshot 2024-02-16 at 4 30 51 pm

After

Screenshot 2024-02-16 at 4 31 37 pm

@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 16, 2024 •
edited
Loading

Flaky tests detected in dc898bb.
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/7926441795
📝 Reported issues:

@aaronrobertshaw aaronrobertshaw merged commit 01708f1 into trunk Feb 16, 2024
57 checks passed
@aaronrobertshaw aaronrobertshaw deleted the fix/block-instance-element-link-selector branch February 16, 2024 06:32
@aaronrobertshaw aaronrobertshaw mentioned this pull request Feb 16, 2024
Closed
@github-actions github-actions bot added this to the Gutenberg 17.8 milestone Feb 16, 2024
@aaronrobertshaw
Copy link
Contributor Author

Backport of these changes is available in WordPress/wordpress-develop#6127

aristath added a commit that referenced this pull request Feb 16, 2024
@aristath
Merge branch 'trunk' into try/fix-form-styles
de8f0e1 
* trunk: (78 commits)
  Components: Use `Element.scrollIntoView()` instead of `dom-scroll-into-view` (#59085)
  DataViews: Correctly display featured image that don't have image sizes (#59111)
  Elements: Fix block instance element styles for links applying to buttons (#59114)
  Allow editing of image block alt and title attributes in content only mode (#58998)
  Add toggle for grid types and stabilise Grid block variation. (#59051)
  Global Styles: fix console error in block preview (#59112)
  Navigation: Avoid using embedded records from fallback API (#59076)
  Refactor responsive logic for grid column spans. (#59057)
  Editor: Unify Mode Switcher component between post and site editor (#59100)
  Move StopEditingAsBlocksOnOutsideSelect to Root (#58412)
  Fix logic error in #58951 (#59101)
  Block-editor: Auto-register block commands (#59079)
  Fix small typo in rich text reference guide (#59089)
  Components: Add lint rules for theme color CSS var usage (#59022)
  Enter editing mode via Enter or Spacebar (#58795)
  Updating Storybook to v7.6.15 (latest) (#59074)
  CustomSelectControl (v1 & v2): Fix errors in unit test setup (#59038)
  Add stylelint rule to prevent theme CSS vars outside of wp-components (#59020)
  ColorPicker: Style without accessing InputControl internals (#59069)
  Pattern block: batch replacing actions (#59075)
  ...
@aaronrobertshaw aaronrobertshaw mentioned this pull request Feb 19, 2024
Closed
getdave pushed a commit that referenced this pull request Feb 20, 2024
@aaronrobertshaw @getdave
Elements: Fix block instance element styles for links applying to but…
7b589f9 
…tons (#59114)
@getdave
Copy link
Contributor

getdave commented Feb 20, 2024

I just cherry-picked this PR to the cherry-pick-beta-2 branch to get it included in the next release: 7b589f9

@getdave getdave removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 20, 2024
@getdave getdave mentioned this pull request Feb 20, 2024
Merged
youknowriad pushed a commit that referenced this pull request Feb 20, 2024
@aaronrobertshaw @youknowriad
Elements: Fix block instance element styles for links applying to but…
4060148 
…tons (#59114)
@aaronrobertshaw aaronrobertshaw mentioned this pull request Feb 23, 2024
Closed
@getdave getdave added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andrewserong andrewserong andrewserong approved these changes

@tellthemachines tellthemachines Awaiting requested review from tellthemachines

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

Assignees

@aaronrobertshaw aaronrobertshaw

Labels
Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 17.8
Development

Successfully merging this pull request may close these issues.
4 participants
@aaronrobertshaw @ramonjd @getdave @andrewserong