Short example OOP PHP-rendered WordPress blocks with attributes.

pd-blocks-example-oop.php

<?php
/**
 * Plugin Name: PD Blocks — Example OOP with attributes
 * Description: Single-file OOP PHP-rendered WordPress blocks with 5 example blocks.
 * Author: Paul David Clark
 * Author URI: https://pd.cm
 * Plugin URI: https://pd.cm/oop-blocks
 * Version: 30
 *
 * @package pd
 */

namespace PD;

add_action(
	'plugins_loaded',
	function(){
		/**
		 * Hello World block with a TextControl attribute.
		 */
		register_block( [
			'namespace'       => 'pd',
			'title'           => __( 'Hello world', 'pd' ),
			'icon'            => 'megaphone', // https://developer.wordpress.org/resource/dashicons/
			'category'        => 'widgets',
			'render_callback' => function( $a /* attributes */, $c /* content */, $o /* Block instance */ ) {
				?>
				<h1>Hello <?php echo esc_html( $a['name'] ); ?>.</h1>
				<?php
			},
			'attributes'      => [
				'name' => [
					'type'       => 'string',
					'component'  => 'wp.components.TextControl',
					'default'    => 'world',
					'label'      => 'Name',
					'input_type' => 'text', // text, number, email, or url.
				],
			],
		] );

		/**
		 * WP_Query block with post_per_page and post_type attributes.
		 */
		register_block( [
			'namespace'       => 'pd',
			'title'           => __( 'Example Loop', 'pd' ),
			'icon'            => 'image-rotate', // https://developer.wordpress.org/resource/dashicons/
			'category'        => 'widgets',
			'render_callback' => function( $a /* attributes */, $c /* content */, $o /* Block instance */ ) {
				$q = new \WP_Query(
					[
						'post_type'   => $a['post_type'],
						'posts_per_page' => (int) $a['posts_per_page'],
					]
				);
				while ( $q->have_posts() ) {
					$q->the_post();
				?>
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br/>
				<?php
				}
				wp_reset_postdata();
			},
			'attributes'      => [
				'post_type'      => [
					'type'      => 'string',
					'component' => 'wp.components.SelectControl',
					'default'   => 'post',
					'label'     => __( 'Post Type', 'pd' ),
					'options'   => array_values(
						array_map(
							function( $post_type ) {
								return [
									'label' => $post_type,
									'value' => $post_type,
								];
							},
							(array) get_post_types()
						)
					),
				],
				'posts_per_page'      => [
					'type'      => 'number',
					'component' => 'wp.components.RangeControl',
					'default'   => 3,
					'label'     => __( 'Number of Posts', 'pd' ),
					'min'       => -1,
					'max'       => 200,
				],
			],
		] );

		/**
		 * Shortcodes, toggle, colors, & textarea block.
		 */
		register_block( [
			'namespace'       => 'pd',
			'title'           => __( 'Colors and Shortcodes', 'pd' ),
			'icon'            => 'admin-appearance', // https://developer.wordpress.org/resource/dashicons/
			'category'        => 'widgets',
			'render_callback' => function( $a /* attributes */, $c /* content */, $o /* Block instance */ ) {
				?>
				<div style="color: <?php echo esc_attr( $a['text_color'] ); ?>; background-color: <?php echo esc_attr( $a['color_background'] ); ?>;">
					Radio Color:
					<span style="background-color: <?php echo esc_attr( $a['color_radio'] ); ?>;">
						<?php echo esc_html( $a['color_radio'] ); ?>
					</span><br/>
					Color Picker / Background Color:
					<span style="background-color: <?php echo esc_attr( $a['color_background'] ); ?>;">
						<?php echo esc_html( $a['color_background'] ); ?>
					</span><br/>
					Color Palette / Text Color:
					<span style="color: <?php echo esc_attr( $a['text_color'] ); ?>;">
						<?php echo esc_html( $a['text_color'] ); ?>
					</span><br/>
					Toggle:
					<?php echo ( false === $a['toggle'] ) ? esc_html( __( '❌', 'pd' ) ) : esc_html( __( '✅', 'pd' ) ); ?><br/>
					Text Area with shortcodes:
					<?php echo apply_shortcodes( wp_kses_post( $a['textarea'] ) ); ?><br/>
				</div>
				<?php
			},
			'attributes'      => [
				'toggle'           => [
					'type'      => 'boolean',
					'component' => 'wp.components.ToggleControl',
					'default'   => false,
					'label'     => __( 'Toggle', 'pd' ),
				],
				'textarea' => [
					'type'        => 'string',
					'component'   => 'wp.components.TextareaControl',
					'label'       => __( 'Text / Shortcodes', 'pd' ),
					'rows'        => 3,
				],
				'color_radio'      => [
					'type'      => 'string',
					'component' => 'wp.components.RadioControl',
					'default'   => '#eeaaaa',
					'label'     => __( 'Color radio', 'pd' ),
					'help'      => __( 'Select a color', 'pd' ),
					'options'   => [
						[
							'label' => __( 'Red', 'pd' ),
							'value' => '#eeaaaa',
						],
						[
							'label' => __( 'Green', 'pd' ),
							'value' => '#aaeeaa',
						],
						[
							'label' => __( 'Blue', 'pd' ),
							'value' => '#aaaaee',
						],
					],
				],
				'color_background' => [
					'type'      => 'string',
					'component' => 'wp.components.ColorPicker',
					'default'   => '#eeaaaa',
					'label'     => __( 'Background Color', 'pd' ),
					'help'      => __( 'Select a color', 'pd' ),
				],
				'text_color' => [
					'type'      => 'string',
					'component' => 'wp.components.ColorPalette',
					'default'   => '#000000',
					'label'     => __( 'Text Color', 'pd' ),
					'colors'    => [
						[
							'name'  => 'white',
							'color' => '#ffffff',
						],
						[
							'name'  => 'black',
							'color' => '#000000',
						],
					],
				],
			],
		] );

		/**
		 * Embed shortcode block.
		 */
		register_block( [
			'namespace'       => 'pd',
			'title'           => __( 'Embed Shortcode', 'pd' ),
			'icon'            => 'format-video', // https://developer.wordpress.org/resource/dashicons/
			'category'        => 'widgets',
			'render_callback' => function( $a /* attributes */, $c /* content */, $o /* Block instance */ ) {
				// If user fills out URL then deletes it, block can render as empty.
				// If empty, force the default.
				if ( empty( $a['embed_url'] ) ) {
					$a['embed_url'] = $o->attributes['embed_url']['default'];
				}
				// do_shortcode('[embed]...[/embed]') returns false,
				// so instantiate the WP_Embed class instead.
				$embed = new \WP_Embed();
				echo $embed->run_shortcode(
					'[embed]' . $a['embed_url'] . '[/embed]'
				);
			},
			'attributes'      => [
				'embed_url' => [
					'type'       => 'string',
					'component'  => 'wp.components.TextControl',
					'default'    => 'https://www.youtube.com/watch?v=woAHwpOLmyY',
					'label'      => 'Embed URI',
					'input_type' => 'url', // text, number, email, or url.
				],
			],
		] );

		/**
		 * Audio shortcode block.
		 */
		register_block( [
			'namespace'       => 'pd',
			'title'           => 'Audio Shortcode',
			'icon'            => 'format-audio', // https://developer.wordpress.org/resource/dashicons/
			'category'        => 'widgets',
			'render_callback' => function( $a /* attributes */, $c /* content */, $o /* Block instance */ ) {
				// If user fills out URL then deletes it, block can render as empty.
				// If empty, use default.
				if ( empty( $a['embed_url'] ) ) {
					$a['embed_url'] = $o->attributes['embed_url']['default'];
				}
				echo do_shortcode(
					'[audio src="' . $a['embed_url'] . '"]'
				);
			},
			'attributes'      => [
				'embed_url' => [
					'type'       => 'string',
					'component'  => 'wp.components.TextControl',
					'default'    => 'https://pd.cm/m/what-vbr.mp3',
					'label'      => 'MP3 URI',
					'input_type' => 'url', // text, number, email, or url.
				],
			],
		] );

	}
);

