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.

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

Add 'wp-block-button__link' to the link selector's ':not' collection #42242

Closed
wants to merge 1 commit into from

Conversation

pbking
Copy link
Contributor

@pbking pbking commented Jul 7, 2022

What?

Add wp-block-button__link to the link selector's :not collection

Why?

In #40260 the .wp-element-button class was introduced and link element styles were applied to all a anchor elements but excluded those with that class.
However the class is only introduced on new content (or when old content is re-serialized). So any Button Blocks created prior to that change have the link styles applied.

Expected:
image

Before:
image
image

After:
image
image

How?

This adds the .wp-block-button__link to the anchor selector excluding any button that has that class from the anchor styles.

Testing Instructions

Load a site that has content created prior to the #40260 change. (I imported the content from this site and used this page).

Configure your theme with a link color via theme.json :

{
	"styles": {
		"elements": {
			"link": {
				"color": {
					"text": "green"
				}
			}
		}
	}
}	

Note that before this change the button block is rendered with the color assigned to the link element.
Apply the change and note that the button block is no longer rendered with the color assigned to the link element.

@pbking pbking requested a review from spacedmonkey as a code owner July 7, 2022 16:46
Copy link
Contributor

@matiasbenedetto matiasbenedetto left a comment

Choose a reason for hiding this comment

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

Thanks for the context in the PR description.
With this change, both legacy and new buttons and links work as expected. LGTM

@pbking
Copy link
Contributor Author

pbking commented Jul 12, 2022

Looks like some unit tests need to change for this to pass.

@@ -31,7 +31,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
* @var string[]
*/
const ELEMENTS = array(
'link' => 'a:not(.wp-element-button)',
'link' => 'a:not(.wp-element-button, .wp-block-button__link)',
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't this be like this instead? 🤔

Suggested change
'link' => 'a:not(.wp-element-button, .wp-block-button__link)',
'link' => 'a:not(.wp-element-button):not(.wp-block-button__link)',

@pbking
Copy link
Contributor Author

pbking commented Aug 2, 2022

This seems to have been addressed by this change in a simpler/better way. Closing this in preference to that.

@pbking pbking closed this Aug 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants