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

Compare commits

base: rayelliott:913fee95772397dbfe2b0c6933e21d34656517eb
Branches Tags
rayelliott:master
...
compare: rayelliott:3e8f484e40840493301194175b9e592ec509f8ed
Branches Tags
rayelliott:master

2 Commits
913fee9577 ... 3e8f484e40

Author SHA1 Message Date
Ray Elliott 3e8f484e40 update i18ns. factor out edit/save functions 2020-08-14 19:37:27 +01:00
Ray Elliott 70229149a9 add TODOs 2020-08-14 18:58:21 +01:00
3 changed files with 213 additions and 186 deletions
Show Stats Expand all files Collapse all files

190
src/edit.js Normal file
View File

@ -0,0 +1,190 @@
/* global Iconify */
import { __ } from '@wordpress/i18n';
import { RawHTML, Fragment, useState } from '@wordpress/element';
import { BlockControls, InspectorControls } from '@wordpress/editor';
import {
Button,
Modal,
RangeControl,
TextControl,
ToggleControl,
Toolbar,
ToolbarButton,
PanelBody,
} from '@wordpress/components';
export function edit({ className, attributes, setAttributes }) {
/* eslint-disable react-hooks/rules-of-hooks */
const [modalIsOpen, setOpen] = useState(false);
const [newPrefix, setNewPrefix] = useState(attributes.prefix);
const [newName, setNewName] = useState(attributes.name);
/* eslint-enable react-hooks/rules-of-hooks */
const updateIcon = () => {
const iconString = `${newPrefix}:${newName}`;
if (!Iconify.iconExists(iconString)) {
// TODO loading indicator
Iconify.loadIcons([iconString], () => {
// TODO if icon not found
// TODO customisations object as renderHTML second argument
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
closeModal();
});
} else {
// TODO customisations object as renderHTML second argument
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
closeModal();
}
};
const setSVG = (svg, prefix, name) => {
setAttributes({
svg,
prefix,
name,
});
};
const openModal = () => {
setOpen(true);
};
const closeModal = () => {
setOpen(false);
};
const InspectorControlComponent = () => (
<InspectorControls>
<PanelBody title={__('Icon size', 'room-vw')}>
<RangeControl
label={`${__('Font size', 'room-vw')} (${
attributes.fontUnit
})`}
value={attributes.fontSize}
min={attributes.fontUnit === 'em' ? '0.5' : '8'}
max={attributes.fontUnit === 'em' ? '20' : '320'}
step={attributes.fontUnit === 'em' ? '0.1' : '1'}
onChange={(value) => {
setAttributes({ fontSize: value });
}}
/>
<ToggleControl
label={__('Use', 'room-vw') + ' ems'}
checked={attributes.fontUnit === 'em'}
onChange={(state) => {
setAttributes({
fontUnit: state ? 'em' : 'px',
fontSize: state
? attributes.fontSize / 16
: attributes.fontSize * 16,
});
}}
/>
</PanelBody>
<PanelBody title={__('Icon variations', 'room-vw')}>
<ToggleControl
label={__('Inline', 'room-vw')}
checked={attributes.isInline}
onChange={(state) => {
setAttributes({ isInline: state });
}}
/>
<p>Color</p>
<p>Rotate</p>
<p>Flip</p>
<p>Etc</p>
</PanelBody>
</InspectorControls>
);
const BlockControlComponent = () => (
<BlockControls>
<Toolbar>
<ToolbarButton
label={__('Replace icon', 'room-vw')}
icon="admin-generic"
onClick={openModal}
/>
</Toolbar>
</BlockControls>
);
const ModalComponent = () => (
<Modal
title={__('Select an Icon', 'room-vw')}
onRequestClose={closeModal}
>
<p>
<strong>TODO:</strong> Search for an icon
</p>
<TextControl
label={__('Prefix', 'room-vw')}
value={newPrefix}
onChange={(value) => {
setNewPrefix(value);
}}
/>
<TextControl
label={__('Name', 'room-vw')}
value={newName}
onChange={(value) => {
setNewName(value);
}}
/>
<Button isPrimary onClick={updateIcon}>
{__('Select', 'room-vw')}
</Button>
<Button isSecondary onClick={closeModal}>
{__('Cancel', 'room-vw')}
</Button>
</Modal>
);
return (
<Fragment>
<InspectorControlComponent />
<BlockControlComponent />
<RawHTML
className={
className +
(attributes.isInline ? ' is-inline icon' : ' icon')
}
style={{
fontSize: attributes.fontSize + attributes.fontUnit,
}}
>
{attributes.svg}
</RawHTML>
{attributes.svg === '' && (
<Button
isBusy={false}
disabled={false}
isPrimary
onClick={openModal}
>
Choose Icon
</Button>
)}
{attributes.svg !== '' && (
<Button
isBusy={false}
disabled={false}
isTertiary
onClick={openModal}
>
Change Icon
</Button>
)}
{modalIsOpen && <ModalComponent />}
</Fragment>
);
}