/**
 * Block registration function.
 * 
 * @param $args array Array of arguments: namespace, title, icon, category, render_callback, attributes.
 * 
 * @return \PD\Block Constructed block object.
 */
function register_block( $a /* args */ ) {

	$a['namespace'] = strtolower( $a['namespace'] );
	$a['slug'] = sanitize_key( $a['title'] );

	if ( empty( $a['icon'] ) ) { $a['icon'] = 'megaphone'; }
	if ( empty( $a['category'] ) ) { $a['icon'] = 'widgets'; }

	return new Block(
		[
			'slug_hyphen'     => sprintf( '%s-%s', $a['namespace'], $a['slug'] ),
			'slug_slash'      => sprintf( '%s/%s', $a['namespace'], $a['slug'] ),
			'title'           => $a['title'],
			'icon'            => $a['icon'], // https://developer.wordpress.org/resource/dashicons/
			'category'        => $a['category'],
			'render_callback' => $a['render_callback'],
			'attributes'      => $a['attributes'],
		]
	);
}

/**
 * Block class.
 * Allows instantiation of PHP-powered blocks with some attributes.
 * 
 * @author Paul David Clark <[email protected]>
 */
class Block {

	/**
	 * Assign all keys in input array to class vars.
	 * Register block in PHP on init.
	 * Register block in JavaScript with wp_ajax_register_block
	 * Filters for attributes & inspector controls.
	 * 
	 * @param array  $atts Block configuration. See examples above.
	 */
	public function __construct( $atts ) {
		foreach( $atts as $key => $att ) {
			$this->$key = $att;
		}

		add_action( 'init', [ $this, 'init' ] );
		add_action( 'wp_ajax_register_block_' . $this->slug_hyphen, [ $this, 'wp_ajax_register_block' ] );

		add_filter( 'pd/block/attributes-php/' . $this->slug_hyphen, [ $this, 'block_attributes_php' ] );
		add_filter( 'pd/block/attributes-js/' . $this->slug_hyphen, [ $this, 'block_attributes_js' ] );
		add_filter( 'pd/block/inspector-controls-js/' . $this->slug_hyphen, [ $this, 'block_inspector_controls_js' ] );
	}

