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.