From b5f8dad11a17666a3b22e07f27afd74483fc76a1 Mon Sep 17 00:00:00 2001 From: David Paul Ellenwood Date: Fri, 15 Mar 2024 11:06:02 -0500 Subject: [PATCH 1/6] [MOOSE-77]: Try: Add block template package. --- dev/templates/block/edit.js.mustache | 38 +++++++++++++++++++++ dev/templates/block/editor.pcss.mustache | 9 +++++ dev/templates/block/index.js.mustache | 43 ++++++++++++++++++++++++ dev/templates/block/render.php.mustache | 10 ++++++ dev/templates/block/save.js.mustache | 26 ++++++++++++++ dev/templates/block/style.pcss.mustache | 12 +++++++ dev/templates/block/view.js.mustache | 25 ++++++++++++++ dev/templates/index.js | 3 ++ dev/templates/package.json | 11 ++++++ 9 files changed, 177 insertions(+) create mode 100644 dev/templates/block/edit.js.mustache create mode 100644 dev/templates/block/editor.pcss.mustache create mode 100644 dev/templates/block/index.js.mustache create mode 100644 dev/templates/block/render.php.mustache create mode 100644 dev/templates/block/save.js.mustache create mode 100644 dev/templates/block/style.pcss.mustache create mode 100644 dev/templates/block/view.js.mustache create mode 100644 dev/templates/index.js create mode 100644 dev/templates/package.json diff --git a/dev/templates/block/edit.js.mustache b/dev/templates/block/edit.js.mustache new file mode 100644 index 00000000..1824892f --- /dev/null +++ b/dev/templates/block/edit.js.mustache @@ -0,0 +1,38 @@ +/** + * 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 {Element} Element to render. + */ +export default function Edit() { + return ( +

+ { __( '{{title}} – hello from the editor!', '{{textdomain}}' ) } +

+ ); +} diff --git a/dev/templates/block/editor.pcss.mustache b/dev/templates/block/editor.pcss.mustache new file mode 100644 index 00000000..fc68223e --- /dev/null +++ b/dev/templates/block/editor.pcss.mustache @@ -0,0 +1,9 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-{{namespace}}-{{slug}} { + border: 1px dotted #f00; +} diff --git a/dev/templates/block/index.js.mustache b/dev/templates/block/index.js.mustache new file mode 100644 index 00000000..cbf5f7f7 --- /dev/null +++ b/dev/templates/block/index.js.mustache @@ -0,0 +1,43 @@ +/** + * 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'; +{{#isStaticVariant}} +import save from './save'; +{{/isStaticVariant}} +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, + {{#isStaticVariant}} + + /** + * @see ./save.js + */ + save, + {{/isStaticVariant}} +} ); diff --git a/dev/templates/block/render.php.mustache b/dev/templates/block/render.php.mustache new file mode 100644 index 00000000..43ba65e0 --- /dev/null +++ b/dev/templates/block/render.php.mustache @@ -0,0 +1,10 @@ +{{#isDynamicVariant}} + +

> + +

+{{/isDynamicVariant}} diff --git a/dev/templates/block/save.js.mustache b/dev/templates/block/save.js.mustache new file mode 100644 index 00000000..285931be --- /dev/null +++ b/dev/templates/block/save.js.mustache @@ -0,0 +1,26 @@ +{{#isStaticVariant}} +/** + * 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 {Element} Element to render. + */ +export default function save() { + return ( +

+ { '{{title}} – hello from the saved content!' } +

+ ); +} +{{/isStaticVariant}} diff --git a/dev/templates/block/style.pcss.mustache b/dev/templates/block/style.pcss.mustache new file mode 100644 index 00000000..5c169d3e --- /dev/null +++ b/dev/templates/block/style.pcss.mustache @@ -0,0 +1,12 @@ +/** + * 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-{{namespace}}-{{slug}} { + background-color: #21759b; + color: #fff; + padding: 2px; +} diff --git a/dev/templates/block/view.js.mustache b/dev/templates/block/view.js.mustache new file mode 100644 index 00000000..c9eff09f --- /dev/null +++ b/dev/templates/block/view.js.mustache @@ -0,0 +1,25 @@ +/** + * Use this file for JavaScript code that you want to run in the front-end + * on posts/pages that contain this block. + * + * When this file is defined as the value of the `viewScript` property + * in `block.json` it will be enqueued on the front end of the site. + * + * Example: + * + * ```js + * { + * "viewScript": "file:./view.js" + * } + * ``` + * + * If you're not making any changes to this file because your project doesn't need any + * JavaScript running in the front-end, then you should delete this file and remove + * the `viewScript` property from `block.json`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script + */ + +/* eslint-disable no-console */ +console.log("Hello World! (from {{namespace}}-{{slug}} block)"); +/* eslint-enable no-console */ diff --git a/dev/templates/index.js b/dev/templates/index.js new file mode 100644 index 00000000..caaebe7e --- /dev/null +++ b/dev/templates/index.js @@ -0,0 +1,3 @@ +module.exports = { + blockTemplatesPath: __dirname, +}; diff --git a/dev/templates/package.json b/dev/templates/package.json new file mode 100644 index 00000000..6ad57462 --- /dev/null +++ b/dev/templates/package.json @@ -0,0 +1,11 @@ +{ + "name": "tribe-block-template", + "version": "1.0.0", + "description": "Custom Block Template for the wp create block script.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Modern Tribe ", + "license": "GPL-2.0-or-later" +} From 53097df911ce0e1a459a6bb8326c8546a4f58d63 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Fri, 15 Mar 2024 16:30:42 -0400 Subject: [PATCH 2/6] [MOOSE-77]: allow variants; add default values; main call --- dev/templates/block/view.js.mustache | 2 +- dev/templates/index.js | 22 +++++++++++++++++++++- package.json | 2 +- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/dev/templates/block/view.js.mustache b/dev/templates/block/view.js.mustache index c9eff09f..b14affa9 100644 --- a/dev/templates/block/view.js.mustache +++ b/dev/templates/block/view.js.mustache @@ -21,5 +21,5 @@ */ /* eslint-disable no-console */ -console.log("Hello World! (from {{namespace}}-{{slug}} block)"); +console.log( 'Hello World! (from {{namespace}}-{{slug}} block)' ); /* eslint-enable no-console */ diff --git a/dev/templates/index.js b/dev/templates/index.js index caaebe7e..9f835f14 100644 --- a/dev/templates/index.js +++ b/dev/templates/index.js @@ -1,3 +1,23 @@ +const { join } = require( 'path' ); + module.exports = { - blockTemplatesPath: __dirname, + blockTemplatesPath: join( __dirname, 'block' ), + defaultValues: { + dashicon: 'block-default', + supports: { + html: false, + align: [ 'wide', 'grid', 'full' ], + spacing: { + margin: true, + padding: true, + }, + }, + viewScript: 'file:./view.js', + }, + variants: { + static: {}, + dynamic: { + render: 'file:./render.php', + }, + }, }; diff --git a/package.json b/package.json index 150c4fdd..8089277a 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "lint:configs": "wp-scripts lint-js \"./*.js\"", "lint:configs:fix": "wp-scripts lint-js \"./*.js\" --fix", "lint:pkg-json": "wp-scripts lint-pkg-json", - "create-block": "cd \"$npm_package_config_coreThemeBlocksDir/tribe\" && npx @wordpress/create-block --no-plugin --namespace tribe", + "create-block": "cd \"$npm_package_config_coreThemeBlocksDir/tribe\" && npx @wordpress/create-block --no-plugin --namespace tribe --template ../../../../../dev/templates/", "packages-update": "wp-scripts packages-update", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", From f8d276d95ffa9428cfe016edc82e15c7d27ccfb1 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Fri, 15 Mar 2024 16:33:44 -0400 Subject: [PATCH 3/6] [MOOSE-77]: fix package.json lint --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8089277a..69378dd9 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "lint:js:fix": "wp-scripts lint-js \"$npm_package_config_coreThemeDir/**/*.js\" --fix", "lint:configs": "wp-scripts lint-js \"./*.js\"", "lint:configs:fix": "wp-scripts lint-js \"./*.js\" --fix", - "lint:pkg-json": "wp-scripts lint-pkg-json", + "lint:pkg-json": "wp-scripts lint-pkg-json \"./package.json\"", "create-block": "cd \"$npm_package_config_coreThemeBlocksDir/tribe\" && npx @wordpress/create-block --no-plugin --namespace tribe --template ../../../../../dev/templates/", "packages-update": "wp-scripts packages-update", "check-engines": "wp-scripts check-engines", From 20f84bc0e509b9a3fb622aeb342d8235195ae6bf Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Tue, 19 Mar 2024 15:49:40 -0400 Subject: [PATCH 4/6] [MOOSE-77]: create-block script updates --- dev/templates/block/edit.js.mustache | 71 +++++++++++++----------- dev/templates/block/editor.pcss.mustache | 10 ++-- dev/templates/block/index.js.mustache | 22 +------- dev/templates/block/render.php.mustache | 16 +++--- dev/templates/block/save.js.mustache | 28 +++------- dev/templates/block/style.pcss.mustache | 9 ++- dev/templates/block/view.js.mustache | 2 +- dev/templates/index.js | 6 ++ dev/templates/package.json | 18 ++++-- package.json | 7 ++- 10 files changed, 91 insertions(+), 98 deletions(-) diff --git a/dev/templates/block/edit.js.mustache b/dev/templates/block/edit.js.mustache index 1824892f..215316c3 100644 --- a/dev/templates/block/edit.js.mustache +++ b/dev/templates/block/edit.js.mustache @@ -1,38 +1,47 @@ -/** - * Retrieves the translation of text. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/ - */ import { __ } from '@wordpress/i18n'; +import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import { PanelBody, TextControl } from '@wordpress/components'; +{{#isDynamicVariant}} +import ServerSideRender from '@wordpress/server-side-render'; +{{/isDynamicVariant}} -/** - * 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'; +import './editor.pcss'; -/** - * 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'; +export default function Edit( { attributes, setAttributes, isSelected } ) { + const blockProps = useBlockProps(); + + const { exampleTextControl } = attributes; -/** - * 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 {Element} Element to render. - */ -export default function Edit() { return ( -

- { __( '{{title}} – hello from the editor!', '{{textdomain}}' ) } -

+
+ {{#isDynamicVariant}} + + {{/isDynamicVariant}} + {{#isStaticVariant}} +

{ __( '{{title}} – hello from the editor!', '{{namespace}}' ) }

+ { exampleTextControl ?

{ exampleTextControl }

: '' } + {{/isStaticVariant}} + { isSelected && ( + + + + setAttributes( { exampleTextControl: value } ) + } + /> + + + ) } +
); } diff --git a/dev/templates/block/editor.pcss.mustache b/dev/templates/block/editor.pcss.mustache index fc68223e..f99842a2 100644 --- a/dev/templates/block/editor.pcss.mustache +++ b/dev/templates/block/editor.pcss.mustache @@ -1,9 +1,9 @@ -/** - * The following styles get applied inside the editor only. +/* ------------------------------------------------------------------------- * - * Replace them with your own styles or remove the file completely. - */ + * Block - {{title}} - Styles - Editor Only + * + * ------------------------------------------------------------------------- */ -.wp-block-{{namespace}}-{{slug}} { +{{#isDynamicVariant}}section{{/isDynamicVariant}}.wp-block-{{namespace}}-{{slug}} { border: 1px dotted #f00; } diff --git a/dev/templates/block/index.js.mustache b/dev/templates/block/index.js.mustache index cbf5f7f7..510d5051 100644 --- a/dev/templates/block/index.js.mustache +++ b/dev/templates/block/index.js.mustache @@ -1,33 +1,13 @@ -/** - * 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'; +import './style.pcss'; -/** - * Internal dependencies - */ import Edit from './edit'; {{#isStaticVariant}} import save from './save'; {{/isStaticVariant}} 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 diff --git a/dev/templates/block/render.php.mustache b/dev/templates/block/render.php.mustache index 43ba65e0..096255e5 100644 --- a/dev/templates/block/render.php.mustache +++ b/dev/templates/block/render.php.mustache @@ -1,10 +1,12 @@ {{#isDynamicVariant}} - -

> - -

+
> +

+ +

+ +
{{/isDynamicVariant}} diff --git a/dev/templates/block/save.js.mustache b/dev/templates/block/save.js.mustache index 285931be..987fbfcf 100644 --- a/dev/templates/block/save.js.mustache +++ b/dev/templates/block/save.js.mustache @@ -1,26 +1,16 @@ {{#isStaticVariant}} -/** - * 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 {Element} Element to render. - */ -export default function save() { +export default function save( { attributes } ) { + const blockProps = useBlockProps.save(); + + const { exampleTextControl } = attributes; + return ( -

- { '{{title}} – hello from the saved content!' } -

+
+

{ '{{title}} – hello from the saved content!' }

+ { exampleTextControl ?

{ exampleTextControl }

: '' } +
); } {{/isStaticVariant}} diff --git a/dev/templates/block/style.pcss.mustache b/dev/templates/block/style.pcss.mustache index 5c169d3e..cf124647 100644 --- a/dev/templates/block/style.pcss.mustache +++ b/dev/templates/block/style.pcss.mustache @@ -1,9 +1,8 @@ -/** - * 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. - */ + * Block - {{title}} - Styles - FE / Editor + * + * ------------------------------------------------------------------------- */ .wp-block-{{namespace}}-{{slug}} { background-color: #21759b; diff --git a/dev/templates/block/view.js.mustache b/dev/templates/block/view.js.mustache index b14affa9..b9fc4922 100644 --- a/dev/templates/block/view.js.mustache +++ b/dev/templates/block/view.js.mustache @@ -13,7 +13,7 @@ * } * ``` * - * If you're not making any changes to this file because your project doesn't need any + * If you're not making any changes to this file because your block doesn't need any * JavaScript running in the front-end, then you should delete this file and remove * the `viewScript` property from `block.json`. * diff --git a/dev/templates/index.js b/dev/templates/index.js index 9f835f14..e8067cfe 100644 --- a/dev/templates/index.js +++ b/dev/templates/index.js @@ -3,6 +3,12 @@ const { join } = require( 'path' ); module.exports = { blockTemplatesPath: join( __dirname, 'block' ), defaultValues: { + attributes: { + exampleTextControl: { + type: 'string', + default: '', + }, + }, dashicon: 'block-default', supports: { html: false, diff --git a/dev/templates/package.json b/dev/templates/package.json index 6ad57462..1c7422ed 100644 --- a/dev/templates/package.json +++ b/dev/templates/package.json @@ -1,11 +1,17 @@ { - "name": "tribe-block-template", + "name": "tribe-block-templates", "version": "1.0.0", - "description": "Custom Block Template for the wp create block script.", - "main": "index.js", + "description": "Custom block templates for the WP create-block script to use", + "author": "Modern Tribe ", + "license": "GPL-2.0-or-later", + "keywords": [], + "homepage": "https://github.com/moderntribe/moose#readme", + "repository": "https://github.com/moderntribe/moose", + "bugs": { + "email": "admin@tri.be" + }, + "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "Modern Tribe ", - "license": "GPL-2.0-or-later" + } } diff --git a/package.json b/package.json index 69378dd9..8622160e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "config": { "coreThemeDir": "./wp-content/themes/core", "corePluginDir": "./wp-content/plugins/core", - "coreThemeBlocksDir": "./wp-content/themes/core/blocks" + "coreThemeBlocksDir": "./wp-content/themes/core/blocks", + "coreBlockTemplatesDir": "../../../../../dev/templates" }, "devDependencies": { "@csstools/postcss-global-data": "^2.1.0", @@ -54,8 +55,8 @@ "lint:js:fix": "wp-scripts lint-js \"$npm_package_config_coreThemeDir/**/*.js\" --fix", "lint:configs": "wp-scripts lint-js \"./*.js\"", "lint:configs:fix": "wp-scripts lint-js \"./*.js\" --fix", - "lint:pkg-json": "wp-scripts lint-pkg-json \"./package.json\"", - "create-block": "cd \"$npm_package_config_coreThemeBlocksDir/tribe\" && npx @wordpress/create-block --no-plugin --namespace tribe --template ../../../../../dev/templates/", + "lint:pkg-json": "wp-scripts lint-pkg-json", + "create-block": "cd \"$npm_package_config_coreThemeBlocksDir/tribe\" && npx @wordpress/create-block --no-plugin --namespace tribe --template $npm_package_config_coreBlockTemplatesDir", "packages-update": "wp-scripts packages-update", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", From 4fc34603db4d85ceaf99cc98b953011bfc2f3f45 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Tue, 23 Apr 2024 16:30:12 -0400 Subject: [PATCH 5/6] [MOOSE-77]: remove example block; add block template docs; update readme --- CHANGELOG.md | 4 ++ dev/templates/index.js | 1 + docs/block-templates.md | 23 +++++++++++ .../core/blocks/tribe/example/block.json | 17 -------- .../themes/core/blocks/tribe/example/edit.js | 38 ------------------ .../core/blocks/tribe/example/editor.pcss | 9 ----- .../themes/core/blocks/tribe/example/index.js | 39 ------------------- .../themes/core/blocks/tribe/example/save.js | 24 ------------ .../core/blocks/tribe/example/style.pcss | 12 ------ 9 files changed, 28 insertions(+), 139 deletions(-) create mode 100644 docs/block-templates.md delete mode 100644 wp-content/themes/core/blocks/tribe/example/block.json delete mode 100644 wp-content/themes/core/blocks/tribe/example/edit.js delete mode 100644 wp-content/themes/core/blocks/tribe/example/editor.pcss delete mode 100644 wp-content/themes/core/blocks/tribe/example/index.js delete mode 100644 wp-content/themes/core/blocks/tribe/example/save.js delete mode 100644 wp-content/themes/core/blocks/tribe/example/style.pcss diff --git a/CHANGELOG.md b/CHANGELOG.md index 7440e392..3f7a920c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the item (Added, Changed, Depreciated, Removed, Fixed, Security). +## [2024.04] +- Removed: `example` custom block in favor of custom block generation through `npm run create-block`. +- Added: Custom block external template (+ documentation) that allows us to quickly create blocks through the command line using `npm run create-block`. [[MOOSE-77]](https://moderntribe.atlassian.net/browse/MOOSE-77) + ## [2024.03] - Fixed: Fixed an issue with the Terms block where if a post ID wasn't provided it would error out. [Panopto Slack thread.](https://tribe.slack.com/archives/C061UC7B2F9/p1710250320818599) - Added: Styling for editor title bar (http://p.tri.be/i/Dszjax). [[MOOSE-111]](https://moderntribe.atlassian.net/browse/MOOSE-111) diff --git a/dev/templates/index.js b/dev/templates/index.js index e8067cfe..c154ea67 100644 --- a/dev/templates/index.js +++ b/dev/templates/index.js @@ -18,6 +18,7 @@ module.exports = { padding: true, }, }, + textdomain: 'tribe', viewScript: 'file:./view.js', }, variants: { diff --git a/docs/block-templates.md b/docs/block-templates.md new file mode 100644 index 00000000..20a7850f --- /dev/null +++ b/docs/block-templates.md @@ -0,0 +1,23 @@ +# Block Templates + +Last Updated: 04/23/24 + +Currently we support creating static and dynamic custom blocks. Generated custom blocks ultimately live in the core theme under `./blocks/tribe`. + +## Usage + +In your command line tool, you can run `npm run create-block`. This will trigger the create block tool. Once within this tool, follow the prompts to complete creating your block + +- Steps to create a custom block: http://p.tri.be/i/Iaz9Ym + 1. Choose the template variant (static or dynamic) + 2. Enter the slug for the block + 3. Enter the name for the block + 4. Enter a short description of the block + 5. Pick a [dashicon](https://developer.wordpress.org/resource/dashicons/) to assign to the block + 6. Choose a category to assign to your block +- Created block markup (static variant): http://p.tri.be/i/0HRhUd + +## Gotchas + +- Because the `create-block` script inherits the code that creates the "plugin" version of a block, it also inherits the code where the `textdomain` property in the `block.json` file is automatically set to the defined block slug. This only applies to the `block.json` file, as we use the `namespace` in the template files to get around this. Please remember to update the `textdomain` property in the `block.json` file once your block gets generated. +- Once the block is created, don't forget to add the block slug to the block definers `TYPES` array in the core plugin under `./src/Blocks/Blocks_Definer.php`. diff --git a/wp-content/themes/core/blocks/tribe/example/block.json b/wp-content/themes/core/blocks/tribe/example/block.json deleted file mode 100644 index 06c8e0ec..00000000 --- a/wp-content/themes/core/blocks/tribe/example/block.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 3, - "name": "tribe/example", - "version": "0.1.0", - "title": "Example Block", - "category": "tribe-custom", - "icon": "smiley", - "description": "Example block scaffolded with Create Block tool.", - "supports": { - "html": false - }, - "textdomain": "example", - "editorScript": "file:./index.js", - "editorStyle": "file:./index.css", - "style": "file:./style-index.css" -} diff --git a/wp-content/themes/core/blocks/tribe/example/edit.js b/wp-content/themes/core/blocks/tribe/example/edit.js deleted file mode 100644 index 0bac2118..00000000 --- a/wp-content/themes/core/blocks/tribe/example/edit.js +++ /dev/null @@ -1,38 +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.pcss'; - -/** - * 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 {Element} Element to render. - */ -export default function Edit() { - return ( -

- { __( 'Example Block – hello from the editor!', 'example' ) } -

- ); -} diff --git a/wp-content/themes/core/blocks/tribe/example/editor.pcss b/wp-content/themes/core/blocks/tribe/example/editor.pcss deleted file mode 100644 index 19319320..00000000 --- a/wp-content/themes/core/blocks/tribe/example/editor.pcss +++ /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-tribe-example { - outline: 1px dotted #f00; -} diff --git a/wp-content/themes/core/blocks/tribe/example/index.js b/wp-content/themes/core/blocks/tribe/example/index.js deleted file mode 100644 index 693a3739..00000000 --- a/wp-content/themes/core/blocks/tribe/example/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.pcss'; - -/** - * 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/wp-content/themes/core/blocks/tribe/example/save.js b/wp-content/themes/core/blocks/tribe/example/save.js deleted file mode 100644 index 5f9e1b93..00000000 --- a/wp-content/themes/core/blocks/tribe/example/save.js +++ /dev/null @@ -1,24 +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 {Element} Element to render. - */ -export default function save() { - return ( -

- { 'Example Block – hello from the saved content!' } -

- ); -} diff --git a/wp-content/themes/core/blocks/tribe/example/style.pcss b/wp-content/themes/core/blocks/tribe/example/style.pcss deleted file mode 100644 index f4ce12e4..00000000 --- a/wp-content/themes/core/blocks/tribe/example/style.pcss +++ /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-tribe-example { - background-color: #21759b; - color: #fff; - padding: 2px; -} From 66f159dccd0a231e5ea4857d7293c4ea33b95a93 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Tue, 23 Apr 2024 16:32:45 -0400 Subject: [PATCH 6/6] [MOOSE-77]: add link to wordpress block template docs --- docs/block-templates.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/block-templates.md b/docs/block-templates.md index 20a7850f..124a1733 100644 --- a/docs/block-templates.md +++ b/docs/block-templates.md @@ -4,6 +4,8 @@ Last Updated: 04/23/24 Currently we support creating static and dynamic custom blocks. Generated custom blocks ultimately live in the core theme under `./blocks/tribe`. +Please see the WordPress documentation on [external block templates here](https://developer.wordpress.org/news/2024/04/16/creating-an-external-project-template-for-create-block/). + ## Usage In your command line tool, you can run `npm run create-block`. This will trigger the create block tool. Once within this tool, follow the prompts to complete creating your block