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

Compare commits

base: rayelliott:c032afc07ae3460eddd21337c03ec955bf60dc8a
Branches Tags
rayelliott:master
...
compare: rayelliott:913fee95772397dbfe2b0c6933e21d34656517eb
Branches Tags
rayelliott:master

2 Commits
c032afc07a ... 913fee9577

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
Show Stats Expand all files Collapse all files

64
src/index.js
View File

@ -15,12 +15,23 @@ import {
Toolbar, Toolbar,
ToolbarButton, ToolbarButton,
PanelBody, PanelBody,
PanelRow,
} from '@wordpress/components'; } from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
registerBlockType('room-vw/iconify', { 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', category: 'room-vw',
@ -100,7 +111,7 @@ registerBlockType('room-vw/iconify', {
return ( return (
<Fragment> <Fragment>
<InspectorControls> <InspectorControls>
<PanelBody title="Icon settings"> <PanelBody title="Icon size">
<RangeControl <RangeControl
label={`Font size (${attributes.fontUnit})`} label={`Font size (${attributes.fontUnit})`}
value={attributes.fontSize} value={attributes.fontSize}
@ -111,28 +122,31 @@ registerBlockType('room-vw/iconify', {
setAttributes({ fontSize: value }); setAttributes({ fontSize: value });
}} }}
/> />
<PanelRow></PanelRow> <ToggleControl
<PanelRow> label="Use ems"
<ToggleControl checked={attributes.fontUnit === 'em'}
label="Is isInline" onChange={(state) => {
checked={attributes.isInline} setAttributes({
onChange={(state) => { fontUnit: state ? 'em' : 'px',
setAttributes({ isInline: state }); fontSize: state
}} ? attributes.fontSize / 16
/> : attributes.fontSize * 16,
<ToggleControl });
label="Use ems" }}
checked={attributes.fontUnit === 'em'} />
onChange={(state) => { </PanelBody>
setAttributes({ <PanelBody title="Icon variations">
fontUnit: state ? 'em' : 'px', <ToggleControl
fontSize: state label="Inline"
? attributes.fontSize / 16 checked={attributes.isInline}
: attributes.fontSize * 16, onChange={(state) => {
}); setAttributes({ isInline: state });
}} }}
/> />
</PanelRow> <p>Color</p>
<p>Rotate</p>
<p>Flip</p>
<p>Etc</p>
</PanelBody> </PanelBody>
</InspectorControls> </InspectorControls>