Make WordPress Core

Opened 7 weeks ago

Closed 5 weeks ago

Last modified 4 weeks ago

#61877 closed defect (bug) (fixed)

Block Styles: Ensure unique classname generation for variations

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

Description

This ticket tracks the backporting of PHP files for the following Gutenberg updates:

These changes include a fix to ensure unique class names when exact copies of blocks with a block style variation applied occur on the same page e.g. when repeatedly inserting the same synced pattern. Unique class names are required to ensure block style variations can be applied in a nested fashion.

Change History (7)

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


7 weeks ago
#1

  • Keywords has-patch added

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

This PR backports the PHP changes from https://github.com/WordPress/gutenberg/pull/64511.

### What?
Simplifies block style variation class name generation to ensure unique class.

### Why?
Avoids potential for non-unique class names and conflicting styles when exact copies of a block are inserted via a repeated pattern.

Further background and context can be found over on https://github.com/WordPress/gutenberg/pull/64511.

### How?

Replace the hashing of block attributes in the block style variation classnames with a call to wp_unique_id.

### Testing Instructions

#### Confirm unique classnames on frontend

  1. Create a pattern
  2. Add a button with the Outline block styles to the pattern
  3. Save the pattern and edit a post
  4. Insert the above pattern 3 times in the post
  5. Save and view the post on the frontend
  6. Inspect a button and search the markup for is-style-outline-. You should find CSS with three styles matching that pattern however they should now all be unique.

#### Ensure no regressions for block style variations on the frontend

  1. Add some custom block style variations to your theme. See #57908 for detailed examples or the snippet below for a quick option.
  2. Add suitable content to a page, making sure there is enough that nested applications of block style variations can occur
  3. In the site editor, apply the custom block style variations to various content, including in a nested fashion
  4. Save and confirm the correct styling on the frontend

<details>
<summary>Example block style variation theme.json partial (place under /styles)</summary>

{
        "$schema": "https://schemas.wp.org/trunk/theme.json",
        "version": 3,
        "title": "Section A",
        "slug": "section-a",
        "blockTypes": [ "core/group" ],
        "styles": {
                "color": {
                        "background": "slategrey",
                        "text": "snow"
                },
                "blocks": {
                        "core/group": {
                                "color": {
                                        "background": "darkslategrey",
                                        "text": "whitesmoke"
                                }
                        }
                }
        }
}

</details>

## Screenshots or screencast

### Simple unique classnames for exact copies of blocks

https://github.com/user-attachments/assets/9c0116c7-36be-4a79-b343-002bdbfc9dcc

### Block Style Variations still working

https://github.com/user-attachments/assets/42998ead-0b03-48ab-8968-f4b0688fb661

@aaronrobertshaw commented on PR #7200:


5 weeks ago
#2

Thanks for flagging that @mukeshpanchal27 👍

I wasn't too sure on whether the test should be removed or just flagged as expecting the deprecation. I went with flagging the expected deprecation so it can be removed once the deprecated function is.

#3 @ramonopoly
5 weeks ago

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

In 58951:

Block Styles: Ensure unique classname generation for variations

This commit simplifies block style variation class name generation to ensure unique class names by replacing the hashing of block attributes in the block style variation class names with a call to wp_unique_id.

Doing so avoids potential for non-unique class names and conflicting styles when exact copies of a block are inserted via a repeated pattern.

Props aaronrobertshaw, martinkrcho, mukesh27, peterwilsoncc, ramonopoly.

Fixes #61877.

#5 @kebbet
4 weeks ago

Hi @ramonopoly, with commits to trunk during current release cycle, please milestone this ticket in 6.7. Thanks!

#6 @ramonopoly
4 weeks ago

  • Milestone changed from Awaiting Review to 6.7

#7 @ramonopoly
4 weeks ago

Thanks for the reminder. Updated

Note: See TracTickets for help on using tickets.