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.