	/**
	 * Register: PHP.
	 */
	public function init() {
		wp_register_script(
			$this->slug_hyphen,
			add_query_arg(
				[
					'action'      => 'register_block_' . $this->slug_hyphen,
					'_wpnonce'    => wp_create_nonce(),
				],
				admin_url( 'admin-ajax.php' ) ),
			[ 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ],
			microtime(),
			true
		);

		$block_params = [
			'editor_script'   => $this->slug_hyphen,
			/**
			 * @param array  $attributes Optional. Block attributes. Default empty array.
			 * @param string $content    Optional. Block content. Default empty string.
			 */
			'render_callback' => function( $attributes, $content ) {
				ob_start();
				call_user_func( $this->render_callback, $attributes, $content, $this );
				return ob_get_clean();
			},
		];
		$attributes = apply_filters( 'pd/block/attributes-php/' . $this->slug_hyphen, [] );
		if ( ! empty( $attributes ) ) {
			$block_params['attributes'] = $attributes;
		}

		register_block_type( $this->slug_slash, $block_params );
	}

	/**
	 * Register: JavaScript.
	 * Outputs ES2015.
	 * Calls wp.blocks.registerBlockType.
	 * Builds attributes and InspectorControls components.
	 * 
	 * @see https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/
	 */
	public function wp_ajax_register_block() {
		check_ajax_referer();
		header( 'Content-Type: text/javascript' );
		?>
( function ( el ) {

	wp.blocks.registerBlockType( '<?php echo esc_js( $this->slug_slash ); ?>', {
		apiVersion: 2,
		title: '<?php echo esc_js( $this->title ); ?>',
		icon: '<?php echo esc_js( $this->icon ); ?>',
		category: '<?php echo esc_js( $this->category ); ?>',

		attributes: <?php
			echo wp_json_encode(
				apply_filters( 'pd/block/attributes-js/' . $this->slug_hyphen, [] ),
				JSON_FORCE_OBJECT
			);
		?>,

		edit: function ( props ) {

			return [
				el(
					'div',
					{ ...wp.blockEditor.useBlockProps(), 'key': 'block_wrapper' },
					el(
						wp.serverSideRender,
						{
							key: 'server_side_render',
							block: '<?php echo esc_js( $this->slug_slash ); ?>',
							attributes: props.attributes,
						}
					)
				)
				<?php
					$inspector_controls = apply_filters( 'pd/block/inspector-controls-js/' . $this->slug_hyphen, [] );

					if ( ! empty( $inspector_controls ) ) :
				?>
						, el(
							wp.blockEditor.InspectorControls,
							{ key: "inspector" },
							el(
								wp.components.PanelBody,
								{ title: "<?php echo esc_js( __( 'Settings', 'pd' ) ); ?>", initialOpen: true },
								<?php echo implode( ',', $inspector_controls ); ?>
							)
						)
				<?php
					endif;
				?>
			];
		},
	} );
} )( wp.element.createElement );
		<?php
		exit;
	}

	/**
	 * Outputs PHP attribute configuration for register_block_type().
	 * 
	 * Array of attribute types and default values.
	 * See filter pd/block/attributes-php/
	 */
	public function block_attributes_php( $attributes = array() ) {
		foreach ( (array) $this->attributes as $key => $values ) {
			$attributes[ $key ] = [
				'type'    => $values['type'],
				'default' => $values['default'],
			];
			if ( isset( $values['source'] ) ) {
				$attributes[ $key ] = $values['source'];
			}
		}

		return $attributes;
	}

