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