{ attributes.iconContent && (
-
+
{ attributes.iconContent }
) }
diff --git a/packages/iconography/src/block/Save.tsx b/packages/iconography/src/block/Save.tsx
index f514a23..f377fc1 100644
--- a/packages/iconography/src/block/Save.tsx
+++ b/packages/iconography/src/block/Save.tsx
@@ -1,5 +1,6 @@
import React from 'react';
+/* WordPress Dependencies */
import { useBlockProps } from '@wordpress/block-editor';
/* Types */
@@ -7,12 +8,12 @@ import type { Attributes } from './Attributes.type';
import type { BlockSaveProps } from '@wordpress/blocks';
export const Save = ( { attributes }: BlockSaveProps< Attributes > ) => {
- const { className, tagName, iconContent } = attributes;
- const TagName = ( tagName as keyof HTMLElementTagNameMap ) ?? 'span';
+ const { iconClass, iconTag, iconContent } = attributes;
+ const TagName = ( iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
return (
- { iconContent }
+ { iconContent }
);
};
diff --git a/packages/iconography/src/block/block.json b/packages/iconography/src/block/block.json
index ad0c210..c17ba7e 100644
--- a/packages/iconography/src/block/block.json
+++ b/packages/iconography/src/block/block.json
@@ -8,24 +8,33 @@
"icon": "star-filled",
"keywords": [ "icon", "emoji", "symbol" ],
"textdomain": "boxuk",
+ "style": "file:./style-index.css",
+ "editorScript": "file:./index.ts",
"supports": {
- "align": [ "wide", "full" ],
- "alignWide": true,
+ "anchor": false,
+ "align": [],
+ "alignWide": false,
+ "ariaLabel": true,
+ "background": {
+ "backgroundImage": false,
+ "backgroundSize": false
+ },
+ "className": true,
"color": {
"background": true,
"text": true
},
- "background": { "backgroundImage": true, "backgroundSize": true },
- "anchor": false,
- "ariaLabel": true,
- "className": true,
"customClassName": true,
- "dimensions": { "aspectRatio": false, "minHeight": true },
- "filter": { "duotone": false },
+ "dimensions": {
+ "aspectRatio": false,
+ "minHeight": false
+ },
+ "filter": {
+ "duotone": false
+ },
"html": false,
"inserter": true,
"interactivity": false,
- "layout": true,
"lock": true,
"multiple": true,
"position": {
@@ -33,26 +42,33 @@
},
"renaming": true,
"reusable": true,
- "shadow": false,
+ "shadow": true,
"spacing": {
"margin": true,
- "padding": true
+ "padding": true,
+ "blockGrap": false
},
"typography": {
"fontSize": true,
- "lineHeight": true,
+ "lineHeight": false,
"textAlign": true
}
},
"attributes": {
- "className": {
+ "iconClass": {
"type": "string"
},
- "tagName": {
+ "iconTag": {
"type": "string"
},
"iconContent": {
"type": "string"
+ },
+ "style": {
+ "type": "object",
+ "default": {
+ "textAlign": "center"
+ }
}
},
"example": {}
diff --git a/packages/iconography/src/block/index.ts b/packages/iconography/src/block/index.ts
new file mode 100644
index 0000000..14c2deb
--- /dev/null
+++ b/packages/iconography/src/block/index.ts
@@ -0,0 +1,14 @@
+/* WordPress Dependencies */
+import { registerBlockType } from '@wordpress/blocks';
+
+/* Internal deps */
+import metadata from './block.json';
+import { Edit } from './Edit';
+import { Save } from './Save';
+import { ReactComponent as AddReactionOutlined } from '../AddReactionOutlined.svg';
+
+registerBlockType( metadata, {
+ icon: AddReactionOutlined,
+ edit: Edit,
+ save: Save,
+} );
diff --git a/packages/iconography/src/block/style.scss b/packages/iconography/src/block/style.scss
new file mode 100644
index 0000000..8adde7c
--- /dev/null
+++ b/packages/iconography/src/block/style.scss
@@ -0,0 +1,3 @@
+.wp-block-boxuk-icon {
+ text-align: center;
+}
diff --git a/packages/iconography/src/index.tsx b/packages/iconography/src/index.tsx
index 67c28d0..7877897 100644
--- a/packages/iconography/src/index.tsx
+++ b/packages/iconography/src/index.tsx
@@ -3,13 +3,9 @@ import React, { ComponentProps } from 'react';
/* WordPress Dependencies */
import domReady from '@wordpress/dom-ready';
import { registerFormatType } from '@wordpress/rich-text';
-import { registerBlockType } from '@wordpress/blocks';
import { BlockControls } from '@wordpress/block-editor';
/* Internal deps */
-import metadata from './block/block.json';
-import { Edit } from './block/Edit';
-import { Save } from './block/Save';
import { IconToolbarButton } from './IconToolbarButton';
import { getIconGroups, selectIconAtCurrentCursor } from './utils';
@@ -83,8 +79,3 @@ export const registerIconography = () => {
domReady( () => {
registerIconography();
} );
-
-registerBlockType( metadata, {
- edit: Edit,
- save: Save,
-} );
diff --git a/packages/iconography/tests/TestIcononographyService.php b/packages/iconography/tests/TestIcononographyService.php
index c9b87c6..ec1397c 100644
--- a/packages/iconography/tests/TestIcononographyService.php
+++ b/packages/iconography/tests/TestIcononographyService.php
@@ -25,6 +25,7 @@ class TestIcononographyService extends TestCase {
*/
public function testInit(): void {
$class_in_test = new IconographyService( new ConfigurationParser() );
+ \WP_Mock::expectActionAdded( 'init', array( $class_in_test, 'register_block' ) );
\WP_Mock::expectActionAdded( 'wp_enqueue_scripts', array( $class_in_test, 'register_assets' ) );
\WP_Mock::expectActionAdded( 'wp_footer', array( $class_in_test, 'enqueue_assets' ), 1, 0 );
\WP_Mock::expectActionAdded( 'enqueue_block_assets', array( $class_in_test, 'register_assets' ), 1, 0 );
@@ -35,6 +36,25 @@ public function testInit(): void {
$this->assertConditionsMet();
}
+ /**
+ * Test Register Block
+ *
+ * @return void
+ */
+ public function testRegisterBlock(): void {
+ \WP_Mock::userFunction( 'plugin_dir_path' )
+ ->once()
+ ->andReturn( 'test/' );
+
+ \WP_Mock::userFunction( 'register_block_type_from_metadata' )
+ ->once()
+ ->with( 'test/build/block' );
+
+ $class_in_test = new IconographyService( new ConfigurationParser() );
+ $class_in_test->register_block();
+ $this->assertConditionsMet();
+ }
+
/**
* Test Register Assets
*
diff --git a/packages/iconography/webpack.config.js b/packages/iconography/webpack.config.js
new file mode 100644
index 0000000..0afd7c6
--- /dev/null
+++ b/packages/iconography/webpack.config.js
@@ -0,0 +1,9 @@
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+
+module.exports = {
+ ...defaultConfig,
+ entry: {
+ ...defaultConfig.entry(),
+ index: './src/index.tsx',
+ },
+};