From 28e5fb7c96c7343c48c2e2b0402d0ed33714b6fe Mon Sep 17 00:00:00 2001 From: Tremi Dkhar Date: Mon, 4 Nov 2024 16:08:16 +0530 Subject: [PATCH] Performing Housekeeping (#8) --- block/block.json | 56 +++++----- block/edit.js | 24 ++-- block/editor.scss | 5 - block/index.js | 25 ++--- block/style.scss | 6 - build/block.json | 4 +- build/index-rtl.css | 8 ++ build/index.asset.php | 2 +- build/index.css | 9 ++ build/index.js | 225 +++++++++++++++++++++++++++++++++++++- build/style-index-rtl.css | 9 ++ build/style-index.css | 10 ++ 12 files changed, 309 insertions(+), 74 deletions(-) delete mode 100644 block/editor.scss delete mode 100644 block/style.scss create mode 100644 build/index-rtl.css create mode 100644 build/style-index-rtl.css diff --git a/block/block.json b/block/block.json index d0a67cb..8902a57 100644 --- a/block/block.json +++ b/block/block.json @@ -1,31 +1,29 @@ { - "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 3, - "name": "team51/colophon", - "version": "0.1.0", - "title": "Colophon", - "category": "common", - "icon": "editor-textcolor", - "description": "A block for displaying a colophon.", - "supports": { - "html": false, - "align": true, - "typography": { - "fontSize": true, - "lineHeight": true, - "__experimentalFontFamily": true, - "__experimentalFontStyle": true, - "__experimentalFontWeight": true, - "__experimentalLetterSpacing": true, - "__experimentalTextTransform": true, - "__experimentalDefaultControls": { - "fontSize": true - } - } - }, - "textdomain": "team51-blocks", - "editorScript": "file:./index.js", - "editorStyle": "file:./index.css", - "style": "file:./style-index.css", - "render": "file:./render.php" + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "team51/colophon", + "version": "0.1.0", + "title": "Colophon", + "category": "theme", + "icon": "editor-textcolor", + "description": "A block for displaying a colophon.", + "supports": { + "html": false, + "align": true, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + }, + "textdomain": "team51-blocks", + "editorScript": "file:./index.js", + "render": "file:./render.php" } diff --git a/block/edit.js b/block/edit.js index d102553..e85231f 100644 --- a/block/edit.js +++ b/block/edit.js @@ -1,7 +1,8 @@ /** - * Retrieves the translation of text. + * Import the ServerSideRender component from the @wordpress/server-side-render package. + * This component is used to render the block on the server side. * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/ */ import ServerSideRender from "@wordpress/server-side-render"; @@ -14,12 +15,8 @@ import ServerSideRender from "@wordpress/server-side-render"; import { useBlockProps } from "@wordpress/block-editor"; /** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * Those files can contain any CSS code that gets applied to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + * Import the block.json to get the block meta. */ -import "./editor.scss"; import blockMeta from "./block.json"; /** @@ -31,9 +28,12 @@ import blockMeta from "./block.json"; * @return {WPElement} Element to render. */ export default function Edit(props) { - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/block/editor.scss b/block/editor.scss deleted file mode 100644 index 84a459c..0000000 --- a/block/editor.scss +++ /dev/null @@ -1,5 +0,0 @@ -/** - * The following styles get applied inside the editor only. - * - * Replace them with your own styles or remove the file completely. - */ diff --git a/block/index.js b/block/index.js index e79d457..a362ffe 100644 --- a/block/index.js +++ b/block/index.js @@ -5,15 +5,6 @@ */ import { registerBlockType } from "@wordpress/blocks"; -/** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * All files containing `style` keyword are bundled together. The code used - * gets applied both to the front of your site and to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css - */ -import "./style.scss"; - /** * Internal dependencies */ @@ -26,13 +17,13 @@ import metadata from "./block.json"; * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ */ registerBlockType(metadata.name, { - /** - * @see ./edit.js - */ - edit: Edit, + /** + * @see ./edit.js + */ + edit: Edit, - /** - * @see ./save.js - */ - save: () => null, + /** + * @see ./save.js + */ + save: () => null, }); diff --git a/block/style.scss b/block/style.scss deleted file mode 100644 index 6e4727d..0000000 --- a/block/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -/** - * The following styles get applied both on the front of your site - * and in the editor. - * - * Replace them with your own styles or remove the file completely. - */ diff --git a/build/block.json b/build/block.json index 69890df..7cded20 100644 --- a/build/block.json +++ b/build/block.json @@ -4,7 +4,7 @@ "name": "team51/colophon", "version": "0.1.0", "title": "Colophon", - "category": "common", + "category": "theme", "icon": "editor-textcolor", "description": "A block for displaying a colophon.", "supports": { @@ -25,7 +25,5 @@ }, "textdomain": "team51-blocks", "editorScript": "file:./index.js", - "editorStyle": "file:./index.css", - "style": "file:./style-index.css", "render": "file:./render.php" } \ No newline at end of file diff --git a/build/index-rtl.css b/build/index-rtl.css new file mode 100644 index 0000000..053faf9 --- /dev/null +++ b/build/index-rtl.css @@ -0,0 +1,8 @@ +/*!******************************************************************************************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./block/editor.scss ***! + \******************************************************************************************************************************************************************************************************************************************/ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ diff --git a/build/index.asset.php b/build/index.asset.php index 75324f8..b53bdb7 100644 --- a/build/index.asset.php +++ b/build/index.asset.php @@ -1 +1 @@ - array('react', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '769da1ae48da0e34a83e'); + array('react', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '9e2f6c13ff86f54b1a55'); diff --git a/build/index.css b/build/index.css index 8b13789..2710dae 100644 --- a/build/index.css +++ b/build/index.css @@ -1 +1,10 @@ +/*!******************************************************************************************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./block/editor.scss ***! + \******************************************************************************************************************************************************************************************************************************************/ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ +/*# sourceMappingURL=index.css.map*/ \ No newline at end of file diff --git a/build/index.js b/build/index.js index 35095ab..30d54c4 100644 --- a/build/index.js +++ b/build/index.js @@ -1 +1,224 @@ -(()=>{"use strict";var e,r={365:(e,r,o)=>{const t=window.wp.blocks,n=window.React,a=window.wp.serverSideRender;var i=o.n(a);const l=window.wp.blockEditor,s=JSON.parse('{"UU":"team51/colophon"}');(0,t.registerBlockType)(s.UU,{edit:function(e){return(0,n.createElement)("div",{...(0,l.useBlockProps)()},(0,n.createElement)(i(),{block:s.UU,attributes:e.attributes}))},save:()=>null})}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.m=r,e=[],t.O=(r,o,n,a)=>{if(!o){var i=1/0;for(p=0;p=a)&&Object.keys(t.O).every((e=>t.O[e](o[s])))?o.splice(s--,1):(l=!1,a0&&e[p-1][2]>a;p--)e[p]=e[p-1];e[p]=[o,n,a]},t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={57:0,350:0};t.O.j=r=>0===e[r];var r=(r,o)=>{var n,a,[i,l,s]=o,c=0;if(i.some((r=>0!==e[r]))){for(n in l)t.o(l,n)&&(t.m[n]=l[n]);if(s)var p=s(t)}for(r&&r(o);ct(365)));n=t.O(n)})(); \ No newline at end of file +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ "./block/edit.js": +/*!***********************!*\ + !*** ./block/edit.js ***! + \***********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (/* binding */ Edit) +/* harmony export */ }); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/server-side-render */ "@wordpress/server-side-render"); +/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_server_side_render__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__); +/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./block/block.json"); + +/** + * Import the ServerSideRender component from the @wordpress/server-side-render package. + * This component is used to render the block on the server side. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/ + */ + + +/** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ + + +/** + * Import the block.json to get the block meta. + */ + + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + * @return {WPElement} Element to render. + */ +function Edit(props) { + return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)() + }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)((_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_1___default()), { + block: _block_json__WEBPACK_IMPORTED_MODULE_3__.name, + attributes: props.attributes + })); +} + +/***/ }), + +/***/ "react": +/*!************************!*\ + !*** external "React" ***! + \************************/ +/***/ ((module) => { + +module.exports = window["React"]; + +/***/ }), + +/***/ "@wordpress/block-editor": +/*!*************************************!*\ + !*** external ["wp","blockEditor"] ***! + \*************************************/ +/***/ ((module) => { + +module.exports = window["wp"]["blockEditor"]; + +/***/ }), + +/***/ "@wordpress/blocks": +/*!********************************!*\ + !*** external ["wp","blocks"] ***! + \********************************/ +/***/ ((module) => { + +module.exports = window["wp"]["blocks"]; + +/***/ }), + +/***/ "@wordpress/server-side-render": +/*!******************************************!*\ + !*** external ["wp","serverSideRender"] ***! + \******************************************/ +/***/ ((module) => { + +module.exports = window["wp"]["serverSideRender"]; + +/***/ }), + +/***/ "./block/block.json": +/*!**************************!*\ + !*** ./block/block.json ***! + \**************************/ +/***/ ((module) => { + +module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"team51/colophon","version":"0.1.0","title":"Colophon","category":"theme","icon":"editor-textcolor","description":"A block for displaying a colophon.","supports":{"html":false,"align":true,"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontStyle":true,"__experimentalFontWeight":true,"__experimentalLetterSpacing":true,"__experimentalTextTransform":true,"__experimentalDefaultControls":{"fontSize":true}}},"textdomain":"team51-blocks","editorScript":"file:./index.js","render":"file:./render.php"}'); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // 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; +/******/ } +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/compat get default export */ +/******/ (() => { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = (module) => { +/******/ var getter = module && module.__esModule ? +/******/ () => (module['default']) : +/******/ () => (module); +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/define property getters */ +/******/ (() => { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = (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 */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/******/ /* webpack/runtime/make namespace object */ +/******/ (() => { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = (exports) => { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ })(); +/******/ +/************************************************************************/ +var __webpack_exports__ = {}; +// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk. +(() => { +/*!************************!*\ + !*** ./block/index.js ***! + \************************/ +__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 _edit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./edit */ "./block/edit.js"); +/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./block.json */ "./block/block.json"); +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ + + +/** + * Internal dependencies + */ + + + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_2__.name, { + /** + * @see ./edit.js + */ + edit: _edit__WEBPACK_IMPORTED_MODULE_1__["default"], + /** + * @see ./save.js + */ + save: () => null +}); +})(); + +/******/ })() +; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/build/style-index-rtl.css b/build/style-index-rtl.css new file mode 100644 index 0000000..2263872 --- /dev/null +++ b/build/style-index-rtl.css @@ -0,0 +1,9 @@ +/*!*****************************************************************************************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./block/style.scss ***! + \*****************************************************************************************************************************************************************************************************************************************/ +/** + * The following styles get applied both on the front of your site + * and in the editor. + * + * Replace them with your own styles or remove the file completely. + */ diff --git a/build/style-index.css b/build/style-index.css index 8b13789..8432fdf 100644 --- a/build/style-index.css +++ b/build/style-index.css @@ -1 +1,11 @@ +/*!*****************************************************************************************************************************************************************************************************************************************!*\ + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./block/style.scss ***! + \*****************************************************************************************************************************************************************************************************************************************/ +/** + * The following styles get applied both on the front of your site + * and in the editor. + * + * Replace them with your own styles or remove the file completely. + */ +/*# sourceMappingURL=style-index.css.map*/ \ No newline at end of file