From 4e20e0e1008779fb14cf9bd65161489ee5b62590 Mon Sep 17 00:00:00 2001 From: dustin-jw Date: Wed, 25 Oct 2023 15:08:29 -0600 Subject: [PATCH] feat: add generators for custom blocks - add generator for scaffolding custom block plugins - add generator for individual custom blocks - install js-yaml - update volume mapping for new plugins - remove example-blocks plugin - update clean and copy scripts --- docker-compose.yml | 1 - generators/custom-block.js | 259 ++++++++++++++++++ generators/custom-blocks-plugin.js | 223 +++++++++++++++ package-lock.json | 131 +++------ package.json | 13 +- src/plugins/.gitkeep | 0 src/plugins/example-blocks/example-blocks.php | 56 ---- src/plugins/example-blocks/readme.txt | 27 -- .../example-blocks/src/hello-world/block.json | 18 -- .../example-blocks/src/hello-world/edit.js | 34 --- .../src/hello-world/editor.scss | 9 - .../example-blocks/src/hello-world/index.js | 39 --- .../example-blocks/src/hello-world/save.js | 20 -- .../example-blocks/src/hello-world/style.scss | 12 - .../example-blocks/src/hello-world/view.js | 1 - .../src/reverse-string/block.json | 18 -- .../example-blocks/src/reverse-string/edit.js | 39 --- .../src/reverse-string/editor.scss | 13 - .../src/reverse-string/index.js | 45 --- .../example-blocks/src/reverse-string/save.js | 25 -- .../src/reverse-string/style.scss | 10 - .../example-blocks/src/reverse-string/view.js | 1 - 22 files changed, 526 insertions(+), 468 deletions(-) create mode 100644 generators/custom-block.js create mode 100644 generators/custom-blocks-plugin.js create mode 100644 src/plugins/.gitkeep delete mode 100644 src/plugins/example-blocks/example-blocks.php delete mode 100644 src/plugins/example-blocks/readme.txt delete mode 100644 src/plugins/example-blocks/src/hello-world/block.json delete mode 100644 src/plugins/example-blocks/src/hello-world/edit.js delete mode 100644 src/plugins/example-blocks/src/hello-world/editor.scss delete mode 100644 src/plugins/example-blocks/src/hello-world/index.js delete mode 100644 src/plugins/example-blocks/src/hello-world/save.js delete mode 100644 src/plugins/example-blocks/src/hello-world/style.scss delete mode 100644 src/plugins/example-blocks/src/hello-world/view.js delete mode 100644 src/plugins/example-blocks/src/reverse-string/block.json delete mode 100644 src/plugins/example-blocks/src/reverse-string/edit.js delete mode 100644 src/plugins/example-blocks/src/reverse-string/editor.scss delete mode 100644 src/plugins/example-blocks/src/reverse-string/index.js delete mode 100644 src/plugins/example-blocks/src/reverse-string/save.js delete mode 100644 src/plugins/example-blocks/src/reverse-string/style.scss delete mode 100644 src/plugins/example-blocks/src/reverse-string/view.js diff --git a/docker-compose.yml b/docker-compose.yml index a231ff6c..c48e5d72 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -14,7 +14,6 @@ services: volumes: - ./uploads:/var/www/html/wp-content/uploads - ./theme:/var/www/html/wp-content/themes/sparkpress-theme - - ./src/plugins/example-blocks:/var/www/html/wp-content/plugins/example-blocks - ./wp-configs/wp-config.php:/var/www/html/wp-config.php - ./wp-configs/php.ini:/var/www/html/php.ini - ./.env:/var/www/html/.env diff --git a/generators/custom-block.js b/generators/custom-block.js new file mode 100644 index 00000000..f90d5bea --- /dev/null +++ b/generators/custom-block.js @@ -0,0 +1,259 @@ +const { writeFileSync, mkdirSync, readdirSync } = require('fs'); +const { join } = require('path'); +const prompts = require('prompts'); + +const getBlockJsonTemplate = ({ pluginSlug, slugName, name, description, hasViewScript }) => `{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "${pluginSlug}/${slugName}", + "version": "0.1.0", + "title": "${name}", + "category": "${pluginSlug}", + "icon": "admin-generic", + "description": "${description}", + "supports": { + "html": false + }, + "textdomain": "${pluginSlug}", + "editorScript": "file:index.js", + "editorStyle": "file:index.css", + "style": "file:style-index.css"${ + hasViewScript + ? `, + "viewScript": "file:view.js"` + : '' + } +} +`; + +const getEditJSTemplate = ({ name }) => `/** + * 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 { 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 './editor.scss'; + +/** + * 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. + */ +export default function Edit() { + return

${name}

; +} +`; + +const getEditorSCSSTemplate = ({ pluginSlug, slugName }) => `/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-${pluginSlug}-${slugName} { + /* insert custom styles here */ +} +`; + +const getIndexJSTemplate = () => `/** + * 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/ + */ +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 + */ +import Edit from './edit'; +import save from './save'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +registerBlockType(metadata.name, { + /** + * @see ./edit.js + */ + edit: Edit, + + /** + * @see ./save.js + */ + save, +}); +`; + +const getSaveJSTemplate = ({ name }) => `/** + * 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 { useBlockProps } from '@wordpress/block-editor'; + +/** + * The save function defines the way in which the different attributes should + * be combined into the final markup, which is then serialized by the block + * editor into \`post_content\`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save + * + * @return {WPElement} Element to render. + */ +export default function save() { + return

{'${name}'}

; +} +`; + +const getStyleSCSSTemplate = ({ pluginSlug, slugName }) => `/** + * 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. + */ + +.wp-block-${pluginSlug}-${slugName} { + /* insert custom styles here */ +} +`; + +const getViewJSTemplate = ({ name }) => `/** + * Put any JS here that is needed for your block to function when rendered outside of the editor. + */ +console.log('Hello from the ${name} block!'); +`; + +const getCustomBlockPluginOptions = () => { + const directories = readdirSync(join(__dirname, '../src/plugins')); + return directories + .filter((dir) => dir !== '.gitkeep') + .map((dir) => ({ + title: dir, + value: dir, + })); +}; + +const getDetails = async () => { + const pluginOptions = getCustomBlockPluginOptions(); + if (!pluginOptions.length) { + console.log( + 'There are no existing plugins in `src/plugins` to add custom blocks to. Please run `npm run generate:custom-blocks-plugin` to scaffold a plugin before running `npm run generate:custom-block`' + ); + return; + } + + const questions = [ + { + type: 'select', + name: 'pluginSlug', + message: 'Which custom blocks plugin should this block belong to?', + choices: pluginOptions, + initial: 0, + }, + { + type: 'text', + name: 'name', + message: + 'What should the custom block be called? (This is the name editors will use to search for the block)', + }, + { + type: 'text', + name: 'description', + message: + 'Please describe the custom block. (This description will help editors understand how to use the block)', + }, + { + type: 'select', + name: 'hasViewScript', + message: + 'Will this block require JavaScript to function when rendered on the site? (If yes, a `view.js` file will be created)', + choices: [ + { + title: 'Yes', + value: true, + }, + { + title: 'No', + value: false, + }, + ], + initial: 0, + }, + ]; + + const response = await prompts(questions); + + return response; +}; + +const generateCustomBlocksPlugin = async () => { + const { pluginSlug, name, description, hasViewScript } = await getDetails(); + const slugName = name.toLowerCase().replace(/\W/g, '-'); + const templateParams = { pluginSlug, slugName, name, description, hasViewScript }; + + const blockPath = join(__dirname, '../src/plugins', pluginSlug, 'src', slugName); + mkdirSync(blockPath); + + const blockJsonTemplate = getBlockJsonTemplate(templateParams); + const blockJsonPath = join(blockPath, 'block.json'); + writeFileSync(blockJsonPath, blockJsonTemplate, 'utf-8'); + console.log(`Created ${blockJsonPath}`); + + const editJSTemplate = getEditJSTemplate(templateParams); + const editJSPath = join(blockPath, 'edit.js'); + writeFileSync(editJSPath, editJSTemplate, 'utf-8'); + console.log(`Created ${editJSPath}`); + + const editorSCSSTemplate = getEditorSCSSTemplate(templateParams); + const editorSCSSPath = join(blockPath, 'editor.scss'); + writeFileSync(editorSCSSPath, editorSCSSTemplate, 'utf-8'); + console.log(`Created ${editorSCSSPath}`); + + const indexJSTemplate = getIndexJSTemplate(templateParams); + const indexJSPath = join(blockPath, 'index.js'); + writeFileSync(indexJSPath, indexJSTemplate, 'utf-8'); + console.log(`Created ${indexJSPath}`); + + const saveJSTemplate = getSaveJSTemplate(templateParams); + const saveJSPath = join(blockPath, 'save.js'); + writeFileSync(saveJSPath, saveJSTemplate, 'utf-8'); + console.log(`Created ${saveJSPath}`); + + const styleSCSSTemplate = getStyleSCSSTemplate(templateParams); + const styleSCSSPath = join(blockPath, 'style.scss'); + writeFileSync(styleSCSSPath, styleSCSSTemplate, 'utf-8'); + console.log(`Created ${styleSCSSPath}`); + + if (hasViewScript) { + const viewJSTemplate = getViewJSTemplate(templateParams); + const viewJSPath = join(blockPath, 'view.js'); + writeFileSync(viewJSPath, viewJSTemplate, 'utf-8'); + console.log(`Created ${viewJSPath}`); + } +}; + +generateCustomBlocksPlugin(); diff --git a/generators/custom-blocks-plugin.js b/generators/custom-blocks-plugin.js new file mode 100644 index 00000000..3f59be14 --- /dev/null +++ b/generators/custom-blocks-plugin.js @@ -0,0 +1,223 @@ +const { writeFileSync, readFileSync, mkdirSync } = require('fs'); +const { join } = require('path'); +const prompts = require('prompts'); +const yaml = require('js-yaml'); + +const getFirstGroup = (regexp, str, defaultValue) => + Array.from(str.matchAll(regexp), (match) => match[1])?.[0] ?? defaultValue; + +const getDefaultWordPressVersion = () => { + const dockerfilePath = join(__dirname, '../Dockerfile'); + const dockerfile = readFileSync(dockerfilePath, { encoding: 'utf-8' }); + + const wordPressVersion = getFirstGroup(/WP_VERSION=(.*)/gm, dockerfile, '6.3'); + + return wordPressVersion; +}; + +const getDefaultPHPVersion = () => { + const workflowPath = join(__dirname, '../Dockerfile'); + const workflow = readFileSync(workflowPath, { encoding: 'utf-8' }); + + const phpVersion = getFirstGroup(/php_version:\s'(.*)'/gm, workflow, '8.1'); + + return phpVersion; +}; + +const updatePackageJson = (slugName) => { + const json = require('../package.json'); + + json.scripts[ + `plugins:dev:${slugName}` + ] = `wp-scripts start --webpack-src-dir=src/plugins/${slugName}/src --output-path=src/plugins/${slugName}/build`; + + json.scripts[ + `plugins:build:${slugName}` + ] = `wp-scripts build --webpack-src-dir=src/plugins/${slugName}/src --output-path=src/plugins/${slugName}/build`; + + writeFileSync(join(__dirname, '../package.json'), `${JSON.stringify(json, null, 2)}\n`, 'utf-8'); +}; + +const updateDockerComposeYml = (slugName) => { + try { + const dockerComposePath = join(__dirname, '../docker-compose.yml'); + const config = yaml.load(readFileSync(dockerComposePath, { encoding: 'utf-8' })); + config.services.web.volumes.push( + `./src/plugins/${slugName}:/var/www/html/wp-content/plugins/${slugName}` + ); + + const updatedConfig = yaml.dump(config, { lineWidth: -1 }); + writeFileSync(dockerComposePath, updatedConfig, 'utf-8'); + } catch (error) { + console.error(error); + console.log( + 'Unable to automatically updated docker-compose.yml. You will need to update the volume mapping manually:' + ); + console.log(`- ./src/plugins/${slugName}:/var/www/html/wp-content/plugins/${slugName}`); + } +}; + +const getScriptTemplate = ({ + name, + description, + wordPressVersion, + phpVersion, + author, + slugName, + functionName, +}) => ` '${slugName}', + 'title' => '${name}', + ) + ); + + return $categories; +} +add_filter( 'block_categories_all', 'create_category_${functionName}', 10, 2 ); +`; + +const getReadmeTemplate = ({ name, description, wordPressVersion, author }) => `=== ${name} === +Contributors: ${author} +Tags: block +Tested up to: ${wordPressVersion} +Stable tag: 0.1.0 +License: GPL-2.0-or-later +License URI: https://www.gnu.org/licenses/gpl-2.0.html + +${description} + +== Description == + + + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Run \`npm run plugins:dev\` (or \`npm start\`) to build the blocks in "watch" mode so that changes are applied immediately while developing +1. Run \`npm run plugins:build\` (or \`npm run build:prod\`) to build the blocks for production +1. Activate the plugin through the 'Plugins' screen in WordPress + +== Changelog == + += 0.1.0 = +* Initial Release and Scaffolding +`; + +const getDetails = async () => { + const questions = [ + { + type: 'text', + name: 'name', + message: + 'What should the custom blocks plugin be called? (This name will show up in the WordPress admin plugins list)', + }, + { + type: 'text', + name: 'description', + message: + 'Please describe the purpose of the custom blocks plugin. (This description will be shown next to the plugin name to provide more context to admins)', + }, + { + type: 'text', + name: 'wordPressVersion', + message: 'What is the latest version of WordPress that this plugin is compatible with?', + initial: getDefaultWordPressVersion(), + }, + { + type: 'text', + name: 'phpVersion', + message: 'What is the latest version of PHP that this plugin is compatible with?', + initial: getDefaultPHPVersion(), + }, + { + type: 'text', + name: 'author', + message: + "What person or organization should be credited creating this custom block? (This will be shown as the plugin's author)", + }, + ]; + + const response = await prompts(questions); + + return response; +}; + +const generateCustomBlocksPlugin = async () => { + const { name, description, wordPressVersion, phpVersion, author } = await getDetails(); + const slugName = name.toLowerCase().replace(/\W/g, '-'); + const functionName = slugName.replace('-', '_'); + const templateParams = { name, description, wordPressVersion, phpVersion, author, slugName, functionName }; + + const pluginPath = join(__dirname, '../src/plugins', slugName); + mkdirSync(pluginPath); + + const srcPath = join(pluginPath, 'src'); + mkdirSync(srcPath); + writeFileSync(join(srcPath, '.gitkeep'), '', 'utf-8'); + + updatePackageJson(slugName); + updateDockerComposeYml(slugName); + + const scriptTemplate = getScriptTemplate(templateParams); + const scriptPath = join(pluginPath, `${slugName}.php`); + writeFileSync(scriptPath, scriptTemplate, 'utf-8'); + console.log(`Created ${scriptPath}`); + + const readmeTemplate = getReadmeTemplate(templateParams); + const readmePath = join(pluginPath, 'readme.txt'); + writeFileSync(readmePath, readmeTemplate, 'utf-8'); + console.log(`Created ${readmePath}`); +}; + +generateCustomBlocksPlugin(); diff --git a/package-lock.json b/package-lock.json index 4bb7c203..f1fd57dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", + "js-yaml": "^4.1.0", "jsdom": "^22.1.0", "npm-run-all": "^4.1.5", "postcss-cli": "^10.1.0", @@ -2590,12 +2591,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/@eslint/eslintrc/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, "node_modules/@eslint/eslintrc/node_modules/globals": { "version": "13.23.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", @@ -2611,18 +2606,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@eslint/eslintrc/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/@eslint/eslintrc/node_modules/type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -2708,6 +2691,15 @@ "node": ">=8" } }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -2730,6 +2722,19 @@ "node": ">=8" } }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -2769,6 +2774,12 @@ "node": ">=8" } }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "dev": true + }, "node_modules/@istanbuljs/schema": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", @@ -6046,18 +6057,9 @@ } }, "node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, - "dependencies": { - "sprintf-js": "~1.0.2" - } - }, - "node_modules/argparse/node_modules/sprintf-js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, "node_modules/aria-query": { @@ -7756,24 +7758,6 @@ } } }, - "node_modules/cosmiconfig/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, - "node_modules/cosmiconfig/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -9772,12 +9756,6 @@ "node": ">=10" } }, - "node_modules/eslint/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, "node_modules/eslint/node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -9847,18 +9825,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/eslint/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/eslint/node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -13491,13 +13457,12 @@ "dev": true }, "node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, "dependencies": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" + "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" @@ -14371,12 +14336,6 @@ "markdown-it": "bin/markdown-it.js" } }, - "node_modules/markdown-it/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, "node_modules/markdown-it/node_modules/entities": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", @@ -14422,12 +14381,6 @@ "node": ">=12" } }, - "node_modules/markdownlint-cli/node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, "node_modules/markdownlint-cli/node_modules/commander": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/commander/-/commander-9.0.0.tgz", @@ -14437,18 +14390,6 @@ "node": "^12.20.0 || >=14" } }, - "node_modules/markdownlint-cli/node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/markdownlint-cli/node_modules/minimatch": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", diff --git a/package.json b/package.json index 6cf09839..85fd5506 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,10 @@ "scripts": { "prestart": "run-p clean node-version", "start": "run-p build:dev serve:dev", - "clean": "rm -rf theme/ plugins/example-blocks/", + "clean": "rm -rf theme/ plugins/", "copy": "run-p copy:*", "copy:php": "mkdir -p ./theme && cp -r ./src/php/* ./theme", - "copy:plugins": "mkdir -p ./plugins && cp -r ./src/plugins/* ./plugins", + "copy:plugins": "mkdir -p ./plugins && cp -r ./src/plugins/ ./plugins", "prebuild:dev": "npm run clean", "prebuild:prod": "npm run clean", "build:dev": "run-p plugins:dev copy:php sass watch js:watch", @@ -19,8 +19,6 @@ "postsass": "postcss theme/css/base.css --use autoprefixer -r", "js:watch": "NODE_ENV=development node esbuild.mjs", "js:prod": "node esbuild.mjs", - "plugins:dev": "wp-scripts start --webpack-src-dir=src/plugins/example-blocks/src --output-path=src/plugins/example-blocks/build", - "plugins:build": "wp-scripts build --webpack-src-dir=src/plugins/example-blocks/src --output-path=src/plugins/example-blocks/build", "watch": "run-p watch:*", "watch:php": "chokidar \"src/php/**/*\" -c \"npm run copy:php\"", "watch:scss": "chokidar \"src/scss/**/*\" -c \"npm run sass\"", @@ -37,12 +35,16 @@ "backup-db": "BACKUP=true ./scripts/export-db.sh", "import-db": "./scripts/import-db.sh", "preimport-db": "npm run backup-db", + "generate:custom-block": "node ./generators/custom-block.js", + "generate:custom-blocks-plugin": "node ./generators/custom-blocks-plugin.js", "generate:page-template": "node ./generators/page-template.js", "generate:pattern": "node ./generators/pattern.js", "generate:post-type": "node ./generators/post-type.js", "generate:shortcode": "node ./generators/shortcode.js", "generate:taxonomy": "node ./generators/taxonomy.js", - "node-version": "check-node-version --package" + "node-version": "check-node-version --package", + "plugins:dev": "run-p plugins:dev:* || echo \"Unable to build plugins\"", + "plugins:build": "run-s plugins:build:* || echo \"Unable to build plugins\"" }, "engines": { "node": ">=18", @@ -64,6 +66,7 @@ "eslint-config-prettier": "^9.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", + "js-yaml": "^4.1.0", "jsdom": "^22.1.0", "npm-run-all": "^4.1.5", "postcss-cli": "^10.1.0", diff --git a/src/plugins/.gitkeep b/src/plugins/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/plugins/example-blocks/example-blocks.php b/src/plugins/example-blocks/example-blocks.php deleted file mode 100644 index df0924eb..00000000 --- a/src/plugins/example-blocks/example-blocks.php +++ /dev/null @@ -1,56 +0,0 @@ - 'example-custom-blocks', - 'title' => 'Example Custom Blocks' - ) ); - - return $categories; -} -add_filter( 'block_categories_all', 'create_category_example_custom_blocks', 10, 2); diff --git a/src/plugins/example-blocks/readme.txt b/src/plugins/example-blocks/readme.txt deleted file mode 100644 index d4442aae..00000000 --- a/src/plugins/example-blocks/readme.txt +++ /dev/null @@ -1,27 +0,0 @@ -=== Example Blocks === -Contributors: Sparkbox -Tags: block -Tested up to: 6.3 -Stable tag: 0.1.0 -License: GPL-2.0-or-later -License URI: https://www.gnu.org/licenses/gpl-2.0.html - -Collection of example blocks to demonstrate how custom blocks can be used and added. - -== Description == - -This plugin is an example of how custom blocks can be added in this project. Custom blocks can make content entry and maintenance easier for users, and allow more flexibility in where to put content and how to use it. - -== Installation == - -This section describes how to install the plugin and get it working. - -e.g. - -1. The normal build and development processes will build the plugin and make it available for installation through WordPress (e.g. `npm run build:prod` and `npm start` will both work) -1. Activate the plugin through the 'Plugins' screen in WordPress - -== Changelog == - -= 0.1.0 = -* Initial Release and Scaffolding diff --git a/src/plugins/example-blocks/src/hello-world/block.json b/src/plugins/example-blocks/src/hello-world/block.json deleted file mode 100644 index 359530c6..00000000 --- a/src/plugins/example-blocks/src/hello-world/block.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 3, - "name": "example-blocks/hello-world", - "version": "0.1.0", - "title": "Hello World", - "category": "example-custom-blocks", - "icon": "nametag", - "description": "Prints Hello World!", - "supports": { - "html": false - }, - "textdomain": "example-blocks", - "editorScript": "file:index.js", - "editorStyle": "file:index.css", - "style": "file:style-index.css", - "viewScript": "file:view.js" -} diff --git a/src/plugins/example-blocks/src/hello-world/edit.js b/src/plugins/example-blocks/src/hello-world/edit.js deleted file mode 100644 index da9bf702..00000000 --- a/src/plugins/example-blocks/src/hello-world/edit.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Retrieves the translation of text. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ - */ -import { __ } from '@wordpress/i18n'; - -/** - * 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 { 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 './editor.scss'; - -/** - * 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. - */ -export default function Edit() { - return

{__('Hello World!', 'example-blocks')}

; -} diff --git a/src/plugins/example-blocks/src/hello-world/editor.scss b/src/plugins/example-blocks/src/hello-world/editor.scss deleted file mode 100644 index 6085289e..00000000 --- a/src/plugins/example-blocks/src/hello-world/editor.scss +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The following styles get applied inside the editor only. - * - * Replace them with your own styles or remove the file completely. - */ - -.wp-block-example-blocks-hello-world { - /* insert custom styles here */ -} diff --git a/src/plugins/example-blocks/src/hello-world/index.js b/src/plugins/example-blocks/src/hello-world/index.js deleted file mode 100644 index a72f3fb2..00000000 --- a/src/plugins/example-blocks/src/hello-world/index.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * 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/ - */ -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 - */ -import Edit from './edit'; -import save from './save'; -import metadata from './block.json'; - -/** - * Every block starts by registering a new block type definition. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ - */ -registerBlockType(metadata.name, { - /** - * @see ./edit.js - */ - edit: Edit, - - /** - * @see ./save.js - */ - save, -}); diff --git a/src/plugins/example-blocks/src/hello-world/save.js b/src/plugins/example-blocks/src/hello-world/save.js deleted file mode 100644 index 1fbca4df..00000000 --- a/src/plugins/example-blocks/src/hello-world/save.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 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 { useBlockProps } from '@wordpress/block-editor'; - -/** - * The save function defines the way in which the different attributes should - * be combined into the final markup, which is then serialized by the block - * editor into `post_content`. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save - * - * @return {WPElement} Element to render. - */ -export default function save() { - return

{'Hello World!'}

; -} diff --git a/src/plugins/example-blocks/src/hello-world/style.scss b/src/plugins/example-blocks/src/hello-world/style.scss deleted file mode 100644 index 169af992..00000000 --- a/src/plugins/example-blocks/src/hello-world/style.scss +++ /dev/null @@ -1,12 +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. - */ - -.wp-block-example-blocks-hello-world { - background-color: #21759b; - color: #fff; - padding: 2px; -} diff --git a/src/plugins/example-blocks/src/hello-world/view.js b/src/plugins/example-blocks/src/hello-world/view.js deleted file mode 100644 index e550afff..00000000 --- a/src/plugins/example-blocks/src/hello-world/view.js +++ /dev/null @@ -1 +0,0 @@ -console.log('Hello from the Hello World block!'); diff --git a/src/plugins/example-blocks/src/reverse-string/block.json b/src/plugins/example-blocks/src/reverse-string/block.json deleted file mode 100644 index 808a1ef8..00000000 --- a/src/plugins/example-blocks/src/reverse-string/block.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 3, - "name": "example-blocks/reverse-string", - "version": "0.1.0", - "title": "Reverse String", - "category": "example-custom-blocks", - "icon": "smiley", - "description": "Prints a user-entered string in reverse order.", - "supports": { - "html": false - }, - "textdomain": "example-blocks", - "editorScript": "file:index.js", - "editorStyle": "file:index.css", - "style": "file:style-index.css", - "viewScript": "file:view.js" -} diff --git a/src/plugins/example-blocks/src/reverse-string/edit.js b/src/plugins/example-blocks/src/reverse-string/edit.js deleted file mode 100644 index 6d317017..00000000 --- a/src/plugins/example-blocks/src/reverse-string/edit.js +++ /dev/null @@ -1,39 +0,0 @@ -import { TextControl } from '@wordpress/components'; - -/** - * 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 { 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 './editor.scss'; - -/** - * 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. - * - * @param {Object} props - * @param {Object} props.attributes - * @param {Function} props.setAttributes - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit - * - * @return {WPElement} Element to render. - */ -export default function Edit({ attributes, setAttributes }) { - const { textToReverse } = attributes; - const updateTextToReverse = (newText) => setAttributes({ textToReverse: newText }); - - return ( -
- -
- ); -} diff --git a/src/plugins/example-blocks/src/reverse-string/editor.scss b/src/plugins/example-blocks/src/reverse-string/editor.scss deleted file mode 100644 index be0b291a..00000000 --- a/src/plugins/example-blocks/src/reverse-string/editor.scss +++ /dev/null @@ -1,13 +0,0 @@ -/** - * The following styles get applied inside the editor only. - * - * Replace them with your own styles or remove the file completely. - */ - -.wp-block-example-blocks-reverse-string { - padding: 1em; - box-sizing: border-box; - border: none; - border-radius: 2px; - box-shadow: inset 0 0 0 1px #1e1e1e; -} diff --git a/src/plugins/example-blocks/src/reverse-string/index.js b/src/plugins/example-blocks/src/reverse-string/index.js deleted file mode 100644 index 8471ef84..00000000 --- a/src/plugins/example-blocks/src/reverse-string/index.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * 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/ - */ -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 - */ -import Edit from './edit'; -import save from './save'; -import metadata from './block.json'; - -/** - * Every block starts by registering a new block type definition. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ - */ -registerBlockType(metadata.name, { - attributes: { - textToReverse: { - type: 'string', - default: '', - }, - }, - /** - * @see ./edit.js - */ - edit: Edit, - - /** - * @see ./save.js - */ - save, -}); diff --git a/src/plugins/example-blocks/src/reverse-string/save.js b/src/plugins/example-blocks/src/reverse-string/save.js deleted file mode 100644 index 042cac04..00000000 --- a/src/plugins/example-blocks/src/reverse-string/save.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * 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 { useBlockProps } from '@wordpress/block-editor'; - -/** - * The save function defines the way in which the different attributes should - * be combined into the final markup, which is then serialized by the block - * editor into `post_content`. - * - * @param {Object} props - * @param {Object} props.attributes - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save - * - * @return {WPElement} Element to render. - */ -export default function save({ attributes }) { - const { textToReverse } = attributes; - const reversedText = textToReverse.split('').reverse().join(''); - - return

{reversedText}

; -} diff --git a/src/plugins/example-blocks/src/reverse-string/style.scss b/src/plugins/example-blocks/src/reverse-string/style.scss deleted file mode 100644 index 77d17e01..00000000 --- a/src/plugins/example-blocks/src/reverse-string/style.scss +++ /dev/null @@ -1,10 +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. - */ - -.wp-block-example-blocks-reverse-string { - /* insert custom styles here */ -} diff --git a/src/plugins/example-blocks/src/reverse-string/view.js b/src/plugins/example-blocks/src/reverse-string/view.js deleted file mode 100644 index 39d09196..00000000 --- a/src/plugins/example-blocks/src/reverse-string/view.js +++ /dev/null @@ -1 +0,0 @@ -console.log('Hello from the Reverse String block!');