Block Editor Handbook - WP Developing

Official Block Editor Handbook

0. Introduction
1. Key Concepts
- Blocks
- Block Categories
- Reusable Blocks
- Templates
- Higher Level than HTML
- Post Dichotomy
- Tree of Blocks
- Serialization and the Purpose of HTML Comments
- Delimiters and Parsing Expression Grammar
- The Anatomy of a Serialized Block
- The Gutenberg Lifecycle
2. Developer Documentation
- 2.1 Introductory Overview
  - Creating Blocks – See Blocks Tutorial.
  - Extending Blocks – See Block Filters.
  - Extending the Editor UI
  - Meta Boxes
  - Theme Support
  - Autocomplete
  - Block Parsing and Serialization
- 2.2 Block API Reference
  - Block Registration (registerBlockType)
  - Edit and Save
    - “When registering a block, the edit and save functions provide the interface for how a block is going to be rendered within the editor, how it will operate and be manipulated, and how it will be saved.”
  - Attributes
    - “Attribute sources…define how the block attribute values are extracted from saved post content…[providing] a mechanism to map from the saved markup to a JavaScript representation of a block.”
  - Deprecated Blocks
  - Templates
    - “…a list of blocks…[and] allow [specifying] a default initial state for an editor session.”
  - Annotations – Currently experimental.
    - “Annotations are a way to highlight a specific piece in a post created with the block editor.”
- 2.3 Filter Reference
  - Block Filters
    - Block Style Variations
    - Server-Side Registration Helper (register_block_style, unregister_block_style)
    - Filters
      - blocks.registerBlockType
      - blocks.getSaveElement
      - blocks.getSaveContent.extraProps
      - blocks.getBlockDefaultClassname
      - blocks.switchToBlockType.transformedBlock
      - blocks.getBlockAttributes
      - editor.BlockEdit
      - editor.BlockListBlock
    - Removing Blocks
      - Blacklists
      - Whitelists
  - Editor Filters – experimental
    - editor.PostFeaturedImage.imageSize
    - editor.PostPreview.interstitialMarkup
    - block_editor_settings (PHP filter)
    - richEditingEnabled
    - codeEditingEnabled
  - Parser Filters
  - Autocomplete
- 2.4 SlotFills Reference
3. Designer Documentation
- 3.1 Block Design
  - Best Practices
  - Do’s and Don’ts
- 3.2 Patterns
- 3.3 Resources – Uses Figma.
- 3.4 Animation
4. Contributor Documentation
- 4.1 Principles
- 4.2 Design Principles & Vision
  - Blocks are the Interface
  - Reference
- 4.3 Developer Contributions
  - Getting Started
    - Local Environment
    - Remote Server
    - Storybook
  - Git Workflow
  - Coding Guidelines
    - CSS
    - JavaScript
    - PHP
  - Testing Overview
    - JavaScript
    - End to End Testing
- Block Grammar
  - Scripts
    - WP Scripts
    - Vendor Scripts
    - Polyfill Scripts
    - Bundling and Code Sharing
  - Managing Packages
  - Gutenberg Release Process
  - Localizing Gutenberg Plugin
  - React Native Based Mobile Gutenberg
- Documentation Contributions
  - Copy Guidelines
- History
- Glossary
- Frequently Asked Questions
- Repository Management
- Outreach
5. Tutorials
- Getting Started with JavaScript
  - Plugins Background
  - Loading JavaScript
  - Extending the Block Editor
  - Troubleshooting
  - JavaScript Versions and Build Step
  - Scope Your Code
  - JavaScript Build Setup
- Blocks
- Meta Boxes
- Displaying Notices from Your Plugin or Theme
- Creating a Sidebar
  - Up and Running
  - Tweak Sidebar Style and Add Controls
  - Register the Meta Field
  - Initialize the Input Control
  - Update the Meta Field When the Input’s Content Changes
  - Finishing Touches
- Introduction to the Format API

