Categories
Notes WordPress

WordCamp US 2019 – Just Enough React for WordPress – Shannon Smith

New Block Editor

Discover the Possibilities

  • Block templates
  • Blocks instead of custom fields, shortcodes, etc

How Does the New Block Editor Work?

  • Uses React, JavaScript/JSX
  • Blocks are like plugins
  • There is a Core Layer & Editorial Layer
  • React abstraction is built-in

Cool Stuff

  • Blocks can be reusable
  • Backend Workflow-only blocks
  • Block level locking – you can remove blocks that are not needed.

React

  • Uses JSON literals
  • It’s in the HTML but doesn’t negatively affect the HTML

Templates

  • You can create block templates
  • Can be assigned to existing post types
  • You can have nested templates

Compatibility

Shortcodes

  • Will continue to work as before but contained within a block

Custom Post Types

Metaboxes

  • Can be converted to blocks
  • Can be used in the block editor

Themes

  • You can control things like color(theme color palette and styles in the block editor to ensure that users follow branding/design styles.

Block Styles

  • Blocks can be style to match the site theme.

Block Creation

  • A lot of flexibility
  • You can scaffold out them with the WP-CLI

How to Win at Go

You need to break some things before you can finally have something that is working.

Tips & Tricks

  • Reusable Blocks – You can turn any block into a reusable block, update once and reflected everywhere
  • Block Directory – this is starting and you can get involved in providing direction.
    • You’ll be able to add block apart from themes/plugins so you can design around just the blocks you need

Q&A

  • Blocks are really a backend piece, the front end doesn’t use the React blocks.
  • Can React be used in the frontend? Today it’s only a backend content editing feature.

By Tim Nolte

A Christ-follower, husband, father, and WordPress Developer with Forum One.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.