add/update icon controls

index.php

@@ -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' );
 } );

src/editor.scss

@@ -5,5 +5,5 @@
  */
 
 .wp-block-room-vw-iconify {
-	// TODO
+	line-height: 1;
 }

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 { RawHTML, Fragment, useState } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/editor';
+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',
+			default: 'simple-icons',
-			selector: 'data-prefix',
-			default: 'noto-v1',
 		},
 		name: {
 			type: 'string',
-			source: 'attribute',
+			default: 'iconify',
-			selector: 'data-name',
-			default: 'unicorn',
 		},
-		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}
+							value={newPrefix}
-								onChange={(newPrefix) => {
+							onChange={(value) => {
-									setAttributes({ prefix: newPrefix });
+								setNewPrefix(value);
 							}}
 						/>
 						<TextControl
 							label="Name"
-								value={attributes.name}
+							value={newName}
-								onChange={(newName) => {
+							onChange={(value) => {
-									setAttributes({ name: newName });
+								setNewName(value);
 							}}
 						/>
-						</PanelRow>
+
-						<PanelRow>
+						<Button isPrimary onClick={updateIcon}>
-							<ToggleControl
+							Select
-								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>
-						</PanelRow>
+
-					</Panel>
+						<Button isSecondary onClick={closeModal}>
-				</InspectorControls>
+							Cancel
-				<RawHTML
+						</Button>
-					className={
+					</Modal>
-						className +
+				)}
-						(attributes.inline ? ' is-inline icon' : ' icon')
-					}
-				>
-					{attributes.svg}
-				</RawHTML>
 			</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>

src/style.scss

@@ -1,3 +1,7 @@
 .wp-block-room-vw-iconify {
 	font-size: 4em;
+
+	&.is-inline {
+		display: inline;
+	}
 }