feat: add ssrbaz block example + block autoloader

mu-plugins/build-processes-demo-blocks/build-processes-demo-blocks.php

@@ -34,11 +34,25 @@ function_exists( 'get_plugin_data' ) || require_once ABSPATH . 'wp-admin/include
 
 // Include the rest of the blocks plugin's files if system requirements check out.
 if ( is_php_version_compatible( BPD_BLOCKS_METADATA['RequiresPHP'] ) && is_wp_version_compatible( BPD_BLOCKS_METADATA['RequiresWP'] ) ) {
-	foreach ( glob( __DIR__ . '/includes/*.php' ) as $bpd_blocks_filename ) {
-		if ( preg_match( '#/includes/_#i', $bpd_blocks_filename ) ) {
-			continue; // Ignore files prefixed with an underscore.
-		}
 
-		include $bpd_blocks_filename;
+	// Block plugin files.
+	bpd_blocks_include_files( '/includes/*.php' );
+
+	// Individual block files.
+	bpd_blocks_include_files( '/src/*/*.php' );
+}
+
+/**
+ * Include all files in a given directory.
+ *
+ * @param string $directory The directory to include files from.
+ *
+ * @return void
+ */
+function bpd_blocks_include_files( string $directory ): void {
+	foreach ( glob( __DIR__ . $directory ) as $filename ) {
+		if ( ! preg_match( '#/_#i', $filename ) ) {
+			include $filename;
+		}
 	}
 }

mu-plugins/build-processes-demo-blocks/build/ssrbaz/block.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "build-processes-demo/ssrbaz",
+  "version": "0.1.0",
+  "title": "SsrBaz Block",
+  "category": "widgets",
+  "icon": "smiley",
+  "description": "Example SSR block scaffolded with Create Block tool.",
+  "supports": {
+    "html": false,
+    "align": true
+  },
+  "textdomain": "build-processes-demo-blocks",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css"
+}

mu-plugins/build-processes-demo-blocks/build/ssrbaz/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-server-side-render'), 'version' => '528bb65db93901491e93');

mu-plugins/build-processes-demo-blocks/build/ssrbaz/index.css

@@ -0,0 +1 @@
+.wp-block-build-processes-demo-ssrbaz{border:1px dotted red}

mu-plugins/build-processes-demo-blocks/build/ssrbaz/style-index.css

@@ -0,0 +1 @@
+.wp-block-build-processes-demo-ssrbaz{background-color:#21759b;color:#fff;padding:2px}

mu-plugins/build-processes-demo-blocks/includes/plugin-setup.php

@@ -13,8 +13,17 @@
  * @return  void
  */
 function bpd_blocks_init(): void {
-	register_block_type( BPD_BLOCKS_DIR . 'build/foobar' );
-	register_block_type( BPD_BLOCKS_DIR . 'build/spamham' );
+	foreach ( glob( BPD_BLOCKS_DIR . 'build/*', GLOB_ONLYDIR ) as $block_dir ) {
+		$basename = basename( $block_dir );
+		$callback = 'bpd_blocks_render_block_' . str_replace( '-', '_', $basename );
+
+		$args = array();
+		if ( function_exists( $callback ) ) {
+			$args['render_callback'] = $callback;
+		}
+
+		register_block_type( $block_dir, $args );
+	}
 }
 add_action( 'init', 'bpd_blocks_init' );
 

mu-plugins/build-processes-demo-blocks/src/ssrbaz/block.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "build-processes-demo/ssrbaz",
+	"version": "0.1.0",
+	"title": "SsrBaz Block",
+	"category": "widgets",
+	"icon": "smiley",
+	"description": "Example SSR block scaffolded with Create Block tool.",
+	"supports": {
+		"html": false,
+        "align": true
+	},
+	"textdomain": "build-processes-demo-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}

mu-plugins/build-processes-demo-blocks/src/ssrbaz/edit.js

@@ -0,0 +1,50 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * ServerSideRender is a component that renders the block on the server.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/
+ */
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { attributes } ) {
+	return (
+		<div { ...useBlockProps() }>
+
+			<ServerSideRender
+				block="build-processes-demo/ssrbaz"
+				attributes={ attributes }
+			/>
+
+		</div>
+	);
+}

mu-plugins/build-processes-demo-blocks/src/ssrbaz/editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-build-processes-demo-ssrbaz {
+	border: 1px dotted #f00;
+}

mu-plugins/build-processes-demo-blocks/src/ssrbaz/index.js

@@ -0,0 +1,34 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+} );

mu-plugins/build-processes-demo-blocks/src/ssrbaz/ssrbaz-render.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * Render callback for the ssrbaz block.
+ *
+ * @since   0.1.0
+ * @version 0.1.0
+ *
+ * @return string The block HTML.
+ */
+function bpd_blocks_render_block_ssrbaz(): string {
+	$ssr_output = esc_html__( 'This is a server-side rendered block.', 'build-processes-demo-blocks' );
+
+	return '<div ' . get_block_wrapper_attributes() . '>' . esc_html( $ssr_output ) . '</div>';
+}

mu-plugins/build-processes-demo-blocks/src/ssrbaz/style.scss

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-build-processes-demo-ssrbaz {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}