[wp-trac] [WordPress Trac] #61591: Multiple bundled themes: block editor style is added incorrectly
WordPress Trac
noreply at wordpress.org
Tue Oct 15 09:47:55 UTC 2024
#61591: Multiple bundled themes: block editor style is added incorrectly
-------------------------------------+---------------------
Reporter: poena | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: 6.7
Component: Bundled Theme | Version: 6.3
Severity: normal | Resolution:
Keywords: has-patch needs-testing | Focuses:
-------------------------------------+---------------------
Comment (by 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 [https://developer.wordpress.org
/block-editor/reference-guides/packages/packages-env/ wp-env]:
{{{
#!sh
# 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.
{{{
#!js
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 [https://www.npmjs.com/package/puppeteer Puppeteer] and ran
the script:
{{{
#!sh
# 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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:
{{{
#!sh
# 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.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/61591#comment:17>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list