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.json: Allow passing filename as variations field #62092

Merged
merged 17 commits into from
Jul 9, 2024

Conversation

ockham
Copy link
Contributor

@ockham ockham commented May 29, 2024

What?

Modeled after https://core.trac.wordpress.org/changeset/54132/, which introduced the render field for block.json, as a way to point to a PHP file instead of providing a render_callback.

The main difference to the variations and variation_callback fields is that the variations field already existed prior to this PR, and it can be used to provide the static list of variations (i.e., an array). This PR makes it so that the field can be alternatively set to a string, which will be interpreted as the filename of the PHP file generating the variations.

Due to the changes to the block.json schema, it is recommended to view the diff with whitespace changes hidden.

Why?

See WordPress/wordpress-develop#6668.

How?

In the GB compat layer: By using the block_type_metadata_settings filter.

Testing Instructions

Apply the following patch, and create build/block-library/blocks/template-part/variations.php with the content below.

Patch
diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
index 9710bdeee2e..3493946aa7a 100644
--- a/packages/block-library/src/template-part/block.json
+++ b/packages/block-library/src/template-part/block.json
@@ -29,5 +29,6 @@
 			"clientNavigation": true
 		}
 	},
+	"variations": "variations.php",
 	"editorStyle": "wp-block-template-part-editor"
 }
diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php
index be867c4ced1..58420b999b2 100644
--- a/packages/block-library/src/template-part/index.php
+++ b/packages/block-library/src/template-part/index.php
@@ -175,115 +175,6 @@ function render_block_core_template_part( $attributes ) {
 	return "<$html_tag $wrapper_attributes>" . str_replace( ']]>', ']]&gt;', $content ) . "</$html_tag>";
 }
 
