WP core 6.3 breaks javascript/block-editor.js

[Debesyla]

I have no idea what happens as I can't see any errors in console, but it breaks down somehwere, I guess, in this part:

if (!tailwindTypographyClasses.every(
  (className) => classList.contains(className)
)) {
  classList.add(...tailwindTypographyClasses);
}

As the classes are not applied to the .wp-block-post-content element.

Working fine in wordpress version 6.2.2., not working with 6.3.

Sorry that I am unable to better pinpoint where it breaks or suggest any fixes.

[gregsullivan]

Thanks for posting this, and sorry for the delay in responding—I was away on vacation this past week.

This is the source of the issue:

WordPress/gutenberg#48286

I have a proof-of-concept fix working, and I may have time to get it committed tomorrow. Unfortunately, it's not a one- or two-line fix; it involves a handful of minor changes.

I'm going to update this repository, then I'll outline how to update your themes in this issue. I'll also create release notes describing the fix in detail.

I'd guess it will take around 5–10 minutes to update a theme to support block editor styles in WordPress 6.3 once the documentation is complete.

The issue is caused by the move to include the block editor as an iframe; this forces us to move the script that targets the editor classes to inside the iframe as well. There are some complicating factors like the script now being included twice (inside and outside of the iframe) that we also need to take into account.

[gregsullivan]

I've completed and tested the fix locally, but I won't have time tonight to commit the changes to this repository, as I'll need to clean up some comments and write commit messages.

The most likely timeframe for me getting to this tomorrow is 3–5pm PT. After committing the changes to this repository, I'll write up instructions for updating existing themes.

If anyone wants to get a head start with what I have as of right now, this is from my development version of the theme generator:

iframe-fix.zip

[gregsullivan]

Here is the commit fixing this issue:

55a0316

To apply these changes to an existing theme, you can do the following:

1. Add the tailwind-typography-classes.js file to your ./javascript folder.

2. If you haven't modified your block-editor.js file, overwrite the old version in your theme with the new one. Otherwise, do the following:

   • Change the first line from /* global wp, tailwindTypographyClasses */ to /* global wp */
   • Remove these lines:

     /*
      * Add the necessary Tailwind Typography classes to the block editor.
      * For details, please see the comments below.
      */
     addTypographyClasses();

   • Remove the entirety of the code specific to Tailwind Typography beginning with the Tailwind Typography support from _tw comment

3. In your package.json file, change the development:esbuild script to the following:

   "development:esbuild": "npx esbuild ./javascript/script.js ./javascript/block-editor.js ./javascript/tailwind-typography-classes.js --target=esnext --bundle --outdir=./theme/js --out-extension:.js=.min.js",

4. In functions.php, replace this block:

   https://github.com/gregsullivan/_tw/blob/65a54c6c82a0220cd535be7bb0efd7ef26f624d4/theme/functions.php#L173C1-L185C58

   with this one:

   https://github.com/gregsullivan/_tw/blob/55a031600777b3bdcb1116b750ee7ac74c2eacf6/theme/functions.php#L173C1-L193C71

Please let me know if you run into any issues with this procedure, and I'll amend it as appropriate!

[Debesyla]

Working perfectly! Thank you very much!!

[gregsullivan]

Awesome, thanks for letting me know! I'm going to close this, but I'll post another comment with a link to the release notes once I've completed them.