Learn VIP Course: Enterprise Block Editor (Gutenberg)

This repository contains examples used in the Learn VIP Course: Enterprise Block Editor (Gutenberg)

What does it provide?

1. A PHP CodeSniffer configuration that will check your code against the coding standards that are recommended by the Newspack team.
2. A Prettier configuration for WordPress.
3. A Husky configuration to lint local files changes before they are committed.

How to install the coding standards tools

By running npm run setup from the root of the project you'll:

• Install package.json dependencies
• Install composer.json dependencies
• Initialize and configure husky pre-commit

Examples

Module 2: Building with Blocks

Lesson 2.5: Block Variations

• block-variations (live demo)
• block-variations-quote (live demo)
• unregister-block-variations (live demo)
• modify-block-variation (live demo)

Module 5: Advanced Block Development

Lesson 5.4: Bindings

• block-bindings-custom-source (live demo)
• block-bindings-post-meta (live demo)
• editor-bindings (live demo)

Lesson 5.5: Inner Blocks

• inner-blocks (live demo)

Lesson 5.6: Context

• context (live demo)

Lesson 5.7: Deprecation

• deprecation (live demo)

Lesson 5.8: Transforms

• transforms-filter (live demo)

Lesson 5.9: Remote Data Blocks

• remote-data-blocks-custom-query (live demo)

Module 6: Customizing the Editor Experience

Lesson 6.1: Custom Block Controls

• block-filters-inspector-controls (live demo)

Lesson 6.2: Slot & Fill System

• slot-fills (live demo)

Lesson 6.3: Block Styles

• block-styles (live demo)

Lesson 6.4: Editor Filters and Actions

• block-filters-block-edit (live demo)
• block-filters-inspector-controls (live demo)

Lesson 6.5: Using the WordPress VIP Block Governance Plugin

• Basic (live demo) - A simple configuration limiting the blocks available
• Per Role (live demo) - A simple role-based configuration
• Per Post Type (live demo) - A post-type-based configuration that includes block settings for specific blocks
• Advanced (live demo as author ¹ - live demo as editor ¹) - An advanced configuration with different rule types and detailed block settings

Module 7: WordPress Data Layer and wp.data

Lesson 7.5: Creating Custom Data Stores

• review-system (live demo)

Module 8: Interactivity API

Lesson 8.2: Implementing the Interactivity API

• iapi-global-local-derived-state-block (live demo)
• iapi-global-local-derived-state-3-blocks (live demo)
• iapi-core-blocks-inner-blocks (live demo)

Module 9 Performance and Optimization

Lesson 9.1: Optimizing JavaScript for Gutenberg

• script-modules-block-manual (live demo)
• script-modules-block-view (live demo)
• script-modules-block-editor (live demo)

Footnotes

1. These playground demos may not work well directly from the link due to this issue. If that's the case try copying and pasting the related blueprint.json on playground.wordpress.net/builder ↩ ↩²