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,11 +1,22 @@
+/* global Iconify */
 import './style.scss';
 import './editor.scss';
 
 import { registerBlockType } from '@wordpress/blocks';
 
-import { Fragment } from '@wordpress/element';
+import { RawHTML, Fragment, useState } from '@wordpress/element';
-import { InspectorControls } from '@wordpress/editor';
+import { BlockControls, InspectorControls } from '@wordpress/editor';
-import { TextControl, Panel, PanelRow } from '@wordpress/components';
+import {
+	Button,
+	Modal,
+	RangeControl,
+	TextControl,
+	ToggleControl,
+	Toolbar,
+	ToolbarButton,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 registerBlockType('room-vw/iconify', {
@@ -16,65 +27,204 @@ registerBlockType('room-vw/iconify', {
 	supports: {
 		// Removes support for an HTML mode.
 		html: false,
+		align: ['left', 'center', 'right'],
 	},
 
 	attributes: {
 		prefix: {
 			type: 'string',
-			default: 'noto-v1',
+			default: 'simple-icons',
 		},
 		name: {
 			type: 'string',
-			default: 'unicorn',
+			default: 'iconify',
 		},
-		inline: {
+		isInline: {
 			type: 'boolean',
 			default: true,
 		},
+		svg: {
+			type: 'string',
+			source: 'html',
+			selector: '.icon',
+			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>
-							<TextControl
+							<ToggleControl
-								label="Prefix"
+								label="Is isInline"
-								value={attributes.prefix}
+								checked={attributes.isInline}
-								onChange={(newPrefix) => {
+								onChange={(state) => {
-									setAttributes({ prefix: newPrefix });
+									setAttributes({ isInline: state });
 								}}
 							/>
-							<TextControl
+							<ToggleControl
-								label="Name"
+								label="Use ems"
-								value={attributes.name}
+								checked={attributes.fontUnit === 'em'}
-								onChange={(newName) => {
+								onChange={(state) => {
-									setAttributes({ name: newName });
+									setAttributes({
+										fontUnit: state ? 'em' : 'px',
+										fontSize: state
+											? attributes.fontSize / 16
+											: attributes.fontSize * 16,
+									});
 								}}
 							/>
 						</PanelRow>
-					</Panel>
+					</PanelBody>
 				</InspectorControls>
-				<div>
+
-					<span
+				<BlockControls>
-						className={className + ' iconify icon'}
+					<Toolbar label="label">
-						data-icon={attributes.prefix + ':' + attributes.name}
+						<ToolbarButton
-						data-inline={attributes.inline}
+							label="Replace icon"
-					></span>
+							icon="admin-generic"
-					<span>{attributes.prefix + ':' + attributes.name}</span>
+							onClick={openModal}
-				</div>
+						/>
+					</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({ className, attributes }) {
+	save({ attributes }) {
 		return (
-			<span
+			<RawHTML
-				className={className + ' iconify icon'}
+				className={attributes.isInline ? ' is-inline icon' : ' icon'}
-				data-icon={attributes.prefix + ':' + attributes.name}
+				dataPrefix={attributes.prefix}
-				data-inline={attributes.inline}
+				dataName={attributes.name}
-			></span>
+				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;
+	}
 }