Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Created April 27, 2019 14:46
Show Gist options
  • Save pbrocks/d8189289c9b0d2b7117b3b7303b5dfe9 to your computer and use it in GitHub Desktop.
Save pbrocks/d8189289c9b0d2b7117b3b7303b5dfe9 to your computer and use it in GitHub Desktop.
We can use PHP to deliver content on the frontend, but still need JS to create the block. Note that Save
/**
* 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;
},
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment