From 0e03fb2656fdaac71f69fb041cf13b5aa84652e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 13:54:26 +0200 Subject: [PATCH 01/17] update @wordpress/scripts package --- example/package.json | 4 ++-- package-lock.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/example/package.json b/example/package.json index ddabc63c..057560ec 100644 --- a/example/package.json +++ b/example/package.json @@ -7,7 +7,7 @@ "build": "wp-scripts build", "start": "wp-scripts start", "wp-env": "wp-env", - "start-env": "wp-env start", + "start-env": "wp-env start", "import-media": "wp-env run tests-cli wp media import /var/www/html/wp-content/plugins/example/images/1920-1080.png" }, "keywords": [], @@ -16,7 +16,7 @@ "devDependencies": { "@wordpress/env": "^5.8.0", "@wordpress/eslint-plugin": "^13.7.0", - "@wordpress/scripts": "^25.0.0" + "@wordpress/scripts": "^25.5.1" }, "dependencies": { "@10up/block-components": "file:../dist/index.js", diff --git a/package-lock.json b/package-lock.json index b4fb7191..86a15427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "devDependencies": { "@wordpress/env": "^5.8.0", "@wordpress/eslint-plugin": "^13.7.0", - "@wordpress/scripts": "^25.0.0" + "@wordpress/scripts": "^25.5.1" } }, "example/node_modules/@10up/block-components": { From f0c10cac72433c152f33833e6ccc9fbf3a993635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 13:54:58 +0200 Subject: [PATCH 02/17] fix load blocks via block.json --- example/plugin.php | 63 ++++++++++++---------------------------------- 1 file changed, 16 insertions(+), 47 deletions(-) diff --git a/example/plugin.php b/example/plugin.php index 33696c01..cf68f40e 100644 --- a/example/plugin.php +++ b/example/plugin.php @@ -14,58 +14,27 @@ namespace HelloWorld; +// Useful global constants. +define( 'EXAMPLE_PLUGIN_TEMPLATE_URL', plugin_dir_url( __FILE__ ) ); +define( 'EXAMPLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); +define( 'EXAMPLE_PLUGIN_DIST_PATH', EXAMPLE_PLUGIN_PATH . 'dist/' ); +define( 'EXAMPLE_PLUGIN_DIST_URL', EXAMPLE_PLUGIN_TEMPLATE_URL . '/dist/' ); +define( 'EXAMPLE_PLUGIN_INC', EXAMPLE_PLUGIN_PATH . 'includes/' ); +define( 'EXAMPLE_PLUGIN_BLOCK_DIR', EXAMPLE_PLUGIN_INC . 'blocks/' ); +define( 'EXAMPLE_PLUGIN_BLOCK_DIST_DIR', EXAMPLE_PLUGIN_PATH . 'build/blocks/' ); + add_action( 'init', __NAMESPACE__ . '\register_block' ); /** * Register the block */ function register_block() { - - $dir = dirname( __FILE__ ); - $script_asset_path = "$dir/build/index.asset.php"; - $index_js = 'build/index.js'; - $script_asset = require $script_asset_path; - wp_register_script( - 'editor-script', - plugins_url( $index_js, __FILE__ ), - $script_asset['dependencies'], - $script_asset['version'], - false - ); - - register_block_type( - 'example/hello-world', - [ - 'editor_script' => 'editor-script', - ] - ); - - register_block_type( - __DIR__ . '/src/blocks/link-example', - [ - 'editor_script' => 'editor-script', - 'render_callback' => function( $attributes, $content, $block ) { - $title = $attributes['title']; - - $link_one_url = isset( $attributes['url'] ) ? $attributes['url'] : ''; - $link_one_label = isset( $attributes['text'] ) ? $attributes['text'] : ''; - - $link_two_url = isset( $attributes['urlTwo'] ) ? $attributes['urlTwo'] : ''; - $link_two_label = isset( $attributes['textTwo'] ) ? $attributes['textTwo'] : ''; - - $wrapper_attributes = get_block_wrapper_attributes(); - - ob_start(); - ?> -
> -

- - -
- Date: Thu, 24 Aug 2023 13:55:13 +0200 Subject: [PATCH 03/17] fix refactor link example block --- example/src/blocks/link-example/block.json | 5 ++++- example/src/blocks/link-example/render.php | 25 ++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 example/src/blocks/link-example/render.php diff --git a/example/src/blocks/link-example/block.json b/example/src/blocks/link-example/block.json index f1c86cdd..fa9b23c3 100644 --- a/example/src/blocks/link-example/block.json +++ b/example/src/blocks/link-example/block.json @@ -1,4 +1,5 @@ { + "apiVersion": 2, "name": "example/link-example", "title": "Link Example", "description": "Example Block to show the Link Component in usage", @@ -33,5 +34,7 @@ "type": "boolean", "default": false } - } + }, + "editorScript": "file:./index.js", + "render": "file:./render.php" } diff --git a/example/src/blocks/link-example/render.php b/example/src/blocks/link-example/render.php new file mode 100644 index 00000000..9684f56c --- /dev/null +++ b/example/src/blocks/link-example/render.php @@ -0,0 +1,25 @@ + + +
> +

