This repository contains examples of Gutenberg Extensibility Patterns. It's organized as a WordPress plugin you can install and activate to play with the different patterns exposed.
It's composed of a sequential list of patterns you can enable one by one. Each pattern is organized like this:
- A php file in
lib/XX-pattern-name.phpto enqueue the different scripts/stylesheets required for this pattern. - A folder in
scripts/XX-pattern-namecontaining the JavaScript files and CSS and SASS stylesheets required for the pattern. - Each example is implemented in
ES5+CSSwithout requiring any built step but examples also include anESnext+SASSequivalement implementation. - Running the build process (
npm run build) generates a JavaScript bundle filescripts/XX-pattern-name/build/index.jsand a stylesheet filescripts/XX-pattern-name/build/style.cssif needed. - By default the plugin loads the
ES5+CSSversion of each example, make sure to update the URL of the stylesheets/scripts used in thelib/XX-pattern-name.phpfile if you want to switch to the built versions.
- Copy this repository to the
wp-content/plugins/gew/folder in your WordPress installation. - navigate to this folder using a terminal and run
npm install && npm run build.
you can run npm run dev if you want to make updates to the script files and regenerate the built files automatically.
You can choose which pattern to enable/disable in your plugin by opening the gutenberg-extensibility-workshop.php file and comment/uncomment the corresponding pattern file.
To demonstrate theme extensibility patterns, the repository contains a light theme optimized for Gutenberg Extensibility Patterns.
You can install this theme by copying the theme folder in this repository to the wp-content/themes/gew/ folder in your WordPress installation.