Last active
February 14, 2024 13:47
-
-
Save esaramago/e4ee367baa4f480a3e710a093985b74e to your computer and use it in GitHub Desktop.
Wordpress Block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://schemas.wp.org/trunk/block.json", | |
| "apiVersion": 3, | |
| "name": "THEME_NAME/BLOCK_NAME", | |
| "title": "BLOCK EXAMPLE", | |
| "category": "THEME_NAME", | |
| "icon": "star-full", | |
| "description": "EXAMPLE DESCRIPTION", | |
| "keywords": ["EXAMPLE"], | |
| "version": "0.1", | |
| "textdomain": "THEME_NAME", | |
| "editorScript": "file:./index.js", | |
| "style": "file:./styles.css", | |
| "attributes": { | |
| "title": { | |
| "type": "string" | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import metadata from './block.json' | |
| import './styles.css' | |
| import { __ } from '@wordpress/i18n' | |
| import { registerBlockType } from '@wordpress/blocks' | |
| import { useBlockProps, InnerBlocks, RichText, InspectorControls } from '@wordpress/block-editor' | |
| import { PanelBody, TextControl } from '@wordpress/components' | |
| const ALLOWED_BLOCKS = ['core/paragraph'] | |
| registerBlockType(metadata.name, { | |
| edit: ({ attributes, setAttributes}) => { | |
| const { title } = attributes | |
| return ( | |
| <> | |
| <div { ...useBlockProps() }> | |
| <RichText | |
| tagName="h2" | |
| placeholder={__('Add title', 'THEME_NAME')} | |
| value={title} | |
| onChange={newValue => setAttributes({title: newValue})} | |
| /> | |
| <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } /> | |
| </div> | |
| <InspectorControls> | |
| <PanelBody title="PANEL TITLE"> | |
| <TextControl | |
| label={ __( | |
| 'LABEL', | |
| 'THEME_NAME' | |
| )} | |
| value={ title } | |
| onChange={ ( value ) => | |
| setAttributes( { title: value } ) | |
| } | |
| /> | |
| </PanelBody> | |
| </InspectorControls> | |
| </> | |
| ) | |
| }, | |
| save: ({attributes}) => { | |
| const { title } = attributes | |
| return ( | |
| <div { ...useBlockProps.save() }> | |
| <h2>{title}</h2> | |
| <InnerBlocks.Content /> | |
| </div> | |
| ) | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment