Make WordPress Core

Opened 6 weeks ago

Closed 5 weeks ago

Last modified 5 weeks ago

#61425 closed defect (bug) (fixed)

Fix custom CSS output for block style variations

Reported by: isabel_brison's profile isabel_brison Owned by: isabel_brison's profile isabel_brison
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.6
Component: Editor Keywords: gutenberg-merge has-patch
Focuses: Cc:

Description

Currently, custom CSS defined on the block itself is also used on its style variations, and any custom CSS added to the style variation is ignored.

https://github.com/WordPress/gutenberg/pull/62526 fixes this issue by making sure any custom CSS attached to a block style variation is output correctly. The PHP changes require a core sync PR.

Change History (7)

This ticket was mentioned in PR #6797 on WordPress/wordpress-develop by @isabel_brison.


6 weeks ago
#1

  • Keywords has-patch added

@aaronrobertshaw commented on PR #6797:


5 weeks ago
#2

While testing, I ran into an issue where custom CSS for a variation's inner block types isn't working on this branch. It works with Gutenberg trunk active.

<details>
<summary>Theme.json snippet added two TT4</summary>

{
        "styles": {
                "blocks": {
                        "variations": {
                                "Custom": {
                                        "blockTypes": [
                                                "core/group"
                                        ],
                                        "color": {
                                                "background": "skyblue"
                                        },
                                        "spacing": {
                                                "padding": {
                                                        "top": "1em",
                                                        "right": "1em",
                                                        "bottom": "1em",
                                                        "left": "1em"
                                                }
                                        },
                                        "blocks": {
                                                "core/group": {
                                                        "color": {
                                                                "background": "aliceblue"
                                                        },
                                                        "spacing": {
                                                                "padding": {
                                                                        "top": "1.5em",
                                                                        "right": "0.5em",
                                                                        "bottom": "1.5em",
                                                                        "left": "0.5em"
                                                                }
                                                        },
                                                        "css": "outline: 3px dashed red;"
                                                }
                                        }
                                }
                        },
                        "core/button": {
                                "variations": {
                                        "outline": {
                                                "spacing": {
                                                        "padding": {
                                                                "bottom": "calc(0.6rem - 1px)",
                                                                "left": "calc(1rem - 1px)",
                                                                "right": "calc(1rem - 1px)",
                                                                "top": "calc(0.6rem - 1px)"
                                                        }
                                                },
                                                "border": {
                                                        "width": "1px"
                                                },
                                                "css": "outline: 3px dashed ivory;"
                                        }
                                }
                        },
}

</details>

This Branch With Gutenberg Active

| https://github.com/WordPress/wordpress-develop/assets/60436221/e608173d-38f6-47b4-a673-b58a08bcabcd | https://github.com/WordPress/wordpress-develop/assets/60436221/b90be0eb-795a-4295-86c2-82dba2f15cdc |

Note on this branch alone, the custom css adding the red outline to inner Group blocks with the "Custom" block style variation is not getting applied.

Quickly dumping out some data and styles at different points, I could see the same variations data being given to the theme.json class in both Core and Gutenberg however the resulting CSS stylesheet for core omits the custom css for the variation's inner blocks.

I haven't had much success putting my finger on the cause just yet and need to switch onto some other tasks that need to make WP6.6 beta3. I'll try and help dig deeper tomorrow.

Some unit tests might also help debug and prevent some future regressions. What do you think?

P.S. We should also add a @since 6.6.0 note to get_styles_for_block flagging it as the release custom css for variations was added or "fixed".

@aaronrobertshaw commented on PR #6797:


5 weeks ago
#3

Is it possible that Gutenberg is working due to the changes associated with https://github.com/WordPress/gutenberg/pull/62357?

@isabel_brison commented on PR #6797:


5 weeks ago
#4

Thanks for spotting that @aaronrobertshaw! I've fixed the issue now. It was due to one of the changes in Gutenberg, but I've managed to safely add part of that code here without affecting output for other custom CSS.

#5 @isabel_brison
5 weeks ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

In 58421:

Editor: fix custom CSS output for block style variations.

Adds custom CSS to the block style variation rules output by get_styles_for_block in class WP_Theme_JSON.

Props isabel_brison, aaronrobertshaw.
Fixes #61425.

@isabel_brison commented on PR #6797:


5 weeks ago
#6

Committed in r58421.

#7 @isabel_brison
5 weeks ago

  • Milestone changed from Awaiting Review to 6.6
Note: See TracTickets for help on using tickets.