Using Blocks Outside The Editor

@tarendai https://tomjn.com
Using Blocks Outside
The Editor

View Slide


View Slide

Frontenberg
https://frontenberg.tomjn.com

View Slide


View Slide

Frontenberg
Is not a frontend editor!

View Slide

Blocks are the
Interface

View Slide


View Slide

wp.blocks.registerBlockType( 'tomjn/helloworld', {
title: 'Hello World',
icon: 'universal-access-alt',
category: 'layout',
edit() {
return el("p", "Hello World, step 1 (from the editor).");
},
save() {
return el("p", "Hello World, step 1 (from the frontend)");
},
} );

View Slide


View Slide

Building a Block
Editor Component

View Slide

function Editor({ startingContent, inputName }) {
return

....
;
}

View Slide

function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return

;
}

View Slide


View Slide

Building a Generic
JS Function

View Slide

tomjn_wp_editor(
'The ID of the tag',
'The desired input name',
'Starting content'
);

View Slide


View Slide

window.tomjn_wp_editor = function( id, inputName, content ) {
const element = document.createElement( 'div' );
element.setAttribute( 'class',
'tomjn_editor_container block-editor gutenberg__editor' +
'block-editor__container'
);
element.setAttribute( 'id', id );
document.getElementById( id ).replaceWith(element);
ReactDOM.render(
,
element
);
}

View Slide

window.tomjn_wp_editor = function( id, inputName, content ) {
const element = document.createElement( 'div' );
element.setAttribute( 'class',
'tomjn_editor_container block-editor gutenberg__editor' +
'block-editor__container'
);
element.setAttribute( 'id', id );
document.getElementById( id ).replaceWith(element);
...
}

View Slide

...
ReactDOM.render(
,
element
);
}

View Slide

Commenting

View Slide

var allowedBlocks = [
'core/paragraph',
'core/image',
'core/html',
'core/freeform'
];
wp.blocks.getBlockTypes().forEach( function( blockType ) {
if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
wp.blocks.unregisterBlockType( blockType.name );
}
});

View Slide

Building a Generic
PHP function

View Slide


View Slide

wp_editor( $content, $editor_id, [] );
?>

View Slide

wp_block_editor($content, $name);
?>

View Slide

function wp_block_editor( $content, $name ) {
?>

 document.addEventListener('DOMContentLoaded', function(event) { tomjn_wp_editor( '<?php echo esc_js( $name ); ?>', '<?php echo esc_js( $name ); ?>', '<?php echo esc_js( $content ); ?>' ); }); 
}

View Slide

Supporting PHP Code

View Slide

1. setup the core data layer
2. enqueue styles and scripts

View Slide

$wp_scripts->registered['wp-data']->extra['after'] = array();
wp_add_inline_script(
'wp-data',
implode( "\n", [
'( function() {',
' var userId = ' . get_current_user_ID() . ';',
' var storageKey = "WP_DATA_USER_" + userId;',
' var persistence = wp.data.plugins.persistence',
' wp.data.use( persistence, { storageKey: storageKey } );',
' persistence.__unstableMigrate({ storageKey: storageKey });',
' wp.data.use( wp.data.plugins.controls );',
'} )();',
])
);

View Slide

wp_enqueue_script('wp-editor');
wp_enqueue_script('wp-core-data');
wp_enqueue_script('wp-data');
wp_enqueue_script('wp-block-library');
wp_enqueue_script('wp-format-library');
wp_enqueue_style('media');
wp_enqueue_style('l10n');
wp_enqueue_style('buttons');
wp_enqueue_style('wp-editor');

View Slide

I'm Tom J Nowell
@tarendai
https://tomjn.com
WordPress VIP

View Slide

https://wpvip.com/careers

View Slide


View Slide

Using Blocks Outside The Editor

Using Blocks Outside The Editor

Tom J Nowell

More Decks by Tom J Nowell

Other Decks in Technology

Featured

Transcript