193
src/index.js
View File

@ -1,23 +1,13 @@
/* global Iconify */
import './style.scss'; import './style.scss';
import './editor.scss'; import './editor.scss';
import { registerBlockType } from '@wordpress/blocks';
import { RawHTML, Fragment, useState } from '@wordpress/element';
import { BlockControls, InspectorControls } from '@wordpress/editor';
import {
Button,
Modal,
RangeControl,
TextControl,
ToggleControl,
Toolbar,
ToolbarButton,
PanelBody,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { edit } from './edit.js';
import { save } from './save.js';
import { registerBlockType } from '@wordpress/blocks';
registerBlockType('room-vw/iconify', { registerBlockType('room-vw/iconify', {
title: __('Iconify', 'room-vw'), title: __('Iconify', 'room-vw'),
icon: ( icon: (
@ -36,7 +26,6 @@ registerBlockType('room-vw/iconify', {
category: 'room-vw', category: 'room-vw',
supports: { supports: {
// Removes support for an HTML mode.
html: false, html: false,
align: ['left', 'center', 'right'], align: ['left', 'center', 'right'],
}, },
@ -70,175 +59,7 @@ registerBlockType('room-vw/iconify', {
}, },
}, },
edit({ className, attributes, setAttributes }) { edit,
/* eslint-disable react-hooks/rules-of-hooks */
const [modalIsOpen, setOpen] = useState(false);
const [newPrefix, setNewPrefix] = useState(attributes.prefix);
const [newName, setNewName] = useState(attributes.name);
/* eslint-enable react-hooks/rules-of-hooks */
const updateIcon = () => { save,
const iconString = `${newPrefix}:${newName}`;
if (!Iconify.iconExists(iconString)) {
// TODO loading indicator
Iconify.loadIcons([iconString], () => {
// TODO if icon not found
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
closeModal();
});
} else {
setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
closeModal();
}
};
const setSVG = (svg, prefix, name) => {
setAttributes({
svg,
prefix,
name,
});
};
const openModal = () => {
setOpen(true);
};
const closeModal = () => {
setOpen(false);
};
return (
<Fragment>
<InspectorControls>
<PanelBody title="Icon size">
<RangeControl
label={`Font size (${attributes.fontUnit})`}
value={attributes.fontSize}
min={attributes.fontUnit === 'em' ? '0.5' : '8'}
max={attributes.fontUnit === 'em' ? '20' : '320'}
step={attributes.fontUnit === 'em' ? '0.1' : '1'}
onChange={(value) => {
setAttributes({ fontSize: value });
}}
/>
<ToggleControl
label="Use ems"
checked={attributes.fontUnit === 'em'}
onChange={(state) => {
setAttributes({
fontUnit: state ? 'em' : 'px',
fontSize: state
? attributes.fontSize / 16
: attributes.fontSize * 16,
});
}}
/>
</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>
<BlockControls>
<Toolbar label="label">
<ToolbarButton
label="Replace icon"
icon="admin-generic"
onClick={openModal}
/>
</Toolbar>
</BlockControls>
<RawHTML
className={
className +
(attributes.isInline ? ' is-inline icon' : ' icon')
}
style={{
fontSize: attributes.fontSize + attributes.fontUnit,
}}
>
{attributes.svg}
</RawHTML>
{attributes.svg === '' && (
<Button
isBusy={false}
disabled={false}
isPrimary
onClick={openModal}
>
Choose Icon
</Button>
)}
{attributes.svg !== '' && (
<Button
isBusy={false}
disabled={false}
isTertiary
onClick={openModal}
>
Change Icon
</Button>
)}
{modalIsOpen && (
<Modal title="Select an Icon" onRequestClose={closeModal}>
<p>
<strong>TODO:</strong> Search for an icon
</p>
<TextControl
label="Prefix"
value={newPrefix}
onChange={(value) => {
setNewPrefix(value);
}}
/>
<TextControl
label="Name"
value={newName}
onChange={(value) => {
setNewName(value);
}}
/>
<Button isPrimary onClick={updateIcon}>
Select
</Button>
<Button isSecondary onClick={closeModal}>
Cancel
</Button>
</Modal>
)}
</Fragment>
);
},
save({ attributes }) {
return (
<RawHTML
className={attributes.isInline ? ' is-inline icon' : ' icon'}
dataPrefix={attributes.prefix}
dataName={attributes.name}
style={{
fontSize: attributes.fontSize + attributes.fontUnit,
}}
>
{attributes.svg}
</RawHTML>
);
},
}); });

16
src/save.js Normal file
View File

@ -0,0 +1,16 @@
import { RawHTML } from '@wordpress/element';
export function save({ attributes }) {
return (
<RawHTML
className={attributes.isInline ? ' is-inline icon' : ' icon'}
dataPrefix={attributes.prefix}
dataName={attributes.name}
style={{
fontSize: attributes.fontSize + attributes.fontUnit,
}}
>
{attributes.svg}
</RawHTML>
);
}