rayelliott
/
wp-gutenberg-block-template
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: rayelliott:2d4e04211be8d251f34c216bd79a889b8d4c4ee5
Branches Tags
rayelliott:master
..
compare: rayelliott:a2a7f4bebfb39b7686d4f71d084d2f4e532cadf9
Branches Tags
rayelliott:master

No commits in common. "2d4e04211be8d251f34c216bd79a889b8d4c4ee5" and "a2a7f4bebfb39b7686d4f71d084d2f4e532cadf9" have entirely different histories.
2d4e04211b ... a2a7f4bebf

1 changed files with 7 additions and 55 deletions
Show Stats Expand all files Collapse all files

62
src/index.js
View File

@ -1,18 +1,8 @@
/*eslint-disable @wordpress/i18n-text-domain, @wordpress/i18n-no-variables */
import './style.scss'; import './style.scss';
import './editor.scss'; import './editor.scss';
import { registerBlockStyle, registerBlockType } from '@wordpress/blocks'; import { registerBlockStyle, registerBlockType } from '@wordpress/blocks';
import { BlockControls, InspectorControls } from '@wordpress/editor';
import { InnerBlocks } from '@wordpress/block-editor'; import { InnerBlocks } from '@wordpress/block-editor';
import {
Button,
ColorPicker,
PanelBody,
ToolbarGroup,
__experimentalToolbarItem as ToolbarItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
const NAMESPACE = 'namespace'; // TODO const NAMESPACE = 'namespace'; // TODO
@ -25,7 +15,7 @@ const INNER_TEMPLATE = [
]; ];
registerBlockType(`${NAMESPACE}/${SLUG}`, { registerBlockType(`${NAMESPACE}/${SLUG}`, {
title: __(BLOCK_TITLE, NAMESPACE), title: __(BLOCK_TITLE, SLUG),
category: 'widgets', category: 'widgets',
@ -41,54 +31,16 @@ registerBlockType(`${NAMESPACE}/${SLUG}`, {
selector: 'p', selector: 'p',
default: __('Some default text.', NAMESPACE), default: __('Some default text.', NAMESPACE),
}, },
color: {
type: 'string',
default: 'rgba(0, 0, 0, 1)',
},
}, },
edit({ attributes, setAttributes, className }) { edit({ attributes, className }) {
return ( return (
<> <div className={className}>
<InspectorControls> <div>
<PanelBody title={__('Inspector Control', NAMESPACE)}> <InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
<ColorPicker
color={attributes.color}
onChangeComplete={(value) => {
const rgb = value.rgb;
const color =
rgb.a !== 1
? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
: value.hex;
setAttributes({ color });
}}
/>
</PanelBody>
</InspectorControls>
<BlockControls>
<ToolbarGroup>
<ToolbarItem
as={Button}
onClick={() =>
console.log('Toolbar Button go brrrr!')
}
>
Toolbar Button
</ToolbarItem>
</ToolbarGroup>
</BlockControls>
<div className={className}>
<div>
<InnerBlocks
template={INNER_TEMPLATE}
templateLock="all"
/>
</div>
<p>{attributes.text}</p>
</div> </div>
</> <p>{attributes.text}</p>
</div>
); );
}, },