6. Component Reference
- Animate
- Autocomplete
- BaseControl – “used to generate labels and help text for components handling user inputs.”
- ButtonGroup
- Button
- Card – “a flexible and extensible content container.”
- CheckboxControl
- ClipboardButton – “[allows] users copy text (or other elements) with a single click or tap.”
- ColorIndicator
- ColorPalette
- ColorPicker
- Dashicon
- DateTime – “React component that renders a calendar and clock for date and time selection.”
- DimensionControl – “designed to provide a UI to control spacing and/or diemnsions.”
- Disabled – “disables descendant tabbable elements and prevents pointer interaction.”
- Draggable – “provides a way to set up a cross-browser (including IE) customisable drag image and the transfer data for the drag event.”
- DropZone – “creat[es] a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.”
- DropdownMenu
- Dropdown
- ExternalLink
- FocalPointPicker
- FocusableIframe
- FontSizePicker
- FormFileUpload
- FormToggle
- FormTokenField
- NavigateRegions – “a React [HOC] adding keyboard navigation to switch between the different DOM elements marked as ‘regions'”
- HigherOrder – “library of generic Higher Order React Components.”
- WithConstrainedTabbing
- WithFallbackStyles
- WithFilters
- WithFocusOutside
- WithFocusReturn
- WithNotices
- WithSpokenMessages
- IconButton – “tell users what actions they can take and give them a way to interact with the interface.”
- Icon
- IsolatedEventContainer – “prevents certain events from propagating outside of the container.”
- KeyboardShortcuts
- MenuGroup – “wraps a series of related MenuItem components into a common section.”
- MenuItem
- MenuItemsChoice – “allows the user to select one option from a set of multiple choices.”
- Modal
- NavigableContainer
- Notice
- Panel
- Placeholder
- Popover
- BlockQuotation
- HorizontalRule
- SVG
- QueryControls
- RadioControl
- RangeControl
- ResizableBox
- ResponsiveWrapper
- Sandbox – “provides an isolated enviro nment for arbitrary HTML via iframes.”
- ServerSideRender
- ScrollLock
- SelectControl
- SlotFill – “Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as ‘portal’ rendering.”
- Snackbar – “Use…to communicate low priority, non-interruptive messages to the user.”
- Spinner
- TabPanel – “React component to render an ARIA-compliant TabPanel.”
- TextControl
- TextAreaControl
- ToggleControl
- Toolbar – “can be used to group related options. To emphasize ghroups of related icon buttons, a toolbar should share a common container.”
- Tooltip
- TreeSelect – “used to generate select input fields.”
- Visually Hidden
7. Data Module Reference
- WordPress Core Data
  - Selectors: canUser, getAuthors, getAutosave, getAutosaves, getCurrentUser, getEditedEntityRecord, getEmbedPreview, getEntitiesByKind, getEntity, getEntityRecord, getEntityRecordEdits, getEntityRecordNonTransientEdits, getEntityRecords, getLastEntitySaveError, getRawEntityRecord, getRedoEdit, getReferenceByDistinctEdits, getThemeSupports, getUndoEdit, getUserQueryResults, hasEditsForEntityRecord, hasFetchedAutosaves, hasRedo, hasUndo, hasUploadPermissions, isAutosavingEntityRecord, isPreviewEmbedFallback, isRequestingEmbedPreview, isSavingEntityRecord
  - Actions: addEntities, editEntityRecord, receiveAutosaves, receiveCurrentUser, receiveEmbedPreview, receiveEntityRecords, receiveThemeSupports, receiveUploadPermissions, receiveUserPermission, receiveUserQuery, redo, saveEditedEntityRecord, saveEntityRecord, undo
- Annotations
  - No documentation.
- Block Types Data
  - Selectors: getBlockStyles, getBlockSupport, getBlockType, getBlockTypes, getCategories, getChildBlockNames, getDefaultBlockName, getFreeformFallbackBlockName, getGroupingBlockName, getUnregisteredFallbackBlockName, hasBlockSupport, hasChildBlocks, hasChildBlocksWithInserterSupport, isMatchingSearchTerm
  - Actions: addBlockStyles, addBlockTypes, removeBlockStyles, removeBlockTypes, setCategories, setDefaultBlockName, setFreeformFallbackBlockName, setGroupingBlockName, setUnregisteredFallbackBlockName, updateCategory
- Block Editor’s Data
  - Selectors: canInsertBlockType, didAutomaticChange, getAdjacentBlockClientId, getBlock, getBlockAttributes, getBlockHierarchyRootClientId, getBlockIndex, getBlockInsertionPoint, getBlockListSettings, getBlockMode, getBlockName, getBlockOrder, getBlockParents, getBlockRootClientId, getBlocks, getBlocksByClientId, getBlockSelectionEnd, getBlockSelectionStart, getClientIdsOfDescendants, getClientIdsWithDescendants, getFirstMultiSelectedBlockClientId, getGlobalBlockCount, getInserterItems, getLastMultiSelectedBlockClientId, getMultiSelectedBlockClientIds, getMultiSelectedBlocks, getMultiSelectedBlocksEndClientId, getMultiSelectedBlocksStartClientId, getNextBlockClientId, getPreviousBlockClientId, getSelectedBlock, getSelectedBlockClientId, getSelectedBlockClientIds, getSelectedBlocksInitialCaretPosition, getSelectionEnd, getSelectionStart, getSettings, getTemplate, getTemplateLock, hasInserterItems, hasMultiSelection, hasSelectedBlock, hasSelectedInnerBlock, isAncestorMultiSelected, isBlockInsertionPointVisible, isBlockMultiSelected, isBlockSelected, isBlockValid, isBlockWithinSelection, isCaretWithinFormattedText, isFirstMultiSelectedBlock, isLastBlockChangePersistent, isMultiSelecting, isNavigationMode, isSelectionEnabled, isTyping, isValidTemplate
  - Actions: clearSelectedBlock, exitFormattedText, hideInsertionPoint, insertBlock, insertBlocks, insertDefaultBlock, mergeBlocks, moveBlocksDown, moveBlocksUp, moveBlockToPosition, receiveBlocks, removeBlock, removeBlocks, replaceBlock, replaceBlocks, replaceInnerBlocks, resetBlocks, selectBlock, selectionChange, selectNextBlock, selectPreviousBlock, setNavigationMode, setTemplateValidity, showInsertionPoint, startMultiSelect, startTyping, stopMultiSelect, stopTyping, synchronizeTemplate, toggleBlockMode, toggleSelection, updateBlock, updateBlockAttributes, updateBlockListSettings
- Post Editor’s Data
  - Selectors: canInsertBlockType, canUserUseUnfilteredHTML, didPostSaveRequestFail, didPostSaveRequestSucceed, getActivePostLock, getAdjacentBlockClientId, getBlock, getBlockAttributes, getBlockCount, getBlockHierarchyRootClientId, getBlockIndex, getBlockInsertionPoint, getBlockListSettings, getBlockMode, getBlockName, getBlockOrder, getBlockRootClientId, getBlocks, getBlocksByClientId, getBlockSelectionEnd, getBlockSelectionStart, getClientIdsOfDescendants, getClientIdsWithDescendants, getCurrentPost, getCurrentPostAttribute, getCurrentPostId, getCurrentPostLastRevisionId, getCurrentPostRevisionsCount, getCurrentPostType, getEditedPostAttribute, getEditedPostContent, getEditedPostPreviewLink, getEditedPostVisibility, getEditorBlocks, getEditorSelectionEnd, getEditorSelectionStart, getEditorSettings, getFirstMultiSelectedBlockClientId, getGlobalBlockCount, getInserterItems, getLastMultiSelectedBlockClientId….
  - Actions: …
- Editor’s UI Data
  - Selectors: …
  - Actions: …
- Notices Data
- New User Experience (NUX) Data
- Viewport Data
8. Package Reference
- a11y
- annotations
- api-fetch
- autop
- babel-plugin-import-jsx-pragma
- babel-plugin-makepot
- babel-preset-default
- base-styles
- blob
- block-directory
- block-editor **
- block-library
- block-serialization-default-parser **
- block-serialization-spec-parser **
- blocks **
  - cloneBlock
  - createBlock
  - doBlocksMatchTemplate
  - findTransform
  - getBlockAttributes
  - getBlockContent
  - getBlockDefaultClassname
  - getBlockFromExample
  - getBlockMenuDefaultClassName
  - getBlockSupport
  - getBlockTransforms
  - getBlockType
  - getBlockTypes
  - getCategories
  - getChildBlockNames
  - getDefaultBlockName
  - getFreeformContentHandlerName
  - …
  - pasteHandler **
  - rawHandler **
  - …
- browserslist-config
- components **
- compose
- core-data **
- custom-templated-path-webpack-plugin
- data-controls
- data **
- date
- dependency-extraction-webpack-plugin
- deprecated
- docgen
- dom-ready
- dom
- e2e-test-utils
- e2e-tests
- edit-post
- edit-widgets
- editor
- element
- env **
- escape-html
- eslint-plugin
- format-library
- hooks
- html-entities
- i18n
- is-shallow-equal
- jest-console
- jest-preset-default
- jest-puppeteer-axe
- keycodes
- list-reusable-blocks
- media-utils
- notices
- npm-package-json-lint-config
- nux
- plugins
- postcss-themes
- priority-queue
- project-management-automation
- redux-routine
- rich-text
  - applyFormat
  - create
  - getActiveFormat
  - getActiveObject
  - getTextContent
  - insert
  - insertObject
  - isCollapsed
  - isEmpty
  - registerFormatType
  - remove
  - removeFormat
  - replace
  - slice
  - split
  - toggleFormat
  - toHTMLString
  - unregisterFormatType
- scripts
- server-side-render
- shortcode
- token-list
- url
- viewport
- wordcount

Share this:

Like this: