WIP

packages/iconography/src/block/Edit.tsx

@@ -1,26 +1,15 @@
 import React from 'react';
 
 /* WordPress Dependencies */
-import {
- BlockControls,
- InspectorControls,
- useBlockProps,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import { store as RichTextStore } from '@wordpress/rich-text';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import {
- Button,
- Panel,
- PanelBody,
- ToolbarButton,
- Icon,
-} from '@wordpress/components';
+import { Icon, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { replace } from '@wordpress/icons';
 
 /* Internal deps */
-import { IconModal } from '../IconModal';
+import { IconToolbarButton } from '../shared';
 import './style.scss';
 
 /* Types */
@@ -33,7 +22,6 @@ export const Edit = ( {
  attributes,
  setAttributes,
 }: BlockEditProps< Attributes > ) => {
- const [ showIconModal, setShowIconModal ] = useState( false );
  const blockProps = useBlockProps();
  const { getFormatType } = useSelect(
  ( select ) =>
@@ -61,55 +49,27 @@ export const Edit = ( {
  const TagName =
  ( attributes.iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
 
- const buttonText = attributes.iconContent
- ? __( 'Change Icon', 'boxuk' )
- : __( 'Select Icon', 'boxuk' );
-
- const ShowModalButton = () => (
- <Button
- variant={ 'secondary' }
- onClick={ () => setShowIconModal( ! showIconModal ) }
- text={ buttonText }
- icon={ <Icon icon={ replace } /> }
- />
- );
-
  return (
  <>
- <InspectorControls group="list">
- <Panel>
- <PanelBody>
- <ShowModalButton />
- </PanelBody>
- </Panel>
- </InspectorControls>
- <BlockControls group="inline">
- <ToolbarButton
- icon={ <Icon icon={ replace } /> }
- onClick={ () => setShowIconModal( ! showIconModal ) }
- title={ buttonText }
- />
- </BlockControls>
+ <IconToolbarButton
+ icon={ <Icon icon={ replace } /> }
+ onChange={ handleChange }
+ value={ {
+ text: '',
+ formats: [],
+ replacements: [],
+ start: 0,
+ end: 0,
+ } }
+ initialOpen={ ! attributes.iconContent }
+ />
  <div { ...blockProps }>
  { attributes.iconContent && (
  <TagName className={ attributes.iconClass ?? '' }>
  { attributes.iconContent }
  </TagName>
  ) }
- { ! attributes.iconContent && <ShowModalButton /> }
- { showIconModal && (
- <IconModal
- onRequestClose={ () => setShowIconModal( false ) }
- onChange={ handleChange }
- value={ {
- text: '',
- formats: [],
- replacements: [],
- start: 0,
- end: 0,
- } }
- />
- ) }
+ { ! attributes.iconContent && <Spinner /> }
  </div>
  </>
  );

packages/iconography/src/block/index.ts

@@ -5,7 +5,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import metadata from './block.json';
 import { Edit } from './Edit';
 import { Save } from './Save';
-import { ReactComponent as AddReactionOutlined } from '../AddReactionOutlined.svg';
+import { ReactComponent as AddReactionOutlined } from '../Icon.svg';
 
 registerBlockType( metadata, {
  icon: AddReactionOutlined,

packages/iconography/src/index.ts

@@ -0,0 +1,14 @@
+/* WordPress Dependencies */
+import domReady from '@wordpress/dom-ready';
+
+/* Internal deps */
+import registerInlineIconography from './registerInlineIconography';
+
+domReady( () => {
+ registerInlineIconography();
+} );
+
+/* Export for other packages to consume */
+export * from './types';
+export * from './shared';
+export * from './utils';

packages/iconography/src/index.tsx → packages/iconography/src/registerInlineIconography.tsx

@@ -1,18 +1,16 @@
 import React, { ComponentProps } from 'react';
 
 /* WordPress Dependencies */
-import domReady from '@wordpress/dom-ready';
 import { registerFormatType } from '@wordpress/rich-text';
-import { BlockControls } from '@wordpress/block-editor';
 
 /* Internal deps */
-import { IconToolbarButton } from './IconToolbarButton';
+import { IconToolbarButton } from './shared';
 import { getIconGroups, selectIconAtCurrentCursor } from './utils';
 
 /* Types */
 import type { IconGroup } from './types';
 
-export const handleKeyDown =
+const handleKeyDown =
  ( iconGroups: IconGroup[] | undefined ) => ( event: KeyboardEvent ) => {
  switch ( event.key ) {
  case 'ArrowLeft':
@@ -25,7 +23,7 @@ export const handleKeyDown =
  }
  };
 
-export const handleKeyUp =
+const handleKeyUp =
  ( iconGroups: IconGroup[] | undefined ) => ( event: KeyboardEvent ) => {
  if ( 'ArrowRight' === event.key ) {
  const { selection, icon } = selectIconAtCurrentCursor( iconGroups );
@@ -51,7 +49,7 @@ export const handleKeyEvent =
  }
  };
 
-export const registerIconography = () => {
+export const registerInlineIconography = () => {
  const iconGroups = getIconGroups();
  if ( ! iconGroups ) {
  return;
@@ -61,11 +59,7 @@ export const registerIconography = () => {
  if ( index === 0 ) {
  iconGroup.edit = (
  props: ComponentProps< typeof IconToolbarButton >
- ) => (
- <BlockControls group="inline">
- <IconToolbarButton { ...props } />
- </BlockControls>
- );
+ ) => <IconToolbarButton { ...props } />;
  }
  registerFormatType( iconGroup.name, iconGroup );
  } );
@@ -76,6 +70,4 @@ export const registerIconography = () => {
  document.addEventListener( 'keyup', handleKeyEvent( iconGroups ) );
 };
 
-domReady( () => {
- registerIconography();
-} );
+export default registerInlineIconography;

packages/iconography/src/IconModal.tsx → packages/iconography/src/shared/IconModal.tsx

@@ -8,7 +8,7 @@ import { useState, useMemo } from '@wordpress/element';
 
 /* Internal Dependencies */
 import { PlaceholderIconPanel } from './PlaceholderIconPanel';
-import { getIconGroups } from './utils';
+import { getIconGroups } from '../utils';
 
 /* Types */
 import type { RichTextValue } from '@wordpress/rich-text';

packages/iconography/src/tests/IconPanel.test.tsx → packages/iconography/src/shared/IconPanel.test.tsx

@@ -3,7 +3,7 @@ import { describe, expect, jest, test } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { generateRichTextFormat } from '../utils';
 
-import { IconPanel } from '../IconPanel';
+import { IconPanel } from './IconPanel';
 
 jest.mock( '../utils', () => ( {
  generateRichTextFormat: jest.fn(),

packages/iconography/src/IconPanel.tsx → packages/iconography/src/shared/IconPanel.tsx

@@ -8,10 +8,10 @@ import {
 } from '@wordpress/components';
 
 /* Internal Dependencies */
-import { generateRichTextFormat } from './utils';
+import { generateRichTextFormat } from '../utils';
 
 /* Types */
-import type { IconGroup } from './types';
+import type { IconGroup } from '../types';
 import type { RichTextValue } from '@wordpress/rich-text';
 
 export type IconPanelProps = {

packages/iconography/src/IconToolbarButton.tsx → packages/iconography/src/shared/IconToolbarButton.tsx

@@ -1,32 +1,37 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 /* WordPress Dependencies */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { BlockControls } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
 
 /* Internal Dependencies */
-import { ReactComponent as AddReactionOutlined } from './AddReactionOutlined.svg';
+import { ReactComponent as Icon } from '../Icon.svg';
+import { IconModal } from './IconModal';
 
 /* Types */
 import type { RichTextValue } from '@wordpress/rich-text';
-import { IconModal } from './IconModal';
 
 export type IconToolbarButtonProps = {
  onChange: ( value: RichTextValue ) => void;
  value: RichTextValue;
+ icon: ComponentProps< typeof ToolbarButton >[ 'icon' ];
+ initialOpen?: boolean;
 };
 
 export const IconToolbarButton = ( {
  onChange,
  value,
+ icon = <Icon />,
+ initialOpen = false,
 }: IconToolbarButtonProps ) => {
- const [ open, setOpen ] = useState( false );
+ const [ open, setOpen ] = useState( initialOpen );
 
  return (
- <>
+ <BlockControls group="inline">
  <ToolbarButton
- icon={ <AddReactionOutlined /> }
+ icon={ icon }
  label={ __( 'Add an icon', 'boxuk' ) }
  onClick={ () => setOpen( ! open ) }
  />
@@ -37,6 +42,6 @@ export const IconToolbarButton = ( {
  value={ value }
  />
  ) }
- </>
+ </BlockControls>
  );
 };

packages/iconography/src/PlaceholderIconPanel.tsx → packages/iconography/src/shared/PlaceholderIconPanel.tsx

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 
 /* Types */
-import type { IconGroup } from './types';
+import type { IconGroup } from '../types';
 import type { RichTextValue } from '@wordpress/rich-text';
 
 export type IconPanelProps = {

packages/iconography/src/shared/index.ts

@@ -0,0 +1,6 @@
+import { IconModal } from './IconModal';
+import { IconPanel } from './IconPanel';
+import { IconToolbarButton } from './IconToolbarButton';
+import { PlaceholderIconPanel } from './PlaceholderIconPanel';
+
+export { IconModal, IconPanel, IconToolbarButton, PlaceholderIconPanel };

packages/iconography/src/tests/index.test.ts → packages/iconography/src/tests/registerInlineIconography.test.ts

@@ -3,13 +3,13 @@ import { registerFormatType } from '@wordpress/rich-text';
 
 /* Internal Dependencies */
 import { selectIconAtCurrentCursor, getIconGroups } from '../utils';
-import { handleKeyEvent, registerIconography } from '../';
+import { handleKeyEvent, registerInlineIconography } from '../registerInlineIconography';
 
 jest.mock( '@wordpress/rich-text', () => ( {
  registerFormatType: jest.fn(),
 } ) );
 
-jest.mock( '../IconToolbarButton', () => ( {
+jest.mock( '../shared', () => ( {
  IconToolbarButton: jest.fn(),
 } ) );
 
@@ -26,6 +26,7 @@ jest.mock( '../utils', () => ( {
 
 describe( 'registering iconography', () => {
  test( 'should register all 3 types by default', () => {
+ registerInlineIconography();
  expect( getIconGroups ).toBeCalledTimes( 1 );
  // just by having imported the file, the registerFormatType should be called 3 times as per the 3 mocked values.
  expect( registerFormatType ).toBeCalledTimes( 3 );
@@ -35,7 +36,7 @@ describe( 'registering iconography', () => {
  jest.clearAllMocks();
  getIconGroups.mockReturnValue( undefined );
  expect( registerFormatType ).toBeCalledTimes( 0 );
- registerIconography();
+ registerInlineIconography();
  } );
 } );
 

packages/iconography/src/tests/utils.test.ts

@@ -9,7 +9,7 @@ import { IconGroup } from '../types';
 
 jest.mock( '@wordpress/rich-text', () => ( {} ) );
 
-jest.mock( '../IconToolbarButton', () => ( {
+jest.mock( '../shared', () => ( {
  IconToolbarButton: jest.fn(),
 } ) );
 

packages/iconography/webpack.config.js

@@ -4,6 +4,6 @@ module.exports = {
  ...defaultConfig,
  entry: {
  ...defaultConfig.entry(),
- index: './src/index.tsx',
+ index: './src/index.ts',
  },
 };