WordPress・カスタムブロック作成の基本（その3）

function hoge() {
//ここから追加
    add_theme_support( 'editor-color-palette', array(
        array(
//aria属性(ラベル)
            'name'  => esc_attr('strong magenta'),
//'slug'は色の一意の識別
            'slug'  => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name'  => esc_attr('light magenta'),
            'slug'  => 'light-magenta',
            'color' => '#d0a5db',
        ),
    ) );
//登録の数は制限なし　
}
add_action( 'after_setup_theme', 'hoge' );

	"attributes": {
//省略
		"textColor": {
			"type": "string"
		},
		"backgroundColor": {
			"type": "string"
		},
		"customBroundColor": {
			"type": "string"
		},
		"customTextColor": {
			"type": "string"
		}
	},

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "create-block/test",
    "version": "0.1.0",
    "title": "Test",
    "category": "design",
    "icon": "smiley",
    "description": "test",
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        },
        "alignment": {
            "type": "string"
        },
        "shadow":{
            "type": "boolean",
            "default": false
        },
        "shadowOpactiy": {
            "type": "number",
            "default": 0.3
        },
        "backgroundColor": {
            "type": "string",
            "default": "light-magenta"
        }
    },
    "supports": {
        "html": true,
        "color": {
            "background": true,
            "text": true,
            "gradients": true
        }
    },
    "textdomain": "test",
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css"
}

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import {
    useBlockProps,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
} from '@wordpress/block-editor';
import classnames from "classnames";
import { RangeControl, PanelBody } from "@wordpress/components";
import './style.scss';
import './editor.scss';

registerBlockType('create-block/test', {
edit(props) {
    const { attributes, setAttributes } = props;
    const { alignment, content, shadow, shadowOpacity} = attributes;
    const onChangeAlignment = ( newAlignment ) => {
        setAttributes( {
        alignment: newAlignment === undefined ? 'none' : newAlignment,
        } );
    };
    const blockProps =  useBlockProps( {
        className: classnames( {
            "has-shadow": shadow,
            [`shadow-opacity-${shadowOpacity * 100}`]: shadowOpacity,
            [`text-align-${alignment}`]: alignment,
        }),
    });
 return (
    <>
    <InspectorControls>
        <PanelBody title={"Setting"}>
        {shadow && (
            <RangeControl
                label={"Shadow Opacity"}
                value={shadowOpacity}
                onChange={( shadowOpacity ) => setAttributes( {shadowOpacity } )}
                min={0.1}
                max={0.4}
                step={0.1}
            />
        )}
        </PanelBody>
    </InspectorControls>
    <BlockControls
        controls={[
        {
            icon: "chart-bar",
            title: "Shadow",
            onClick: () => {setAttributes({shadow: !shadow})},
            isActive: shadow
        }
        ]}
        >
        <AlignmentToolbar
            value={ alignment }
            onChange={ onChangeAlignment }
        />
    </BlockControls>
    <RichText  {...blockProps}
        allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
        tagName="p"
        onChange={ ( content ) => setAttributes( { content } ) }
        value={content}
    />
    </>
    );
    },

    save({ attributes }) {
    const { alignment, content, shadow, shadowOpacity } = attributes;
    const blockProps =  useBlockProps.save( {
        className: classnames( {
            "has-shadow": shadow,
            [`shadow-opacity-${shadowOpacity * 100}`]: shadowOpacity,
            [`text-align-${alignment}`]: alignment,
        }),
    });

return (
    <>
    <RichText.Content { ...blockProps }
        tagName="p"
        value={content}
    />
    </>
    );
    },

} );

.wp-block-create-block-test {
    padding: 1rem;
  &.has-shadow{
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    &.shadow-opacity-10 {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        }
    &.shadow-opacity-20 {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }
    &.shadow-opacity-30 {
        box-shadow:5px 5px 10px rgba(0, 0, 0, 0.3);
        }
     &.shadow-opacity-40 {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
        }
    }
    &.text-align-right {
        text-align: right;
    }
    &.text-align-center {
        text-align: center;
    }
    &.text-align-left {
        text-align: left;
    }
}
//カラーパレットに登録した色（仮）
.has-strong-magenta-background-color {
    background-color: #a156b4;
}
.has-strong-magenta-color {
    color: #a156b4;
}
.has-light-magenta-background-color {
    background-color: #d0a5db;
}
.has-light-magenta-color {
    color: #d0a5db;
}

