├── .editorconfig ├── .gitignore ├── build ├── index.asset.php ├── index.js └── index.js.map ├── example-block-variation.php ├── package-lock.json ├── package.json ├── readme.md ├── readme.txt └── src └── index.js /.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 | -------------------------------------------------------------------------------- /build/index.asset.php: -------------------------------------------------------------------------------- 1 | array('wp-blocks'), 'version' => 'd8088f5e73b98e92934d'); 2 | -------------------------------------------------------------------------------- /build/index.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ "use strict"; 3 | /******/ var __webpack_modules__ = ({ 4 | 5 | /***/ "@wordpress/blocks": 6 | /*!********************************!*\ 7 | !*** external ["wp","blocks"] ***! 8 | \********************************/ 9 | /***/ ((module) => { 10 | 11 | module.exports = window["wp"]["blocks"]; 12 | 13 | /***/ }) 14 | 15 | /******/ }); 16 | /************************************************************************/ 17 | /******/ // The module cache 18 | /******/ var __webpack_module_cache__ = {}; 19 | /******/ 20 | /******/ // The require function 21 | /******/ function __webpack_require__(moduleId) { 22 | /******/ // Check if module is in cache 23 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 24 | /******/ if (cachedModule !== undefined) { 25 | /******/ return cachedModule.exports; 26 | /******/ } 27 | /******/ // Create a new module (and put it into the cache) 28 | /******/ var module = __webpack_module_cache__[moduleId] = { 29 | /******/ // no module.id needed 30 | /******/ // no module.loaded needed 31 | /******/ exports: {} 32 | /******/ }; 33 | /******/ 34 | /******/ // Execute the module function 35 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 36 | /******/ 37 | /******/ // Return the exports of the module 38 | /******/ return module.exports; 39 | /******/ } 40 | /******/ 41 | /************************************************************************/ 42 | /******/ /* webpack/runtime/compat get default export */ 43 | /******/ (() => { 44 | /******/ // getDefaultExport function for compatibility with non-harmony modules 45 | /******/ __webpack_require__.n = (module) => { 46 | /******/ var getter = module && module.__esModule ? 47 | /******/ () => (module['default']) : 48 | /******/ () => (module); 49 | /******/ __webpack_require__.d(getter, { a: getter }); 50 | /******/ return getter; 51 | /******/ }; 52 | /******/ })(); 53 | /******/ 54 | /******/ /* webpack/runtime/define property getters */ 55 | /******/ (() => { 56 | /******/ // define getter functions for harmony exports 57 | /******/ __webpack_require__.d = (exports, definition) => { 58 | /******/ for(var key in definition) { 59 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 60 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 61 | /******/ } 62 | /******/ } 63 | /******/ }; 64 | /******/ })(); 65 | /******/ 66 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 67 | /******/ (() => { 68 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 69 | /******/ })(); 70 | /******/ 71 | /******/ /* webpack/runtime/make namespace object */ 72 | /******/ (() => { 73 | /******/ // define __esModule on exports 74 | /******/ __webpack_require__.r = (exports) => { 75 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 76 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 77 | /******/ } 78 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 79 | /******/ }; 80 | /******/ })(); 81 | /******/ 82 | /************************************************************************/ 83 | var __webpack_exports__ = {}; 84 | // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. 85 | (() => { 86 | /*!**********************!*\ 87 | !*** ./src/index.js ***! 88 | \**********************/ 89 | __webpack_require__.r(__webpack_exports__); 90 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); 91 | /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__); 92 | 93 | 94 | // Register a paragraph that displays the ISBN of a book. 95 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockVariation)("core/paragraph", { 96 | name: "book-isbn", 97 | title: "ISBN", 98 | icon: "book-alt", 99 | attributes: { 100 | metadata: { 101 | bindings: { 102 | content: { 103 | source: "core/post-meta", 104 | args: { 105 | key: "isbn" 106 | } 107 | } 108 | } 109 | } 110 | } 111 | }); 112 | 113 | // Register a button that links to the Amazon page of a book. 114 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockVariation)("core/button", { 115 | name: "book-amazon", 116 | title: "Amazon", 117 | icon: "book-alt", 118 | attributes: { 119 | metadata: { 120 | bindings: { 121 | url: { 122 | source: "core/post-meta", 123 | args: { 124 | key: "amazon" 125 | } 126 | } 127 | } 128 | }, 129 | text: "Amazon" 130 | } 131 | }); 132 | 133 | // Register a button that links to the Goodreads page of a book. 134 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockVariation)("core/button", { 135 | name: "book-goodreads", 136 | title: "Goodreads", 137 | icon: "book-alt", 138 | attributes: { 139 | metadata: { 140 | bindings: { 141 | url: { 142 | source: "core/post-meta", 143 | args: { 144 | key: "goodreads" 145 | } 146 | } 147 | } 148 | }, 149 | text: "Goodreads" 150 | } 151 | }); 152 | 153 | // Register a block variation that displays the ISBN and buttons for a book. 154 | (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockVariation)("core/buttons", { 155 | name: "book-buttons", 156 | title: "Book Buttons", 157 | icon: "book-alt", 158 | innerBlocks: [["core/button", { 159 | metadata: { 160 | bindings: { 161 | url: { 162 | source: "core/post-meta", 163 | args: { 164 | key: "amazon" 165 | } 166 | } 167 | } 168 | }, 169 | text: "Amazon" 170 | }], ["core/button", { 171 | metadata: { 172 | bindings: { 173 | url: { 174 | source: "core/post-meta", 175 | args: { 176 | key: "goodreads" 177 | } 178 | } 179 | } 180 | }, 181 | text: "Goodreads" 182 | }]] 183 | }); 184 | })(); 185 | 186 | /******/ })() 187 | ; 188 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /build/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","mappings":";;;;;;;;;;AAAA;;;;;;UCAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA;WACA;WACA,iCAAiC,WAAW;WAC5C;WACA;;;;;WCPA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA;;;;;WCAA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;;;;;ACN2D;;AAE3D;AACAA,yEAAsB,CAAC,gBAAgB,EAAE;EACxCC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,MAAM;EACbC,IAAI,EAAE,UAAU;EAChBC,UAAU,EAAE;IACXC,QAAQ,EAAE;MACTC,QAAQ,EAAE;QACTC,OAAO,EAAE;UAAEC,MAAM,EAAE,gBAAgB;UAAEC,IAAI,EAAE;YAAEC,GAAG,EAAE;UAAO;QAAE;MAC5D;IACD;EACD;AACD,CAAC,CAAC;;AAEF;AACAV,yEAAsB,CAAC,aAAa,EAAE;EACrCC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,QAAQ;EACfC,IAAI,EAAE,UAAU;EAChBC,UAAU,EAAE;IACXC,QAAQ,EAAE;MACTC,QAAQ,EAAE;QACTK,GAAG,EAAE;UAAEH,MAAM,EAAE,gBAAgB;UAAEC,IAAI,EAAE;YAAEC,GAAG,EAAE;UAAS;QAAE;MAC1D;IACD,CAAC;IACDE,IAAI,EAAE;EACP;AACD,CAAC,CAAC;;AAEF;AACAZ,yEAAsB,CAAC,aAAa,EAAE;EACrCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,IAAI,EAAE,UAAU;EAChBC,UAAU,EAAE;IACXC,QAAQ,EAAE;MACTC,QAAQ,EAAE;QACTK,GAAG,EAAE;UAAEH,MAAM,EAAE,gBAAgB;UAAEC,IAAI,EAAE;YAAEC,GAAG,EAAE;UAAY;QAAE;MAC7D;IACD,CAAC;IACDE,IAAI,EAAE;EACP;AACD,CAAC,CAAC;;AAEF;AACAZ,yEAAsB,CAAC,cAAc,EAAE;EACtCC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,cAAc;EACrBC,IAAI,EAAE,UAAU;EAChBU,WAAW,EAAE,CACZ,CACC,aAAa,EACb;IACCR,QAAQ,EAAE;MACTC,QAAQ,EAAE;QACTK,GAAG,EAAE;UAAEH,MAAM,EAAE,gBAAgB;UAAEC,IAAI,EAAE;YAAEC,GAAG,EAAE;UAAS;QAAE;MAC1D;IACD,CAAC;IACDE,IAAI,EAAE;EACP,CAAC,CACD,EACD,CACC,aAAa,EACb;IACCP,QAAQ,EAAE;MACTC,QAAQ,EAAE;QACTK,GAAG,EAAE;UAAEH,MAAM,EAAE,gBAAgB;UAAEC,IAAI,EAAE;YAAEC,GAAG,EAAE;UAAY;QAAE;MAC7D;IACD,CAAC;IACDE,IAAI,EAAE;EACP,CAAC,CACD;AAEH,CAAC,CAAC,C","sources":["webpack://example-block-variation/external window [\"wp\",\"blocks\"]","webpack://example-block-variation/webpack/bootstrap","webpack://example-block-variation/webpack/runtime/compat get default export","webpack://example-block-variation/webpack/runtime/define property getters","webpack://example-block-variation/webpack/runtime/hasOwnProperty shorthand","webpack://example-block-variation/webpack/runtime/make namespace object","webpack://example-block-variation/./src/index.js"],"sourcesContent":["module.exports = window[\"wp\"][\"blocks\"];","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { registerBlockVariation } from \"@wordpress/blocks\";\n\n// Register a paragraph that displays the ISBN of a book.\nregisterBlockVariation(\"core/paragraph\", {\n\tname: \"book-isbn\",\n\ttitle: \"ISBN\",\n\ticon: \"book-alt\",\n\tattributes: {\n\t\tmetadata: {\n\t\t\tbindings: {\n\t\t\t\tcontent: { source: \"core/post-meta\", args: { key: \"isbn\" } },\n\t\t\t},\n\t\t},\n\t},\n});\n\n// Register a button that links to the Amazon page of a book.\nregisterBlockVariation(\"core/button\", {\n\tname: \"book-amazon\",\n\ttitle: \"Amazon\",\n\ticon: \"book-alt\",\n\tattributes: {\n\t\tmetadata: {\n\t\t\tbindings: {\n\t\t\t\turl: { source: \"core/post-meta\", args: { key: \"amazon\" } },\n\t\t\t},\n\t\t},\n\t\ttext: \"Amazon\",\n\t},\n});\n\n// Register a button that links to the Goodreads page of a book.\nregisterBlockVariation(\"core/button\", {\n\tname: \"book-goodreads\",\n\ttitle: \"Goodreads\",\n\ticon: \"book-alt\",\n\tattributes: {\n\t\tmetadata: {\n\t\t\tbindings: {\n\t\t\t\turl: { source: \"core/post-meta\", args: { key: \"goodreads\" } },\n\t\t\t},\n\t\t},\n\t\ttext: \"Goodreads\",\n\t},\n});\n\n// Register a block variation that displays the ISBN and buttons for a book.\nregisterBlockVariation(\"core/buttons\", {\n\tname: \"book-buttons\",\n\ttitle: \"Book Buttons\",\n\ticon: \"book-alt\",\n\tinnerBlocks: [\n\t\t[\n\t\t\t\"core/button\",\n\t\t\t{\n\t\t\t\tmetadata: {\n\t\t\t\t\tbindings: {\n\t\t\t\t\t\turl: { source: \"core/post-meta\", args: { key: \"amazon\" } },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\ttext: \"Amazon\",\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t\"core/button\",\n\t\t\t{\n\t\t\t\tmetadata: {\n\t\t\t\t\tbindings: {\n\t\t\t\t\t\turl: { source: \"core/post-meta\", args: { key: \"goodreads\" } },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\ttext: \"Goodreads\",\n\t\t\t},\n\t\t],\n\t],\n});\n"],"names":["registerBlockVariation","name","title","icon","attributes","metadata","bindings","content","source","args","key","url","text","innerBlocks"],"sourceRoot":""} -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------