Learn Gutenberg

Learn Gutenberg plugin have different examples of custom blocks development. Showing examples of different APIs and functionalities.

This plugin created using @wordpress/create-block package.

You can find all the custom blocks under Learn Gutenberg block category.

Examples

Basic (Static) Block

• blocks/static-block.php
• src/static-block
• build/static-block

References

• Create a Block Tutorial
• API Versions
• Registration
• Metadata
• Edit and Save
• Use styles and stylesheets

Dynamic Block

Using client-side or server-side rendering.

• blocks/dynamic-block.php
• src/dynamic-block
• build/dynamic-block

References

• Creating dynamic blocks
• Block Supports in dynamic blocks

Block Supports

• blocks/block-supports.php
• src/block-supports
• build/block-supports

References

• Block Supports

Attributes and Editable Field

• blocks/block-attributes.php
• src/block-attributes
• build/block-attributes

References

• Introducing Attributes and Editable Fields
• Attributes
• RichText Reference

Block Controls: Block Toolbar and Settings Sidebar

• blocks/block-controls.php
• src/block-controls
• build/block-controls

References

• Block Controls: Block Toolbar and Settings Sidebar
• Component Reference - Refer child pages for all components.
• InspectorControls
• BlockControls

Nested Blocks: Using InnerBlocks

• Nested Blocks: Using InnerBlocks
  • Allowed Blocks
  • Orientation
  • Template
  • Post Template
  • Parent-Child InnerBlocks
• InnerBlocks

How-to Guides

• Meta Boxes
• Notices
  • Notices Data Reference
• Plugin Sidebar
• Feature Flags

Block API Reference

• API Versions
• Registration
• Metadata
• Edit and Save
• Attributes
• Supports
• Styles
• Templates
• Patterns
• Deprecation
• Variations
• Transforms
• Context
• Annotations

Filter Reference

• Block Filters
• Editor Filters
• i18n Filters
• Parser Filters
• Autocomplete

SlotFills

• SlotFills Reference

Data Module Reference

• Data Module Reference
  • core: WordPress Core Data
  • core/annotations: Annotations
  • core/blocks: Block Types Data
  • core/block-editor: The Block Editor’s Data
  • core/editor: The Post Editor’s Data
  • core/edit-post: The Editor’s UI Data
  • core/notices: Notices Data
  • core/nux: The NUX (New User Experience) Data
  • core/viewport: The Viewport Data

Themes

• Themes
• Theme.json Reference

Other References

• Widgets
• Core Blocks Reference
• Package Reference
• Glossary
• Frequently Asked Questions
• Architecture
• Designer Documentation

Credits

• Block Editor Handbook