Change placeholder value for bound blocks from the front-end (#86)

Automattic · Aug 30, 2024 · 505bba1 · 505bba1
1 parent 3d70475
commit 505bba1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/includes/runtime/class-content-model.php b/includes/runtime/class-content-model.php
@@ -333,8 +333,6 @@ public function extract_post_content_from_blocks( $post ) {
 	/**
 	 * Intercepts the saving request and removes the meta keys with default values.
 	 *
-	 * TODO Remove when Gutneberg 19.2 gets released.
-	 *
 	 * @param WP_HTTP_Response|null $response The response.
 	 * @param WP_REST_Server        $server   Route handler used for the request.
 	 * @param WP_REST_Request       $request  The request.
@@ -364,8 +362,6 @@ public function remove_default_meta_keys_on_save( $response, $server, $request )
 	/**
 	 * Intercepts the response and fills the empty meta keys with default values.
 	 *
-	 * TODO Remove when Gutneberg 19.2 gets released.
-	 *
 	 * @param WP_HTTP_Response $result The response.
 	 * @param WP_REST_Server   $server The server.
 	 * @param WP_REST_Request  $request The request.
@@ -385,6 +381,7 @@ public function fill_empty_meta_keys_with_default_values( $result, $server, $req
 				$bound_meta_key = $this->bound_meta_keys[ $key ] ?? null;
 
 				if ( empty( $value ) && $bound_meta_key ) {
+					// TODO: Switch to empty string when Gutenberg 19.2 gets released.
 					$data['meta'][ $key ] = self::FALLBACK_VALUE_PLACEHOLDER;
 				}
 			}
@@ -439,9 +436,31 @@ public function hydrate_bound_groups( $post ) {
 			return;
 		}
 
-		$data_hydrator = new Content_Model_Data_Hydrator( $this->template, false );
+		$editor_blocks = $this->template;
+		$editor_blocks = ( new Content_Model_Data_Hydrator( $editor_blocks, false ) )->hydrate();
+		$editor_blocks = content_model_block_walker( $editor_blocks, array( $this, 'add_fallback_value_placeholder' ) );
+
+		$post->post_content = serialize_blocks( $editor_blocks );
+	}
+
+	/**
+	 * If a block has bindings modify the placeholder text.
+	 *
+	 * @param array $block The original block.
+	 *
+	 * @return array The modified block.
+	 */
+	public function add_fallback_value_placeholder( $block ) {
+		$tentative_block = new Content_Model_Block( $block );
+
+		if ( ! empty( $tentative_block->get_bindings() ) ) {
+			// translators: %s is the block variation name.
+			$block['attrs']['placeholder'] = sprintf( __( 'Enter a value for %s' ), $tentative_block->get_block_variation_name() );
+
+			return $block;
+		}
 
-		$post->post_content = serialize_blocks( $data_hydrator->hydrate() );
+		return $block;
 	}
 
 	/**

diff --git a/includes/runtime/src/hooks/use-fallback-value-clearer.js b/includes/runtime/src/hooks/use-fallback-value-clearer.js
@@ -1,23 +1,21 @@
 import { useLayoutEffect } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { FALLBACK_VALUE_PLACEHOLDER, POST_TYPE } from '../constants';
 
 /**
  * This allows the user to edit values that are bound to an attribute.
  * There is a bug in the Bindings API preventing this from working,
  * so here's our workaround.
  *
- * TODO Remove when Gutneberg 19.2 gets released.
+ * TODO Remove when Gutenberg 19.2 gets released.
  *
  * See https://github.com/Automattic/create-content-model/issues/63 for the problem.
  */
 export const useFallbackValueClearer = () => {
 	const [ meta, setMeta ] = useEntityProp( 'postType', POST_TYPE, 'meta' );
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
 	const blockToMetaMap = useSelect( ( select ) => {
 		const blocks = select( blockEditorStore ).getBlocks();
 		const map = {};
@@ -48,22 +46,16 @@ export const useFallbackValueClearer = () => {
 	}, [] );
 
 	useLayoutEffect( () => {
-		Object.entries( blockToMetaMap ).forEach(
-			( [ blockId, metaInfos ] ) => {
-				metaInfos.forEach( ( { metaKey, blockName } ) => {
-					const value = meta[ metaKey ];
-
-					if ( value === FALLBACK_VALUE_PLACEHOLDER ) {
-						setMeta( { [ metaKey ]: '' } );
+		Object.entries( blockToMetaMap ).forEach( ( [ , metaInfos ] ) => {
+			metaInfos.forEach( ( { metaKey } ) => {
+				const value = meta[ metaKey ];
 
-						updateBlockAttributes( blockId, {
-							placeholder: `Enter a value for ${ blockName }`,
-						} );
-					}
-				} );
-			}
-		);
-	}, [ meta, setMeta, blockToMetaMap, updateBlockAttributes ] );
+				if ( value === FALLBACK_VALUE_PLACEHOLDER ) {
+					setMeta( { [ metaKey ]: '' } );
+				}
+			} );
+		} );
+	}, [ meta, setMeta, blockToMetaMap ] );
 
 	return null;
 };