Compare commits

..

2 Commits

Author SHA1 Message Date
Ray Elliott 913fee9577 add block icon 2020-08-14 18:53:34 +01:00
Ray Elliott 0a3962690b tidy up inspector controls 2020-08-14 18:43:44 +01:00
1 changed files with 39 additions and 25 deletions

View File

@ -15,12 +15,23 @@ import {
Toolbar,
ToolbarButton,
PanelBody,
PanelRow,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
registerBlockType('room-vw/iconify', {
title: __('Iconify Icon', 'room-vw'),
title: __('Iconify', 'room-vw'),
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M12 19.5c3.75 0 7.159-3.379 6.768-4.125c-.393-.75-2.268 1.875-6.768 1.875s-6-2.625-6.375-1.875S8.25 19.5 12 19.5zm4.125-12c.623 0 1.125.502 1.125 1.125v1.5c0 .623-.502 1.125-1.125 1.125A1.123 1.123 0 0 1 15 10.125v-1.5c0-.623.502-1.125 1.125-1.125zm-8.25 0C8.498 7.5 9 8.002 9 8.625v1.5c0 .623-.502 1.125-1.125 1.125a1.123 1.123 0 0 1-1.125-1.125v-1.5c0-.623.502-1.125 1.125-1.125zM12 0C5.381 0 0 5.381 0 12s5.381 12 12 12s12-5.381 12-12S18.619 0 12 0zm0 1.5c5.808 0 10.5 4.692 10.5 10.5S17.808 22.5 12 22.5S1.5 17.808 1.5 12S6.192 1.5 12 1.5z"
fill="currentColor"
/>
</svg>
),
category: 'room-vw',
@ -100,7 +111,7 @@ registerBlockType('room-vw/iconify', {
return (
<Fragment>
<InspectorControls>
<PanelBody title="Icon settings">
<PanelBody title="Icon size">
<RangeControl
label={`Font size (${attributes.fontUnit})`}
value={attributes.fontSize}
@ -111,15 +122,6 @@ registerBlockType('room-vw/iconify', {
setAttributes({ fontSize: value });
}}
/>
<PanelRow></PanelRow>
<PanelRow>
<ToggleControl
label="Is isInline"
checked={attributes.isInline}
onChange={(state) => {
setAttributes({ isInline: state });
}}
/>
<ToggleControl
label="Use ems"
checked={attributes.fontUnit === 'em'}
@ -132,7 +134,19 @@ registerBlockType('room-vw/iconify', {
});
}}
/>
</PanelRow>
</PanelBody>
<PanelBody title="Icon variations">
<ToggleControl
label="Inline"
checked={attributes.isInline}
onChange={(state) => {
setAttributes({ isInline: state });
}}
/>
<p>Color</p>
<p>Rotate</p>
<p>Flip</p>
<p>Etc</p>
</PanelBody>
</InspectorControls>