Font Awesome のアイコンピッカーを作成｜create-block

fontawesome-iconpicker //新規作成したプラグイン名
  ├── build
  ├── node_modules 
  ├── polo-multiple-block.php 
  ├── package-lock.json
  ├── package.json 
  ├── readme.txt
  └── src
   	   └── fontawesome-iconpicker //新規作成したプラグイン名
             ├── block.json
   		     ├── edit.js
   		     ├── editor.scss
   		     ├── index.js
   		     ├── save.js
   		     ├── style.scss
             └── view.js  
   	   └── components
             ├── icon-picker
                   ├── icon-picker.js
   		           └── icon-picker.scss
   		     ├── info
                   ├── info.js
   		           └── info.scss
             └── fontawesome 
                   ├── css
   		           ├── js
                        ├── fontawesome.js
                        ├── regular.js
   		                ├── brands.js
                        └── solid.js
   		           ├── sprites
   		           ├── less
   		           ├── metadata
   		           ├── scss
   		           ├── sprites
                   ├── svgs
                   └── webfonts

const icons = [
    {
        name: 'solid',
        value: 'camera',
    },
    {
        name: 'regular',
        value: 'bell',
    },
    {
        name: 'solid',
        value: 'calendar',
    },
    {
        name: 'solid',
        value: 'unlock',
    },

];

import './icon-picker.scss';

const IconPicker = ({
    attrName,
    attrValue,
    setAttributes,
}) => {
    return (
        <div className="icon-picker-wrapper">
            <h3>選択されたアイコン</h3>
            <div className="section-icon">
                <span className={`dashicons dashicons-${attrValue}`}></span>
            </div>
            <div className="icons-list">
                {
                    icons && icons.map((icon, index) => {
                        return (
                            <div key={index} className="icon-item">
                                <button className="icon-item-button" onClick={() => setAttributes({
                                    [attrName]: icon.value
                                })}>
                                    <span className={`dashicons dashicons-${icon.value}`}></span>
                                </button>
                            </div>
                        )
                    })
                } 
            </div>
        </div>   
    )
}


export default IconPicker;

.icons-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(37px, 1fr));
	width: 250px;
}
button.icon-item-button {
	padding: 7px;
	margin: 1.5px;
}

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/fontawesome-iconpicker",
	"version": "0.1.0",
	"title": "Fontawesome Iconpicker",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"attributes":{
		"icon": {
			"type": "string",
			"default": "bell"
		}
	},
	"textdomain": "fontawesome-iconpicker",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

import { __ } from '@wordpress/i18n';

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import IconPicker from '../components/icon-picker/icon-picker';


export default function Edit({ attributes, setAttributes }) {

	const { icon } = attributes;

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title={__('アイコンの選択', 'first-block')} initialOpen={false}>
					<IconPicker
						attrName="icon"
						attrValue={icon}
						setAttributes={setAttributes}
					/>
				</PanelBody>
			</InspectorControls>
			<div {...useBlockProps()}>
				<p className="section-icon">
					<span className={`dashicons dashicons-${icon}`}></span>
					{__('Icon Picker – edit.js からこんにちは！', 'icon-picker')}
				</p>
			</div>
		</Fragment>
	);
}

.wp-block-create-block-fontawesome-iconpicker {
	border: 1px dotted #f00;
}

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {

	const { icon } = attributes;

	return (
		<div {...useBlockProps.save()}>
			<p className="section-icon">
				<span className={`dashicons dashicons-${icon}`}></span>
				Icon Picker – save.js からこんにちは！
			</p>
		</div>
	);
}

.wp-block-create-block-fontawesome-iconpicker {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}