10up · fabiankaegy · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/example/package.json b/example/package.json
@@ -7,7 +7,7 @@
         "build": "wp-scripts build",
         "start": "wp-scripts start",
         "wp-env": "wp-env",
-		"start-env": "wp-env start",
+        "start-env": "wp-env start",
         "import-media": "wp-env run tests-cli wp media import /var/www/html/wp-content/plugins/example/images/1920-1080.png"
     },
     "keywords": [],
@@ -16,7 +16,7 @@
     "devDependencies": {
         "@wordpress/env": "^5.8.0",
         "@wordpress/eslint-plugin": "^13.7.0",
-        "@wordpress/scripts": "^25.0.0"
+        "@wordpress/scripts": "^25.5.1"
     },
     "dependencies": {
         "@10up/block-components": "file:../dist/index.js",

diff --git a/example/plugin.php b/example/plugin.php
@@ -14,59 +14,42 @@
 
 namespace HelloWorld;
 
+// Useful global constants.
+define( 'EXAMPLE_PLUGIN_TEMPLATE_URL', plugin_dir_url( __FILE__ ) );
+define( 'EXAMPLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
+define( 'EXAMPLE_PLUGIN_DIST_PATH', EXAMPLE_PLUGIN_PATH . 'build/' );
+define( 'EXAMPLE_PLUGIN_DIST_URL', EXAMPLE_PLUGIN_TEMPLATE_URL . '/build/' );
+define( 'EXAMPLE_PLUGIN_INC', EXAMPLE_PLUGIN_PATH . 'includes/' );
+define( 'EXAMPLE_PLUGIN_BLOCK_DIR', EXAMPLE_PLUGIN_INC . 'blocks/' );
+define( 'EXAMPLE_PLUGIN_BLOCK_DIST_DIR', EXAMPLE_PLUGIN_PATH . 'build/blocks/' );
+
 add_action( 'init', __NAMESPACE__ . '\register_block' );
 /**
  * Register the block
  */
 function register_block() {
 
-	$dir               = dirname( __FILE__ );
-	$script_asset_path = "$dir/build/index.asset.php";
-	$index_js          = 'build/index.js';
-	$script_asset      = require $script_asset_path;
-	wp_register_script(
-		'editor-script',
-		plugins_url( $index_js, __FILE__ ),
-		$script_asset['dependencies'],
-		$script_asset['version'],
-		false
-	);
-
-	register_block_type(
-		'example/hello-world',
-		[
-			'editor_script' => 'editor-script',
-		]
-	);
-
-	register_block_type(
-		__DIR__ . '/src/blocks/link-example',
-		[
-			'editor_script'   => 'editor-script',
-			'render_callback' => function( $attributes, $content, $block ) {
-				$title = $attributes['title'];
-
-				$link_one_url   = isset( $attributes['url'] ) ? $attributes['url'] : '';
-				$link_one_label = isset( $attributes['text'] ) ? $attributes['text'] : '';
-
-				$link_two_url   = isset( $attributes['urlTwo'] ) ? $attributes['urlTwo'] : '';
-				$link_two_label = isset( $attributes['textTwo'] ) ? $attributes['textTwo'] : '';
+	if ( file_exists( EXAMPLE_PLUGIN_BLOCK_DIST_DIR ) ) {
+		$block_json_files = glob( EXAMPLE_PLUGIN_BLOCK_DIST_DIR . '*/block.json' );
+		foreach ( $block_json_files as $filename ) {
+			$block_folder = dirname( $filename );
+			register_block_type( $block_folder );
+		};
+	};
+};
 
-				$wrapper_attributes = get_block_wrapper_attributes();
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_scripts' );
+function enqueue_block_editor_scripts() {
+	$asset_file = include EXAMPLE_PLUGIN_DIST_PATH . 'index.asset.php';
 
-				ob_start();
-				?>
-				<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
-					<h2><?php echo wp_kses_post( $title ); ?></h2>
-					<a href="<?php echo esc_url( $link_one_url ); ?>"><?php echo wp_kses_post( $link_one_label ); ?></a>
-					<a href="<?php echo esc_url( $link_two_url ); ?>"><?php echo wp_kses_post( $link_two_label ); ?></a>
-				</div>
-				<?php
-				return ob_get_clean();
-			},
-		]
+	wp_enqueue_script(
+		'example-block-editor-script',
+		EXAMPLE_PLUGIN_DIST_URL . 'index.js',
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
 	);
-};
+}
 
 function register_book_custom_post_type() {
 	$labels = array(

diff --git a/example/src/blocks/content-item/block.json b/example/src/blocks/content-item/block.json
@@ -0,0 +1,16 @@
+{
+	"apiVersion": 2,
+	"name": "example/content-item",
+	"title": "Content Item",
+	"icon": "smiley",
+	"category": "common",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"attributes": {},
+	"variations": [],
+	"usesContext": ["postId", "postType", "queryId"],
+	"ancestor": ["core/post-template"],
+	"editorScript": "file:./index.js"
+}
diff --git a/example/src/blocks/content-item/edit.js b/example/src/blocks/content-item/edit.js
@@ -0,0 +1,43 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+import {
+	PostContext,
+	PostFeaturedImage,
+	PostTitle,
+	PostPrimaryCategory,
+	PostDate,
+	PostCategoryList,
+	PostAuthor,
+	PostExcerpt
+} from '@10up/block-components';
+
+export const BlockEdit = ({ context }) => {
+	const blockProps = useBlockProps();
+	return (
+		<article {...blockProps}>
+			<PostContext postId={context.postId} postType={context.postType} isEditable={!Number.isFinite(context.queryId)}>
+				<figure className="wp-block-example-content-item__media">
+					<PostFeaturedImage className="wp-block-example-content-item__image" />
+				</figure>
+				<PostPrimaryCategory className="wp-block-example-content-item__category" />
+				<PostTitle className="wp-block-example-content-item__title" />
+				<PostCategoryList className="wp-block-example-content-item__categories">
+					<PostCategoryList.ListItem className="wp-block-example-content-item__category">
+						<PostCategoryList.TermLink className="wp-block-example-content-item__category-link" />
+					</PostCategoryList.ListItem>
+				</PostCategoryList>
+				<PostDate className="wp-block-example-content-item__date" />
+				<PostExcerpt className="wp-block-example-content-item__excerpt" />
+				<PostAuthor className="wp-block-example-content-item__author">
+					<PostAuthor.Avatar className="wp-block-example-content-item__author-avatar" />
+					<PostAuthor.Name tagName="a" className="wp-block-example-content-item__author-name" />
+					<PostAuthor.FirstName className="wp-block-example-content-item__author-first-name" />
+					<PostAuthor.LastName className="wp-block-example-content-item__author-last-name" />
+					<PostAuthor.Bio className="wp-block-example-content-item__author-bio" />
+					<PostAuthor.Email className="wp-block-example-content-item__author-email" />
+				</PostAuthor>
+			</PostContext>
+		</article>
+	)
+};
diff --git a/example/src/blocks/content-item/index.js b/example/src/blocks/content-item/index.js
@@ -1,62 +1,8 @@
 import { registerBlockType } from '@wordpress/blocks';
-import { useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import metadata from './block.json';
+import { BlockEdit } from './edit';
 
-import {
-	PostContext,
-	PostFeaturedImage,
-	PostTitle,
-	PostPrimaryCategory,
-	PostDate,
-	PostCategoryList,
-	PostAuthor,
-	PostExcerpt
-} from '@10up/block-components';
-
-const NAMESPACE = 'example';
-
-registerBlockType(`${NAMESPACE}/content-item`, {
-	apiVersion: 2,
-	title: __('Content Item', NAMESPACE),
-	icon: 'smiley',
-	category: 'common',
-	example: {},
-	supports: {
-		html: false
-	},
-	attributes: {},
-	transforms: {},
-	variations: [],
-	usesContext: ['postId', 'postType', 'queryId'],
-	ancestor: ['core/post-template'],
-	edit: ({ context }) => {
-		const blockProps = useBlockProps();
-		return (
-			<article {...blockProps}>
-				<PostContext postId={context.postId} postType={context.postType} isEditable={!Number.isFinite(context.queryId)}>
-					<figure className="wp-block-example-content-item__media">
-						<PostFeaturedImage className="wp-block-example-content-item__image" />
-					</figure>
-					<PostPrimaryCategory className="wp-block-example-content-item__category" />
-					<PostTitle className="wp-block-example-content-item__title" />
-					<PostCategoryList className="wp-block-example-content-item__categories">
-						<PostCategoryList.ListItem className="wp-block-example-content-item__category">
-							<PostCategoryList.TermLink className="wp-block-example-content-item__category-link" />
-						</PostCategoryList.ListItem>
-					</PostCategoryList>
-					<PostDate className="wp-block-example-content-item__date" />
-					<PostExcerpt className="wp-block-example-content-item__excerpt" />
-					<PostAuthor className="wp-block-example-content-item__author">
-						<PostAuthor.Avatar className="wp-block-example-content-item__author-avatar" />
-						<PostAuthor.Name tagName="a" className="wp-block-example-content-item__author-name" />
-						<PostAuthor.FirstName className="wp-block-example-content-item__author-first-name" />
-						<PostAuthor.LastName className="wp-block-example-content-item__author-last-name" />
-						<PostAuthor.Bio className="wp-block-example-content-item__author-bio" />
-						<PostAuthor.Email className="wp-block-example-content-item__author-email" />
-					</PostAuthor>
-				</PostContext>
-			</article>
-		)
-	},
+registerBlockType(metadata, {
+	edit: BlockEdit,
 	save: () => null
 });
diff --git a/example/src/blocks/content-search-example/block.json b/example/src/blocks/content-search-example/block.json
@@ -0,0 +1,19 @@
+{
+	"apiVersion": 2,
+	"name": "example/content-search",
+	"title": "Post Searcher",
+    "description": "Example Block to show the Content Search in usage",
+    "icon": "smiley",
+    "category": "common",
+    "example": {},
+    "supports": {
+        "html": false
+    },
+    "attributes": {
+        "selectedPost": {
+            "type": "array"
+        }
+    },
+    "variations": [],
+	"editorScript": "file:./index.js"
+}
diff --git a/example/src/blocks/content-search-example/edit.js b/example/src/blocks/content-search-example/edit.js
@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, Placeholder } from '@wordpress/components';
+
+import { ContentSearch } from '@10up/block-components';
+
+export const BlockEdit = (props) => {
+	const {
+		setAttributes
+	} = props;
+
+	function handlePostSelection(post) {
+		setAttributes({ selectedPost: post })
+	}
+
+	const blockProps = useBlockProps();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={__('Post Searcher', 'example')}>
+					<ContentSearch
+						label={__('Select a Post or Page', 'example')}
+						contentTypes={['page', 'post']}
+						onSelectItem={handlePostSelection}
+						fetchInitialResults
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div {...blockProps}>
+				<Placeholder label={__('Post Searcher', 'example')} instructions={__('Use the text field to search for a post', 'example')}>
+					<ContentSearch
+						label={__('Select a Post or Page', 'example')}
+						contentTypes={['page', 'post']}
+						onSelectItem={handlePostSelection}
+						fetchInitialResults
+					/>
+				</Placeholder>
+			</div>
+		</>
+	)
+}
diff --git a/example/src/blocks/content-search-example/index.js b/example/src/blocks/content-search-example/index.js
@@ -1,60 +1,8 @@
 import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, Placeholder } from '@wordpress/components';
+import metadata from './block.json';
+import { BlockEdit } from './edit';
 
-import { ContentSearch } from '@10up/block-components';
-
-const NAMESPACE = 'example';
-
-registerBlockType( `${ NAMESPACE }/content-search`, {
-    title: __( 'Post Searcher', NAMESPACE ),
-    description: __( 'Example Block to show the Content Search in usage', NAMESPACE ),
-    icon: 'smiley',
-    category: 'common',
-    example: {},
-    supports: {
-        html: false
-    },
-    attributes: {
-        selectedPost: {
-            type: 'array'
-        }
-    },
-    transforms: {},
-    variations: [],
-    edit: (props) => {
-        const {
-            className,
-            setAttributes
-        } = props;
-
-        function handlePostSelection( post ) {
-            setAttributes( { selectedPost: post } )
-        }
-
-        return (
-            <>
-            <InspectorControls>
-                <PanelBody title={ __( 'Post Searcher', NAMESPACE ) }>
-                    <ContentSearch
-                        label={ __( 'Select a Post or Page', NAMESPACE ) }
-                        contentTypes={ [ 'page', 'post' ] }
-                        onSelectItem={ handlePostSelection }
-                        fetchInitialResults
-                    />
-                </PanelBody>
-            </InspectorControls>
-            <Placeholder label={ __( 'Post Searcher', NAMESPACE ) } instructions={ __( 'Use the text field to search for a post', NAMESPACE) } className={ className }>
-                <ContentSearch
-                    label={ __( 'Select a Post or Page', NAMESPACE ) }
-                    contentTypes={ [ 'page', 'post' ] }
-                    onSelectItem={ handlePostSelection }
-                    fetchInitialResults
-                />
-            </Placeholder>
-            </>
-        )
-    },
+registerBlockType( metadata, {
+    edit: BlockEdit,
     save: () => null
 } );
diff --git a/example/src/blocks/hello-world/block.json b/example/src/blocks/hello-world/block.json
@@ -0,0 +1,18 @@
+{
+	"name": "example/hello-world",
+	"title": "Hello World",
+    "description": "Example Block to show the Post Picker in usage",
+    "icon": "smiley",
+    "category": "common",
+    "example": {},
+    "supports": {
+        "html": false
+    },
+    "attributes": {
+        "selectedPost": {
+            "type": "array"
+        }
+    },
+    "variations": [],
+	"editorScript": "file:./index.js"
+}