Update Recipe Card (ESNext) to use latest API

05-recipe-card-esnext/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends":  [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}

05-recipe-card-esnext/block.json

@@ -0,0 +1,51 @@
+{
+	"apiVersion": 2,
+	"name": "gutenberg-examples/example-05-recipe-card-esnext",
+	"title": "Example: Recipe Card (ESNext)",
+	"icon": "index-card",
+	"category": "layout",
+	"attributes": {
+		"title": {
+			"type": "array",
+			"source": "children",
+			"selector": "h2"
+		},
+		"mediaID": {
+			"type": "number"
+		},
+		"mediaURL": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "img",
+			"attribute": "src"
+		},
+		"ingredients": {
+			"type": "array",
+			"source": "children",
+			"selector": ".ingredients"
+		},
+		"instructions": {
+			"type": "array",
+			"source": "children",
+			"selector": ".steps"
+		}
+	},
+	"example": {
+		"attributes": {
+			"title": "Chocolate Chip Cookies",
+			"mediaID": 1,
+			"mediaURL": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/320px-2ChocolateChipCookies.jpg",
+			"ingredients": [
+				{ "type": "li", "props": { "children": [ "flour" ] } },
+				{ "type": "li", "props": { "children": [ "sugar" ] } },
+				{ "type": "li", "props": { "children": [ "chocolate" ] } },
+				{ "type": "li", "props": { "children": [ "💖" ] } }
+			],
+			"instructions": [
+				{ "type": "p", "props": { "children": [ "Mix, Bake, Enjoy!" ] } }
+			]
+		}
+	},
+	"editorScript": "file:./build/index.js",
+	"style": "file:./build/style-index.css"
+}

05-recipe-card-esnext/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n' ), 'version' => '2b0821ce0f4b62aefa95466fb32e752e');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '13e86d1130456d5e5bf258baea3e7388');

05-recipe-card-esnext/index.php

@@ -29,27 +29,8 @@ function gutenberg_examples_05_esnext_load_textdomain() {
  */
 function gutenberg_examples_05_esnext_register_block() {
 
-	// automatically load dependencies and version
-	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
-
-	wp_register_script(
-		'gutenberg-examples-05-esnext',
-		plugins_url( 'build/index.js', __FILE__ ),
-		$asset_file['dependencies'],
-		$asset_file['version']
-	);
-
-	wp_register_style(
-		'gutenberg-examples-05-esnext',
-		plugins_url( 'style.css', __FILE__ ),
-		array( ),
-		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
-	);
-
-	register_block_type( 'gutenberg-examples/example-05-recipe-card-esnext', array(
-		'style' => 'gutenberg-examples-05-esnext',
-		'editor_script' => 'gutenberg-examples-05-esnext',
-	) );
+	// Register the block by passing the location of block.json to register_block_type.
+	register_block_type( __DIR__ );
 
   if ( function_exists( 'wp_set_script_translations' ) ) {
     /**

05-recipe-card-esnext/package.json

@@ -16,7 +16,7 @@
 	},
 	"main": "build/index.js",
 	"devDependencies": {
-		"@wordpress/scripts": "^9.0.0"
+		"@wordpress/scripts": "^18.0.1"
 	},
 	"scripts": {
 		"build": "wp-scripts build",

05-recipe-card-esnext/src/edit.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText, MediaUpload, useBlockProps } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+
+const Edit = ( props ) => {
+	const {
+		attributes: { title, mediaID, mediaURL, ingredients, instructions },
+		setAttributes,
+	} = props;
+
+	const blockProps = useBlockProps();
+
+	const onChangeTitle = ( value ) => {
+		setAttributes( { title: value } );
+	};
+
+	const onSelectImage = ( media ) => {
+		setAttributes( {
+			mediaURL: media.url,
+			mediaID: media.id,
+		} );
+	};
+	const onChangeIngredients = ( value ) => {
+		setAttributes( { ingredients: value } );
+	};
+
+	const onChangeInstructions = ( value ) => {
+		setAttributes( { instructions: value } );
+	};
+
+	return (
+		<div { ...blockProps }>
+			<RichText
+				tagName="h2"
+				placeholder={ __(
+					'Write Recipe title…',
+					'gutenberg-examples'
+				) }
+				value={ title }
+				onChange={ onChangeTitle }
+			/>
+			<div className="recipe-image">
+				<MediaUpload
+					onSelect={ onSelectImage }
+					allowedTypes="image"
+					value={ mediaID }
+					render={ ( { open } ) => (
+						<Button
+							className={
+								mediaID ? 'image-button' : 'button button-large'
+							}
+							onClick={ open }
+						>
+							{ ! mediaID ? (
+								__( 'Upload Image', 'gutenberg-examples' )
+							) : (
+								<img
+									src={ mediaURL }
+									alt={ __(
+										'Upload Recipe Image',
+										'gutenberg-examples'
+									) }
+								/>
+							) }
+						</Button>
+					) }
+				/>
+			</div>
+			<h3>{ __( 'Ingredients', 'gutenberg-examples' ) }</h3>
+			<RichText
+				tagName="ul"
+				multiline="li"
+				placeholder={ __(
+					'Write a list of ingredients…',
+					'gutenberg-examples'
+				) }
+				value={ ingredients }
+				onChange={ onChangeIngredients }
+				className="ingredients"
+			/>
+			<h3>{ __( 'Instructions', 'gutenberg-examples' ) }</h3>
+			<RichText
+				tagName="div"
+				multiline="p"
+				className="steps"
+				placeholder={ __(
+					'Write the instructions…',
+					'gutenberg-examples'
+				) }
+				value={ instructions }
+				onChange={ onChangeInstructions }
+			/>
+		</div>
+	);
+};
+
+export default Edit;