Skip to content

stylesblockscore/querycss in theme.json not rendered when enhancedPagination is false #68580

@wongjn

Description

@wongjn

Description

The value of styles.blocks.core/query.css in theme.json is not added to the webpage when:

  • There is a core/query block
  • No core/query block has enhancedPagination set to true

In PHP render code for the core/query block, it removes the wp-block-query style if no blocks are using interactive pagination. However, this prevents any CSS defined in theme.json's styles.blocks.core/query.css from being included. This is because this CSS is added as inline CSS based on if the same wp-block-query style asset has been enqueued.

Step-by-step reproduction instructions

  1. Install WordPress 6.7.1 with default Twenty Twenty-Five theme.
  2. Edit the theme.json to add in styles.blocks:
    "core/query": {
      "css": "background-color: pink"
    }
  3. View the homepage and see that the CSS is not applied.
  4. Hit Edit Site in the toolbar or edit the Blog Home template.
  5. Notice the CSS is applied in the block editor.
  6. Remove the Content block from inside the Query Loop block.
  7. Select the Query Loop block and disable the Reload full page option.
  8. Save.
  9. View the homepage and see that the CSS is applied.

Screenshots, screen recording, code snippet

`enhancedPagination:false` `enhancedPagination:true`

Image

Image

Missing in the global styles inline CSS.

<style id='global-styles-inline-css'>:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
:root :where(.wp-block-query-pagination){font-size: var(--wp--preset--font-size--medium);font-weight: 500;}
…
</style>

Present in the global styles inline CSS.

<style id='global-styles-inline-css'>:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
:root :where(.wp-block-query){background-color: pink}
:root :where(.wp-block-query-pagination){font-size: var(--wp--preset--font-size--medium);font-weight: 500;}
…
</style>

Environment info

  • WordPress 6.7.1, Twenty Twenty Five 1.0
  • Firefox 133.0.3 (64-bit), Chrome 131.0.6778.264 (Official Build) (64-bit)
  • Windows 11

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] Query LoopAffects the Query Loop Block[Feature] Interactivity APIAPI to add frontend interactivity to blocks.[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions