add/update icon controls
This commit is contained in:
parent
8645088119
commit
c032afc07a
|
|
@ -48,7 +48,7 @@ add_action( 'init', function() {
|
|||
|
||||
|
||||
function room_vw_iconify_enqueue_assets() {
|
||||
wp_enqueue_script( 'iconify', 'https://code.iconify.design/1/1.0.7/iconify.min.js', array(), '1.0.7', false );
|
||||
wp_enqueue_script( 'iconify', 'https://code.iconify.design/2/2.0.0-beta.6/iconify.min.js', array(), '2.0.0-beta.6', false );
|
||||
}
|
||||
add_action( 'enqueue_block_assets', 'room_vw_iconify_enqueue_assets' );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
*/
|
||||
|
||||
.wp-block-room-vw-iconify {
|
||||
// TODO
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
|||
216
src/index.js
216
src/index.js
|
|
@ -1,15 +1,20 @@
|
|||
/* global Iconify */
|
||||
import './style.scss';
|
||||
import './editor.scss';
|
||||
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
import { RawHTML, Fragment } from '@wordpress/element';
|
||||
import { InspectorControls } from '@wordpress/editor';
|
||||
import { RawHTML, Fragment, useState } from '@wordpress/element';
|
||||
import { BlockControls, InspectorControls } from '@wordpress/editor';
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
RangeControl,
|
||||
TextControl,
|
||||
ToggleControl,
|
||||
Panel,
|
||||
Toolbar,
|
||||
ToolbarButton,
|
||||
PanelBody,
|
||||
PanelRow,
|
||||
} from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
|
@ -22,87 +27,188 @@ registerBlockType('room-vw/iconify', {
|
|||
supports: {
|
||||
// Removes support for an HTML mode.
|
||||
html: false,
|
||||
align: ['left', 'center', 'right'],
|
||||
},
|
||||
|
||||
attributes: {
|
||||
prefix: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
selector: 'data-prefix',
|
||||
default: 'noto-v1',
|
||||
default: 'simple-icons',
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
selector: 'data-name',
|
||||
default: 'unicorn',
|
||||
default: 'iconify',
|
||||
},
|
||||
inline: {
|
||||
isInline: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
svg: {
|
||||
type: 'string',
|
||||
source: 'html',
|
||||
selector: '.icon',
|
||||
default: '<span>Select an icon</span>',
|
||||
default: '',
|
||||
},
|
||||
fontUnit: {
|
||||
type: 'string',
|
||||
default: 'px',
|
||||
},
|
||||
fontSize: {
|
||||
type: 'number',
|
||||
default: 16,
|
||||
},
|
||||
},
|
||||
|
||||
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
|
||||
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>
|
||||
<Panel>
|
||||
<PanelBody title="Icon settings">
|
||||
<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 });
|
||||
}}
|
||||
/>
|
||||
<PanelRow></PanelRow>
|
||||
<PanelRow>
|
||||
<ToggleControl
|
||||
label="Is isInline"
|
||||
checked={attributes.isInline}
|
||||
onChange={(state) => {
|
||||
setAttributes({ isInline: state });
|
||||
}}
|
||||
/>
|
||||
<ToggleControl
|
||||
label="Use ems"
|
||||
checked={attributes.fontUnit === 'em'}
|
||||
onChange={(state) => {
|
||||
setAttributes({
|
||||
fontUnit: state ? 'em' : 'px',
|
||||
fontSize: state
|
||||
? attributes.fontSize / 16
|
||||
: attributes.fontSize * 16,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</PanelRow>
|
||||
</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={attributes.prefix}
|
||||
onChange={(newPrefix) => {
|
||||
setAttributes({ prefix: newPrefix });
|
||||
value={newPrefix}
|
||||
onChange={(value) => {
|
||||
setNewPrefix(value);
|
||||
}}
|
||||
/>
|
||||
<TextControl
|
||||
label="Name"
|
||||
value={attributes.name}
|
||||
onChange={(newName) => {
|
||||
setAttributes({ name: newName });
|
||||
value={newName}
|
||||
onChange={(value) => {
|
||||
setNewName(value);
|
||||
}}
|
||||
/>
|
||||
</PanelRow>
|
||||
<PanelRow>
|
||||
<ToggleControl
|
||||
label="Is inline"
|
||||
checked={attributes.inline}
|
||||
onChange={(state) => {
|
||||
setAttributes({ inline: state });
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
isBusy={false}
|
||||
disabled={false}
|
||||
isSecondary
|
||||
onClick={() => {
|
||||
setAttributes({
|
||||
svg: Iconify.getSVG(
|
||||
`${attributes.prefix}:${attributes.name}`
|
||||
),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Get Icon
|
||||
|
||||
<Button isPrimary onClick={updateIcon}>
|
||||
Select
|
||||
</Button>
|
||||
</PanelRow>
|
||||
</Panel>
|
||||
</InspectorControls>
|
||||
<RawHTML
|
||||
className={
|
||||
className +
|
||||
(attributes.inline ? ' is-inline icon' : ' icon')
|
||||
}
|
||||
>
|
||||
{attributes.svg}
|
||||
</RawHTML>
|
||||
|
||||
<Button isSecondary onClick={closeModal}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Modal>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
},
|
||||
|
|
@ -110,10 +216,12 @@ registerBlockType('room-vw/iconify', {
|
|||
save({ attributes }) {
|
||||
return (
|
||||
<RawHTML
|
||||
className={attributes.inline ? ' is-inline icon' : ' icon'}
|
||||
className={attributes.isInline ? ' is-inline icon' : ' icon'}
|
||||
dataPrefix={attributes.prefix}
|
||||
dataName={attributes.name}
|
||||
dataInline={attributes.inline}
|
||||
style={{
|
||||
fontSize: attributes.fontSize + attributes.fontUnit,
|
||||
}}
|
||||
>
|
||||
{attributes.svg}
|
||||
</RawHTML>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.wp-block-room-vw-iconify {
|
||||
font-size: 4em;
|
||||
|
||||
&.is-inline {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue