add BlockControls
This commit is contained in:
parent
1d078d3e35
commit
2d4e04211b
52
src/index.js
52
src/index.js
|
@ -1,8 +1,18 @@
|
||||||
|
/*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
|
||||||
|
@ -31,16 +41,54 @@ 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, className }) {
|
edit({ attributes, setAttributes, className }) {
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<InspectorControls>
|
||||||
|
<PanelBody title={__('Inspector Control', NAMESPACE)}>
|
||||||
|
<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 className={className}>
|
||||||
<div>
|
<div>
|
||||||
<InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
|
<InnerBlocks
|
||||||
|
template={INNER_TEMPLATE}
|
||||||
|
templateLock="all"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p>{attributes.text}</p>
|
<p>{attributes.text}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue