Merge pull request #323 from 10up/fix/update-block-examples

Update Example blocks

example/package.json

@@ -14,6 +14,11 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "@wordpress/block-editor": "^12.19.9",
+        "@wordpress/blocks": "^12.28.6",
+        "@wordpress/components": "^26.0.6",
+        "@wordpress/core-data": "^6.28.9",
+        "@wordpress/data": "^9.21.1",
         "@wordpress/env": "^9.9.0",
         "@wordpress/eslint-plugin": "^18.0.0",
         "@wordpress/scripts": "^27.8.0"

example/src/blocks/color-settings-example/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 3,
 	"name": "example/color-settings-example",
 	"title": "Color Settings Component Example",
 	"description": "Example Block to show the Color settings component",
@@ -14,5 +15,5 @@
 		}
 	},
 	"variations": [],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/color-settings-example/edit.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+
+import { ColorSetting } from '@10up/block-components';
+
+export const BlockEdit = (props) => {
+	const {
+		attributes: { color },
+		setAttributes
+	} = props;
+
+	const blockProps = useBlockProps();
+
+	const colors = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={__('Post Picker', 'example')}>
+					<ColorSetting
+						label={__('Color Setting - Label', 'example')}
+						help={__('Color Setting - Help Text', 'example')}
+						colors={colors}
+						value={color}
+						onChange={(val) => setAttributes({ color: val })}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div {...blockProps}>
+				<ColorSetting
+					label={__('Color Setting - Label', 'example')}
+					help={__('Color Setting - Help Text', 'example')}
+					colors={colors}
+					value={color}
+					onChange={(val) => setAttributes({ color: val })}
+				/>
+			</div>
+		</>
+	)
+}

example/src/blocks/content-item/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/content-item",
 	"title": "Content Item",
 	"icon": "smiley",
@@ -12,5 +12,5 @@
 	"variations": [],
 	"usesContext": ["postId", "postType", "queryId"],
 	"ancestor": ["core/post-template"],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/content-item/edit.js → example/src/blocks/content-item/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 

example/src/blocks/content-picker-example/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/content-picker",
 	"title": "Content Picker",
     "description": "Example Block to show the Content Picker in usage",
@@ -15,5 +15,5 @@
         }
     },
     "variations": [],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/content-picker-example/edit.js → example/src/blocks/content-picker-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, Placeholder } from '@wordpress/components';

example/src/blocks/content-search-example/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/content-search",
 	"title": "Post Searcher",
     "description": "Example Block to show the Content Search in usage",
@@ -15,5 +15,5 @@
         }
     },
     "variations": [],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/content-search-example/edit.js → example/src/blocks/content-search-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, Placeholder } from '@wordpress/components';

example/src/blocks/counter-example/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/counter",
 	"title": "Counter Example",
 	"description": "Example Block to show the Counter in usage",
@@ -10,5 +10,5 @@
 		"html": false
 	},
 	"variations": [],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/counter-example/edit.js → example/src/blocks/counter-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, Placeholder, TextControl } from '@wordpress/components';

example/src/blocks/hello-world/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 3,
 	"name": "example/hello-world",
 	"title": "Hello World",
     "description": "Example Block to show the Post Picker in usage",
@@ -14,5 +15,5 @@
         }
     },
     "variations": [],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/hello-world/edit.js → example/src/blocks/hello-world/edit.tsx

@@ -1,12 +1,12 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } 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;
@@ -15,6 +15,8 @@ export const BlockEdit = (props) => {
 		setAttributes( { selectedPost: post } )
 	}
 
+	const blockProps = useBlockProps();
+
 	return (
 		<>
 		<InspectorControls>
@@ -28,7 +30,7 @@ export const BlockEdit = (props) => {
 				/>
 			</PanelBody>
 		</InspectorControls>
-		<Placeholder label={ __( 'Post Picker', 'example' ) } instructions={ __( 'Use the text field to search for a post', 'example') } className={ className }>
+		<Placeholder label={ __( 'Post Picker', 'example' ) } instructions={ __( 'Use the text field to search for a post', 'example') } {...blockProps}>
 			<ContentPicker 
 				postTypes={ [ 'page', 'post' ] }
 				label={ __( 'Select a Post or Page', 'example' ) }

example/src/blocks/hero/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/hero",
 	"title": "Hero",
 	"category": "common",
@@ -10,5 +10,5 @@
 	"attributes": {},
 	"variations": [],
 	"parent": ["core/post-content"],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/hero/edit.js → example/src/blocks/hero/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 

example/src/blocks/icon-picker-example/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/icon-picker-example",
 	"title": "Icon Picker Example",
 	"description": "Example Block to show the Icon Picker in usage",
@@ -18,5 +18,5 @@
 			}
 		}
 	},
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/icon-picker-example/edit.js → example/src/blocks/icon-picker-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ToolbarGroup, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';

example/src/blocks/icon-picker-example/register-icons.js → example/src/blocks/icon-picker-example/register-icons.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
     Icon as CoreIcon,
     search,

example/src/blocks/image-example/block.json

@@ -1,6 +1,6 @@
 {
 	"name": "example/image-example",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"title": "Image Example",
 	"description": "Example Block to show the Image in usage",
 	"icon": "smiley",
@@ -21,5 +21,5 @@
 			}
 		}
 	},
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/image-example/edit.js → example/src/blocks/image-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { BlockControls, useBlockProps } from '@wordpress/block-editor';
 

example/src/blocks/inner-blocks-slider/block.json

@@ -1,6 +1,6 @@
 {
     "name": "example/inner-block-slider",
-    "apiVersion": 2,
+    "apiVersion": 3,
     "title": "Inner Block Slider - Example",
     "description": "Example Block to show the Inner block slider in usage",
     "icon": "smiley",
@@ -10,5 +10,5 @@
         "html": false
     },
     "attributes": {},
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/inner-blocks-slider/edit.js → example/src/blocks/inner-blocks-slider/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InnerBlockSlider } from '@10up/block-components';
 import { useBlockProps } from '@wordpress/block-editor';
 

example/src/blocks/inner-blocks-slider/index.js → example/src/blocks/inner-blocks-slider/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';

example/src/blocks/link-example/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
     "name": "example/link-example",
     "title": "Link Example",
     "description": "Example Block to show the Link Component in usage",
@@ -35,6 +35,6 @@
             "default": false
         }
     },
-	"editorScript": "file:./index.js",
+	"editorScript": "file:./index.ts",
 	"render": "file:./render.php"
 }

example/src/blocks/link-example/edit.js → example/src/blocks/link-example/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, RichText } from '@wordpress/block-editor';
 import { Flex } from '@wordpress/components';

example/src/blocks/post-featured-image/block.json

@@ -1,6 +1,6 @@
 {
 	"name": "example/custom-post-featured-image",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"title": "Custom Post Featured Image",
 	"icon": "format-image",
 	"category": "common",
@@ -11,5 +11,5 @@
 	"attributes": {},
 	"variations": [],
 	"usesContext": ["postId", "postType", "queryId"],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/post-featured-image/edit.js → example/src/blocks/post-featured-image/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 

example/src/blocks/post-meta/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "example/post-meta",
 	"description": "Set some Metadata",
 	"title": "Post Meta",
@@ -13,5 +13,5 @@
 		"postId",
 		"postType"
 	],
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.ts"
 }

example/src/blocks/post-meta/edit.js → example/src/blocks/post-meta/edit.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { store as blocksStore, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import {
 	useBlockProps,