example of block attribute convention for dynamic rendering

WordPress · Jan 18, 2024 · c177616 · c177616
1 parent 1634772
commit c177616
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -630,7 +630,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/post-featured-image
 -	**Category:** theme
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, featured_image, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
 
 ## Post Navigation Link
 

diff --git a/lib/load.php b/lib/load.php
@@ -262,6 +262,12 @@ function () {
 
 // Updates all blocks to use their example data, if they have it.
 function modify_block_attributes_before_render( $block ) {
+
+
+	if ( ! isset( $_GET['block_preview'] ) ) {
+		return $block;
+	};
+
 	$block_type_registry = WP_Block_Type_Registry::get_instance();
 	$block_type = $block_type_registry->get_registered( $block['blockName'] );
 	if ( isset( $block_type->example ) && isset( $block_type->example[ 'attributes' ] ) ) {

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -6,7 +6,15 @@
 	"category": "theme",
 	"description": "Display a post's featured image.",
 	"textdomain": "default",
+	"example": {
+		"attributes": {
+			"featured_image": "<figure style=\"margin-bottom:var(--wp--preset--spacing--40);\" class=\"wp-block-post-featured-image\"><img src=\"https://images.pexels.com/photos/14850795/pexels-photo-14850795.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"object-fit:cover;\" decoding=\"async\"></figure>"
+		}
+	},
 	"attributes": {
+		"featured_image": {
+			"type": "string"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Server-side rendering of the `core/post-featured-image` block.
  *
@@ -20,7 +21,6 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$post_ID = $block->context['postId'];
 
 	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
@@ -53,7 +53,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
-	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
+	$featured_image = 
+	$featured_image = $attributes['featured_image'] ;
 	if ( ! $featured_image ) {
 		return '';
 	}
@@ -91,6 +92,18 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
 
+function assign_featured_image( $block ) {
+	global $post;
+	$size_slug = isset( $block['attrs']['sizeSlug'] ) ? $block['attrs']['sizeSlug'] : 'post-thumbnail';
+	$attr      = get_block_core_post_featured_image_border_attributes( $block['attrs'] );
+
+	$block['attrs']['featured_image'] = get_the_post_thumbnail( $post->id, $size_slug, $attr );
+
+	return $block;
+}
+
+add_filter( 'render_block_data', 'assign_featured_image', 8, 2 );
+
 /**
  * Generate markup for the HTML element that will be used for the overlay.
  *