	/**
	 * Outputs JavaScript attribute configuration.
	 * 
	 * Array of attribute default values to be JSON encoded.
	 * See filter pd/block/attributes-js/
	 */
	public function block_attributes_js( $attributes = array() ) {
		foreach ( (array) $this->attributes as $key => $values ) {
			$attributes[ $key ] = [
				'value' => $values['default'],
			];
		}

		return $attributes;
	}

	/**
	 * Outputs ES5 components according to defined attributes.
	 * el is wp.element.createElement.
	 */
	public function block_inspector_controls_js( $controls = [] ) {

		foreach ( (array) $this->attributes as $key => $values ) {
			ob_start();
			switch ( $values['component'] ) {
				case 'wp.components.RadioControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						help: "<?php echo esc_js( $values['help'] ); ?>",
						selected: props.attributes.<?php echo esc_js( $key ); ?>,
						options: <?php echo wp_json_encode( $values['options'] ); ?>,
						onChange: function (option) {
							return props.setAttributes({
								<?php echo esc_js( $key ); ?>: option
							});
						}
					})
					<?php
					break;
				case 'wp.components.SelectControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						value: props.attributes.<?php echo esc_js( $key ); ?>,
						options: <?php echo wp_json_encode( $values['options'] ); ?>,
						onChange: function (option) {
							return props.setAttributes({
								<?php echo esc_js( $key ); ?>: option
							});
						}
					})
					<?php
					break;
				case 'wp.components.ColorPicker':
					?>
					el(
						'span',
						null,
						"<?php echo esc_js( $values['label'] ); ?>"
					),
					el(
						<?php echo esc_js( $values['component'] ); ?>,
						{
							key: '<?php echo esc_js( $key ); ?>',
							label: "<?php echo esc_js( $values['label'] ); ?>",
							type: 'color',
							color: props.attributes.<?php echo esc_js( $key ); ?>,
							onChangeComplete: function(newValue) {
								props.setAttributes({
									<?php echo esc_js( $key ); ?>: newValue.hex
								});
							},
							disableAlpha: true
						}
					)
					<?php
					break;
				case 'wp.components.ColorPalette':
					?>
					el(
						'span',
						null,
						"<?php echo esc_js( $values['label'] ); ?>"
					),
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						colors: <?php echo wp_json_encode( $values['colors'] ); ?>,
						value: props.attributes.<?php echo esc_js( $key ); ?>,
						onChange: function(newValue) {
							props.setAttributes({
								<?php echo esc_js( $key ); ?>: newValue
							});
						},
						disableAlpha: false
					})
					<?php
					break;
				case 'wp.components.ToggleControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						checked: props.attributes.<?php echo esc_js( $key ); ?>,
						onChange: function(newValue) {
							props.setAttributes({
								<?php echo esc_js( $key ); ?>: newValue
							});
						}
					})
					<?php
					break;
				case 'wp.components.RangeControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						value: props.attributes.<?php echo esc_js( $key ); ?>,
						onChange: function(newValue) {
							props.setAttributes({
								<?php echo esc_js( $key ); ?>: newValue
							});
						},
						min: <?php echo (int) $values['min']; ?>,
						max: <?php echo (int) $values['max']; ?>
					})
					<?php
					break;
				case 'wp.components.TextControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						value: props.attributes.<?php echo esc_js( $key ); ?>,
						onChange: function(newValue) {
							props.setAttributes({
								<?php echo esc_js( $key ); ?>: newValue
							});
						},
						type: '<?php echo esc_js( $values['input_type'] ); ?>'
					})
					<?php
					break;
				case 'wp.components.TextareaControl':
					?>
					el( <?php echo esc_js( $values['component'] ); ?>, {
						key: '<?php echo esc_js( $key ); ?>',
						label: "<?php echo esc_js( $values['label'] ); ?>",
						value: props.attributes.<?php echo esc_js( $key ); ?>,
						onChange: function(newValue) {
							props.setAttributes({
								<?php echo esc_js( $key ); ?>: newValue
							});
						},
						rows: <?php echo ( $values['rows'] ) ? (int) $values['rows'] : 4; ?>
					})
					<?php
					break;
			}
			$controls[] = ob_get_clean();
		}

		return $controls;
	}
}

@pdclark This is very cool and informative!! Thanks for sharing. If you want to show previews in the editor, you could add example: {}, on line 361, for example.

Thanks for the commend @pbrocks ! I will try to test and revise soon. This version also doesn't have a help attribute on all fields, and default doesn't seem to always work. For now, I've been showing editor previews with an is_admin() check in the callback function, but your solution seems better.