Skip to content

Instantly share code, notes, and snippets.

@pbrocks
Created April 27, 2019 14:47
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/6e7164005d08c90d61d6df58c356579e to your computer and use it in GitHub Desktop.
Save pbrocks/6e7164005d08c90d61d6df58c356579e 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: method is null because PHP is delivering the content on the frontend.
/**
* 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