Fix Site title: Different markup in the editor and on the frontend #29021
Conversation
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @aurooba! 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. |
github-actions
bot
added
the
First-time Contributor
gziolo
added
[Block] Site Title
|
Looks like the |
There was a problem hiding this comment.
I have tested this to the best of my ability and everything works as I would expect.
The markup in the editor and front looks correct to me and I saw no issues when I changed width, alignment or element (Heading level or paragraph).
Tested with the theme TT1 Blocks and the typography setting in the experimental-theme.json is applied to .wp-block-site-title, .wp-block-site-title > a and
.editor-styles-wrapper .wp-block-site-title, .editor-styles-wrapper .wp-block-site-title > a
(Before the pr, this was applied to .wp-block-site-title and .editor-styles-wrapper .wp-block-site-title respectively)
|
The PR has been updated to resolve the conflict with the latest update to the |
|
Thanks for the grammar check @carolinan. I missed that comma 😅 |
|
Congratulations on your first merged pull request, @aurooba! 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! |
| @@ -20,6 +20,7 @@ | |||
| "fontSize": true, | |||
| "lineHeight": true, | |||
| "__experimentalFontFamily": true, | |||
| "__experimentalSelector": ".wp-block-site-title, .wp-block-site-title > a", | |||
There was a problem hiding this comment.
Why do we target the "inner a" here?
There was a problem hiding this comment.
The goal is to change the colour of the site title, which is an anchor tag wrapped in a heading.
By default, an anchor tag does not inherit its parent's colour settings if an href attribute is present. So to change the appearance of the title we target the inner anchor.
Or well, that's what was done here. :)
There was a problem hiding this comment.
By default, an anchor tag does not inherit its parent's colour settings if an href attribute is present. So to change the appearance of the title we target the inner anchor.
It does break font size and transform styles for the block though. I'm reverting that here #30558 to solve these. Maybe we can just add color: inherit for the link in the style of the block?
There was a problem hiding this comment.
In my tests though, the color is applied properly even with the revert because it actually applies the link color (which is the right thing to do there)
There was a problem hiding this comment.
I also tested the color in the revert and worked well.
Description
I've added the
__experimentalSelectorsetting toblock.jsonto specifically target both the heading and anchor tag inside the Site Title Block. To go along with that, I've wrapped theRichTextcomponent in the heading tag with its props, instead of assigning the heading tag and props to theRichTextcomponent. TheRichTextcomponent is now an anchor tag to accurately reflect the same semantics and styling as the front-end.I also tested #22483, and that error doesn't seem to exist anymore (tested it with the Twenty Twenty Blocks themes).
How has this been tested?
I tested changing the font size, colour, and heading type through Global Styles in the
By Block Typetab, and checked to see it was correctly reflected on the front end.Types of changes
Block registration includes the experimentalSelector value.
Non-breaking change to fix #28997
Checklist: