Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block variations: Add block-supports flag to add variation specific classname #61864

Open
wants to merge 41 commits into
base: trunk
Choose a base branch
from

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented May 22, 2024

Related to: #43743

What?

For a given variation of a static block that is registered it will add a unique className specific to the variation to the block markup. For example group-row which is a variant of core/group would have the resulting CSS className: wp-block-group wp-block-group-group-row.

Why?

As part of the project to support block aliases for variations (tracking issue) one of the requirements is to provide an additional CSS className to provide more styling options for these blocks.

How?

We chose to update the existing className block-support flag. Previously, setting className: true would cause the default block classname (wp-block-my-block) to be added. This continues to be the default value and behavior for that flag.

Additionally, the following syntax is now supported:

className: {
    block: true,
    variation: true,
}

The block property controls adding the default block classname, whereas the variation property is in charge of adding the variation-specific classname (wp-block-my-variation).

Question: Are we happy with the choice of names for these properties (block, variation)? Should they be called differently?

Testing Instructions

  • Apply the patch below, which will opt the Group block into variation classname block support.
  • Using the TT4 theme, go to the Site Editor.
  • In the DevTools console, verify that deprecations have been run for all instances of the Group block, and that they've injected the new variation-specific classnames. (See screenshot at the bottom of the PR desc.)
  • In the Code Editor, verify that all Group blocks have a classname added for their respective variation (e.g. wp-block-group-group-row).
  • Save the template (to persist changes made by block deprecations).
  • Reload. Verify that no blocks show up as invalid.
  • View the frontend.
  • In the developer tools, verify that the classname is present on the frontend as well.
  • Go to the post editor and insert a few new Group blocks. Use different variations, and verify in the Code Editor that each of them gets the correct variation classname added.
Patch
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 3c7d8d3ce13..bb958b0cce6 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -91,6 +91,9 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"className": {
+			"variation": true
 		}
 	},
 	"editorStyle": "wp-block-group-editor",
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index fcc2b249d22..b97af894eeb 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -42,6 +42,100 @@ const migrateAttributes = ( attributes ) => {
 };
 
 const deprecated = [
+	// Version without block support 'className: { variation: true }'.
+	{
+		attributes: {
+			tagName: {
+				type: 'string',
+				default: 'div',
+			},
+			templateLock: {
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', 'contentOnly', false ],
+			},
+			allowedBlocks: {
+				type: 'array',
+			},
+		},
+		supports: {
+			__experimentalOnEnter: true,
+			__experimentalOnMerge: true,
+			__experimentalSettings: true,
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			ariaLabel: true,
+			html: false,
+			background: {
+				backgroundImage: true,
+				backgroundSize: true,
+				__experimentalDefaultControls: {
+					backgroundImage: true,
+				},
+			},
+			color: {
+				gradients: true,
+				heading: true,
+				button: true,
+				link: true,
+				__experimentalDefaultControls: {
+					background: true,
+					text: true,
+				},
+			},
+			shadow: true,
+			spacing: {
+				margin: [ 'top', 'bottom' ],
+				padding: true,
+				blockGap: true,
+				__experimentalDefaultControls: {
+					padding: true,
+					blockGap: true,
+				},
+			},
+			dimensions: {
+				minHeight: true,
+			},
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+				__experimentalDefaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+			position: {
+				sticky: true,
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontFamily: true,
+				__experimentalFontWeight: true,
+				__experimentalFontStyle: true,
+				__experimentalTextTransform: true,
+				__experimentalTextDecoration: true,
+				__experimentalLetterSpacing: true,
+				__experimentalDefaultControls: {
+					fontSize: true,
+				},
+			},
+			layout: {
+				allowSizingOnChildren: true,
+			},
+			interactivity: {
+				clientNavigation: true,
+			},
+		},
+		save( { attributes: { tagName: Tag } } ) {
+			return (
+				<Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />
+			);
+		},
+	},
 	// Version with default layout.
 	{
 		attributes: {

Screenshot

image

@tjcafferkey tjcafferkey self-assigned this May 22, 2024
Copy link

github-actions bot commented May 22, 2024

Size Change: +1.79 kB (+0.1%)

Total Size: 1.77 MB

Filename Size Change
build/block-editor/index.min.js 258 kB -117 B (-0.05%)
build/block-editor/style-rtl.css 16 kB -64 B (-0.4%)
build/block-editor/style.css 16 kB -69 B (-0.43%)
build/block-library/index.min.js 219 kB +578 B (+0.26%)
build/blocks/index.min.js 52.4 kB +51 B (+0.1%)
build/components/index.min.js 224 kB -12 B (-0.01%)
build/components/style-rtl.css 12.1 kB +4 B (+0.03%)
build/components/style.css 12.1 kB +5 B (+0.04%)
build/edit-post/index.min.js 13.1 kB +439 B (+3.47%)
build/edit-post/style-rtl.css 2.57 kB +259 B (+11.19%) ⚠️
build/edit-post/style.css 2.57 kB +260 B (+11.26%) ⚠️
build/edit-site/index.min.js 217 kB +356 B (+0.16%)
build/edit-site/posts-rtl.css 7.3 kB +1 B (+0.01%)
build/edit-site/posts.css 7.3 kB +2 B (+0.03%)
build/edit-site/style-rtl.css 12.6 kB +37 B (+0.29%)
build/edit-site/style.css 12.6 kB +38 B (+0.3%)
build/editor/index.min.js 102 kB -64 B (-0.06%)
build/editor/style-rtl.css 9.33 kB +44 B (+0.47%)
build/editor/style.css 9.33 kB +44 B (+0.47%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 898 B
build-module/block-library/file/view.min.js 447 B
build-module/block-library/image/view.min.js 1.78 kB
build-module/block-library/navigation/view.min.js 1.16 kB
build-module/block-library/query/view.min.js 743 B
build-module/block-library/search/view.min.js 616 B
build-module/interactivity-router/index.min.js 2.8 kB
build-module/interactivity/debug.min.js 16.6 kB
build-module/interactivity/index.min.js 13.3 kB
build/a11y/index.min.js 949 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.11 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.65 kB
build/block-editor/content.css 4.64 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-edit-link/style-rtl.css 70 B
build/block-library/blocks/comment-edit-link/style.css 70 B
build/block-library/blocks/comment-reply-link/style-rtl.css 71 B
build/block-library/blocks/comment-reply-link/style.css 71 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 357 B
build/block-library/blocks/form-input/style.css 357 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 955 B
build/block-library/blocks/gallery/editor.css 958 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 785 B
build/block-library/blocks/image/editor.css 787 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 321 B
build/block-library/blocks/media-text/editor.css 320 B
build/block-library/blocks/media-text/style-rtl.css 558 B
build/block-library/blocks/media-text/style.css 556 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.19 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 226 B
build/block-library/blocks/post-title/style.css 226 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 154 B
build/block-library/blocks/query-pagination/editor.css 154 B
build/block-library/blocks/query-pagination/style-rtl.css 237 B
build/block-library/blocks/query-pagination/style.css 237 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 206 B
build/block-library/blocks/site-title/style.css 206 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 15 kB
build/block-library/style.css 15 kB
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.82 kB
build/core-data/index.min.js 73.2 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.66 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.11 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 3.2 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.9 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@tjcafferkey tjcafferkey marked this pull request as ready for review May 22, 2024 14:49
@tjcafferkey tjcafferkey requested a review from ockham May 22, 2024 14:50
Copy link

github-actions bot commented May 22, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Co-authored-by: tjcafferkey <tomjcafferkey@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@tjcafferkey tjcafferkey added [Feature] Block API API that allows to express the block paradigm. [Type] Enhancement A suggestion for improvement. labels May 23, 2024
Copy link
Contributor

@ockham ockham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the code that adds the variation class name should be colocated with the code that adds the auto-generated block class name 🤔 The latter is only added conditionally to the block if it has className block-supports.

The relevant code is encapsulated in generated-class-name.js, so it looks like adding the variation class name there would also preserve parity with what we're doing on the server.

@ntsekouras
Copy link
Contributor

I think the code that adds the variation class name should be colocated with the code that adds the auto-generated block class name 🤔

I'd echo that. We should inject the class name and it should be auto generated. We shouldn't preserve the className in the html markup as it will create various issues if we switch to a different variation.

@tjcafferkey
Copy link
Contributor Author

The relevant code is encapsulated in generated-class-name.js, so it looks like adding the variation class name there would also preserve parity with WordPress/wordpress-develop#6602.

I agree with colocating the code, but AFAIK the code in generated-class-name.js is only run for blocks with a save function. If we take core/social-link as an example this isn't the case. I'll keep digging.

@ockham
Copy link
Contributor

ockham commented Jun 4, 2024

👋 I've only now started reviewing this, and I think it'll take me a bit longer to let it all sink in.

Coincidentally, I came across #56469 today, which changed the List block -- which previously had className block-support set to false, and thus no wp-block-list class added -- enable className block support, and thus add the missing class name.

That PR is interesting -- and potentially relevant to the problem we're trying to solve.
It includes a deprecation for the previous version of the List block; these are run in the editor and are the established way to avoid parse errors for blocks whose attributes have changed. I just didn't think of them as a potential solution, since they're always block-specific -- there's no block deprecation mechanism that I'm aware of that would apply the same kind of deprecation to a whole class of blocks. I do like that this approach uses an established mechanism to make the necessary changes to existing blocks. 🤔

More surprisingly to me, the PR adds a server-side render_callback that injects the wp-block-list class into the ul or ol wrapper, respectively. The rationale for this is found in a code comment:

* Adds the wp-block-list class to the rendered list block.
* Ensures that pre-existing list blocks use the class name on the front.
* For example, <ol> is transformed to <ol class="wp-block-list">.

...and possibly in a prior discussion on a GH issue:

I think @mtias's idea was to add it to both the frontend and the editor but to not serialize it in the saved markup. I think it's a given that the markup of the editor should match the frontend.

Some ideas from that other PR might help us reduce some of the more "magical" parts from our approach. Anyway, I'll need a bit more time to fully wrap my head around this.

@ockham
Copy link
Contributor

ockham commented Jun 5, 2024

Another observation: If I revert 83ddbfb (i.e. #56469), the wp-block-list class is indeed not added on the frontend, but it is present in the editor. (I wonder if historically, we first introduced the wp-block- classnames in the editor to be able to style blocks there, and only later carried the classname over to the frontend as it turned out handy to have?)

Frontend Editor
image image

@ockham ockham force-pushed the add/block-variation-classname branch 2 times, most recently from ae6c466 to cd945bd Compare June 5, 2024 09:40
ockham
ockham previously approved these changes Jun 10, 2024
@ockham ockham dismissed their stale review June 10, 2024 11:16

Just wanted to retract my Change request, didn't want to approve quite yet.

@ockham
Copy link
Contributor

ockham commented Jun 10, 2024

I'll rebase.

@ockham ockham force-pushed the add/block-variation-classname branch 2 times, most recently from dee14ff to 6bbb713 Compare June 10, 2024 12:49
@tjcafferkey
Copy link
Contributor Author

tjcafferkey commented Jun 11, 2024

Just noting some thoughts / discoveries down here:

  • If we load a template and the markup doesn't already have the variation classNames on the blocks, they will not be present if you switch to Code Editor. But they will pass block validation.
    • Making an update (e.g. hitting return to line down) in the Visual Editor tab will force the variation classNames to get added to all variations in the Code Editor
  • These variation classNames won't be visible in the Visual Editor if you were to inspect the DOM. (Fixed in 0a12f45)
    • Note: This is important because if there is some CSS associated with the variation className it wont be applied in the Visual Editor, but it will be applied on the frontend if saved, this means theres not visual parity between the two.

@ockham
Copy link
Contributor

ockham commented Jun 11, 2024

Just noting some thoughts / discoveries down here:

  • If we load a template from the database or filesystem and the markup doesn't already have the variation classNames on the blocks, they will not get added. But they will pass block validation.
  • Making an update (e.g. hitting return to line down) in the Visual Editor tab will force the variation classNames to get added to all variations in the Code Editor in both cases (filesystem / database).

This means that any modification and subsequent saving of the template will cause the variation className to be added, right? If that's the case, then it's pretty much the behavior I'd expect 👍

  • These variation classNames won't be visible in the Visual Editor if you were to inspect the DOM. (Fixed in 0a12f45)
    • Note: This is important because if there is some CSS associated with the variation className it wont be applied in the Visual Editor, but it will be applied on the frontend if saved, this means theres not visual parity between the two.

I understand that's fixed now? 😄

@tjcafferkey
Copy link
Contributor Author

When a template is loaded into the Visual Editor, variation classNames are added to existing static blocks (visible through DevTools by inspecting the DOM). However, if you switch immediately to the Code Editor, the block markup will appear without these classNames. Making any change in the Visual Editor will then force the variation classNames to appear in the Code Editor. These new classNames will not show on the frontend until you save your template.

Initially, I thought this discrepancy between the Visual and Code Editors needed fixing, but this behavior is already present in the deprecation/migration API.

For example, when deprecating a block to change its tag name, the Visual Editor shows the new tag name in the DOM, while the old tag name appears in the Code Editor until the user makes a change and saves the post/template.

@tjcafferkey tjcafferkey changed the title Block variations: Add class name Block variations: Add className to static blocks Jun 13, 2024
@ockham ockham force-pushed the add/block-variation-classname branch from 611dd12 to 6f016b3 Compare September 12, 2024 13:02
@ockham
Copy link
Contributor

ockham commented Sep 12, 2024

Overall, it looks very close to ready. As noted in #61864 (comment), the implementation might be a little bit brittle in the case when the blocks.getBlockDefaultClassName filter append some random class, example:

addFilter( 'blocks.getBlockDefaultClassName', 'my-plugin/append-class-name', ( value ) => value + ' random-class' );

It's been like that forever for default class names, but it's hard to tell what should happen for variations in this case.

Indeed. I've replied to your comment in #61864 (comment) and #61864 (comment).

We should take it to the finish line and treat it as a progressive enhancement that gets applied when the blocks that opt to use this option get saved to the database. I'm also not entirely sure what will happen when you enable class names for variations for existing core blocks on your WP instance. Would it invalidate all saved blocks of that type that match the active variation? It's something I would like to test next.

Yeah, it would invalidate them. If you look at the patch that's part of the testing instructions in the PR description, it's three lines to opt the Group block into the auto-generated variation-specific class name, and another ~100 lines to add the deprecation 😬

@ockham
Copy link
Contributor

ockham commented Sep 12, 2024

We should take it to the finish line and treat it as a progressive enhancement that gets applied when the blocks that opt to use this option get saved to the database.

Yeah, I'd also love to get this one done; it's been open for a couple of months now.

I have some concerns around committing to a format for both the block-supports semantics I've chosen (especially since they're non-experimental), the usage of the blocks.getBlockDefaultClassName that you pointed out, and the choice of character(s) we use to append the variation name.

Furthermore, I think there's a real chance that folks will want us to add the variation class names on the server side as well (as Nick pointed out); if people feel fairly strongly about this, then we should probably not get the client-side part into 6.7 without the server-side part (which is unfortunately a bit more complex to get right, as discussed). So timing is a bit tricky here 😕

@gziolo
Copy link
Member

gziolo commented Sep 17, 2024

I have some concerns around committing to a format for both the block-supports semantics I've chosen (especially since they're non-experimental), the usage of the blocks.getBlockDefaultClassName that you pointed out, and the #61864 (comment) we use to append the variation name.

I'm not worried about the semantics of supports.className as it's fully backward compatible and enabling class names for variations is optional.

I'm starting to think that we should unbundle the variations class name generation from the default class name, example implementation:

function generateDefaultClassName( blockName, variationName = '' ) {
	// Generated HTML classes for blocks follow the `wp-block-{name}` nomenclature.
	// Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (historically used in 'core-embed/').
	const className = 'wp-block-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' );
	return variationName?  className + '__' + variationName : className;
}

export function getBlockDefaultClassName( blockName ) {
	const className = generateDefaultClassName( blockName );

	return applyFilters(
		'blocks.getBlockDefaultClassName',
		className,
		blockName
	);
}

// This one is more nuanced, but the simplified version is to illustrate the idea.
export function getBlockDefaultVariationClassName( blockName, variationName ) {
	const className = generateDefaultClassName( blockName, variationName );

	return applyFilters(
		'blocks.getBlockDefaultVariationClassName',
		className,
		blockName,
		variationName
	);
}

This way, we would start fresh for block variations. In case, folks don't like the pattern used when generating the class name for block variation they have another filter to use in addition to preexisting blocks.getBlockDefaultClassName.

@ockham
Copy link
Contributor

ockham commented Sep 18, 2024

I'm starting to think that we should unbundle the variations class name generation from the default class name, example implementation: [...]

Yeah, I think that's a good idea.

As discussed on our call earlier this week, I'll pick this up after GB 19.3 RC1 is out (which is due today; however, I'll be gone for a week, starting tomorrow). I will try to land it soon after that, though. This way, it won't be in WP 6.7, and we'll have a bit more time to tweak it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Enhancement A suggestion for improvement.
Projects
Status: 🏈 Punted to 6.8
Development

Successfully merging this pull request may close these issues.

7 participants