Make WordPress Core

Opened 4 weeks ago

Last modified 9 days ago

#61591 new defect (bug)

Multiple bundled themes: block editor style is added incorrectly

Reported by: poena's profile poena Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

When I open the post editor or the pattern editor I see the following JavaScript Warning in the editor:

index.js:177 twentyeleven-block-editor-style-css was added to the iframe incorrectly. 
Please use block.json or enqueue_block_assets to add styles to the iframe.
<link rel=​"stylesheet" id=​"twentyeleven-block-editor-style-css"
href=​"http:​/​/​66.local/​wp-content/​themes/​twentyeleven/​editor-blocks.css?ver=20220927" media=​"all">​

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/ is used to style the interface.

https://developer.wordpress.org/reference/hooks/enqueue_block_assets/ should be used to style blocks in the editors.

The CSS file seems to contain both.

Themes tested

The warning appears in:
Twenty Ten
Twenty Eleven
Twenty Twelve
Twenty Thirteen
Twenty Fourteen
Twenty Fifteen
Twenty Sixteen
Twenty Seventeen

Twenty Nineteen, 20, 21 do not have this warning.

Change History (7)

#1 @karmatosed
4 weeks ago

  • Keywords 2nd-opinion added

Adding that this needs feedback as to if we fix in each theme or add within the editor so will need a dev-feedback consideration. I am in two minds because this feels like something to fix in themes but is something would need across multiple so is a candidate to fix upstream. I am curious about others input here.

#2 @poena
4 weeks ago

I forgot to disable Gutenberg. The warning is only visible to me if I enable it.

The themes are using the wrong function to enqueue editor styles for blocks.
It has probably been wrong since the stylesheet was first enqueued, but the warning was added last year:
https://github.com/WordPress/gutenberg/pull/50091

#3 @sabernhardt
4 weeks ago

  • Milestone changed from Awaiting Review to Future Release
  • Version set to 6.3

Thanks for opening the ticket. We changed the hook for Twenty Twenty in #59086 and needed to go back for the other themes (unless the editor continues to support both hooks, as I think it should).

I wrote that Twenty Nineteen was another theme that needed a change, but I do not find the warning there today.

This ticket was mentioned in PR #6992 on WordPress/wordpress-develop by @mi5t4n.


4 weeks ago
#4

  • Keywords has-patch added

#5 @karmatosed
13 days ago

Just coming to this and seeing a PR I wanted to be sure about the approach forward.

  • The PR attached goes across multiple themes listed.
  • @sabernhardt, you don't, however, find the warning in Twenty Nineteen. I can also confirm I can't seem to see this in my testing.
  • As this was a change in hook the recommendation was to support both so we didn't have to solve in the themes.

I tend to lean into thinking supporting both might be better but coming to this a little out of conversation. It certainly feels better than fixing across so many as an initial feedback. Although sometimes it is worth it so I would like to know the full picture.

#6 @sabernhardt
13 days ago

  • Keywords needs-testing added; 2nd-opinion removed

I did not like the idea of deprecating (this implementation of) the hook that had been used before WP6.3.

However, enqueue_block_editor_assets adds these theme styles too early in the non-framed editor, before stylesheets such as block-library/theme.css (ticket:46080#comment:3). Changing the hook within each theme could fix that, in addition to simply following recommendations related to the iframe.

#7 @karmatosed
9 days ago

Thanks for that clarity @sabernhardt I was trying to find a path forward here and that seems to set it up.

Note: See TracTickets for help on using tickets.