import { useBlockProps, RichText } from '@wordpress/block-editor';
import classnames from 'classnames';
import { omit } from 'lodash';
//block.jsonをインポート
import blockData from '../block.json';

const v1 = {
//block.jsonのsupportsをオブジェクトに
    supports: {
        html: true,
        color: {
            background: true,
            text: true,
            gradients: true
        }
    },
//変更前のattributes(　...blockData.attributesで展開)
//lodashのomit(オブジェクト、除外するプロパティキー)
    attributes: {
        ...omit( blockData.attributes, [ 'textalign' ] ),
        alignment: {
            type: 'string',
            default: 'left',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
//migrate メソッドを含む非推奨プロセスはスキップされて、saveが実行されます
//editで、古いバージョンを実行するため、古いバージョンのattributesに新いバージョンのattributesを含みます
    migrate: ( attributes ) => {
        return {
            //古いバージョンalignmentは削除して
            ...omit( attributes, [ 'alignment' ] ),
            //新いバージョンのキーに値を含めます
            textalign: attributes.alignment,
        };
    },
//変更前のsave
  save({ attributes }) {
    const { alignment, content, shadow, shadowOpacity } = attributes;
    const blockProps =  useBlockProps.save( {
        className: classnames( {
            "has-shadow": shadow,
            [`shadow-opacity-${shadowOpacity * 100}`]: shadowOpacity,
            [`text-align-${alignment}`]: alignment,
        }),
    });
return (
    <>
    <RichText.Content { ...blockProps }
        tagName="p"
        value={content}
    />
    </>
    );
    },
};

export default v1;

//省略
//v1をインポート
import v1 from './v1';

registerBlockType('create-block/test', {
edit(){},//中は省略
save(){},//中は省略

//deprecated追加
   deprecated: [ v1 ],
} );

<?php
/**
 * Plugin Name: pattern

 */
//独自のブロックパターンカテゴリーを登録する
function hoge_cat() {
    register_block_pattern_category( 'block-pattern', array(
        'label' => 'my-pattern'
    ));
}
add_action( 'init', 'hoge_cat' );

//カスタムブロックパターンを登録
function hoge() {
    register_block_pattern( 'block-pattern/my-patterns', array(
        'title' => 'My Pattern',
        'description' =>'',
        'categories' => array('my-pattern'),
        'keywords' => array('my pattern'),
//contentにはパターンのブロックのHTMLマークアップ（コードエディタで表示）を貼りつけます
        'content' => ''
    ));
}
add_action( 'init', 'hoge' );

npm init -y
npm install @wordpress/scripts --save-dev

"main": "build/index.js",

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

<?php
/**
 * Plugin Name:       format-type
 *
 */

function my_theme_plugins_format_enqueue_assets() {

    $asset_file = include(plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

    wp_enqueue_script( 'my-theme-plugins-format-script',
     plugins_url('build/index.js', __FILE__),
     $asset_file['dependencies'], $asset_file['version']);
//cssが必要な時
  //  wp_enqueue_style( 'my-theme-plugins-format-style',
  //  plugins_url('build/index.css', __FILE__) );
}

add_action( 'enqueue_block_editor_assets', 'my_theme_plugins_format_enqueue_assets' );

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
//import './editor.scss'

registerFormatType('my-theme/small', {
    title:'Small',
    tagName: 'small',
    className: null,
    edit({ isActive, value, onChange }){
        return (
            <RichTextToolbarButton
                icon="edit"
                title='Small'
                onClick={() => {
                    onChange(
                        toggleFormat(value, {
                            type: 'my-theme/small',
                            attributes: {
                                style: 'font-size: 0.8em',
                            },
                        })
                    );
                }}
                isActive={isActive}
            />
        );
    }
});

import { addFilter } from '@wordpress/hooks';
//supportsのclassNameをtrueに変更
const changeSupport = (settings, blockName) => {
	if (blockName === '既存のブロック登録名') {
        return { ...settings, supports: {className: true}};
	}
	return settings;
};
addFilter(
	'blocks.registerBlockType',
	'ネームスペース/新しい名前',
	changeSupport
);

//class名を変更する
const changeClass = (className, blockName) => {
     return blockName === '既存のブロック登録名' ? '変更後のclass' : className;
};
addFilter(
	'blocks.getBlockDefaultClassName',
	'ネームスペース/新しい名前',
	changeClass
);