Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Last active May 8, 2021 19:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbrocks/6e1464f6a9ca7b7d5da1e7bb3ede37a6 to your computer and use it in GitHub Desktop.
Save pbrocks/6e1464f6a9ca7b7d5da1e7bb3ede37a6 to your computer and use it in GitHub Desktop.
A little more explanation about how to build a WP block with php.
/**
* Before registering the block in JavaScript, we want
* to deconstruct the necessary variables.
*/
const el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
InspectorControls = wp.editor.InspectorControls;
/**
* Even though we registered the block already in PHP, we also
* need to do so in JavaScript for the editor to work properly.
*/
registerBlockType( 'wclancpa-2019/built-with-php', {
title: 'Built With PHP',
icon: {
background: '#29c8aa',
foreground: '#ffffff',
src: 'sos',
},
category: 'wclancpa-2019',
/**
* If we hadn't registered our block in PHP, we'd want to
* define attributes here.
*/
edit: function( props ) {
return [
/**
* The ServerSideRender element uses the REST API to call
* the rendering of the block in the PHP code.
*/
el( ServerSideRender, {
block: 'wclancpa-2019/built-with-php',
attributes: props.attributes,
} ),
/**
* InspectorControls lets us add controls to the Block sidebar.
* Recall that we defined attributes in PHP. To have the editor
* do its thing, we use the onChange property to signal changes
* to the editor, which calls for a re-render of the block.
*/
el( InspectorControls, {},
el( TextControl, {
label: 'Title Text Box H2',
value: props.attributes.value_one,
onChange: ( value ) => { props.setAttributes( { value_one: value } ); }
} ),
el( TextControl, {
label: 'Byline Text Box H4',
value: props.attributes.value_two,
onChange: ( value ) => { props.setAttributes( { value_two: value } ); }
} ),
el( TextareaControl, {
label: 'Descriptive TextArea Paragraph',
value: props.attributes.value_three,
onChange: ( value ) => { props.setAttributes( { value_three: value } ); },
} ),
),
]
},
// We're rendering in PHP, so return null in save().
save: function() {
return null;
},
} );
<?php
/**
* Initializes block in editor and frontend
*
* @package built-with-php
*/
defined( 'ABSPATH' ) || die( 'File cannot be accessed directly' );
/**
* Normally blocks are registered in JS, but here are mirroring the registration of our block in php, since we want to render via php. In this way, it is here, rather than in JS that e explicitly define the attributes for the block.
*
* We create a shortcode, [built-with-php-shortcode], which accepts three arguments, 'value_one', 'value_two', and 'value_three'. This shortcode would be used like so:
*
* [built-with-php-shortcode value_one="Input some value_one attribute value" value_two="Input some value_two attribute value" value_three="Input some value_three attribute value"]
*/
/**
* Register our block and shortcode.
*
* Note that we use the same function signature in PHP and JS when doing server-side rendering.
*/
function built_with_php_init() {
// Register our block editor script.
wp_enqueue_script(
'built-with-php',
plugins_url( 'block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
);
register_block_type(
'wclancpa-2019/built-with-php',
array(
'attributes' =>
array(
'value_one' => array(
'type' => 'string',
'default' => 'A simple text box',
),
'value_two' => array(
'type' => 'string',
'default' => 'Ain\'t this purdy?',
),
'value_three' => array(
'type' => 'string',
'default' => 'This will be more of a description.... And I could go on and on...',
),
),
// The script name we gave in the wp_register_script() call.
'editor_script' => 'built-with-php',
'render_callback' => 'built_with_php_render',
)
);
add_shortcode( 'built-with-php-shortcode', 'built_with_php_render' );
}
add_action( 'init', 'built_with_php_init' );
/**
* Our combined block and shortcode renderer.
*
* We're not using sophisticated php, so if using the shortcode we'd need to specify all three values.
*
* @param array $attributes The attributes set on the block or shortcode.
*/
function built_with_php_render( $attributes ) {
$return = '<h2 style="color:salmon;">' . ( print_r( $attributes['value_one'], true ) ?: 'value_one not defined' ) . '</h2>';
$return .= '<h4>' . print_r( $attributes['value_two'], true ) . '</h4>';
$return .= '<p>' . print_r( $attributes['value_three'], true ) . '</p>';
return $return;
}
<?php
/**
* Plugin Name: A PHP Block
* Plugin URI: https://gist.github.com/pbrocks/6e1464f6a9ca7b7d5da1e7bb3ede37a6
* Author: pbrocks
* Author URI: https://github.com/pbrocks
* Description: Build a quick WordPress block using ES5 and PHP. Presented at WordCamp Lancaster 2019.
* Version: 1.2
*
* @package built-with-php
*/
defined( 'ABSPATH' ) || die( 'File cannot be accessed directly' );
require 'build-a-block-with-php-with-notes.php';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment