Compare commits
2 Commits
913fee9577
...
3e8f484e40
| Author | SHA1 | Date |
|---|---|---|
 Ray Elliott
|
3e8f484e40 | |
|
Ray Elliott
|
70229149a9 |
|
|
@ -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
193
src/index.js
|
|
@ -1,23 +1,13 @@
|
|||
/* global Iconify */
|
||||
import './style.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 { edit } from './edit.js';
|
||||
import { save } from './save.js';
|
||||
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
registerBlockType('room-vw/iconify', {
|
||||
title: __('Iconify', 'room-vw'),
|
||||
icon: (
|
||||
|
|
@ -36,7 +26,6 @@ registerBlockType('room-vw/iconify', {
|
|||
category: 'room-vw',
|
||||
|
||||
supports: {
|
||||
// Removes support for an HTML mode.
|
||||
html: false,
|
||||
align: ['left', 'center', 'right'],
|
||||
},
|
||||
|
|
@ -70,175 +59,7 @@ registerBlockType('room-vw/iconify', {
|
|||
},
|
||||
},
|
||||
|
||||
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 */
|
||||
edit,
|
||||
|
||||
const updateIcon = () => {
|
||||
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>
|
||||
);
|
||||
},
|
||||
save,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue