initial commit

.eslintignore

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.eslintignore

.eslintrc-md.js

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.eslintrc-md.js

.eslintrc.js

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.eslintrc.js

.prettierrc.js

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.prettierrc.js

.stylelintignore

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.stylelintignore

.stylelintrc.json

@@ -0,0 +1 @@
+node_modules/@wordpress/scripts/config/.stylelintrc.json

README.md

@@ -0,0 +1,9 @@
+## Usage
+
+```sh
+# build and watch for development
+npm run dev
+
+# build for production
+npm run build
+```

index.php

@@ -0,0 +1,54 @@
+<?php
+define( 'BLOCK_NAMESPACE', 'room-vw' );
+
+$block_namespace = BLOCK_NAMESPACE;
+$block_slug = basename( dirname( __FILE__ ) );
+
+add_action( 'init', function() {
+	global $block_slug, $block_namespace;
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		return;
+	}
+
+	$dir = get_template_directory() . "/blocks/$block_slug";
+	$uri = get_template_directory_uri() . "/blocks/$block_slug";
+
+	$asset_file = include( get_template_directory() . "/blocks/$block_slug/build/index.asset.php");
+
+	$index_js = 'build/index.js';
+	wp_register_script(
+		"{$block_slug}-block-editor",
+		"$uri/$index_js",
+		$asset_file['dependencies'],
+		$asset_file['version']
+	);
+
+	$editor_css = 'build/index.css';
+	wp_register_style(
+		"{$block_slug}-block-editor",
+		"$uri/$editor_css",
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'build/style-index.css';
+	wp_register_style(
+		"{$block_slug}-block",
+		"$uri/$style_css",
+		array(),
+		filemtime( "$dir/$style_css" )
+	);
+
+	register_block_type( "$block_namespace/$block_slug", array(
+		'editor_script' => "{$block_slug}-block-editor",
+		'editor_style'  => "{$block_slug}-block-editor",
+		'style'         => "{$block_slug}-block",
+	) );
+
+
+	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 );
+	}
+	add_action( 'enqueue_block_assets', 'room_vw_iconify_enqueue_assets' );
+} );

package.json

@@ -0,0 +1,18 @@
+{
+	"name": "svg",
+	"version": "1.0.0",
+	"description": "",
+	"main": "dist/index.js",
+	"scripts": {
+		"dev": "wp-scripts start",
+		"build": "wp-scripts build",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@wordpress/scripts": "12.1.1",
+		"prettier": "^2.0.5"
+	}
+}

src/editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-room-vw-iconify {
+	// TODO
+}

src/index.js

@@ -0,0 +1,80 @@
+import './style.scss';
+import './editor.scss';
+
+import { registerBlockType } from '@wordpress/blocks';
+
+import { Fragment } from '@wordpress/element';
+import { InspectorControls } from '@wordpress/editor';
+import { TextControl, Panel, PanelRow } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+registerBlockType('room-vw/iconify', {
+	title: __('Iconify Icon', 'room-vw'),
+
+	category: 'room-vw',
+
+	supports: {
+		// Removes support for an HTML mode.
+		html: false,
+	},
+
+	attributes: {
+		prefix: {
+			type: 'string',
+			default: 'noto-v1',
+		},
+		name: {
+			type: 'string',
+			default: 'unicorn',
+		},
+		inline: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+
+	edit({ className, attributes, setAttributes }) {
+		return (
+			<Fragment>
+				<InspectorControls>
+					<Panel>
+						<PanelRow>
+							<TextControl
+								label="Prefix"
+								value={attributes.prefix}
+								onChange={(newPrefix) => {
+									setAttributes({ prefix: newPrefix });
+								}}
+							/>
+							<TextControl
+								label="Name"
+								value={attributes.name}
+								onChange={(newName) => {
+									setAttributes({ name: newName });
+								}}
+							/>
+						</PanelRow>
+					</Panel>
+				</InspectorControls>
+				<div>
+					<span
+						className={className + ' iconify icon'}
+						data-icon={attributes.prefix + ':' + attributes.name}
+						data-inline={attributes.inline}
+					></span>
+					<span>{attributes.prefix + ':' + attributes.name}</span>
+				</div>
+			</Fragment>
+		);
+	},
+
+	save({ className, attributes }) {
+		return (
+			<span
+				className={className + ' iconify icon'}
+				data-icon={attributes.prefix + ':' + attributes.name}
+				data-inline={attributes.inline}
+			></span>
+		);
+	},
+});

src/style.scss

@@ -0,0 +1,3 @@
+.wp-block-room-vw-iconify {
+	font-size: 4em;
+}