Multiple bundled themes: block editor style is added incorrectly

[poena]

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.

[karmatosed]

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.

[poena]

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

[sabernhardt]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/61591

[karmatosed]

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.

[sabernhardt]

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.

[karmatosed]

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

[sabernhardt]

Twenty Nineteen would need to switch the hook for Customizer-based color overrides from twentynineteen_editor_customizer_styles. (I missed that it only gives the warning when the theme's Primary Color is changed.)

[chaion07]

Thanks @poena for reporting this. We reviewed this Ticket during a recent bug-scrub session. Based on the feedback received we would request @mi5t4n to follow up on the requested changes. We would also be following up on this Ticket in the next few days within the Beta stage so that we can update the milestone accordingly.

Thank you.

Props to @pratiklondhe & @mi5t4n

Cheers!

[mi5t4n]

@chaion07 Thank you for the update, will make the requested changes ASAP.

[mi5t4n]

@chaion07 Added the conditional hook check to the Twenty Nineteen theme as well.

[chaion07]

Thanks @poena for reporting this. We followed this Ticket up during another recent bug-scrub session. Based on the feedback received we are making the following changes:

1. We are removing the changes-request keyword
2. We are adding the needs-testing keyword
3. The requested changes have been added in the recent commit

Thanks.

Props to @mi5t4n and @pratiklondhe

Cheers!

[rcorrales]

I tested all existing themes using a headless browser and checked for the presence of messages in the browser console. Steps taken:

1. Set up a fresh environment using ​wp-env:

   > wp-env start
   ...
   > wp-env run cli wp core version
   ℹ Starting 'wp core version' on the cli container.
   
   6.6.2
   ✔ Ran `wp core version` in 'cli'. (in 0s 485ms)
   

(The environment should be available ​http://localhost:8888 and ​http://localhost:8889)

2. Created a test-themes.js Node.js script that will:
   • Get a list of all themes.
   • Launch a headless browser (Puppeteer) and log in using the default wp-env credentials.
   • Iterate and activate each theme.
   • Navigate to the block editor of the first post.
   • Watch for console messages that match the block-editor.js location and log them.

     const puppeteer = require("puppeteer");
     const { execSync } = require("child_process");
     
     const siteUrl = "http://localhost:8888";
     const loginUrl = `${siteUrl}/wp-login.php`;
     const editorUrl = `${siteUrl}/wp-admin/post.php?post=1&action=edit`;
     const userLogin = "admin";
     const password = "password";
     
     // Get the list of themes using wp-env
     function getThemeList() {
       try {
         const output = execSync(
           `wp-env run cli wp theme list --format=json --fields=name 2>/dev/null`
         );
         return JSON.parse(output);
       } catch (error) {
         console.error("Error getting theme list:", error);
         return [];
       }
     }
     
     // Activate a theme using wp-env
     function activateTheme(themeName) {
       try {
         execSync(`wp-env run cli wp theme activate ${themeName} 2>/dev/null`);
         console.log(`${themeName}: Theme activated`);
       } catch (error) {
         console.error(`Error activating theme ${themeName}:`, error);
       }
     }
     
     (async () => {
       // Get list of all themes
       const themes = getThemeList();
     
       if (themes.length === 0) {
         console.error("No themes found.");
         return;
       }
     
       // Launch a headless browser instance
       const browser = await puppeteer.launch({ headless: true });
       const page = await browser.newPage();
     
       // Go to login page
       await page.goto(loginUrl);
       await page.waitForSelector("#user_login");
     
       // Enter default username and password
       await page.type("#user_login", userLogin);
       await page.type("#user_pass", password);
     
       // Click the login button
       await Promise.all([
         page.click("#wp-submit"),
         page.waitForNavigation({ waitUntil: "networkidle0" }),
       ]);
     
       // Listen to console messages for warnings from block-editor.js
       page.on("console", (msg) => {
         if (msg.location().url.includes("block-editor.js")) {
           console.log(`❌ BLOCK EDITOR WARNING: ${msg.text()}`);
         } else if (msg.type() === "warn") {
           console.log(`Other warning: ${msg.text()}`);
         }
       });
     
       // Iterate through each theme, activate it, and navigate to the block editor
       for (const theme of themes) {
         activateTheme(theme.name);
         console.log(`${theme.name}: Navigating to editor`);
         await page.goto(editorUrl);
         await page.waitForSelector(".block-editor");
     
         console.log(`${theme.name}: Finished testing\n`);
       }
     
       // Close the browser
       await browser.close();
     })();
     

3. Installed ​Puppeteer and ran the script:

   > npm install puppeteer
   > node test-themes.js
   

Output:

twentyeleven: Theme activated
twentyeleven: Navigating to editor
❌ BLOCK EDITOR WARNING: 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. JSHandle@node
twentyeleven: Finished testing

twentyfifteen: Theme activated
twentyfifteen: Navigating to editor
❌ BLOCK EDITOR WARNING: twentyfifteen-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentyfifteen: Finished testing

twentyfourteen: Theme activated
twentyfourteen: Navigating to editor
❌ BLOCK EDITOR WARNING: twentyfourteen-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentyfourteen: Finished testing

twentynineteen: Theme activated
twentynineteen: Navigating to editor
twentynineteen: Finished testing

twentyseventeen: Theme activated
twentyseventeen: Navigating to editor
❌ BLOCK EDITOR WARNING: twentyseventeen-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentyseventeen: Finished testing

twentysixteen: Theme activated
twentysixteen: Navigating to editor
❌ BLOCK EDITOR WARNING: twentysixteen-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentysixteen: Finished testing

twentyten: Theme activated
twentyten: Navigating to editor
❌ BLOCK EDITOR WARNING: twentyten-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentyten: Finished testing

twentythirteen: Theme activated
twentythirteen: Navigating to editor
❌ BLOCK EDITOR WARNING: twentythirteen-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentythirteen: Finished testing

twentytwelve: Theme activated
twentytwelve: Navigating to editor
❌ BLOCK EDITOR WARNING: twentytwelve-block-editor-style-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe. JSHandle@node
twentytwelve: Finished testing

twentytwenty: Theme activated
twentytwenty: Navigating to editor
twentytwenty: Finished testing

twentytwentyfour: Theme activated
twentytwentyfour: Navigating to editor
twentytwentyfour: Finished testing

twentytwentyone: Theme activated
twentytwentyone: Navigating to editor
twentytwentyone: Finished testing

twentytwentythree: Theme activated
twentytwentythree: Navigating to editor
twentytwentythree: Finished testing

twentytwentytwo: Theme activated
twentytwentytwo: Navigating to editor
twentytwentytwo: Finished testing

4. Applied the patch and tested it again:

   > cd $(wp-env install-path 2>/dev/null)/WordPress/
   > curl https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/6992.patch | patch -p2
   > cd -
   > node test-themes.js
   

No more block-editor-related warnings in the output:

twentyeleven: Theme activated
twentyeleven: Navigating to editor
twentyeleven: Finished testing

twentyfifteen: Theme activated
twentyfifteen: Navigating to editor
twentyfifteen: Finished testing

twentyfourteen: Theme activated
twentyfourteen: Navigating to editor
twentyfourteen: Finished testing

twentynineteen: Theme activated
twentynineteen: Navigating to editor
twentynineteen: Finished testing

twentyseventeen: Theme activated
twentyseventeen: Navigating to editor
twentyseventeen: Finished testing

twentysixteen: Theme activated
twentysixteen: Navigating to editor
twentysixteen: Finished testing

twentyten: Theme activated
twentyten: Navigating to editor
twentyten: Finished testing

twentythirteen: Theme activated
twentythirteen: Navigating to editor
twentythirteen: Finished testing

twentytwelve: Theme activated
twentytwelve: Navigating to editor
twentytwelve: Finished testing

twentytwenty: Theme activated
twentytwenty: Navigating to editor
twentytwenty: Finished testing

twentytwentyfour: Theme activated
twentytwentyfour: Navigating to editor
twentytwentyfour: Finished testing

twentytwentyone: Theme activated
twentytwentyone: Navigating to editor
twentytwentyone: Finished testing

twentytwentythree: Theme activated
twentytwentythree: Navigating to editor
twentytwentythree: Finished testing

twentytwentytwo: Theme activated
twentytwentytwo: Navigating to editor
twentytwentytwo: Finished testing

---

✅ The PR seems to fix the browser console warnings across all themes.

[poena]

The concern is not only the warning, the styles should be unchanged and working, and this needs to be tested.

In Twenty Eleven, the editor-blocks.css contains styles for both the interface and for the blocks, to enqueue both correctly, the file would need to be split.

enqueue_block_assets for blocks
enqueue_block_editor_assets for the interface

[SirLouen]

Replying to poena:

The concern is not only the warning, the styles should be unchanged and working, and this needs to be tested.

In Twenty Eleven, the editor-blocks.css contains styles for both the interface and for the blocks, to enqueue both correctly, the file would need to be split.

enqueue_block_assets for blocks
enqueue_block_editor_assets for the interface

Can you provide more specific test info?

I get your idea: The patch is only silencing the original warning, but it’s not addressing the real problem, but I would like to have some examples to test of the real problem.