diff --git a/01-basic-esnext/index.php b/01-basic-esnext/index.php index f703c84b..a48a10d1 100644 --- a/01-basic-esnext/index.php +++ b/01-basic-esnext/index.php @@ -30,7 +30,7 @@ function gutenberg_examples_01_esnext_load_textdomain() { function gutenberg_examples_01_esnext_register_block() { // Register the block by passing the location of block.json to register_block_type. - register_block_type( __DIR__); + register_block_type( __DIR__ ); if ( function_exists( 'wp_set_script_translations' ) ) { /** diff --git a/01-basic-esnext/src/index.js b/01-basic-esnext/src/index.js index accf74e1..1a4e23d3 100644 --- a/01-basic-esnext/src/index.js +++ b/01-basic-esnext/src/index.js @@ -22,8 +22,8 @@ export const blockStyle = { const { name, ...settings } = json; // Register the block -registerBlockType( name, { +registerBlockType(name, { ...settings, edit, // Object shorthand property - same as writing: edit: edit, save, // Object shorthand property - same as writing: save: save, -} ); +}); diff --git a/03-editable-esnext/.eslintrc b/03-editable-esnext/.eslintrc new file mode 100644 index 00000000..371f02e3 --- /dev/null +++ b/03-editable-esnext/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ] +} diff --git a/03-editable-esnext/block.json b/03-editable-esnext/block.json new file mode 100644 index 00000000..97aaa2ff --- /dev/null +++ b/03-editable-esnext/block.json @@ -0,0 +1,23 @@ +{ + "apiVersion": 2, + "name": "gutenberg-examples/example-03-editable-esnext", + "title":"Example: Editable (ESNext)", + "textdomain": "gutenberg-examples", + "icon": "universal-access-alt", + "category": "layout", + "attributes": { + "content": { + "type": "array", + "source": "children", + "selector": "p" + } + }, + "example": { + "attributes": { + "content": "Hello world" + } + }, + "editorScript": "file:./build/index.js", + "editorStyle": "file:./build/index.css", + "style": "file:./build/style-index.css" +} diff --git a/03-editable-esnext/build/index.asset.php b/03-editable-esnext/build/index.asset.php index 0603217a..085a3296 100644 --- a/03-editable-esnext/build/index.asset.php +++ b/03-editable-esnext/build/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n' ), 'version' => 'ebd43150f92e5b16ea18cc759afffddc'); + array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'ddbe81c5cfe900696403a32e869fef44'); \ No newline at end of file diff --git a/03-editable-esnext/build/index.css b/03-editable-esnext/build/index.css new file mode 100644 index 00000000..9f6232b9 --- /dev/null +++ b/03-editable-esnext/build/index.css @@ -0,0 +1,16 @@ +/*!****************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./editor.css ***! + \****************************************************************************************************************************************************************/ +/** + * Note that these styles are loaded *after* common styles, so that + * editor-specific styles using the same selectors will take precedence. + */ +.wp-block-gutenberg-examples-example-03-editable-esnext { + color: green; + background: #cfc; + border: 2px solid #9c9; + padding: 20px; +} + + +/*# sourceMappingURL=index.css.map*/ \ No newline at end of file diff --git a/03-editable-esnext/build/index.css.map b/03-editable-esnext/build/index.css.map new file mode 100644 index 00000000..8fa038e8 --- /dev/null +++ b/03-editable-esnext/build/index.css.map @@ -0,0 +1 @@ +{"version":3,"file":"index.css","mappings":";;;AAAA;;;EAGE;AACF;CACC,YAAY;CACZ,gBAAgB;CAChB,sBAAsB;CACtB,aAAa;AACd","sources":["webpack://03-editable-esnext/./editor.css"],"sourcesContent":["/**\n * Note that these styles are loaded *after* common styles, so that\n * editor-specific styles using the same selectors will take precedence.\n */\n.wp-block-gutenberg-examples-example-03-editable-esnext {\n\tcolor: green;\n\tbackground: #cfc;\n\tborder: 2px solid #9c9;\n\tpadding: 20px;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/03-editable-esnext/build/index.js b/03-editable-esnext/build/index.js index cfd25797..a108638d 100644 --- a/03-editable-esnext/build/index.js +++ b/03-editable-esnext/build/index.js @@ -1 +1,387 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.blockEditor}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(1),u=n(3),c=n(2);Object(u.registerBlockType)("gutenberg-examples/example-03-editable-esnext",{title:Object(o.__)("Example: Editable (ESNext)","gutenberg-examples"),icon:"universal-access-alt",category:"layout",attributes:{content:{type:"array",source:"children",selector:"p"}},example:{attributes:{content:Object(o.__)("Hello world")}},edit:function(e){var t=e.attributes.content,n=e.setAttributes,o=e.className;return Object(r.createElement)(c.RichText,{tagName:"p",className:o,onChange:function(e){n({content:e})},value:t})},save:function(e){return Object(r.createElement)(c.RichText.Content,{tagName:"p",value:e.attributes.content})}})}]); \ No newline at end of file +/******/ (function() { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ "./src/edit.js": +/*!*********************!*\ + !*** ./src/edit.js ***! + \*********************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); +/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__); + + + +/** + * WordPress dependencies + */ + + +var Edit = function Edit(props) { + var content = props.attributes.content, + setAttributes = props.setAttributes; + var blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)(); + + var onChangeContent = function onChangeContent(newContent) { + setAttributes({ + content: newContent + }); + }; + + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, blockProps, { + tagName: "p", + onChange: onChangeContent, + value: content + })); +}; + +/* harmony default export */ __webpack_exports__["default"] = (Edit); + +/***/ }), + +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); +/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../block.json */ "./block.json"); +/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); +/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js"); +/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../style.css */ "./style.css"); +/* harmony import */ var _editor_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../editor.css */ "./editor.css"); +/** + * WordPress dependencies + */ + +/** + * Internal dependencies + */ + + + + + + // Destructure the json file to get the name and settings for the block +// For more information on how this works, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment + +const { + name, + ...settings +} = _block_json__WEBPACK_IMPORTED_MODULE_1__; // Register the block + +(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(name, { ...settings, + edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"], + // Object shorthand property - same as writing: edit: edit, + save: _save__WEBPACK_IMPORTED_MODULE_3__["default"] // Object shorthand property - same as writing: save: save, + +}); + +/***/ }), + +/***/ "./src/save.js": +/*!*********************!*\ + !*** ./src/save.js ***! + \*********************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); +/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__); + + + +/** + * WordPress dependencies + */ + + +var Save = function Save(props) { + var content = props.attributes.content; + var blockProps = _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps.save(); + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText.Content, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__["default"])({}, blockProps, { + tagName: "p", + value: content + })); +}; + +/* harmony default export */ __webpack_exports__["default"] = (Save); + +/***/ }), + +/***/ "./editor.css": +/*!********************!*\ + !*** ./editor.css ***! + \********************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +// extracted by mini-css-extract-plugin + + +/***/ }), + +/***/ "./style.css": +/*!*******************!*\ + !*** ./style.css ***! + \*******************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +// extracted by mini-css-extract-plugin + + +/***/ }), + +/***/ "@wordpress/block-editor": +/*!*************************************!*\ + !*** external ["wp","blockEditor"] ***! + \*************************************/ +/***/ (function(module) { + +module.exports = window["wp"]["blockEditor"]; + +/***/ }), + +/***/ "@wordpress/blocks": +/*!********************************!*\ + !*** external ["wp","blocks"] ***! + \********************************/ +/***/ (function(module) { + +module.exports = window["wp"]["blocks"]; + +/***/ }), + +/***/ "@wordpress/element": +/*!*********************************!*\ + !*** external ["wp","element"] ***! + \*********************************/ +/***/ (function(module) { + +module.exports = window["wp"]["element"]; + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/esm/extends.js": +/*!************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/esm/extends.js ***! + \************************************************************/ +/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": function() { return /* binding */ _extends; } +/* harmony export */ }); +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +/***/ }), + +/***/ "./block.json": +/*!********************!*\ + !*** ./block.json ***! + \********************/ +/***/ (function(module) { + +module.exports = JSON.parse('{"apiVersion":2,"name":"gutenberg-examples/example-03-editable-esnext","title":"Example: Editable (ESNext)","textdomain":"gutenberg-examples","icon":"universal-access-alt","category":"layout","attributes":{"content":{"type":"array","source":"children","selector":"p"}},"example":{"attributes":{"content":"Hello world"}},"editorScript":"file:./build/index.js","editorStyle":"file:./build/index.css","style":"file:./build/style-index.css"}'); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ // no module.id needed +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = __webpack_modules__; +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/chunk loaded */ +/******/ !function() { +/******/ var deferred = []; +/******/ __webpack_require__.O = function(result, chunkIds, fn, priority) { +/******/ if(chunkIds) { +/******/ priority = priority || 0; +/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; +/******/ deferred[i] = [chunkIds, fn, priority]; +/******/ return; +/******/ } +/******/ var notFulfilled = Infinity; +/******/ for (var i = 0; i < deferred.length; i++) { +/******/ var chunkIds = deferred[i][0]; +/******/ var fn = deferred[i][1]; +/******/ var priority = deferred[i][2]; +/******/ var fulfilled = true; +/******/ for (var j = 0; j < chunkIds.length; j++) { +/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) { +/******/ chunkIds.splice(j--, 1); +/******/ } else { +/******/ fulfilled = false; +/******/ if(priority < notFulfilled) notFulfilled = priority; +/******/ } +/******/ } +/******/ if(fulfilled) { +/******/ deferred.splice(i--, 1) +/******/ var r = fn(); +/******/ if (r !== undefined) result = r; +/******/ } +/******/ } +/******/ return result; +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/compat get default export */ +/******/ !function() { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function() { return module['default']; } : +/******/ function() { return module; }; +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/define property getters */ +/******/ !function() { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = function(exports, definition) { +/******/ for(var key in definition) { +/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { +/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); +/******/ } +/******/ } +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ !function() { +/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } +/******/ }(); +/******/ +/******/ /* webpack/runtime/make namespace object */ +/******/ !function() { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/jsonp chunk loading */ +/******/ !function() { +/******/ // no baseURI +/******/ +/******/ // object to store loaded and loading chunks +/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched +/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded +/******/ var installedChunks = { +/******/ "index": 0, +/******/ "style-index": 0 +/******/ }; +/******/ +/******/ // no chunk on demand loading +/******/ +/******/ // no prefetching +/******/ +/******/ // no preloaded +/******/ +/******/ // no HMR +/******/ +/******/ // no HMR manifest +/******/ +/******/ __webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; }; +/******/ +/******/ // install a JSONP callback for chunk loading +/******/ var webpackJsonpCallback = function(parentChunkLoadingFunction, data) { +/******/ var chunkIds = data[0]; +/******/ var moreModules = data[1]; +/******/ var runtime = data[2]; +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0; +/******/ if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) { +/******/ for(moduleId in moreModules) { +/******/ if(__webpack_require__.o(moreModules, moduleId)) { +/******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(runtime) var result = runtime(__webpack_require__); +/******/ } +/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { +/******/ installedChunks[chunkId][0](); +/******/ } +/******/ installedChunks[chunkIds[i]] = 0; +/******/ } +/******/ return __webpack_require__.O(result); +/******/ } +/******/ +/******/ var chunkLoadingGlobal = self["webpackChunk_03_editable_esnext"] = self["webpackChunk_03_editable_esnext"] || []; +/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); +/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); +/******/ }(); +/******/ +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module depends on other loaded chunks and execution need to be delayed +/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["style-index"], function() { return __webpack_require__("./src/index.js"); }) +/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); +/******/ +/******/ })() +; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/03-editable-esnext/build/style-index.css b/03-editable-esnext/build/style-index.css new file mode 100644 index 00000000..e241e4d7 --- /dev/null +++ b/03-editable-esnext/build/style-index.css @@ -0,0 +1,16 @@ +/*!***************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./style.css ***! + \***************************************************************************************************************************************************************/ +/** + * Note that these styles are loaded *before* editor styles, so that + * editor-specific styles using the same selectors will take precedence. + */ +.wp-block-gutenberg-examples-example-03-editable-esnext { + color: darkred; + background: #fcc; + border: 2px solid #c99; + padding: 20px; +} + + +/*# sourceMappingURL=style-index.css.map*/ \ No newline at end of file diff --git a/03-editable-esnext/build/style-index.css.map b/03-editable-esnext/build/style-index.css.map new file mode 100644 index 00000000..61c2641c --- /dev/null +++ b/03-editable-esnext/build/style-index.css.map @@ -0,0 +1 @@ +{"version":3,"file":"style-index.css","mappings":";;;AAAA;;;EAGE;AACF;CACC,cAAc;CACd,gBAAgB;CAChB,sBAAsB;CACtB,aAAa;AACd","sources":["webpack://03-editable-esnext/./style.css"],"sourcesContent":["/**\n * Note that these styles are loaded *before* editor styles, so that\n * editor-specific styles using the same selectors will take precedence.\n */\n.wp-block-gutenberg-examples-example-03-editable-esnext {\n\tcolor: darkred;\n\tbackground: #fcc;\n\tborder: 2px solid #c99;\n\tpadding: 20px;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/03-editable-esnext/index.php b/03-editable-esnext/index.php index a4ff6f3a..ee275d27 100644 --- a/03-editable-esnext/index.php +++ b/03-editable-esnext/index.php @@ -14,7 +14,7 @@ /** * Load all translations for our plugin from the MO file. -*/ + */ add_action( 'init', 'gutenberg_examples_03_esnext_load_textdomain' ); function gutenberg_examples_03_esnext_load_textdomain() { @@ -29,44 +29,16 @@ function gutenberg_examples_03_esnext_load_textdomain() { */ function gutenberg_examples_03_esnext_register_block() { - // automatically load dependencies and version - $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php'); - - wp_register_script( - 'gutenberg-examples-03-esnext', - plugins_url( 'build/index.js', __FILE__ ), - $asset_file['dependencies'], - $asset_file['version'] - ); - - wp_register_style( - 'gutenberg-examples-03-esnext-editor', - plugins_url( 'editor.css', __FILE__ ), - array( 'wp-edit-blocks' ), - filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) - ); - - wp_register_style( - 'gutenberg-examples-03-esnext', - plugins_url( 'style.css', __FILE__ ), - array( ), - filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ) - ); - - register_block_type( 'gutenberg-examples/example-03-editable-esnext', array( - 'style' => 'gutenberg-examples-03-esnext', - 'editor_style' => 'gutenberg-examples-03-esnext-editor', - 'editor_script' => 'gutenberg-examples-03-esnext', - ) ); - - if ( function_exists( 'wp_set_script_translations' ) ) { - /** - * May be extended to wp_set_script_translations( 'my-handle', 'my-domain', - * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see - * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/ - */ - wp_set_script_translations( 'gutenberg-examples-03-esnext', 'gutenberg-examples' ); - } - + // Register the block by passing the location of block.json to register_block_type. + register_block_type( __DIR__ ); + + if ( function_exists( 'wp_set_script_translations' ) ) { + /** + * May be extended to wp_set_script_translations( 'my-handle', 'my-domain', + * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see + * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/ + */ + wp_set_script_translations( 'gutenberg-examples-03-esnext', 'gutenberg-examples' ); + } } add_action( 'init', 'gutenberg_examples_03_esnext_register_block' ); diff --git a/03-editable-esnext/package.json b/03-editable-esnext/package.json index 60ab507e..89c9accd 100644 --- a/03-editable-esnext/package.json +++ b/03-editable-esnext/package.json @@ -16,7 +16,7 @@ }, "main": "build/index.js", "devDependencies": { - "@wordpress/scripts": "^9.0.0" + "@wordpress/scripts": "^18.0.1" }, "scripts": { "build": "wp-scripts build", diff --git a/03-editable-esnext/src/edit.js b/03-editable-esnext/src/edit.js new file mode 100644 index 00000000..e5ba8fe1 --- /dev/null +++ b/03-editable-esnext/src/edit.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ + +import { useBlockProps, RichText } from '@wordpress/block-editor'; + +const Edit = ( props ) => { + const { + attributes: { content }, + setAttributes, + } = props; + + const blockProps = useBlockProps(); + + const onChangeContent = ( newContent ) => { + setAttributes( { content: newContent } ); + }; + return ( + + ); +}; +export default Edit; diff --git a/03-editable-esnext/src/index.js b/03-editable-esnext/src/index.js index dae27999..edc9a48f 100644 --- a/03-editable-esnext/src/index.js +++ b/03-editable-esnext/src/index.js @@ -1,44 +1,25 @@ -import { __ } from '@wordpress/i18n'; +/** + * WordPress dependencies + */ import { registerBlockType } from '@wordpress/blocks'; -import { RichText } from '@wordpress/block-editor'; -registerBlockType( 'gutenberg-examples/example-03-editable-esnext', { - title: __( 'Example: Editable (ESNext)', 'gutenberg-examples' ), - icon: 'universal-access-alt', - category: 'layout', - attributes: { - content: { - type: 'array', - source: 'children', - selector: 'p', - }, - }, - example: { - attributes: { - content: __( 'Hello world' ), - }, - }, - edit: ( props ) => { - const { - attributes: { content }, - setAttributes, - className, - } = props; - const onChangeContent = ( newContent ) => { - setAttributes( { content: newContent } ); - }; - return ( - - ); - }, - save: ( props ) => { - return ( - - ); - }, +/** + * Internal dependencies + */ +import json from '../block.json'; +import edit from './edit'; +import save from './save'; + +import '../style.css'; +import '../editor.css'; + +// Destructure the json file to get the name and settings for the block +// For more information on how this works, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment +const { name, ...settings } = json; + +// Register the block +registerBlockType( name, { + ...settings, + edit, // Object shorthand property - same as writing: edit: edit, + save, // Object shorthand property - same as writing: save: save, } ); diff --git a/03-editable-esnext/src/save.js b/03-editable-esnext/src/save.js new file mode 100644 index 00000000..eed5dce0 --- /dev/null +++ b/03-editable-esnext/src/save.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { useBlockProps, RichText } from '@wordpress/block-editor'; + +const Save = ( props ) => { + const { + attributes: { content }, + } = props; + const blockProps = useBlockProps.save(); + + return ; +}; +export default Save;