[wp-trac] [WordPress Trac] #53494: Styles not applied to block using theme.json with lazy loading styles enabled

Wed Jun 23 23:38:05 UTC 2021

#53494: Styles not applied to block using theme.json with lazy loading styles
enabled
--------------------------+-----------------------------
 Reporter:  walbo         |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 When adding styles trough `theme.json` it is added in `<head />` of your
 document. With lazy loading styles enabled the block styles is added in a
 `<style>` tag below the content, and overwrites your `theme.json` style.

 The block styles need to be added to the document before the `theme.json`
 styles, so the `theme.json` overwrites the block style.

 Backend and lazy loading disabled works as expected.

 Steps to reproduce:
 1. Create a block: `npx @wordpress/create-block wp-test-block`.
 2. Install the plugin created from step one. No customizations is
 required.
 3. Insert your new test block into a post and publish it.
 4. Create a `theme.json` in your theme with styles to replace the
 background color of the block. ex:

 {{{
 {
   "version": 1,
   "styles": {
     "blocks": {
       "create-block/wp-test-block": {
         "color": {
           "background": "#333",
           "color": "#fff"
         }
       }
     }
   }
 }
 }}}

 5. Visit your post and confirm the background color of your block is
 changed to `#333`.
 6. Enable lazy loading by adding `add_filter(
 'should_load_separate_core_block_assets', '__return_true' )`
 7. Revisit your post and the background color from `theme.json` is no
 longer applied.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53494>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform