Block Editor Docs for WordPress Walkthrough Day

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 1/40: Start here for an overview of what is possible development wise: - Creating Blocks - Extending Blocks - Extending Editor UI - Meta Boxes - Theme Support - Autocomplete - Parsing and Serialization developer.wordpress.org/block-editor/d… pic.twitter.com/NdNjyLMCqe

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 2/40: Block registration w JS uses registerBlockType() Here are the docs for its settings: - name - description - category - icon - keywords - styles - attributes - transforms - parent - supports developer.wordpress.org/block-editor/d… pic.twitter.com/XFvSqsx2tf

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 3/40: You can control these for all blocks: - align left, right, center - align wide and full - add anchor id - add custom class - edit as html - show in inserter - limit to 1 use - make reusable or not developer.wordpress.org/block-editor/d… pic.twitter.com/OShsuqOtub

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 4/40: When building a custom block User Interface you can easily check to see if the block is currently selected: developer.wordpress.org/block-editor/d… See the photo 🖼️ for how to do it with JSX / React pic.twitter.com/YG34wFjuMJ

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 5/40: When building custom blocks, you will at some point (or many points) get the Validation Error. Here is an overview of why and how to troubleshoot it: developer.wordpress.org/block-editor/d… pic.twitter.com/goTZkztbtB

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 6/40: If you need to make changes to your blocks already in use, make sure to follow these Deprecation Guidelines: developer.wordpress.org/block-editor/d… pic.twitter.com/phhWGhWYbK

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 7/40: Block Templates let you set (and lock) default blocks to display for different post types. You can set them up using JavaScript or PHP using this guide: developer.wordpress.org/block-editor/d… pic.twitter.com/SRkiDh3bkW

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 8/40: A great way for Theme Developers to add custom and consistent styles for all blocks is to use the Block Styles API: developer.wordpress.org/block-editor/d… pic.twitter.com/0ulggCVr2C

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 9/40: Block filters allow you to change blocks on the fly with JavaScript: developer.wordpress.org/block-editor/d… (You may find this block filters tutorial helpful as well buff.ly/2uvOu50) pic.twitter.com/kAQtxg2Pq6

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 10/40: If you need autocomplete functionality for your blocks, WordPress has an <Autocomplete /> component you can easily customize: developer.wordpress.org/block-editor/d… Here is a helpful tutorial from @igorbenic too buff.ly/2S5AIoh pic.twitter.com/cp5L9q7FGO

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 11/40: WordPress uses a Slot Fill Plugin System for adding custom code into the block editor. Here is an overview in the docs: developer.wordpress.org/block-editor/d… pic.twitter.com/mTBa7rIMfU

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 12/40 Here are a few of the Slot / Fill options: - PluginMoreMenuItem buff.ly/2XKDMEd - PluginPostStatusInfo buff.ly/2Y4x5ko - PluginPrePublishPanel buff.ly/2jKvmhW - PluginSidebar buff.ly/2XWPe3G pic.twitter.com/hxJwOx5S5q

拡大

拡大

拡大

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 13/40: The <RichText /> component is useful anytime you need a user to edit text with rich text ability Overview Docs: developer.wordpress.org/block-editor/d… In Depth Docs: developer.wordpress.org/block-editor/p… pic.twitter.com/U1wsFrgUWX

拡大

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 14/40: We have an entire section dedicated to JavaScript Internationalization: - What is Internationalization? - How to use i18n in JS - Using wp_set_script_translations() - Providing Translations developer.wordpress.org/block-editor/d… pic.twitter.com/LTwht3yLDv

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 15/40: The <NavigateRegions /> Higher Order Component allows for "adding keyboard navigation to switch between the different DOM elements marked as “regions” (role=”region”)" #accessibility developer.wordpress.org/block-editor/c… pic.twitter.com/KHAaVTdcK1

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 16/40: If you are developing for new Phase 2 or Phase 3 #Gutenberg features, you should check out these docs on using Feature Flags in your code: developer.wordpress.org/block-editor/d… pic.twitter.com/nqMkHCF1av

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 17/40: add_theme_support() options: align-wide editor-color-palette editor-font-sizes disable-custom-font-sizes disable-custom-colors editor-styles dark-editor-style wp-block-styles responsive-embeds developer.wordpress.org/block-editor/d… pic.twitter.com/RWYFfY9Ocv

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 18/40: Anytime something is deprecated in the block editor code base, it is documented here: developer.wordpress.org/block-editor/d… pic.twitter.com/vMf5QnN7rt

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 19/40: These docs go over Backwards Compatibility Steps for Meta Boxes in the editor: developer.wordpress.org/block-editor/d… pic.twitter.com/BK2DfqR1cp

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 20/40: The "Block Design" section of the docs gives some great considerations for designing your blocks: - Best practices - Do's and Don'ts developer.wordpress.org/block-editor/d… pic.twitter.com/b0DL11YDh1

拡大

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 21/40 Best Practices for Block Design: - Primary UI for editing block is block content area - Block Toolbar is secondary for required options & controls - Settings Sidebar for advanced, tertiary controls developer.wordpress.org/block-editor/d… pic.twitter.com/74IHHIZpZC

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 22/40: The Design Patterns Docs have nice visual overviews of the Block Editor UI developer.wordpress.org/block-editor/d… pic.twitter.com/w6vIm9yPFv

拡大

拡大

拡大

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 23/40: SketchPress is a design resource available for creating mockups of blocks and editor UIs developer.wordpress.org/block-editor/d… pic.twitter.com/Z4InRqQvBu

拡大

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 24/40: The Animation Docs for Designers covers some great tips: - Use CSS transforms for performance - Usually < 0.2 sec - Accessibility Considerations - <Animate /> component for appear and fade-in developer.wordpress.org/block-editor/d… pic.twitter.com/0ZUNau13xM

拡大

Zac Gordon @zgordon

"Block Editor Docs for WordPress" Walkthrough Day 25/40: Here are some great docs for contributors: - Overview - buff.ly/2Y0adTb - Design - buff.ly/2XQKs3L - Development - buff.ly/2jKU4ic - Documentation - buff.ly/2Y3V17t pic.twitter.com/jvVJuM2sM8

拡大