├── readme.md ├── .editorconfig ├── .gitignore ├── package.json ├── src └── index.js ├── readme.txt └── example-block-variation.php /readme.md: -------------------------------------------------------------------------------- 1 | # Example Block Variation 2 | 3 | Quick demo repository for using a custom block variation in WordPress - with the Block Bindings API. 4 | 5 | [Watch the video: ](https://www.youtube.com/embed/qD5U7TNUKTQ) 7 | 8 | Note: This demo repository includes registering the variation in PHP and JavaScript, but only one approach should be used. 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.{yml,yaml}] 17 | indent_style = space 18 | indent_size = 2 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Coverage directory used by tools like istanbul 9 | coverage 10 | 11 | # Compiled binary addons (https://nodejs.org/api/addons.html) 12 | build/Release 13 | 14 | # Dependency directories 15 | node_modules/ 16 | 17 | # Optional npm cache directory 18 | .npm 19 | 20 | # Optional eslint cache 21 | .eslintcache 22 | 23 | # Output of `npm pack` 24 | *.tgz 25 | 26 | # Output of `wp-scripts plugin-zip` 27 | *.zip 28 | 29 | # dotenv environment variables file 30 | .env 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-block-variation", 3 | "version": "0.1.0", 4 | "description": "Example block scaffolded with Create Block tool.", 5 | "author": "The WordPress Contributors", 6 | "license": "GPL-2.0-or-later", 7 | "main": "build/index.js", 8 | "scripts": { 9 | "build": "wp-scripts build", 10 | "format": "wp-scripts format", 11 | "lint:css": "wp-scripts lint-style", 12 | "lint:js": "wp-scripts lint-js", 13 | "packages-update": "wp-scripts packages-update", 14 | "plugin-zip": "wp-scripts plugin-zip", 15 | "start": "wp-scripts start" 16 | }, 17 | "devDependencies": { 18 | "@wordpress/scripts": "^27.3.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { registerBlockVariation } from "@wordpress/blocks"; 2 | 3 | // Register a paragraph that displays the ISBN of a book. 4 | registerBlockVariation("core/paragraph", { 5 | name: "book-isbn", 6 | title: "ISBN", 7 | icon: "book-alt", 8 | attributes: { 9 | metadata: { 10 | bindings: { 11 | content: { source: "core/post-meta", args: { key: "isbn" } }, 12 | }, 13 | }, 14 | }, 15 | }); 16 | 17 | // Register a button that links to the Amazon page of a book. 18 | registerBlockVariation("core/button", { 19 | name: "book-amazon", 20 | title: "Amazon", 21 | icon: "book-alt", 22 | attributes: { 23 | metadata: { 24 | bindings: { 25 | url: { source: "core/post-meta", args: { key: "amazon" } }, 26 | }, 27 | }, 28 | text: "Amazon", 29 | }, 30 | }); 31 | 32 | // Register a button that links to the Goodreads page of a book. 33 | registerBlockVariation("core/button", { 34 | name: "book-goodreads", 35 | title: "Goodreads", 36 | icon: "book-alt", 37 | attributes: { 38 | metadata: { 39 | bindings: { 40 | url: { source: "core/post-meta", args: { key: "goodreads" } }, 41 | }, 42 | }, 43 | text: "Goodreads", 44 | }, 45 | }); 46 | 47 | // Register a block variation that displays the ISBN and buttons for a book. 48 | registerBlockVariation("core/buttons", { 49 | name: "book-buttons", 50 | title: "Book Buttons", 51 | icon: "book-alt", 52 | innerBlocks: [ 53 | [ 54 | "core/button", 55 | { 56 | metadata: { 57 | bindings: { 58 | url: { source: "core/post-meta", args: { key: "amazon" } }, 59 | }, 60 | }, 61 | text: "Amazon", 62 | }, 63 | ], 64 | [ 65 | "core/button", 66 | { 67 | metadata: { 68 | bindings: { 69 | url: { source: "core/post-meta", args: { key: "goodreads" } }, 70 | }, 71 | }, 72 | text: "Goodreads", 73 | }, 74 | ], 75 | ], 76 | }); 77 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === Example Block Variation === 2 | Contributors: The WordPress Contributors 3 | Tags: block 4 | Tested up to: 6.1 5 | Stable tag: 0.1.0 6 | License: GPL-2.0-or-later 7 | License URI: https://www.gnu.org/licenses/gpl-2.0.html 8 | 9 | Example block scaffolded with Create Block tool. 10 | 11 | == Description == 12 | 13 | This is the long description. No limit, and you can use Markdown (as well as in the following sections). 14 | 15 | For backwards compatibility, if this section is missing, the full length of the short description will be used, and 16 | Markdown parsed. 17 | 18 | == Installation == 19 | 20 | This section describes how to install the plugin and get it working. 21 | 22 | e.g. 23 | 24 | 1. Upload the plugin files to the `/wp-content/plugins/example-block-variation` directory, or install the plugin through the WordPress plugins screen directly. 25 | 1. Activate the plugin through the 'Plugins' screen in WordPress 26 | 27 | 28 | == Frequently Asked Questions == 29 | 30 | = A question that someone might have = 31 | 32 | An answer to that question. 33 | 34 | = What about foo bar? = 35 | 36 | Answer to foo bar dilemma. 37 | 38 | == Screenshots == 39 | 40 | 1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from 41 | the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets 42 | directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` 43 | (or jpg, jpeg, gif). 44 | 2. This is the second screen shot 45 | 46 | == Changelog == 47 | 48 | = 0.1.0 = 49 | * Release 50 | 51 | == Arbitrary section == 52 | 53 | You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated 54 | plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or 55 | "installation." Arbitrary sections will be shown below the built-in sections outlined above. 56 | -------------------------------------------------------------------------------- /example-block-variation.php: -------------------------------------------------------------------------------- 1 | true, 28 | 'single' => true, 29 | 'type' => 'string', 30 | ) 31 | ); 32 | register_post_meta( 33 | 'book', 34 | 'amazon', 35 | array( 36 | 'show_in_rest' => true, 37 | 'single' => true, 38 | 'type' => 'string', 39 | ) 40 | ); 41 | register_post_meta( 42 | 'book', 43 | 'goodreads', 44 | array( 45 | 'show_in_rest' => true, 46 | 'single' => true, 47 | 'type' => 'string', 48 | ) 49 | ); 50 | } 51 | add_action( 'init', 'wpdev_example_register_post_meta' ); 52 | add_action( 'rest_api_init', 'wpdev_example_register_post_meta' ); 53 | 54 | 55 | /** 56 | * Registers our custom editor script. 57 | * (Disable if using PHP method.) 58 | */ 59 | function wpdev_example_block_variation_block_init() { 60 | $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php'; 61 | 62 | wp_enqueue_script( 63 | 'wpdev-example-block-variation-block-editor', 64 | plugins_url( 'build/index.js', __FILE__ ), 65 | $asset_file['dependencies'], 66 | $asset_file['version'], 67 | true 68 | ); 69 | } 70 | add_action( 'enqueue_block_editor_assets', 'wpdev_example_block_variation_block_init' ); 71 | 72 | 73 | 74 | 75 | 76 | /** 77 | * Register our custom block type variations. 78 | * 79 | * @param array $variations Array of block type variations. 80 | * @param WP_Block $block_type The block type. 81 | * @return array 82 | */ 83 | function wpdev_block_type_variations( $variations, $block_type ) { 84 | 85 | if ( 'core/paragraph' === $block_type->name ) { 86 | $variations[] = array( 87 | 'name' => 'book-isbn', 88 | 'title' => 'ISBN', 89 | 'icon' => 'book-alt', 90 | 'attributes' => array( 91 | 'metadata' => array( 92 | 'bindings' => array( 93 | 'content' => array( 94 | 'source' => 'core/post-meta', 95 | 'args' => array( 96 | 'key' => 'isbn', 97 | ), 98 | ), 99 | ), 100 | ), 101 | ), 102 | ); 103 | } elseif ( 'core/buttons' === $block_type->name ) { 104 | $variations[] = array( 105 | 'name' => 'book-buttons', 106 | 'title' => 'Book Buttons', 107 | 'icon' => 'book-alt', 108 | 'innerBlocks' => array( 109 | array( 110 | 'core/button', 111 | array( 112 | 'metadata' => array( 113 | 'bindings' => array( 114 | 'url' => array( 115 | 'source' => 'core/post-meta', 116 | 'args' => array( 117 | 'key' => 'amazon', 118 | ), 119 | ), 120 | ), 121 | ), 122 | 'text' => 'Amazon', 123 | ), 124 | ), 125 | array( 126 | 'core/button', 127 | array( 128 | 'metadata' => array( 129 | 'bindings' => array( 130 | 'url' => array( 131 | 'source' => 'core/post-meta', 132 | 'args' => array( 133 | 'key' => 'goodreads', 134 | ), 135 | ), 136 | ), 137 | ), 138 | 'text' => 'Goodreads', 139 | ), 140 | ), 141 | ), 142 | ); 143 | } 144 | 145 | return $variations; 146 | } 147 | add_filter( 'get_block_type_variations', 'wpdev_block_type_variations', 10, 2 ); 148 | --------------------------------------------------------------------------------