-/**
- * Returns an array of area variation objects for the template part block.
- *
- * @since 6.1.0
- *
- * @param array $instance_variations The variations for instances.
- *
- * @return array Array containing the block variation objects.
- */
-function build_template_part_block_area_variations( $instance_variations ) {
-	$variations    = array();
-	$defined_areas = get_allowed_block_template_part_areas();
-
-	foreach ( $defined_areas as $area ) {
-		if ( 'uncategorized' !== $area['area'] ) {
-			$has_instance_for_area = false;
-			foreach ( $instance_variations as $variation ) {
-				if ( $variation['attributes']['area'] === $area['area'] ) {
-					$has_instance_for_area = true;
-					break;
-				}
-			}
-
-			$scope = $has_instance_for_area ? array() : array( 'inserter' );
-
-			$variations[] = array(
-				'name'        => 'area_' . $area['area'],
-				'title'       => $area['label'],
-				'description' => $area['description'],
-				'attributes'  => array(
-					'area' => $area['area'],
-				),
-				'scope'       => $scope,
-				'icon'        => $area['icon'],
-			);
-		}
-	}
-	return $variations;
-}
-
-/**
- * Returns an array of instance variation objects for the template part block
- *
- * @since 6.1.0
- *
- * @return array Array containing the block variation objects.
- */
-function build_template_part_block_instance_variations() {
-	// Block themes are unavailable during installation.
-	if ( wp_installing() ) {
-		return array();
-	}
-
-	if ( ! current_theme_supports( 'block-templates' ) && ! current_theme_supports( 'block-template-parts' ) ) {
-		return array();
-	}
-
-	$variations     = array();
-	$template_parts = get_block_templates(
-		array(
-			'post_type' => 'wp_template_part',
-		),
-		'wp_template_part'
-	);
-
-	$defined_areas = get_allowed_block_template_part_areas();
-	$icon_by_area  = array_combine( array_column( $defined_areas, 'area' ), array_column( $defined_areas, 'icon' ) );
-
-	foreach ( $template_parts as $template_part ) {
-		$variations[] = array(
-			'name'        => 'instance_' . sanitize_title( $template_part->slug ),
-			'title'       => $template_part->title,
-			// If there's no description for the template part don't show the
-			// block description. This is a bit hacky, but prevent the fallback
-			// by using a non-breaking space so that the value of description
-			// isn't falsey.
-			'description' => $template_part->description || '&nbsp;',
-			'attributes'  => array(
-				'slug'  => $template_part->slug,
-				'theme' => $template_part->theme,
-				'area'  => $template_part->area,
-			),
-			'scope'       => array( 'inserter' ),
-			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
-			'example'     => array(
-				'attributes' => array(
-					'slug'  => $template_part->slug,
-					'theme' => $template_part->theme,
-					'area'  => $template_part->area,
-				),
-			),
-		);
-	}
-	return $variations;
-}
-
-/**
- * Returns an array of all template part block variations.
- *
- * @since 5.9.0
- *
- * @return array Array containing the block variation objects.
- */
-function build_template_part_block_variations() {
-	$instance_variations = build_template_part_block_instance_variations();
-	$area_variations     = build_template_part_block_area_variations( $instance_variations );
-	return array_merge( $area_variations, $instance_variations );
-}
-
 /**
  * Registers the `core/template-part` block on the server.
  *
@@ -294,7 +185,6 @@ function register_block_core_template_part() {
 		__DIR__ . '/template-part',
 		array(
 			'render_callback'    => 'render_block_core_template_part',
-			'variation_callback' => 'build_template_part_block_variations',
 		)
 	);
 }
diff --git a/packages/block-library/src/template-part/variations.php b/packages/block-library/src/template-part/variations.php
new file mode 100644
index 00000000000..c47f0ffc127
--- /dev/null
+++ b/packages/block-library/src/template-part/variations.php
@@ -0,0 +1,112 @@
+<?php
+
+/**
+ * Returns an array of area variation objects for the template part block.
+ *
+ * @since 6.1.0
+ *
+ * @param array $instance_variations The variations for instances.
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_area_variations( $instance_variations ) {
+	$variations    = array();
+	$defined_areas = get_allowed_block_template_part_areas();
+
+	foreach ( $defined_areas as $area ) {
+		if ( 'uncategorized' !== $area['area'] ) {
+			$has_instance_for_area = false;
+			foreach ( $instance_variations as $variation ) {
+				if ( $variation['attributes']['area'] === $area['area'] ) {
+					$has_instance_for_area = true;
+					break;
+				}
+			}
+
+			$scope = $has_instance_for_area ? array() : array( 'inserter' );
+
+			$variations[] = array(
+				'name'        => 'area_' . $area['area'],
+				'title'       => $area['label'],
+				'description' => $area['description'],
+				'attributes'  => array(
+					'area' => $area['area'],
+				),
+				'scope'       => $scope,
+				'icon'        => $area['icon'],
+			);
+		}
+	}
+	return $variations;
+}
+
+/**
+ * Returns an array of instance variation objects for the template part block
+ *
+ * @since 6.1.0
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_instance_variations() {
+	// Block themes are unavailable during installation.
+	if ( wp_installing() ) {
+		return array();
+	}
+
+	if ( ! current_theme_supports( 'block-templates' ) && ! current_theme_supports( 'block-template-parts' ) ) {
+		return array();
+	}
+
+	$variations     = array();
+	$template_parts = get_block_templates(
+		array(
+			'post_type' => 'wp_template_part',
+		),
+		'wp_template_part'
+	);
+
+	$defined_areas = get_allowed_block_template_part_areas();
+	$icon_by_area  = array_combine( array_column( $defined_areas, 'area' ), array_column( $defined_areas, 'icon' ) );
+
+	foreach ( $template_parts as $template_part ) {
+		$variations[] = array(
+			'name'        => 'instance_' . sanitize_title( $template_part->slug ),
+			'title'       => $template_part->title,
+			// If there's no description for the template part don't show the
+			// block description. This is a bit hacky, but prevent the fallback
+			// by using a non-breaking space so that the value of description
+			// isn't falsey.
+			'description' => $template_part->description || '&nbsp;',
+			'attributes'  => array(
+				'slug'  => $template_part->slug,
+				'theme' => $template_part->theme,
+				'area'  => $template_part->area,
+			),
+			'scope'       => array( 'inserter' ),
+			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
+			'example'     => array(
+				'attributes' => array(
+					'slug'  => $template_part->slug,
+					'theme' => $template_part->theme,
+					'area'  => $template_part->area,
+				),
+			),
+		);
+	}
+	return $variations;
+}
+
+/**
+ * Returns an array of all template part block variations.
+ *
+ * @since 5.9.0
+ *
+ * @return array Array containing the block variation objects.
+ */
+function build_template_part_block_variations() {
+	$instance_variations = build_template_part_block_instance_variations();
+	$area_variations     = build_template_part_block_area_variations( $instance_variations );
+	return array_merge( $area_variations, $instance_variations );
+}
+
+return build_template_part_block_variations();
build/block-library/blocks/template-part/variations.php
<?php

/**
 * Returns an array of area variation objects for the template part block.
 *
 * @since 6.1.0
 *
 * @param array $instance_variations The variations for instances.
 *
 * @return array Array containing the block variation objects.
 */
function gutenberg_build_template_part_block_area_variations( $instance_variations ) {
	$variations    = array();
	$defined_areas = get_allowed_block_template_part_areas();

	foreach ( $defined_areas as $area ) {
		if ( 'uncategorized' !== $area['area'] ) {
			$has_instance_for_area = false;
			foreach ( $instance_variations as $variation ) {
				if ( $variation['attributes']['area'] === $area['area'] ) {
					$has_instance_for_area = true;
					break;
				}
			}

			$scope = $has_instance_for_area ? array() : array( 'inserter' );

			$variations[] = array(
				'name'        => 'area_' . $area['area'],
				'title'       => $area['label'],
				'description' => $area['description'],
				'attributes'  => array(
					'area' => $area['area'],
				),
				'scope'       => $scope,
				'icon'        => $area['icon'],
			);
		}
	}
	return $variations;
}

/**
 * Returns an array of instance variation objects for the template part block
 *
 * @since 6.1.0
 *
 * @return array Array containing the block variation objects.
 */
function gutenberg_build_template_part_block_instance_variations() {
	// Block themes are unavailable during installation.
	if ( wp_installing() ) {
		return array();
	}

	if ( ! current_theme_supports( 'block-templates' ) && ! current_theme_supports( 'block-template-parts' ) ) {
		return array();
	}

	$variations     = array();
	$template_parts = get_block_templates(
		array(
			'post_type' => 'wp_template_part',
		),
		'wp_template_part'
	);

	$defined_areas = get_allowed_block_template_part_areas();
	$icon_by_area  = array_combine( array_column( $defined_areas, 'area' ), array_column( $defined_areas, 'icon' ) );

	foreach ( $template_parts as $template_part ) {
		$variations[] = array(
			'name'        => 'instance_' . sanitize_title( $template_part->slug ),
			'title'       => $template_part->title,
			// If there's no description for the template part don't show the
			// block description. This is a bit hacky, but prevent the fallback
			// by using a non-breaking space so that the value of description
			// isn't falsey.
			'description' => $template_part->description || '&nbsp;',
			'attributes'  => array(
				'slug'  => $template_part->slug,
				'theme' => $template_part->theme,
				'area'  => $template_part->area,
			),
			'scope'       => array( 'inserter' ),
			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
			'example'     => array(
				'attributes' => array(
					'slug'  => $template_part->slug,
					'theme' => $template_part->theme,
					'area'  => $template_part->area,
				),
			),
		);
	}
	return $variations;
}

/**
 * Returns an array of all template part block variations.
 *
 * @since 5.9.0
 *
 * @return array Array containing the block variation objects.
 */
function gutenberg_build_template_part_block_variations() {
	$instance_variations = gutenberg_build_template_part_block_instance_variations();
	$area_variations     = gutenberg_build_template_part_block_area_variations( $instance_variations );
	return array_merge( $area_variations, $instance_variations );
}

return gutenberg_build_template_part_block_variations();

