Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#61443 closed defect (bug) (fixed)

Prevent redundant block style variation CSS

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

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.


2 years 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:


2 years 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:


2 years 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:


2 years 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:


2 years 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:


2 years 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:


2 years 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
2 years ago

  • Owner set to oandregal
  • Resolutionfixed
  • Status newclosed

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.