From 7205b6e2bbf39a61cf479c5fb2e469f57dab3151 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Thu, 24 Aug 2023 14:46:54 +0200
Subject: [PATCH] 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 (
+		<div {...blockProps}>
+			<RichTextCharacterLimit
+				limit={30}
+				enforce={true}
+				tagName="h2"
+				value={title}
+				placeholder={__('Enter some text', 'example')}
+				onChange={(title) => setAttributes({ title })}
+				allowedFormats={[
+					'core/bold',
+					'core/link'
+				]}
+			/>
+		</div>
+	)
+};
\ 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 (
-			<div {...blockProps}>
-				<RichTextCharacterLimit
-					limit={30}
-					enforce={true}
-					tagName="h2"
-					value={title}
-					placeholder={ __( 'Enter some text', NAMESPACE ) }
-					onChange={(title) => setAttributes({title})}
-					allowedFormats={[
-						'core/bold',
-						'core/link'
-					]}
-				/>
-			</div>
-		)
-	},
+registerBlockType(metadata, {
+	edit: BlockEdit,
 	save: () => null
-} );
+});