+ + +
From 6d70c8df1285ac2df6cfcab0322bb137288dbf17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 13:59:13 +0200 Subject: [PATCH 04/17] refactor content item example block --- example/src/blocks/content-item/block.json | 16 ++++++ example/src/blocks/content-item/edit.js | 43 +++++++++++++++ example/src/blocks/content-item/index.js | 62 ++-------------------- 3 files changed, 63 insertions(+), 58 deletions(-) create mode 100644 example/src/blocks/content-item/block.json create mode 100644 example/src/blocks/content-item/edit.js diff --git a/example/src/blocks/content-item/block.json b/example/src/blocks/content-item/block.json new file mode 100644 index 00000000..7553e3be --- /dev/null +++ b/example/src/blocks/content-item/block.json @@ -0,0 +1,16 @@ +{ + "apiVersion": 2, + "name": "example/content-item", + "title": "Content Item", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": {}, + "variations": [], + "usesContext": ["postId", "postType", "queryId"], + "ancestor": ["core/post-template"], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/content-item/edit.js b/example/src/blocks/content-item/edit.js new file mode 100644 index 00000000..3281e268 --- /dev/null +++ b/example/src/blocks/content-item/edit.js @@ -0,0 +1,43 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +import { + PostContext, + PostFeaturedImage, + PostTitle, + PostPrimaryCategory, + PostDate, + PostCategoryList, + PostAuthor, + PostExcerpt +} from '@10up/block-components'; + +export const BlockEdit = ({ context }) => { + const blockProps = useBlockProps(); + return ( +
+ +
+ +
+ + + + + + + + + + + + + + + + + + +
+ ) +}; \ No newline at end of file diff --git a/example/src/blocks/content-item/index.js b/example/src/blocks/content-item/index.js index 0f839ab4..3f937dec 100644 --- a/example/src/blocks/content-item/index.js +++ b/example/src/blocks/content-item/index.js @@ -1,62 +1,8 @@ import { registerBlockType } from '@wordpress/blocks'; -import { useBlockProps } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -import { - PostContext, - PostFeaturedImage, - PostTitle, - PostPrimaryCategory, - PostDate, - PostCategoryList, - PostAuthor, - PostExcerpt -} from '@10up/block-components'; - -const NAMESPACE = 'example'; - -registerBlockType(`${NAMESPACE}/content-item`, { - apiVersion: 2, - title: __('Content Item', NAMESPACE), - icon: 'smiley', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: {}, - transforms: {}, - variations: [], - usesContext: ['postId', 'postType', 'queryId'], - ancestor: ['core/post-template'], - edit: ({ context }) => { - const blockProps = useBlockProps(); - return ( -
- -
- -
- - - - - - - - - - - - - - - - - - -
- ) - }, +registerBlockType(metadata, { + edit: BlockEdit, save: () => null }); From 82b3edbc2fec95cf53f9b22c0cad9b9c0539008b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:14:27 +0200 Subject: [PATCH 05/17] refactor content search example block --- .../blocks/content-search-example/block.json | 19 ++++++ .../src/blocks/content-search-example/edit.js | 42 +++++++++++++ .../blocks/content-search-example/index.js | 60 ++----------------- 3 files changed, 65 insertions(+), 56 deletions(-) create mode 100644 example/src/blocks/content-search-example/block.json create mode 100644 example/src/blocks/content-search-example/edit.js diff --git a/example/src/blocks/content-search-example/block.json b/example/src/blocks/content-search-example/block.json new file mode 100644 index 00000000..6fd476e8 --- /dev/null +++ b/example/src/blocks/content-search-example/block.json @@ -0,0 +1,19 @@ +{ + "apiVersion": 2, + "name": "example/content-search", + "title": "Post Searcher", + "description": "Example Block to show the Content Search in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "selectedPost": { + "type": "array" + } + }, + "variations": [], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/content-search-example/edit.js b/example/src/blocks/content-search-example/edit.js new file mode 100644 index 00000000..34d4f83a --- /dev/null +++ b/example/src/blocks/content-search-example/edit.js @@ -0,0 +1,42 @@ +import { __ } from '@wordpress/i18n'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { PanelBody, Placeholder } from '@wordpress/components'; + +import { ContentSearch } from '@10up/block-components'; + +export const BlockEdit = (props) => { + const { + setAttributes + } = props; + + function handlePostSelection(post) { + setAttributes({ selectedPost: post }) + } + + const blockProps = useBlockProps(); + + return ( + <> + + + + + +
+ + + +
+ + ) +} \ No newline at end of file diff --git a/example/src/blocks/content-search-example/index.js b/example/src/blocks/content-search-example/index.js index 1ac1c0f1..b633be8a 100644 --- a/example/src/blocks/content-search-example/index.js +++ b/example/src/blocks/content-search-example/index.js @@ -1,60 +1,8 @@ import { registerBlockType } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, Placeholder } from '@wordpress/components'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -import { ContentSearch } from '@10up/block-components'; - -const NAMESPACE = 'example'; - -registerBlockType( `${ NAMESPACE }/content-search`, { - title: __( 'Post Searcher', NAMESPACE ), - description: __( 'Example Block to show the Content Search in usage', NAMESPACE ), - icon: 'smiley', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: { - selectedPost: { - type: 'array' - } - }, - transforms: {}, - variations: [], - edit: (props) => { - const { - className, - setAttributes - } = props; - - function handlePostSelection( post ) { - setAttributes( { selectedPost: post } ) - } - - return ( - <> - - - - - - - - - - ) - }, +registerBlockType( metadata, { + edit: BlockEdit, save: () => null } ); From 10cd1dc5819079d3950636ed39a57fb9de120c30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:18:58 +0200 Subject: [PATCH 06/17] refactor hello world example block --- example/src/blocks/hello-world/block.json | 18 +++++++ example/src/blocks/hello-world/edit.js | 44 +++++++++++++++ example/src/blocks/hello-world/index.js | 65 ++--------------------- 3 files changed, 66 insertions(+), 61 deletions(-) create mode 100644 example/src/blocks/hello-world/block.json create mode 100644 example/src/blocks/hello-world/edit.js diff --git a/example/src/blocks/hello-world/block.json b/example/src/blocks/hello-world/block.json new file mode 100644 index 00000000..7501603c --- /dev/null +++ b/example/src/blocks/hello-world/block.json @@ -0,0 +1,18 @@ +{ + "name": "example/hello-world", + "title": "Hello World", + "description": "Example Block to show the Post Picker in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "selectedPost": { + "type": "array" + } + }, + "variations": [], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/hello-world/edit.js b/example/src/blocks/hello-world/edit.js new file mode 100644 index 00000000..dcf40370 --- /dev/null +++ b/example/src/blocks/hello-world/edit.js @@ -0,0 +1,44 @@ +import { __ } from '@wordpress/i18n'; +import { InspectorControls } from '@wordpress/block-editor'; +import { PanelBody, Placeholder } from '@wordpress/components'; + +import {ContentPicker} from '@10up/block-components'; + +export const BlockEdit = (props) => { + const { + className, + attributes: { selectedPost }, + setAttributes + } = props; + + function handlePostSelection( post ) { + setAttributes( { selectedPost: post } ) + } + + return ( + <> + + + + + + + + + + ) +} \ No newline at end of file diff --git a/example/src/blocks/hello-world/index.js b/example/src/blocks/hello-world/index.js index fe92e075..b633be8a 100644 --- a/example/src/blocks/hello-world/index.js +++ b/example/src/blocks/hello-world/index.js @@ -1,65 +1,8 @@ import { registerBlockType } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, Placeholder } from '@wordpress/components'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -import {ContentPicker} from '@10up/block-components'; - -const NAMESPACE = 'example'; - -registerBlockType( `${ NAMESPACE }/hello-world`, { - title: __( 'Hello World', NAMESPACE ), - description: __( 'Example Block to show the Post Picker in usage', NAMESPACE ), - icon: 'smiley', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: { - selectedPost: { - type: 'array' - } - }, - transforms: {}, - variations: [], - edit: (props) => { - const { - className, - attributes: { selectedPost }, - setAttributes - } = props; - - function handlePostSelection( post ) { - setAttributes( { selectedPost: post } ) - } - - return ( - <> - - - - - - - - - - ) - }, +registerBlockType( metadata, { + edit: BlockEdit, save: () => null } ); From cd4168080ef9e7763a7c2bcc75f988df3266a0c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:23:22 +0200 Subject: [PATCH 07/17] refactor hero example block --- example/src/blocks/hero/block.json | 14 ++++++++ example/src/blocks/hero/edit.js | 45 +++++++++++++++++++++++++ example/src/blocks/hero/index.js | 53 +++--------------------------- 3 files changed, 63 insertions(+), 49 deletions(-) create mode 100644 example/src/blocks/hero/block.json create mode 100644 example/src/blocks/hero/edit.js diff --git a/example/src/blocks/hero/block.json b/example/src/blocks/hero/block.json new file mode 100644 index 00000000..3612293e --- /dev/null +++ b/example/src/blocks/hero/block.json @@ -0,0 +1,14 @@ +{ + "apiVersion": 2, + "name": "example/hero", + "title": "Hero", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": {}, + "variations": [], + "parent": ["core/post-content"], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/hero/edit.js b/example/src/blocks/hero/edit.js new file mode 100644 index 00000000..bcfcd2b7 --- /dev/null +++ b/example/src/blocks/hero/edit.js @@ -0,0 +1,45 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +import { + PostFeaturedImage, + PostTitle, + PostPrimaryCategory, + PostDate, + PostCategoryList, + PostTermList, + PostAuthor, + PostExcerpt, +} from '@10up/block-components'; + +export const BlockEdit = () => { + const blockProps = useBlockProps({ className: 'alignwide' }); + return ( +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ ) +}; diff --git a/example/src/blocks/hero/index.js b/example/src/blocks/hero/index.js index 9fd1206a..dac06a04 100644 --- a/example/src/blocks/hero/index.js +++ b/example/src/blocks/hero/index.js @@ -1,56 +1,11 @@ import { registerBlockType } from '@wordpress/blocks'; -import { useBlockProps } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import metadata from './block.json'; import { header } from '@wordpress/icons'; -import { PostFeaturedImage, PostTitle, PostPrimaryCategory, PostDate, PostCategoryList, PostTermList, PostAuthor, PostExcerpt } from '@10up/block-components'; +import { BlockEdit } from './edit'; -const NAMESPACE = 'example'; - -registerBlockType(`${NAMESPACE}/hero`, { - apiVersion: 2, - title: __('Hero', NAMESPACE), +registerBlockType(metadata, { icon: header, - category: 'common', - example: {}, - supports: { - html: false, - }, - attributes: { - }, - transforms: {}, - variations: [], - parent: ['core/post-content'], - edit: () => { - const blockProps = useBlockProps({ className: 'alignwide' }); - return ( -
-
- -
- - - - - - - - - - - - - - - - - - - - - -
- ) - }, + edit: BlockEdit, save: () => null }); From 640c3afef681f2df01344645e50d9e00f015c99c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:24:52 +0200 Subject: [PATCH 08/17] refactor icon example block --- .../src/blocks/icon-picker-example/block.json | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/example/src/blocks/icon-picker-example/block.json b/example/src/blocks/icon-picker-example/block.json index 14bfb7c2..b0ea90ff 100644 --- a/example/src/blocks/icon-picker-example/block.json +++ b/example/src/blocks/icon-picker-example/block.json @@ -1,20 +1,22 @@ { - "name": "example/icon-picker-example", - "title": "Icon Picker Example", - "description": "Example Block to show the Icon Picker in usage", - "icon": "smiley", - "category": "common", - "example": {}, - "supports": { - "html": false - }, - "attributes": { - "icon": { - "type": "object", - "default": { - "iconSet": "example/theme", - "name": "cloud" - } - } - } -} + "apiVersion": 2, + "name": "example/icon-picker-example", + "title": "Icon Picker Example", + "description": "Example Block to show the Icon Picker in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "icon": { + "type": "object", + "default": { + "iconSet": "example/theme", + "name": "cloud" + } + } + }, + "editorScript": "file:./index.js" +} \ No newline at end of file From eea32928abc4d803e6060a601169cc2a13d0dd9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:26:53 +0200 Subject: [PATCH 09/17] refactor image example block --- example/src/blocks/image-example/block.json | 33 +++++++++++---------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/example/src/blocks/image-example/block.json b/example/src/blocks/image-example/block.json index 5779bc0e..adca3e93 100644 --- a/example/src/blocks/image-example/block.json +++ b/example/src/blocks/image-example/block.json @@ -1,18 +1,18 @@ { - "name": "example/image-example", - "apiVersion": 2, - "title": "Image Example", - "description": "Example Block to show the Image in usage", - "icon": "smiley", - "category": "common", - "example": {}, - "supports": { - "html": false - }, - "attributes": { - "imageId": { - "type": "number" - }, + "name": "example/image-example", + "apiVersion": 2, + "title": "Image Example", + "description": "Example Block to show the Image in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "imageId": { + "type": "number" + }, "focalPoint": { "type": "object", "default": { @@ -20,5 +20,6 @@ "y": 0.5 } } - } -} + }, + "editorScript": "file:./index.js" +} \ No newline at end of file From e83608932dd1439c3ef69b87e6db4f13ab60a8d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:27:35 +0200 Subject: [PATCH 10/17] refactor inner block slider example block --- example/src/blocks/inner-blocks-slider/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/example/src/blocks/inner-blocks-slider/block.json b/example/src/blocks/inner-blocks-slider/block.json index 112fc1cc..6693c80a 100644 --- a/example/src/blocks/inner-blocks-slider/block.json +++ b/example/src/blocks/inner-blocks-slider/block.json @@ -9,5 +9,6 @@ "supports": { "html": false }, - "attributes": {} + "attributes": {}, + "editorScript": "file:./index.js" } From 644b289fe55606285c88f6659090774f9ffd6f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:31:31 +0200 Subject: [PATCH 11/17] refactor post featured image example block --- .../src/blocks/post-featured-image/block.json | 15 ++++++++++ .../src/blocks/post-featured-image/edit.js | 13 ++++++++ .../src/blocks/post-featured-image/index.js | 30 +++---------------- 3 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 example/src/blocks/post-featured-image/block.json create mode 100644 example/src/blocks/post-featured-image/edit.js diff --git a/example/src/blocks/post-featured-image/block.json b/example/src/blocks/post-featured-image/block.json new file mode 100644 index 00000000..d1d0a01e --- /dev/null +++ b/example/src/blocks/post-featured-image/block.json @@ -0,0 +1,15 @@ +{ + "name": "example/custom-post-featured-image", + "apiVersion": 2, + "title": "Custom Post Featured Image", + "icon": "format-image", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": {}, + "variations": [], + "usesContext": ["postId", "postType", "queryId"], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/post-featured-image/edit.js b/example/src/blocks/post-featured-image/edit.js new file mode 100644 index 00000000..8d6db089 --- /dev/null +++ b/example/src/blocks/post-featured-image/edit.js @@ -0,0 +1,13 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +import { PostFeaturedImage } from '@10up/block-components'; + +export const BlockEdit = ({ context }) => { + const blockProps = useBlockProps(); + return ( +
+ +
+ ) +}; \ No newline at end of file diff --git a/example/src/blocks/post-featured-image/index.js b/example/src/blocks/post-featured-image/index.js index 126f043f..6968ed3c 100644 --- a/example/src/blocks/post-featured-image/index.js +++ b/example/src/blocks/post-featured-image/index.js @@ -1,31 +1,9 @@ import { registerBlockType } from '@wordpress/blocks'; -import { useBlockProps } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; -import { PostFeaturedImage } from '@10up/block-components'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -const NAMESPACE = 'example'; - -registerBlockType(`${NAMESPACE}/custom-post-featured-image`, { - apiVersion: 2, - title: __('Custom Post Featured Image', NAMESPACE), - icon: 'format-image', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: {}, - transforms: {}, - variations: [], - usesContext: ['postId', 'postType', 'queryId'], - edit: ({ context }) => { - const blockProps = useBlockProps(); - return ( -
- -
- ) - }, +registerBlockType(metadata, { + edit: BlockEdit, save: () => null }); From c6358d6f1d53325e15c43f86b6617b5166d0aac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:36:00 +0200 Subject: [PATCH 12/17] refactor post meta example block --- example/src/blocks/post-meta/block.json | 3 +- example/src/blocks/post-meta/edit.js | 52 +++++++++++++ example/src/blocks/post-meta/index.js | 99 +------------------------ example/src/blocks/post-meta/utils.js | 45 +++++++++++ 4 files changed, 103 insertions(+), 96 deletions(-) create mode 100644 example/src/blocks/post-meta/edit.js create mode 100644 example/src/blocks/post-meta/utils.js diff --git a/example/src/blocks/post-meta/block.json b/example/src/blocks/post-meta/block.json index 6fe6007c..78afc849 100644 --- a/example/src/blocks/post-meta/block.json +++ b/example/src/blocks/post-meta/block.json @@ -8,5 +8,6 @@ "type": "string", "default": "" } - } + }, + "editorScript": "file:./index.js" } \ No newline at end of file diff --git a/example/src/blocks/post-meta/edit.js b/example/src/blocks/post-meta/edit.js new file mode 100644 index 00000000..ae9d8999 --- /dev/null +++ b/example/src/blocks/post-meta/edit.js @@ -0,0 +1,52 @@ +import { store as blocksStore, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks'; +import { + useBlockProps, + __experimentalBlockVariationPicker as BlockVariationPicker, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { PostMeta } from '@10up/block-components'; + +export const BlockEdit = (props) => { + const { attributes, setAttributes, name } = props; + const { metaKey } = attributes; + const blockProps = useBlockProps(); + + const { replaceInnerBlocks } = useDispatch(blockEditorStore); + + const variations = useSelect( + (select) => { + const { getBlockVariations } = select(blocksStore); + return getBlockVariations(name, 'block'); + }, + [name], + ); + + if (!metaKey) { + return ( +
+ { + if (nextVariation.attributes) { + setAttributes(nextVariation.attributes); + } + if (nextVariation.innerBlocks) { + replaceInnerBlocks( + clientId, + createBlocksFromInnerBlocksTemplate(nextVariation.innerBlocks), + true, + ); + } + }} + /> +
+ ) + } + + return ( +
+ +
+ ); +}; \ No newline at end of file diff --git a/example/src/blocks/post-meta/index.js b/example/src/blocks/post-meta/index.js index f32d730a..bc863ad5 100644 --- a/example/src/blocks/post-meta/index.js +++ b/example/src/blocks/post-meta/index.js @@ -1,104 +1,13 @@ -import { registerBlockType, registerBlockVariation, store as blocksStore, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks'; -import { - useBlockProps, __experimentalBlockVariationPicker as BlockVariationPicker, store as blockEditorStore, -} from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { PostMeta } from '@10up/block-components'; +import { registerBlockType, registerBlockVariation } from '@wordpress/blocks'; import { box } from '@wordpress/icons'; -// Checks whether character is Uppercase. -// Crude version. Checks only A-Z. -function isCaps(char) { - if (char.match(/[A-Z]/)) return true; - return false; -} - -// Checks whether character is digit. -function isDigit(char) { - if (char.match(/[0-9]/)) return true; - return false; -} - -export function toKebab(string) { - return string - .split('') - .map((letter, index) => { - const previousLetter = string[index - 1] || ''; - const currentLetter = letter; - - if (isDigit(currentLetter) && !isDigit(previousLetter)) { - return `-${currentLetter}`; - } - - if (!isCaps(currentLetter)) return currentLetter; - - if (previousLetter === '') { - return `${currentLetter.toLowerCase()}`; - } - - if (isCaps(previousLetter)) { - return `${currentLetter.toLowerCase()}`; - } - - return `-${currentLetter.toLowerCase()}`; - }) - .join('') - .trim() - .replace(/[-_\s]+/g, '-'); -} - -export function toSentence(string) { - const interim = toKebab(string).replace(/-/g, ' '); - return interim.slice(0, 1).toUpperCase() + interim.slice(1); -} - +import { toSentence } from './utils'; import metadata from './block.json'; +import { BlockEdit } from './edit'; registerBlockType(metadata, { icon: box, - edit: (props) => { - const { attributes, setAttributes, name } = props; - const { metaKey } = attributes; - const blockProps = useBlockProps(); - - const { replaceInnerBlocks } = useDispatch(blockEditorStore); - - const variations = useSelect( - (select) => { - const { getBlockVariations } = select(blocksStore); - return getBlockVariations(name, 'block'); - }, - [name], - ); - - if (!metaKey) { - return ( -
- { - if (nextVariation.attributes) { - setAttributes(nextVariation.attributes); - } - if (nextVariation.innerBlocks) { - replaceInnerBlocks( - clientId, - createBlocksFromInnerBlocksTemplate(nextVariation.innerBlocks), - true, - ); - } - }} - /> -
- ) - } - - return ( -
- -
- ); - }, + edit: BlockEdit, save: () => null }) diff --git a/example/src/blocks/post-meta/utils.js b/example/src/blocks/post-meta/utils.js new file mode 100644 index 00000000..5283a922 --- /dev/null +++ b/example/src/blocks/post-meta/utils.js @@ -0,0 +1,45 @@ +// Checks whether character is Uppercase. +// Crude version. Checks only A-Z. +function isCaps(char) { + if (char.match(/[A-Z]/)) return true; + return false; +} + +// Checks whether character is digit. +function isDigit(char) { + if (char.match(/[0-9]/)) return true; + return false; +} + +export function toKebab(string) { + return string + .split('') + .map((letter, index) => { + const previousLetter = string[index - 1] || ''; + const currentLetter = letter; + + if (isDigit(currentLetter) && !isDigit(previousLetter)) { + return `-${currentLetter}`; + } + + if (!isCaps(currentLetter)) return currentLetter; + + if (previousLetter === '') { + return `${currentLetter.toLowerCase()}`; + } + + if (isCaps(previousLetter)) { + return `${currentLetter.toLowerCase()}`; + } + + return `-${currentLetter.toLowerCase()}`; + }) + .join('') + .trim() + .replace(/[-_\s]+/g, '-'); +} + +export function toSentence(string) { + const interim = toKebab(string).replace(/-/g, ' '); + return interim.slice(0, 1).toUpperCase() + interim.slice(1); +} \ No newline at end of file From 0b3cd51b13434f5ccce8cc9427c51ad5973c0431 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:39:46 +0200 Subject: [PATCH 13/17] refactor post title example block --- example/src/blocks/post-title/block.json | 19 +++++++++++++++ example/src/blocks/post-title/edit.js | 11 +++++++++ example/src/blocks/post-title/index.js | 30 ++++-------------------- 3 files changed, 34 insertions(+), 26 deletions(-) create mode 100644 example/src/blocks/post-title/block.json create mode 100644 example/src/blocks/post-title/edit.js diff --git a/example/src/blocks/post-title/block.json b/example/src/blocks/post-title/block.json new file mode 100644 index 00000000..7fedbdb0 --- /dev/null +++ b/example/src/blocks/post-title/block.json @@ -0,0 +1,19 @@ +{ + "apiVersion": 2, + "name": "example/custom-post-title", + "title": "Custom Post Title", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": {}, + "variations": [], + "usesContext": [ + "postId", + "postType", + "queryId" + ], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/post-title/edit.js b/example/src/blocks/post-title/edit.js new file mode 100644 index 00000000..f2052482 --- /dev/null +++ b/example/src/blocks/post-title/edit.js @@ -0,0 +1,11 @@ +import { useBlockProps } from '@wordpress/block-editor'; +import { PostTitle } from '@10up/block-components'; + +export const BlockEdit = ({context}) => { + const blockProps = useBlockProps(); + return ( +
+ +
+ ) +}; \ No newline at end of file diff --git a/example/src/blocks/post-title/index.js b/example/src/blocks/post-title/index.js index 378df9f3..a8190e0a 100644 --- a/example/src/blocks/post-title/index.js +++ b/example/src/blocks/post-title/index.js @@ -1,31 +1,9 @@ import { registerBlockType } from '@wordpress/blocks'; -import { useBlockProps } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -import { PostTitle } from '@10up/block-components'; -const NAMESPACE = 'example'; - -registerBlockType( `${ NAMESPACE }/custom-post-title`, { - apiVersion: 2, - title: __( 'Custom Post Title', NAMESPACE ), - icon: 'smiley', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: {}, - transforms: {}, - variations: [], - usesContext: [ 'postId', 'postType', 'queryId' ], - edit: ({context}) => { - const blockProps = useBlockProps(); - return ( -
- -
- ) - }, +registerBlockType( metadata, { + edit: BlockEdit, save: () => null } ); From 94956d0ccd02e11240b993755084c1fa286dda48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:42:21 +0200 Subject: [PATCH 14/17] refactor repeater example block --- example/src/blocks/repeater-component-example/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/example/src/blocks/repeater-component-example/block.json b/example/src/blocks/repeater-component-example/block.json index 69e72b28..b7c63eb1 100644 --- a/example/src/blocks/repeater-component-example/block.json +++ b/example/src/blocks/repeater-component-example/block.json @@ -18,5 +18,6 @@ } ] } - } + }, + "editorScript": "file:./index.js" } From 7205b6e2bbf39a61cf479c5fb2e469f57dab3151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 14:46:54 +0200 Subject: [PATCH 15/17] refactor rich text charater limit example block --- .../rich-text-character-limit/block.json | 19 +++++++ .../blocks/rich-text-character-limit/edit.js | 29 +++++++++++ .../blocks/rich-text-character-limit/index.js | 51 ++----------------- 3 files changed, 53 insertions(+), 46 deletions(-) create mode 100644 example/src/blocks/rich-text-character-limit/block.json create mode 100644 example/src/blocks/rich-text-character-limit/edit.js diff --git a/example/src/blocks/rich-text-character-limit/block.json b/example/src/blocks/rich-text-character-limit/block.json new file mode 100644 index 00000000..937ee5e5 --- /dev/null +++ b/example/src/blocks/rich-text-character-limit/block.json @@ -0,0 +1,19 @@ +{ + "name": "example/rich-text-character-limit", + "apiVersion": 2, + "title": "Rich Text Character Limit", + "description": "Example Block to show the Rich Text Character Limit in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "attributes": { + "title": { + "type": "string", + "default": "" + } + }, + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/rich-text-character-limit/edit.js b/example/src/blocks/rich-text-character-limit/edit.js new file mode 100644 index 00000000..fb23d78e --- /dev/null +++ b/example/src/blocks/rich-text-character-limit/edit.js @@ -0,0 +1,29 @@ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; +import { RichTextCharacterLimit } from '@10up/block-components'; + +export const BlockEdit = (props) => { + const { + attributes: { title }, + setAttributes + } = props; + + const blockProps = useBlockProps(); + + return ( +
+ setAttributes({ title })} + allowedFormats={[ + 'core/bold', + 'core/link' + ]} + /> +
+ ) +}; \ No newline at end of file diff --git a/example/src/blocks/rich-text-character-limit/index.js b/example/src/blocks/rich-text-character-limit/index.js index 72e64a63..6968ed3c 100644 --- a/example/src/blocks/rich-text-character-limit/index.js +++ b/example/src/blocks/rich-text-character-limit/index.js @@ -1,50 +1,9 @@ import { registerBlockType } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; -import { useBlockProps } from '@wordpress/block-editor'; -import { RichTextCharacterLimit } from '@10up/block-components'; -const NAMESPACE = 'example'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; -registerBlockType( `${ NAMESPACE }/rich-text-character-limit`, { - apiVersion: 2, - title: __( 'Rich Text Character Limit', NAMESPACE ), - description: __( 'Example Block to show the Rich Text Character Limit in usage', NAMESPACE ), - icon: 'smiley', - category: 'common', - example: {}, - supports: { - html: false - }, - attributes: { - title: { - type: 'string', - default: '' - } - }, - edit: (props) => { - const { - attributes: { title }, - setAttributes - } = props; - - const blockProps = useBlockProps(); - - return ( -
- setAttributes({title})} - allowedFormats={[ - 'core/bold', - 'core/link' - ]} - /> -
- ) - }, +registerBlockType(metadata, { + edit: BlockEdit, save: () => null -} ); +}); From 5016b679729b8301286e2d785e0ad19c25a7409b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 15:01:43 +0200 Subject: [PATCH 16/17] refactor example block extensions import --- example/plugin.php | 15 +++++++++++++-- example/src/index.js | 13 ------------- example/webpack.config.js | 9 +++++++++ 3 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 example/webpack.config.js diff --git a/example/plugin.php b/example/plugin.php index cf68f40e..9d983165 100644 --- a/example/plugin.php +++ b/example/plugin.php @@ -17,8 +17,8 @@ // Useful global constants. define( 'EXAMPLE_PLUGIN_TEMPLATE_URL', plugin_dir_url( __FILE__ ) ); define( 'EXAMPLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); -define( 'EXAMPLE_PLUGIN_DIST_PATH', EXAMPLE_PLUGIN_PATH . 'dist/' ); -define( 'EXAMPLE_PLUGIN_DIST_URL', EXAMPLE_PLUGIN_TEMPLATE_URL . '/dist/' ); +define( 'EXAMPLE_PLUGIN_DIST_PATH', EXAMPLE_PLUGIN_PATH . 'build/' ); +define( 'EXAMPLE_PLUGIN_DIST_URL', EXAMPLE_PLUGIN_TEMPLATE_URL . '/build/' ); define( 'EXAMPLE_PLUGIN_INC', EXAMPLE_PLUGIN_PATH . 'includes/' ); define( 'EXAMPLE_PLUGIN_BLOCK_DIR', EXAMPLE_PLUGIN_INC . 'blocks/' ); define( 'EXAMPLE_PLUGIN_BLOCK_DIST_DIR', EXAMPLE_PLUGIN_PATH . 'build/blocks/' ); @@ -28,6 +28,17 @@ * Register the block */ function register_block() { + + $asset_file = include EXAMPLE_PLUGIN_DIST_PATH . 'index.asset.php'; + + wp_enqueue_script( + 'example-block-editor-script', + EXAMPLE_PLUGIN_DIST_URL . 'index.js', + $asset_file['dependencies'], + $asset_file['version'], + true + ); + if ( file_exists( EXAMPLE_PLUGIN_BLOCK_DIST_DIR ) ) { $block_json_files = glob( EXAMPLE_PLUGIN_BLOCK_DIST_DIR . '*/block.json' ); foreach ( $block_json_files as $filename ) { diff --git a/example/src/index.js b/example/src/index.js index d0048610..14f017e4 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,14 +1 @@ -import './blocks/hello-world'; import './extensions/background-pattern'; -import './blocks/icon-picker-example'; -import './blocks/repeater-component-example'; -import './blocks/link-example'; -import './blocks/image-example'; -import './blocks/content-search-example'; -import './blocks/rich-text-character-limit'; -import './blocks/post-title'; -import './blocks/post-featured-image'; -import './blocks/content-item'; -import './blocks/hero'; -import './blocks/post-meta'; -import './blocks/inner-blocks-slider'; diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 00000000..d60cb39e --- /dev/null +++ b/example/webpack.config.js @@ -0,0 +1,9 @@ +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); + +module.exports = { + ...defaultConfig, + entry: { + ...defaultConfig.entry(), + 'index': './src/index.js', + }, +}; From bb68e0d1c2ae1d8b90fb8dc8e0b05663131c2792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 24 Aug 2023 15:14:50 +0200 Subject: [PATCH 17/17] fix only enqueue editor assets in editor --- example/plugin.php | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/example/plugin.php b/example/plugin.php index 9d983165..1131c7fa 100644 --- a/example/plugin.php +++ b/example/plugin.php @@ -29,6 +29,17 @@ */ function register_block() { + if ( file_exists( EXAMPLE_PLUGIN_BLOCK_DIST_DIR ) ) { + $block_json_files = glob( EXAMPLE_PLUGIN_BLOCK_DIST_DIR . '*/block.json' ); + foreach ( $block_json_files as $filename ) { + $block_folder = dirname( $filename ); + register_block_type( $block_folder ); + }; + }; +}; + +add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_scripts' ); +function enqueue_block_editor_scripts() { $asset_file = include EXAMPLE_PLUGIN_DIST_PATH . 'index.asset.php'; wp_enqueue_script( @@ -38,15 +49,7 @@ function register_block() { $asset_file['version'], true ); - - if ( file_exists( EXAMPLE_PLUGIN_BLOCK_DIST_DIR ) ) { - $block_json_files = glob( EXAMPLE_PLUGIN_BLOCK_DIST_DIR . '*/block.json' ); - foreach ( $block_json_files as $filename ) { - $block_folder = dirname( $filename ); - register_block_type( $block_folder ); - }; - }; -}; +} function register_book_custom_post_type() { $labels = array(