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

fix: update CSS selector used to fix linked header style editor previews #1561

Merged
merged 1 commit into from
Jul 10, 2024

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

In WordPress 6.6, there are a couple visual discrepancies in the Post Inserter in the Newsletter editor compared to WP 6.5; this PR fixes one, but also captures the other one since it's noticeable when reviewing this PR:

Change one:
In WP 6.5, text blocks in the Newsletter editor like headings and paragraphs have the following CSS classes:

  • block-editor-rich-text__editable
  • block-editor-block-list__block
  • wp-block
  • wp-elements-[#]
  • wp-block-[name]
  • rich-text

But in 6.6, two are removed, leaving:

  • block-editor-block-list__block
  • wp-block
  • wp-elements-[#]
  • wp-block-[name]

I don't get why this changed, since the classes are still used in Gutenberg, but this causes links in headings -- like the linked headings in the Post Inserter block -- not to use the correct link colour by default (black), and not to pick up custom Heading colours in the editor preview. For both, this is because we're using the block-editor-rich-text__editable class to make sure links in headers inherit the colour from the header.

Change two:
The CSS reset classes in the editor got a little more specific in WP 6.6. It's specifically noticeable in what the Post Inserter is picking up style-wise on the body tag, and both seem to be improvements: it gets rid of the grey background that the Post Inserter was picking up from WP admin, and it makes the font size a little more true to the sent newsletter. This is not something that needs to be "fixed", but it explains some extra discrepancies between the 6.5 and 6.6 screenshots below.

See: 1207594452716169-as-1207759233535677

How to test the changes in this Pull Request:

  1. Start on a test site running WP 6.6 RC, and create a new Newsletter.
  2. Add two Post Inserter blocks. On one, change the Heading and Paragraph colours in the sidebar settings.
  3. Note that in the editor the headers are blue by default, and changing their colour won't change them. This differs from the newsletter preview, and how it looks when sent.

image

  1. Apply this PR and run npm run build.
  2. Confirm that the newsletter preview looks better:

image

  1. Test the PR on a site running WP 6.5 and confirm it doesn't change how the link colour looks compared to trunk.

On trunk:

image

With this PR:

image

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford
Copy link
Contributor Author

Thanks @dkoo!

@laurelfulford laurelfulford merged commit 2282de7 into release Jul 10, 2024
12 checks passed
@laurelfulford laurelfulford deleted the hotfix/header-css-class branch July 10, 2024 23:30
matticbot pushed a commit that referenced this pull request Jul 10, 2024
## [2.19.2](v2.19.1...v2.19.2) (2024-07-10)

### Bug Fixes

* update header link selector for WP 6.6 ([#1561](#1561)) ([2282de7](2282de7))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.19.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Jul 10, 2024
# [2.20.0-alpha.4](v2.20.0-alpha.3...v2.20.0-alpha.4) (2024-07-10)

### Bug Fixes

* update header link selector for WP 6.6 ([#1561](#1561)) ([2282de7](2282de7))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.20.0-alpha.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants