Twenty Twenty-Five: editor style isn't enqueued

[wildworks]

Twenty Twenty-Five has ​`add_editor_style` function to enqueue styles for the editor.

However, since the parameter get_parent_theme_file_uri( 'assets/css/editor-style.css' ) generates a URL, not a relative path to the stylesheet file, the editor style isn't enqueued.

The correct code should be:

add_editor_style( 'assets/css/editor-style.css' );

[karmatosed]

I would like to get some testing on this specifically because older themes we have historically left with editor styles.

[wildworks]

Testing Instructions

Steps to Reproduce

1. Open a post.
2. Apply a link to the text.
3. 🐞 The underline style does not match that of the front end.

Expected Results

• ✅ The underline style matches that of the front end.
• ✅ Works in both the post editor and the site editor.
• ✅ I can override the CSS for the editor from my child theme by using twentytwentyfive_editor_style in my child theme.

[SirLouen]

Test Report

Description

This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63399/63399.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.4.6
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.4.6)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

Followed these instructions

Supplemental Artifacts

Frontend underline

Backend underline before patch:

Backend underline after patch:

[sabernhardt]

I did not experience the issue with my local (Windows) installation, but I found the error with a live site (nginx). The fifth style tag printed in the body of the post editor iframe gave a 401 Authorization Required error instead of the editor styles.

With the patch, a child theme can override the stylesheet with anything when it uses the twentytwentyfive_editor_style() function. The patch also adds the ability to override the editor styles by uploading another stylesheet at assets/css/editor-style.css within the child theme.

[audrasjb]

Moving for 6.8.2 consideration given this has high priority.

[audrasjb]

The proposed solution seems adequate.

Maybe it would be nice to test it using a child theme, with the following tests:

• Create a basic child theme and ensure the editor styles are loaded
• Create a child theme and try to override editor styles

[sandeepdahiya]

Maybe it would be nice to test it using a child theme, with the following tests:

• Create a basic child theme and ensure the editor styles are loaded
• Create a child theme and try to override editor styles

Test Report

Description

This report validates that the indicated patch works as expected.

Patch tested: Patch-63399

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Firefox 139.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Results

Test Case 1: Load Editor Styles in Child Theme

Objective:

• Verify that add_editor_style( 'assets/css/editor-style.css' ); loads editor styles from the child theme.

Steps:

• Created a child theme with functions.php and style.css.
• Created a file at assets/css/editor-style.css with a test background color.
• Used add_editor_style() in functions.php to load the editor stylesheet.
• Verified from the post editor (block editor).

Actual Result:
✅ ​Background color was applied in the editor as expected. (#fffbe6).

---

Test Case 2: Override Parent Editor Styles in Child Theme

Objective:

• Ensure the child theme's editor styles override the parent theme’s editor styles.

Steps:

• Verified that the parent theme has background styling in its editor style.
• Added overriding rule in the child theme editor-style.css using !important.
• Opened the post editor and inspected styles.

Actual Result:
✅ Child theme’s styles correctly overrode the parent theme's styles.

https://core.trac.wordpress.org/ticket/63399

[audrasjb]

Added a PR to run github actions against the proposed patch.

[SirLouen]

Replying to audrasjb:

The proposed solution seems adequate.

Maybe it would be nice to test it using a child theme, with the following tests:

• Create a basic child theme and ensure the editor styles are loaded
• Create a child theme and try to override editor styles

I was able to reproduce it back in the day, but now I'm trying to re-reproduce this again to check this, and I can't, as @sabernhardt suggested with the Windows installation.

Then I tried to reproduce in WP Playground and I was able.

I feel that more solid reproduction should be found before proceeding. @audrasjb try by yourself also, its pretty straightforward.

I'm running a clean wordpress-develop environment with the latest trunk patch, on a Chrome incognito, so it can't be a cache thing. Also tried in Firefox with no luck (locally). Once I move into Playground it seems to work (both in FF and Chrome)

Checking at the code in the browsers, the only difference I see is that in Playground this is not loading

At some point I thought the only difference I could recall is the fact that, by default, Playground only comes with 2025 and no more themes, while in my local there are many themes. I removed them all, without any changes either.

I can't think of any other element that could be interfering 🤔

[wildworks]

I think I understand why we can't reproduce this problem stably.

I thought that the add_editor_style() function only supported a relative file path as an argument, but it seems that's not the case.

• The stylesheet is added to the $editor_styles global variable via the add_editor_style() function: ​Source
• That stylesheet is passed to the block editor via the get_block_editor_theme_styles() function: ​Source

Looking at the implementation here, if the stylesheet string starts with http or https, it attempts to download the stylesheet via wp_remote_get. In other words, the add_editor_style() function has internal support for some stylesheets that are URLs.

I believe that the default Playground environment does not allow network access, which causes the stylesheet that starts with https to fail to download, resulting in the problem being reproduced:

​https://playground.wordpress.net/

On the other hand, in a Playground environment with network access enabled, the problem should not be reproduced:

​https://playground.wordpress.net/?networking=yes

Either way, it's a good idea to change it to a relative path to improve the performance of loading editor styles and ensure they load in all environments.

[sabernhardt]

In my case, I received a 401 error because the (sub)domain was protected with password authentication. When I removed the protection, the stylesheet returned a 200 response and printed the styles.

Documentation for add_editor_style() says to use names relative to theme root, so the theme should not have the full URL. However, if the errors are rare, that could make the change less urgent.

[sabernhardt]

T25.1: minimal child theme that inherits everything from Twenty Twenty-Five, including the editor stylesheet

[sabernhardt]

T25.2: child theme that overrides twentytwentyfive_editor_style() to replace the parent theme's editor stylesheet

[sabernhardt]

T25.3: child theme that adds an editor-style.css file in its own assets directory (this does not work before the patch)

[sabernhardt]

Testing the parent theme, Twenty Twenty-Five

• gave a 401 error on my live, protected site before the patch
• correctly printed the theme's stylesheet with a 1px underline after applying the patch
• correctly applied the theme's 1px underline in my local installation both before and after the patch

T25.1 (t25minimal) likewise had the 401 error on the live site before the patch, and it printed the correct stylesheet with the patch. (It was also correct before and after the patch on the local site.)

T25.2 (t25replace) used its stylesheet to make the underline 10 pixels thick both before and after the patch, whether local or live.

T25.3 (t25extra) gave the 401 error on the live site before the patch, and it used the parent theme's 1px underline on the local site. With the patch, both sites used the child theme's stylesheet with a 5px underline.

[wildworks]

Thanks everyone for testing. I think we're ready to commit the patch, but it's certainly less urgent since we've seen that the impact is more limited than we initially thought.

[audrasjb]

Thanks everyone for further testing this changeset.
It's indeed ready for commit.

[audrasjb]

In 60424:

Twenty Twenty-Five: Ensure Editor styles are enqueued.

This changeset replaces get_parent_theme_file_uri( 'assets/css/editor-style.css' ) with add_editor_style( 'assets/css/editor-style.css' ); to ensure a relative path to the stylesheet file is used, and not an URL. This prevents the editor stylesheet from not being enqueued on various edge cases.

Props wildworks, sabernhardt, dhruvang21, karmatosed, SirLouen, audrasjb, sandeepdahiya.
Fixes #63399.

[audrasjb]

Reopening for 6.8 backport consideration

[audrasjb]

In 60433:

Twenty Twenty-Five: Ensure Editor styles are enqueued.

This changeset replaces get_parent_theme_file_uri( 'assets/css/editor-style.css' ) with add_editor_style( 'assets/css/editor-style.css' ); to ensure a relative path to the stylesheet file is used, and not an URL. This prevents the editor stylesheet from not being enqueued on various edge cases.

Merges [60424] to the 6.8 branch.
Props wildworks, sabernhardt, dhruvang21, karmatosed, SirLouen, audrasjb, sandeepdahiya.
Fixes #63399.