Opened 8 months ago
Last modified 4 months ago
#61265 new enhancement
Add class name for block variations
Reported by: | Bernhard Reiter | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Editor | Keywords: | has-patch needs-testing-info |
Focuses: | Cc: |
Description
In order to allow block authors to add custom styling for individual block variations, it would be convenient to have a class name automatically added for the variation.
There's some precedent in the Social Icon block, which e.g. for its WordPress
variation adds the wp-social-link-wordpress
class name (in addition to wp-social-link
).
Attachments (2)
Change History (16)
This ticket was mentioned in PR #6602 on WordPress/wordpress-develop by @Bernhard Reiter.
8 months ago
#1
- Keywords has-patch added
@tomjcafferkey commented on PR #6602:
8 months ago
#2
I'm assuming we're going to need to open a GB counterpart to deal with the same logic for adding variation class names in the editor too?
@Bernhard Reiter commented on PR #6602:
8 months ago
#3
I'm assuming we're going to need to open a GB counterpart to deal with the same logic for adding variation class names in the editor too?
Oh, good point! I was originally just focused on dynamic blocks, but you're right, we'll probably need something somewhere around addGeneratedClassName
and/or getBlockDefaultClassName
.
@Bernhard Reiter commented on PR #6602:
8 months ago
#4
I'm assuming we're going to need to open a GB counterpart to deal with the same logic for adding variation class names in the editor too?
Oh, good point! I was originally just focused on dynamic blocks, but you're right, we'll probably need something somewhere around
addGeneratedClassName
and/orgetBlockDefaultClassName
.
@tjcafferkey Mind giving that a stab? 😄
@tomjcafferkey commented on PR #6602:
8 months ago
#5
Mind giving that a stab? 😄
I'd love to!
This ticket was mentioned in Slack in #core by oglekler. View the logs.
8 months ago
#7
@
8 months ago
- Keywords needs-testing-info added
Hi @bernhard-reiter It looks quite well-defined, but we have just a few days before Beta 1, it can possibly go into 6.6 if we hurry up. Can you please provide testing instructions? Thank you!
#8
@
8 months ago
== Test Report
Please ignore, it was meant for https://core.trac.wordpress.org/ticket/60236
This ticket was mentioned in Slack in #core by chaion07. View the logs.
4 months ago
#12
@
4 months ago
Test Report
This report validates that the indicated patch addresses the issue.
Patch tested: https://github.com/WordPress/wordpress-develop/pull/6602
Environment
- WordPress: 6.7-alpha-58576-src
- PHP: 8.2.14
- Server: nginx/1.25.3
- Database: mysqli (Server: 8.0.39 / Client: mysqlnd 8.2.14)
- Browser: Safari 17.6
- OS: macOS
- Theme: Twenty Twenty-Four 1.2
- MU Plugins: None activated
- Plugins:
- Test Reports 1.1.0
Steps to Test
- Open a Post post in edit mode
- Add a 'Categories' block (or any other block variation) to the page content. Settings for the block can be the default
- Assign the 'Uncategorized' category to the post and publish the post
- View the front end of the site
- Inspect the 'Uncategorized' text (the Categories block) and ensure that the markup contains a new class showing the active variation
Expected Results
- ✅ An additional class should be added to the block, using the format
wp-block-<block name>-<variation name>
Actual Results
- ✅ The class
wp-block-post-terms-category
is added to the block
Additional Notes
- I tested using the default WP develop repo following the Readme's instructions, and used
gh pr checkout 6602
to check out the specific PR
For a given block
my/block
with a variationmyvariation
that's registered on the server side (via `variation_callback` or `get_block_type_variations`), add a classwp-block-my-block-mynavigation
to the block wrapper.### Design choiced
This PR introduces a new function called
get_active_block_variation()
, which is modelled after its client-side counterpart, `getActiveBlockVariation()`. The signatures are _almost_ identical, the major difference being that the client-side version accepts a block type _name_, whereas the server side one expects aWP_Block_Type
object.Inference. Note that while
get_active_block_variation
respects theisActive
field to determine the variation of a block given its attributes, it also has a fallback mechanism, which is to compare the variation's set of definingattributes
to the block's.I believe that this is a reasonable technique to determine a block variation, especially in the absence of an
isActive
field (which on the server side is furthermore limited to an array of attributes that need to be considered in determining a variation, as opposed to the client side, where arbitrary callbacks are allowed forisActive
).If we agree with this fallback mechanism, I'm inclined to add it to the client side's
getActiveBlockVariation
as well.### TODO
scope
arguments### Testing Instructions
Test with a Block Theme (such as TT4) that uses Template Part block (and ideally also Navigation Link blocks), as those are among the few blocks with server-side registered variations. Inspect the page source and verify that the aforementioned blocks have indeed a variation-specific classname added, e.g.
wp-block-template-part-area_footer
orwp-block-navigation-link-page
.### Screenshots
---
Trac ticket: https://core.trac.wordpress.org/ticket/61265