Slide 1
Slide 1 text
@tarendai https://tomjn.com
Using Blocks Outside
The Editor
Slide 2
Slide 2 text
@tarendai https://tomjn.com
Slide 3
Slide 3 text
@tarendai https://tomjn.com
Frontenberg
https://frontenberg.tomjn.com
Slide 4
Slide 4 text
@tarendai https://tomjn.com
Slide 5
Slide 5 text
@tarendai https://tomjn.com
Frontenberg
Is not a frontend editor!
Slide 6
Slide 6 text
@tarendai https://tomjn.com
Blocks are the
Interface
Slide 7
Slide 7 text
@tarendai https://tomjn.com
Slide 8
Slide 8 text
@tarendai https://tomjn.com
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)");
},
} );
Slide 9
Slide 9 text
@tarendai https://tomjn.com
Slide 10
Slide 10 text
@tarendai https://tomjn.com
Slide 11
Slide 11 text
@tarendai https://tomjn.com
Building a Block
Editor Component
Slide 12
Slide 12 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
return
....
;
}
Slide 13
Slide 13 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 14
Slide 14 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 15
Slide 15 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 16
Slide 16 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 17
Slide 17 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 18
Slide 18 text
@tarendai https://tomjn.com
function Editor({ startingContent, inputName }) {
const [ blocks, update ] = React.useState( parse(startingContent) );
return
;
}
Slide 19
Slide 19 text
@tarendai https://tomjn.com
Slide 20
Slide 20 text
@tarendai https://tomjn.com
Building a Generic
JS Function
Slide 21
Slide 21 text
@tarendai https://tomjn.com
tomjn_wp_editor(
'The ID of the tag',
'The desired input name',
'Starting content'
);
Slide 22
Slide 22 text
@tarendai https://tomjn.com
Slide 23
Slide 23 text
@tarendai https://tomjn.com
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
);
}
Slide 24
Slide 24 text
@tarendai https://tomjn.com
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);
...
}
Slide 25
Slide 25 text
@tarendai https://tomjn.com
...
ReactDOM.render(
,
element
);
}
Slide 26
Slide 26 text
@tarendai https://tomjn.com
Commenting
Slide 27
Slide 27 text
@tarendai https://tomjn.com
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 );
}
});
Slide 28
Slide 28 text
@tarendai https://tomjn.com
Building a Generic
PHP function
Slide 29
Slide 29 text
@tarendai https://tomjn.com
Slide 30
Slide 30 text
@tarendai https://tomjn.com
Slide 31
Slide 31 text
@tarendai https://tomjn.com
Slide 32
Slide 32 text
@tarendai https://tomjn.com
document.addEventListener('DOMContentLoaded', function(event) {
tomjn_wp_editor(
'<?php echo esc_js( $name ); ?>',
'<?php echo esc_js( $name ); ?>',
'<?php echo esc_js( $content ); ?>'
);
});
Slide 33
Slide 33 text
@tarendai https://tomjn.com
Supporting PHP Code
Slide 34
Slide 34 text
@tarendai https://tomjn.com
1. setup the core data layer
2. enqueue styles and scripts
Slide 35
Slide 35 text
@tarendai https://tomjn.com
$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 );',
'} )();',
])
);
Slide 36
Slide 36 text
@tarendai https://tomjn.com
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');
Slide 37
Slide 37 text
@tarendai https://tomjn.com
I'm Tom J Nowell
@tarendai
https://tomjn.com
WordPress VIP
Slide 38
Slide 38 text
@tarendai https://tomjn.com
https://wpvip.com/careers
Slide 39
Slide 39 text
@tarendai https://tomjn.com
Slide 40
Slide 40 text
@tarendai https://tomjn.com