From 434250ee8768ca66d5e47b0045aec69ad449feb7 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 15 Oct 2021 13:28:45 -0400 Subject: [PATCH 1/5] Update block to use latest block api. --- 03-editable-esnext/.eslintrc | 3 + 03-editable-esnext/block.json | 21 ++ 03-editable-esnext/build/index.asset.php | 2 +- 03-editable-esnext/build/index.js | 386 ++++++++++++++++++++++- 03-editable-esnext/src/edit.js | 27 ++ 03-editable-esnext/src/index.js | 60 ++-- 03-editable-esnext/src/save.js | 14 + 7 files changed, 470 insertions(+), 43 deletions(-) create mode 100644 03-editable-esnext/.eslintrc create mode 100644 03-editable-esnext/block.json create mode 100644 03-editable-esnext/src/edit.js create mode 100644 03-editable-esnext/src/save.js 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..95bc528a --- /dev/null +++ b/03-editable-esnext/block.json @@ -0,0 +1,21 @@ +{ + "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" +} diff --git a/03-editable-esnext/build/index.asset.php b/03-editable-esnext/build/index.asset.php index 0603217a..27baecc1 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' => '7ebc596b08537cc8e9452c8b241b00cc'); \ No newline at end of file diff --git a/03-editable-esnext/build/index.js b/03-editable-esnext/build/index.js index cfd25797..e865beb2 100644 --- a/03-editable-esnext/build/index.js +++ b/03-editable-esnext/build/index.js @@ -1 +1,385 @@ -!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(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // 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 }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./block.json": +/*!********************!*\ + !*** ./block.json ***! + \********************/ +/*! exports provided: apiVersion, name, title, textdomain, icon, category, attributes, example, editorScript, default */ +/***/ (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\"}"); + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/defineProperty.js": +/*!***************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***! + \***************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +module.exports = _defineProperty; +module.exports["default"] = module.exports, module.exports.__esModule = true; + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/extends.js": +/*!********************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/extends.js ***! + \********************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +function _extends() { + module.exports = _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; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _extends.apply(this, arguments); +} + +module.exports = _extends; +module.exports["default"] = module.exports, module.exports.__esModule = true; + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js": +/*!************************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***! + \************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose.js */ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"); + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + var target = objectWithoutPropertiesLoose(source, excluded); + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +module.exports = _objectWithoutProperties; +module.exports["default"] = module.exports, module.exports.__esModule = true; + +/***/ }), + +/***/ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js": +/*!*****************************************************************************!*\ + !*** ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***! + \*****************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +module.exports = _objectWithoutPropertiesLoose; +module.exports["default"] = module.exports, module.exports.__esModule = true; + +/***/ }), + +/***/ "./src/edit.js": +/*!*********************!*\ + !*** ./src/edit.js ***! + \*********************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__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/extends.js"); +/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__); +/* 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 = Object(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["useBlockProps"])(); + + var onChangeContent = function onChangeContent(newContent) { + setAttributes({ + content: newContent + }); + }; + + return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["RichText"], _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 ***! + \**********************/ +/*! no exports provided */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"); +/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js"); +/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); +/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../block.json */ "./block.json"); +var _block_json__WEBPACK_IMPORTED_MODULE_3___namespace = /*#__PURE__*/__webpack_require__.t(/*! ../block.json */ "./block.json", 1); +/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); +/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/save.js"); + + + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +/** + * 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 + +var name = _block_json__WEBPACK_IMPORTED_MODULE_3__.name, + settings = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_block_json__WEBPACK_IMPORTED_MODULE_3__, ["name"]); // Register the block + + +Object(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__["registerBlockType"])(name, _objectSpread(_objectSpread({}, settings), {}, { + edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"], + // Object shorthand property - same as writing: edit: edit, + save: _save__WEBPACK_IMPORTED_MODULE_5__["default"] // Object shorthand property - same as writing: save: save, + +})); + +/***/ }), + +/***/ "./src/save.js": +/*!*********************!*\ + !*** ./src/save.js ***! + \*********************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__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/extends.js"); +/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__); +/* 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 Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["RichText"].Content, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, blockProps, { + tagName: "p", + value: content + })); +}; + +/* harmony default export */ __webpack_exports__["default"] = (Save); + +/***/ }), + +/***/ "@wordpress/block-editor": +/*!*************************************!*\ + !*** external ["wp","blockEditor"] ***! + \*************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["blockEditor"]; }()); + +/***/ }), + +/***/ "@wordpress/blocks": +/*!********************************!*\ + !*** external ["wp","blocks"] ***! + \********************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["blocks"]; }()); + +/***/ }), + +/***/ "@wordpress/element": +/*!*********************************!*\ + !*** external ["wp","element"] ***! + \*********************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +(function() { module.exports = window["wp"]["element"]; }()); + +/***/ }) + +/******/ }); +//# sourceMappingURL=index.js.map \ No newline at end of file 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..e3b9885a 100644 --- a/03-editable-esnext/src/index.js +++ b/03-editable-esnext/src/index.js @@ -1,44 +1,22 @@ -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'; + +// 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; From 2d03ff8ebe19babe67e68a62cdbb653156d4e0a8 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 15 Oct 2021 13:30:59 -0400 Subject: [PATCH 2/5] Call register_block_type. --- 01-basic-esnext/index.php | 2 +- 03-editable-esnext/index.php | 52 +++++++++--------------------------- 2 files changed, 13 insertions(+), 41 deletions(-) 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/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' ); From add4026fe9c86a38619078dc088bb2e52d10257c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 15 Oct 2021 13:43:35 -0400 Subject: [PATCH 3/5] Update @wordpress/scripts to latest version. --- 03-editable-esnext/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From be14151c71ab36dbb8e0533395fe9be41941305c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 15 Oct 2021 13:44:17 -0400 Subject: [PATCH 4/5] Eslint fixes. --- 01-basic-esnext/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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, -} ); +}); From de6b899ebeb2265578a4d5141ba158dd8da7a578 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 15 Oct 2021 13:44:34 -0400 Subject: [PATCH 5/5] Add styles to block. --- 03-editable-esnext/block.json | 4 +- 03-editable-esnext/build/index.asset.php | 2 +- 03-editable-esnext/build/index.css | 16 + 03-editable-esnext/build/index.css.map | 1 + 03-editable-esnext/build/index.js | 536 ++++++++++--------- 03-editable-esnext/build/style-index.css | 16 + 03-editable-esnext/build/style-index.css.map | 1 + 03-editable-esnext/src/index.js | 3 + 8 files changed, 310 insertions(+), 269 deletions(-) create mode 100644 03-editable-esnext/build/index.css create mode 100644 03-editable-esnext/build/index.css.map create mode 100644 03-editable-esnext/build/style-index.css create mode 100644 03-editable-esnext/build/style-index.css.map diff --git a/03-editable-esnext/block.json b/03-editable-esnext/block.json index 95bc528a..97aaa2ff 100644 --- a/03-editable-esnext/block.json +++ b/03-editable-esnext/block.json @@ -17,5 +17,7 @@ "content": "Hello world" } }, - "editorScript": "file:./build/index.js" + "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 27baecc1..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-polyfill'), 'version' => '7ebc596b08537cc8e9452c8b241b00cc'); \ No newline at end of file + 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 e865beb2..a108638d 100644 --- a/03-editable-esnext/build/index.js +++ b/03-editable-esnext/build/index.js @@ -1,231 +1,15 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // 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 }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./block.json": -/*!********************!*\ - !*** ./block.json ***! - \********************/ -/*! exports provided: apiVersion, name, title, textdomain, icon, category, attributes, example, editorScript, default */ -/***/ (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\"}"); - -/***/ }), - -/***/ "./node_modules/@babel/runtime/helpers/defineProperty.js": -/*!***************************************************************!*\ - !*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - -module.exports = _defineProperty; -module.exports["default"] = module.exports, module.exports.__esModule = true; - -/***/ }), - -/***/ "./node_modules/@babel/runtime/helpers/extends.js": -/*!********************************************************!*\ - !*** ./node_modules/@babel/runtime/helpers/extends.js ***! - \********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -function _extends() { - module.exports = _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; - }; - - module.exports["default"] = module.exports, module.exports.__esModule = true; - return _extends.apply(this, arguments); -} - -module.exports = _extends; -module.exports["default"] = module.exports, module.exports.__esModule = true; - -/***/ }), - -/***/ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js": -/*!************************************************************************!*\ - !*** ./node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***! - \************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose.js */ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"); - -function _objectWithoutProperties(source, excluded) { - if (source == null) return {}; - var target = objectWithoutPropertiesLoose(source, excluded); - var key, i; - - if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - - for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; - } - } - - return target; -} - -module.exports = _objectWithoutProperties; -module.exports["default"] = module.exports, module.exports.__esModule = true; - -/***/ }), - -/***/ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js": -/*!*****************************************************************************!*\ - !*** ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***! - \*****************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; - } - - return target; -} - -module.exports = _objectWithoutPropertiesLoose; -module.exports["default"] = module.exports, module.exports.__esModule = true; - -/***/ }), +/******/ (function() { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ /***/ "./src/edit.js": /*!*********************!*\ !*** ./src/edit.js ***! \*********************/ -/*! exports provided: default */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -"use strict"; __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/extends.js"); -/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__); +/* 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"); @@ -241,7 +25,7 @@ __webpack_require__.r(__webpack_exports__); var Edit = function Edit(props) { var content = props.attributes.content, setAttributes = props.setAttributes; - var blockProps = Object(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["useBlockProps"])(); + var blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)(); var onChangeContent = function onChangeContent(newContent) { setAttributes({ @@ -249,7 +33,7 @@ var Edit = function Edit(props) { }); }; - return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["RichText"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, blockProps, { + 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 @@ -264,28 +48,16 @@ var Edit = function Edit(props) { /*!**********************!*\ !*** ./src/index.js ***! \**********************/ -/*! no exports provided */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -"use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"); -/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js"); -/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); -/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../block.json */ "./block.json"); -var _block_json__WEBPACK_IMPORTED_MODULE_3___namespace = /*#__PURE__*/__webpack_require__.t(/*! ../block.json */ "./block.json", 1); -/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); -/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/save.js"); - - - -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - +/* 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 */ @@ -296,19 +68,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va + + // 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 -var name = _block_json__WEBPACK_IMPORTED_MODULE_3__.name, - settings = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_block_json__WEBPACK_IMPORTED_MODULE_3__, ["name"]); // Register the block +const { + name, + ...settings +} = _block_json__WEBPACK_IMPORTED_MODULE_1__; // Register the block - -Object(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__["registerBlockType"])(name, _objectSpread(_objectSpread({}, settings), {}, { - edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"], +(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_5__["default"] // Object shorthand property - same as writing: save: save, + save: _save__WEBPACK_IMPORTED_MODULE_3__["default"] // Object shorthand property - same as writing: save: save, -})); +}); /***/ }), @@ -316,13 +91,10 @@ Object(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__["registerBlockType"])(name /*!*********************!*\ !*** ./src/save.js ***! \*********************/ -/*! exports provided: default */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -"use strict"; __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/extends.js"); -/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__); +/* 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"); @@ -337,8 +109,8 @@ __webpack_require__.r(__webpack_exports__); var Save = function Save(props) { var content = props.attributes.content; - var blockProps = _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["useBlockProps"].save(); - return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__["RichText"].Content, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, blockProps, { + 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 })); @@ -346,16 +118,39 @@ var Save = function Save(props) { /* 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"] ***! \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/***/ (function(module) { -(function() { module.exports = window["wp"]["blockEditor"]; }()); +module.exports = window["wp"]["blockEditor"]; /***/ }), @@ -363,10 +158,9 @@ var Save = function Save(props) { /*!********************************!*\ !*** external ["wp","blocks"] ***! \********************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/***/ (function(module) { -(function() { module.exports = window["wp"]["blocks"]; }()); +module.exports = window["wp"]["blocks"]; /***/ }), @@ -374,12 +168,220 @@ var Save = function Save(props) { /*!*********************************!*\ !*** external ["wp","element"] ***! \*********************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/***/ (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]; + } + } + } -(function() { module.exports = window["wp"]["element"]; }()); + 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/src/index.js b/03-editable-esnext/src/index.js index e3b9885a..edc9a48f 100644 --- a/03-editable-esnext/src/index.js +++ b/03-editable-esnext/src/index.js @@ -10,6 +10,9 @@ 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;