Repository navigation
Additional CSS styles are not generated on the frontend for any block that handles its own rendering of inner blocks (for example: Navigation block) #82171
Description
Description
I have added a Navigation block with several Navigation Link blocks inside a block template in a hybrid theme.
(Update: I tested this using the Twenty Twenty-Five block theme and ran into the exact same issue.)
I used the Additional CSS box introduced in WordPress 7.0 to customize the spacing of these blocks:
A margin-top: 0 rule for the Navigation block.
A padding: 0 rule for the Navigation Link blocks.
The changes are correctly reflected in the editor/backend. However, on the frontend, only the CSS for the Navigation block is generated and applied.
For example, the following CSS is present in the frontend:
:root :where(.wp-custom-css-68dd97ef) {
margin-top: 0;
}
However, there is no corresponding generated CSS for the Navigation Link blocks, so the padding customization is not applied on the frontend.
Step-by-step reproduction instructions
- Use a hybrid theme.
- Add a Navigation block to a block template.
- Add one or more Navigation Link blocks inside the Navigation block.
- Use the Additional CSS box to add custom spacing to the blocks.
- Set
margin-top: 0on the Navigation block andpadding: 0on the Navigation Link blocks. - View the template in the editor and verify that both customizations are reflected.
- View the same template on the frontend.
- Inspect the generated CSS.
Screenshots, screen recording, code snippet
No response
Environment info
WordPress: 7.1
No Gutenberg plugin
Custom hybrid theme
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
Activity
mrleemon commentedon Aug 28, 2026
Apparently, the
csskey is present in thewp_postsentry referenced by therefof the Navigation block:mrleemon commentedon Aug 29, 2026
I'm seeing this behavior in block themes as well, specifically tested in Twenty Twenty-Five.
PawelB02 commentedon Aug 29, 2026
Reproduction Report
I was able to reproduce this issue.
Environment
Steps
margin-top: 0;in the Additional CSS field for the Navigation block.padding: 0;in the Additional CSS field for the Navigation Link block.Result
The Navigation block receives a generated
wp-custom-css-*class, but the Navigation Link does not.The
padding: 0;rule added through the Additional CSS field for the Navigation Link is not generated on the frontend.I have attached a screenshot from Chrome DevTools showing the result.
ramonjd commentedon Aug 31, 2026
i wonder if this isn't a navigation link issue at all, but something to do with blocks that use "ref", which render inner blocks differently.
they never hit render_block_data in the inner block loop
mrleemon commentedon Aug 31, 2026
@ramonjd Yes, that seems to be the case.
Jiwoon-Kim commentedon Aug 31, 2026
I hit a separate failure in the same
ref-backed Navigation rendering path:#82216
That PR fixes Page List emitting a nested
<ul>when rendered inside Navigation. It does not address the missing Additional CSS here, but it may be another useful example of the inner blocks being rendered through a different path from ordinary block rendering.#82208
A concrete example of the current
ref-backed rendering boundary surfaced in #82171:#82171
Navigation Links saved in the referenced
wp_navigationpost do not pass through the ordinary inner-block rendering path, so their Additional CSS is not generated on the frontend. #82216 exposed another independent symptom in the same area: Page List needed special wrapper handling to avoid invalid list markup.Neither issue proves that a structured Navigation Resource would solve the bug by itself. A renderer would still need to preserve the normal block lifecycle where that contract matters. They do show that storing menu data as a block document currently makes renderer-specific behaviour part of the data model’s practical contract.
mrleemon commentedon Sep 6, 2026
When trying to overcome this bug by defining a navigation link block style variation via a style
.jsonfile withtop,bottom,left, andrightpadding values set to0, theis-style-*class is correctly added to the block wrapper, but the actual CSS rules/styles themselves are never generated or applied on the frontend. I don't know if this is related.ramonjd commentedon Sep 7, 2026
I'd lean on @scruffian or @getdave's opinion here on where (and whether) there's a fix
[-]Additional CSS styles are not generated for Navigation Link blocks[/-][+]Additional CSS styles are not generated for Navigation Link blocks on the frontend[/+]scruffian commentedon Sep 8, 2026
I agree with the assessment here - the problem is not in the navigation block specifically, its in any block that handles its own rendering of inner blocks. I created a draft PR to fix it here: Custom CSS: Generate styles for blocks rendered by their parent block
[-]Additional CSS styles are not generated for Navigation Link blocks on the frontend[/-][+]Additional CSS styles are not generated on the frontend for any block that handles its own rendering of inner blocks (for example: Navigation Link block)[/+][-]Additional CSS styles are not generated on the frontend for any block that handles its own rendering of inner blocks (for example: Navigation Link block)[/-][+]Additional CSS styles are not generated on the frontend for any block that handles its own rendering of inner blocks (for example: Navigation block)[/+]mrleemon commentedon Oct 15, 2026
Could someone please take a look at this bug, please? How can we help move this forward?
Since padding and margin support for Navigation Links apparently will not be included in WordPress 7.2, this fix is currently one of the few practical ways to add custom spacing to individual blocks (aside from using a custom CSS class).
@ramonjd @scruffian