(The latter is required since Gutenberg isn’t currently copying files specified in a block.json’s render or variations field to the build/ directory. Refer to #63077 for further information.)

Then, in the Site Editor, verify that instances of the block still work, and that their variations are detected correctly (e.g. a header template part is recognized as such in the block inspector).

Specifically, open the inserter and enter "Header" into the search input field. Both the Template Part block and its Header variation should be shown.

image

@ockham ockham self-assigned this May 29, 2024
@ockham ockham force-pushed the update/block-json-schema-to-allow-variations-filename branch from f1c7897 to 4329687 Compare June 18, 2024 09:52
@ockham ockham changed the title block.json schema: Allow passing filename as variations argument block.json: Allow passing filename as variations field Jun 18, 2024
@ockham ockham added [Type] Enhancement A suggestion for improvement. [Feature] Block Variations Block variations, including introducing new variations and variations as a feature [Feature] Block API API that allows to express the block paradigm. labels Jun 18, 2024
Copy link

Flaky tests detected in fa4c058.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9568198642
📝 Reported issues:

Copy link

github-actions bot commented Jun 25, 2024

Size Change: +3.14 kB (+0.18%)

Total Size: 1.76 MB

Filename Size Change
build/block-directory/index.min.js 7.31 kB -7 B (-0.1%)
build/block-editor/index.min.js 254 kB +1.11 kB (+0.44%)
build/block-editor/style-rtl.css 16 kB +48 B (+0.3%)
build/block-editor/style.css 16 kB +48 B (+0.3%)
build/block-library/blocks/post-comments-form/style-rtl.css 522 B +16 B (+3.16%)
build/block-library/blocks/post-comments-form/style.css 522 B +16 B (+3.16%)
build/block-library/blocks/query/editor-rtl.css 514 B +12 B (+2.39%)
build/block-library/blocks/query/editor.css 513 B +11 B (+2.19%)
build/block-library/editor-rtl.css 11.9 kB +15 B (+0.13%)
build/block-library/editor.css 11.9 kB +16 B (+0.13%)
build/block-library/index.min.js 219 kB +315 B (+0.14%)
build/block-library/style-rtl.css 14.6 kB +17 B (+0.12%)
build/block-library/style.css 14.6 kB +17 B (+0.12%)
build/blocks/index.min.js 52.3 kB +145 B (+0.28%)
build/components/index.min.js 228 kB +998 B (+0.44%)
build/components/style-rtl.css 12.1 kB +17 B (+0.14%)
build/components/style.css 12.1 kB +16 B (+0.13%)
build/core-data/index.min.js 72.6 kB +32 B (+0.04%)
build/customize-widgets/index.min.js 10.9 kB -2 B (-0.02%)
build/edit-post/index.min.js 12.5 kB +15 B (+0.12%)
build/edit-post/style-rtl.css 2.34 kB -1 B (-0.04%)
build/edit-post/style.css 2.33 kB -1 B (-0.04%)
build/edit-site/index.min.js 209 kB +853 B (+0.41%)
build/edit-site/posts-rtl.css 6.56 kB +49 B (+0.75%)
build/edit-site/posts.css 6.57 kB +48 B (+0.74%)
build/edit-site/style-rtl.css 11.6 kB -56 B (-0.48%)
build/edit-site/style.css 11.6 kB -59 B (-0.51%)
build/editor/index.min.js 98 kB -439 B (-0.45%)
build/editor/style-rtl.css 9.1 kB -49 B (-0.54%)
build/editor/style.css 9.1 kB -50 B (-0.55%)
build/list-reusable-blocks/index.min.js 2.16 kB -6 B (-0.28%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.58 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 310 B
build/block-library/blocks/button/editor.css 310 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 336 B
build/block-library/blocks/buttons/editor.css 336 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 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 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 221 B
build/block-library/blocks/comments-pagination/editor.css 211 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 668 B
build/block-library/blocks/cover/editor.css 669 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 314 B
build/block-library/blocks/embed/editor.css 314 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 342 B
build/block-library/blocks/form-input/style.css 342 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 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 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 402 B
build/block-library/blocks/group/editor.css 402 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 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.54 kB
build/block-library/blocks/image/style.css 1.54 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.54 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 204 B
build/block-library/blocks/latest-posts/editor.css 204 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 104 B
build/block-library/blocks/list/style.css 104 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 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 663 B
build/block-library/blocks/navigation-link/editor.css 664 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.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 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/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 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-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 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 141 B
build/block-library/blocks/post-excerpt/style.css 141 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 341 B
build/block-library/blocks/post-featured-image/style.css 341 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 100 B
build/block-library/blocks/post-title/style.css 100 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 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 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/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 221 B
build/block-library/blocks/quote/theme.css 225 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 183 B
build/block-library/blocks/search/editor.css 183 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-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 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 676 B
build/block-library/blocks/social-links/editor.css 675 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/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/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 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 108 B
build/block-library/blocks/term-description/style.css 108 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 553 B
build/block-library/blocks/video/editor.css 554 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/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/theme-rtl.css 702 B
build/block-library/theme.css 707 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 15.2 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.77 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.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 494 B
build/format-library/style.css 493 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/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.68 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
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/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.58 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.35 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 578 B
build/preferences/style.css 578 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.73 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.01 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 2.65 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

@ockham ockham force-pushed the update/block-json-schema-to-allow-variations-filename branch from 74e0b93 to dce24d7 Compare June 25, 2024 11:49
@ockham
Copy link
Contributor Author

ockham commented Jun 25, 2024

I've added some testing instructions and noticed that isn't quite working yet. I've updated the PR description to reflect that:

Apply the following patch [...] Then, in the Site Editor, [...]
Specifically, open the inserter and enter "Header" into the search input field. Both the Template Part block and its Header variation should be shown.
⚠️ This is currently not working; need to investigate!

image

AFAICT from the page source, the problem is that the bootstrapped block type has variations set to the filename (file:./variations.php). While we're correctly ignoring the string value on the client side, this shouldn't be happening in the first place; instead, the server should apply the logic from gutenberg_filter_block_type_metadata_settings_allow_variations_php_file and set the variations field to the variations generated by that file.

This is probably due to an issue I've seen before where filters aren't applied properly (?) when preloading/bootstrapping 😕

@ockham
Copy link
Contributor Author

ockham commented Jun 25, 2024

I dug a bit deeper, and it seems like the problem on the server side is due to realpath returning false when attempting to resolve the location of the variations.php file.

I've checked the corresponding directory, which is the Template Part block's subfolder of the build/ directory (build/block-library/blocks/template-part/), and there really isn't any variations.php file in that folder. Maybe that shouldn't surprise me, as we don't have a build step anywhere that would copy that file over from the src/ directory 🤔

It made me wonder however how we're handling render.php files. I checked the PR that introduced the render field, #42430, and I noticed there isn't any build step either. Furthermore, it turns out that none of our Core blocks is using the render field! (Only the blocks in our e2e tests package are.)

I wonder if that means that using the render field in a Core block to specify the file that's supposed to render it would also break 😬 Or maybe I'm missing something. cc/ @gziolo

Anyway, if I'm correct, then the fix would be to include a build step that copies those PHP files over to the build dir. We're already doing that for blocks' index.php files; what's slightly trickier here is that we'll need to determine the filename from the variations field (and the render field, respectively, if that's also broken).

Edit: During that build step, we'll also need to prefix any functions inside of the variations.phps with gutenberg_ (much like we do for the index.phps).

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Maybe that shouldn't surprise me, as we don't have a build step anywhere that would copy that file over from the src/ directory 🤔

Yes, it isn't handled in the Gutenberg repository. The same issue most likely would exist if someone would try to use "render": "file:./render.php".

I wonder if that means that using the render field in a Core block to specify the file that's supposed to render it would also break 😬

It would require updating the webpack config which shouldn't be that much work but it wasn't necessary so far.

During that build step, we'll also need to prefix any functions inside of the variations.phps with gutenberg_ (much like we do for the index.phps).

I think that's already happening when copying existing index.php files for core blocks. So that would get extended to cover the linked files through variations and render fields. I don't think it's a blocker for this PR.

At the same time, I think it would be worth adding support for variations file in @wordpress/scripts mirroring what we have for render path:

new RenderPathsPlugin(),

/**
* The plugin recomputes the render paths once on each compilation. It is necessary to avoid repeating processing
* when filtering every discovered PHP file in the source folder. This is the most performant way to ensure that
* changes in `block.json` files are picked up in watch mode.
*/
class RenderPathsPlugin {

{
from: '**/*.php',
context: getWordPressSrcDirectory(),
noErrorOnMissing: true,
filter: ( filepath ) => {
return (
process.env.WP_COPY_PHP_FILES_TO_DIST ||
RenderPathsPlugin.renderPaths.includes(
realpathSync( filepath ).replace( /\\/g, '/' )
)
);
},
},

It probably would require making the existing custom plugin general purpose tool for discovering linked PHP files.

docs/reference-guides/block-api/block-registration.md Outdated Show resolved Hide resolved
docs/reference-guides/block-api/block-metadata.md Outdated Show resolved Hide resolved
lib/compat/wordpress-6.7/blocks.php Outdated Show resolved Hide resolved
@ockham ockham force-pushed the update/block-json-schema-to-allow-variations-filename branch from dce24d7 to b745e05 Compare July 2, 2024 14:38
@ockham
Copy link
Contributor Author

ockham commented Jul 2, 2024

@gziolo Thank you for the pointers! I dug a bit and found that #43917 actually did add support for copying render files to the build folder, and #51162 then further optimized that build step. I'll see if I can apply the same technique to the variations field.

Edit: To clarify, this only applies to third-party blocks, but not to Core blocks (which use a different build system).

@ockham
Copy link
Contributor Author

ockham commented Jul 3, 2024

I've filed #63077 to document that render files aren't copied to the build/ directory for Core blocks.

@ockham ockham marked this pull request as ready for review July 3, 2024 11:03
Copy link

github-actions bot commented Jul 3, 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: gziolo <gziolo@git.wordpress.org>

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

@ockham
Copy link
Contributor Author

ockham commented Jul 3, 2024

I've started work on including variations files in the build (for third-party blocks): #63098

@ockham
Copy link
Contributor Author

ockham commented Jul 3, 2024

Tests are apparently failing because of #63073. I've filed #63099 to fix it, we'll need to rebase this PR once that's merged.

@ockham ockham force-pushed the update/block-json-schema-to-allow-variations-filename branch from 3753426 to 0ea4266 Compare July 3, 2024 16:32
@ockham ockham requested a review from tjcafferkey July 9, 2024 10:03
"type": "string"
"oneOf": [
{
"type": "string"
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you think it is worth adding a description property here to better document the expected usage of this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, that's a good point. I thought it might collide with the description a couple lines above (i.e. which applies to both oneOf options), but it seems to be allowed by the JSON schema spec, so I'll add it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I've started work on including variations files in the build (for third-party blocks): #63098

Ok, that work for me as long it's covered 👍🏻

I don't have more comments on my side, but I see some pending feedback to address from @tjcafferkey before merging.

@ockham
Copy link
Contributor Author

ockham commented Jul 9, 2024

Thank you very much @gziolo and @tjcafferkey!

@ockham ockham merged commit 4c93cf2 into trunk Jul 9, 2024
64 of 65 checks passed
@ockham ockham deleted the update/block-json-schema-to-allow-variations-filename branch July 9, 2024 12:22
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 9, 2024
huubl pushed a commit to huubl/gutenberg that referenced this pull request Jul 10, 2024
…2092)

Allow passing the name of a PHP file that returns a block's variations in the `block.json` file's `variations` field.

Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Co-authored-by: tjcafferkey <tomjcafferkey@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jul 18, 2024
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
…2092)

Allow passing the name of a PHP file that returns a block's variations in the `block.json` file's `variations` field.

Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Co-authored-by: tjcafferkey <tomjcafferkey@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
@fabiankaegy fabiankaegy mentioned this pull request Oct 1, 2024
97 tasks
@fabiankaegy
Copy link
Member

fabiankaegy commented Oct 2, 2024

Hey @ockham 👋

Would you be able to help write a dev note for this for the 6.7 release? We are planning to have this as part of a larger Miscellaneous Editor Updates note.

We are hoping to get all drafts in by October 13th to leave some time for reviews before the RC1.

All Dev Notes get tracked in #65784 so feel free to leave a note there or ping me directly :)

Please let us know if you can assist with that.

Thanks in advance :)

@ockham
Copy link
Contributor Author

ockham commented Oct 7, 2024

Hey @fabiankaegy, sure thing! Please find my suggested Dev note for this enhancement here.

@gziolo gziolo mentioned this pull request Oct 10, 2024
68 tasks
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. [Feature] Block Variations Block variations, including introducing new variations and variations as a feature Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants