index.php

@@ -48,7 +48,7 @@ add_action( 'init', function() {
 
 
 	function room_vw_iconify_enqueue_assets() {
-		wp_enqueue_script( 'iconify', 'https://code.iconify.design/2/2.0.0-beta.6/iconify.min.js', array(), '2.0.0-beta.6', false );
+		wp_enqueue_script( 'iconify', 'https://code.iconify.design/1/1.0.7/iconify.min.js', array(), '1.0.7', false );
 	}
 	add_action( 'enqueue_block_assets', 'room_vw_iconify_enqueue_assets' );
 } );

src/editor.scss

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

src/index.js

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

src/style.scss

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