Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Blocks Outside The Editor

Using Blocks Outside The Editor

Tom J Nowell

June 22, 2019
Tweet

More Decks by Tom J Nowell

Other Decks in Technology

Transcript

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

    View full-size slide

  2. @tarendai https://tomjn.com

    View full-size slide

  3. @tarendai https://tomjn.com
    Frontenberg
    https://frontenberg.tomjn.com

    View full-size slide

  4. @tarendai https://tomjn.com

    View full-size slide

  5. @tarendai https://tomjn.com
    Frontenberg
    Is not a frontend editor!

    View full-size slide

  6. @tarendai https://tomjn.com
    Blocks are the
    Interface

    View full-size slide

  7. @tarendai https://tomjn.com

    View full-size slide

  8. @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)");
    },
    } );

    View full-size slide

  9. @tarendai https://tomjn.com

    View full-size slide

  10. @tarendai https://tomjn.com

    View full-size slide

  11. @tarendai https://tomjn.com
    Building a Block
    Editor Component

    View full-size slide

  12. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    return

    ....
    ;
    }

    View full-size slide

  13. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  14. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  15. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  16. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  17. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  18. @tarendai https://tomjn.com
    function Editor({ startingContent, inputName }) {
    const [ blocks, update ] = React.useState( parse(startingContent) );
    return










    ;
    }

    View full-size slide

  19. @tarendai https://tomjn.com

    View full-size slide

  20. @tarendai https://tomjn.com
    Building a Generic
    JS Function

    View full-size slide

  21. @tarendai https://tomjn.com
    tomjn_wp_editor(
    'The ID of the tag',
    'The desired input name',
    'Starting content'
    );

    View full-size slide

  22. @tarendai https://tomjn.com

    View full-size slide

  23. @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
    );
    }

    View full-size slide

  24. @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);
    ...
    }

    View full-size slide

  25. @tarendai https://tomjn.com
    ...
    ReactDOM.render(
    ,
    element
    );
    }

    View full-size slide

  26. @tarendai https://tomjn.com
    Commenting

    View full-size slide

  27. @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 );
    }
    });

    View full-size slide

  28. @tarendai https://tomjn.com
    Building a Generic
    PHP function

    View full-size slide

  29. @tarendai https://tomjn.com

    View full-size slide

  30. @tarendai https://tomjn.com
    wp_editor( $content, $editor_id, [] );
    ?>

    View full-size slide

  31. @tarendai https://tomjn.com
    wp_block_editor($content, $name);
    ?>

    View full-size slide

  32. @tarendai https://tomjn.com
    function wp_block_editor( $content, $name ) {
    ?>

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

    View full-size slide

  33. @tarendai https://tomjn.com
    Supporting PHP Code

    View full-size slide

  34. @tarendai https://tomjn.com
    1. setup the core data layer
    2. enqueue styles and scripts

    View full-size slide

  35. @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 );',
    '} )();',
    ])
    );

    View full-size slide

  36. @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');

    View full-size slide

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

    View full-size slide

  38. @tarendai https://tomjn.com
    https://wpvip.com/careers

    View full-size slide

  39. @tarendai https://tomjn.com

    View full-size slide

  40. @tarendai https://tomjn.com

    View full-size slide