Make WordPress Core

Opened 4 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#61443 closed defect (bug) (fixed)

Prevent redundant block style variation CSS

Reported by: aaronrobertshaw's profile aaronrobertshaw Owned by: oandregal's profile oandregal
Milestone: 6.6 Priority: normal
Severity: normal Version: trunk
Component: Editor Keywords: gutenberg-merge has-patch has-unit-tests
Focuses: Cc:

Description

This ticket tracks the backporting of PHP files for the following Gutenberg fix:
https://github.com/WordPress/gutenberg/pull/62465

These changes prevent duplicate and redundant CSS being generated for block style variations.

Change History (9)

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


4 weeks ago
#1

  • Keywords has-patch has-unit-tests added

This PR backports the PHP updates from: https://github.com/WordPress/gutenberg/pull/62465

The changes prevent redundant or duplicate CSS being generated for block style variations.

### Test Instructions

  1. Register a custom block style variation e.g. through a theme.json partial: /styles/partial.json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"title": "Custom",
	"slug": "custom",
	"blockTypes": [ "core/group" ],
	"styles": {
		"color": {
			"background": "aliceblue"
		}
	}
}
  1. In both editors add a group block and apply the Custom block style variation.
  2. Inspect the group block and confirm there is only a single is-style-custom-* css class matched
  3. Save the page or post and confirm the same on the frontend

Trac ticket: https://core.trac.wordpress.org/ticket/61443

@aaronrobertshaw commented on PR #6827:


4 weeks ago
#2

I noticed while creating this backport of https://github.com/WordPress/gutenberg/pull/62465 that there's a difference in signature between core and Gutenberg for get_block_nodes.

Before this change:

Core: private static function get_block_nodes( $theme_json )
Gutenberg: private static function get_block_nodes( $theme_json, $selectors = array() )

I'll try and sort this out in time for beta 3.

@aaronrobertshaw commented on PR #6827:


4 weeks ago
#3

The PR modifying the function signature in Gutenberg was https://github.com/WordPress/gutenberg/pull/41217.

From https://github.com/WordPress/gutenberg/pull/41217#issuecomment-1354426105 it looks like it the fact the PR wasn't backported was already known however perhaps not that "everything will be fine" as suggested after https://github.com/WordPress/gutenberg/pull/46579.

As far as I can tell, I don't think there'll be any harm in updating get_block_nodes function to match Gutenberg's version.

@aaronrobertshaw commented on PR #6827:


4 weeks ago
#4

I've made the required updates from https://github.com/WordPress/gutenberg/pull/41217.

Flagging this as ready for review once the Gutenberg PR lands.

@ramonopoly commented on PR #6827:


4 weeks ago
#5

This PR is testing well for me. For blocks with the block style variation applied, I'm seeing the following, related classnames in the class attribute in both the editor and frontend:

is-style-custom is-style-custom-b321ad1e-3e38-4a3c-af91-ef82f0c9855d

@aaronrobertshaw commented on PR #6827:


4 weeks ago
#6

I'm seeing the following, related classnames in the class attribute in both the editor and frontend

For the moment, this is expected. The is-style-custom classname is what's applied by the editor and is hooked onto by the block support to generate the class specific to this instance or application of the block style, is-style-custom--<hash>.

@isabel_brison commented on PR #6827:


4 weeks ago
#7

Just a quick note that applying this patch on top of the latest trunk (after the custom CSS fix) still shows everything working as expected 👍

#8 @oandregal
4 weeks ago

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

In 58422:

Global styles: prevent duplicate CSS for block style variations.

Props aaronrobertshaw, mukesh27, ramonopoly, isabel_brison, oandregal.
Fixes #61443.

Note: See TracTickets for help on using tickets.