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
-} );
+});