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

<?php
/*
Plugin Name: test
*/
//　＊直接ファイルにアクセスされた場合exitするように追記
if ( !defined( 'ABSPATH' ) ) {
 exit; 
}

//@wordpress/scriptsパッケージをつかうとシンプルになります
function create_block_test_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_test_block_init' );

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "my-plugin/notice",
    "title": "Notice",
    "category": "text",
    "parent": [ "core/group" ],
    "icon": "star",
    "description": "Shows warning, error or success notices…",
    "keywords": [ "alert", "message" ],
    "version": "1.0.3",
    "textdomain": "my-plugin",
    "attributes": {
        "message": {
            "type": "string",
            "source": "html",
            "selector": ".message"
        }
    },
    "providesContext": {
        "my-plugin/message": "message"
    },
    "usesContext": [ "groupId" ],
    "supports": {
        "align": true
    },
    "styles": [
        { "name": "default", "label": "Default", "isDefault": true },
        { "name": "other", "label": "Other" }
    ],
    "example": {
        "attributes": {
            "message": "This is a notice!"
        }
    },
    "editorScript": "file:./build/index.js",
    "script": "file:./build/script.js",
    "viewScript": "file:./build/view.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style.css"
}

function hoge_init() {
  wp_register_script(
    'hogehoge',
     plugins_url( 'index.js', __FILE__ ),
     array( 'wp-blocks', 'wp-element' ) 
  );
  register_block_type( 
    'namespace/block-name, 
     array(   
      'editor_script' => 'hogehoge', 
    ) 
  );
}
add_action( 'init', 'hoge_init' );

registerBlockType('create-block/test', {
//ここが不要
　　 title: 'test',
    icon: '',
    category: 'design',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
     },
//
    },
} );

import { registerBlockType } from '@wordpress/blocks';
//または　const { registerBlockType } = wp.blocks; 

registerBlockType( 'create-block/test', {
	edit: function () {
		return "";
	},
	save: function () {
		return "";
	}
} );

import { registerBlockType } from '@wordpress/blocks';
//「block.jsonファイル」からデータを読み込んで登録
import metadata from './block.json';
 
registerBlockType( metadata, {

} );

"attributes": {
    "message": {
        "type": "string",
        "source": "text",
        "selector": "div",
        "default": ""
    }
},

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

registerBlockType('create-block/test', {
	edit( props ) {
		console.log(props)
   }
} );

registerBlockType('create-block/test', {
	edit: function ({ attributes, setAttributes }) {
		
	},
} );

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';

registerBlockType('create-block/test', {
//edit: function()は省略記法にしました
　edit({ attributes, setAttributes }) {
		const blockProps = useBlockProps();
		return (
			<div { ...blockProps }>
				<TextControl
					label={ 'メッセージ' }
					value={ attributes.message }
					onChange={ ( val ) => setAttributes( { message: val } ) }
				/>
			</div>
		);
　},
} );

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
import './style.scss';
import './editor.scss';

registerBlockType('create-block/test', {
	 edit( { attributes, setAttributes } ) {
     const blockProps = useBlockProps();
     return (
      <div { ...blockProps }>
        <TextControl
          label={ 'メッセージ' }
          value={ attributes.message }
          onChange={ ( val ) => setAttributes( { message: val } ) }
         />
      </div>
     );
	},
//ここから
	 save( { attributes } ) {
     const blockProps = useBlockProps.save();
     return <div { ...blockProps }>{ attributes.message }</div>;
    }
//ここまで
} );

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "create-block/test",
    "version": "0.1.0",
    "title": "Test",
    "category": "widgets",
    "icon": "smiley",
    "description": "test",
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        }
    },
    "supports": {
        "html": true
    },
    "textdomain": "test",
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css"
}

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './style.scss';
import './editor.scss';

registerBlockType( 'create-block/test', {

edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
return (
    <RichText
    { ...blockProps }
    tagName="p"
    value={ attributes.content }
    //コンテンツは太字、斜体、リンクはできるが、他のフォーマットオプションは許可されない
    allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
    onChange={ ( content ) => setAttributes( { content } ) }
    placeholder= '...'
    />
);
},

save( { attributes } ) {
const blockProps = useBlockProps.save();
    return <RichText.Content { ...blockProps }
    tagName="p"
    value={ attributes.content } />;
    }
} );

    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        },
        "alignment": {
            "type": "string"
        }
    },

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
//AlignmentToolbar, BlockControlsを追加
import { useBlockProps, RichText, AlignmentToolbar, BlockControls } from '@wordpress/block-editor';
import './style.scss';
import './editor.scss';

registerBlockType('create-block/test', {
	edit( { attributes, setAttributes } ) {
	//attributesのキーは分割代入
	const { alignment, content, } = attributes;
	//値を更新する関数
	const onChangeAlignment = ( newAlignment ) => {
	setAttributes( {alignment: newAlignment === undefined ? 'none' : newAlignment, } );
	};
return (
	<>
{/* //AlignmentToolbar, BlockControlsコンポーネントを追加 */}
		<BlockControls>
			<AlignmentToolbar
			value={ alignment }
			onChange={ onChangeAlignment }
			/>
		</BlockControls>
		<RichText  { ...useBlockProps() }
			allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
			tagName="p"
			onChange={ ( content ) => setAttributes( { content } ) }
			value={content}
//style属性を追加します
			style={{textAlign: alignment}}
		/>
	</>
	);
},

save( {attributes} ){
//attributesのキーは分割代入
	const { alignment, content, } = attributes;
return (
	<>
	<RichText.Content { ...useBlockProps.save() }
		tagName="p"
		value={content}
//style属性を追加します
		style={{textAlign: alignment}}
	/>
	</>
	);
},

} );

    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        },
        "alignment": {
            "type": "string"
        },
        "textColor": {
            "type": "string"
        },
        "backgroundColor": {
            "type": "string"
        }
    },

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
//InspectorControls,PanelColorSettings,ContrastCheckerを追加
import {
	useBlockProps,
	RichText,
	AlignmentToolbar,
	BlockControls,
	InspectorControls,
	PanelColorSettings,
	ContrastChecker
} from '@wordpress/block-editor';
import './style.scss';
import './editor.scss';

registerBlockType('create-block/test', {
	edit( { attributes, setAttributes } ) {
//attributesのキーは分割代入
	const { alignment, content, backgroundColor, textColor} = attributes;
	const onChangeAlignment = ( newAlignment ) => {
		setAttributes( {
		alignment: newAlignment === undefined ? 'none' : newAlignment,
		} );
	};
 return (
	<>
{/* //InspectorControls,PanelColorSettings,ContrastCheckerを追加 */}
	<InspectorControls>
		<PanelColorSettings
			title={"color"}
			colorSettings={[
				{
					value: backgroundColor,
					onChange: (backgroundColor)=>{setAttributes( { backgroundColor } )},
					label: "BackgorundColor"
				},
				{
					value: textColor,
					onChange: (textColor)=>{setAttributes( {textColor } )},
					label: "TextColor"
				}
			]}
		>
{/* //ContrastCheckerは色の組み合わせをチェックをします */}
			<ContrastChecker
				textColor={textColor}
				backgroundColor={backgroundColor}
			/>
		</PanelColorSettings>
	</InspectorControls>
	<BlockControls>
		<AlignmentToolbar
			value={ alignment }
			onChange={ onChangeAlignment }
		/>
	</BlockControls>
	<RichText  {...useBlockProps()}
		allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
		tagName="p"
		onChange={ ( content ) => setAttributes( { content } ) }
		value={content}
//スタイルを追加
		style={{textAlign: alignment, backgroundColor: backgroundColor ,color: textColor}}
	/>
	</>
	);
	},

	save({ attributes }) {
//attributesのキーは分割代入
	const { alignment, content, backgroundColor, textColor} = attributes;
return (
	<>
	<RichText.Content { ...useBlockProps.save() }
		tagName="p"
		value={content}
//スタイルを追加
		style={{textAlign: alignment, backgroundColor: backgroundColor ,color: textColor}}
	/>
	</>
	);
	},

} );

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "create-block/test",
	"version": "0.1.0",
	"title": "Test",
	"category": "widgets",
	"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
		},
		"textColor": {
			"type": "string"
		},
		"backgroundColor": {
			"type": "string"
		}
	},
	"supports": {
		"html": 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,
    PanelColorSettings,
    ContrastChecker
} from '@wordpress/block-editor';
//Classnamesをつかって複数のクラスを指定します
import classnames from "classnames";
// RangeControl, PanelBodyを追加
import { RangeControl, PanelBody } from "@wordpress/components";
import './style.scss';
import './editor.scss';

registerBlockType('create-block/test', {
    edit( { attributes, setAttributes } ) {
//attributesのキーは分割代入
    const { alignment, content, backgroundColor, textColor, shadow, shadowOpacity} = attributes;
    const onChangeAlignment = ( newAlignment ) => {
        setAttributes( {
        alignment: newAlignment === undefined ? 'none' : newAlignment,
        } );
    };
//useBlockPropsにclassnamesをわたします
//has-shadowクラスはshadowがtureのとき
//shadow-opacity-[数値✖️100]クラスはRangeControlの数値により変化
    const blockProps =  useBlockProps( {
        className: classnames( {
            "has-shadow": shadow,
            [`shadow-opacity-${shadowOpacity * 100}`]: shadowOpacity
        } )
    });
 return (
    <>
{/* //InspectorControls,PanelColorSettings,ContrastCheckerを追加 */}
    <InspectorControls>
{/* //PanelBodyにRangeControlを追加0.1~0,4の値で0.1刻み */}
        <PanelBody title={"Setting"}>
{/* //shadowがtrueのときにRangeControlを表示 */}
        {shadow && (
            <RangeControl
                label={"Shadow Opacity"}
                value={shadowOpacity}
                onChange={( shadowOpacity ) => setAttributes( {shadowOpacity } )}
                min={0.1}
                max={0.4}
                step={0.1}
            />
        )}
        </PanelBody>
        <PanelColorSettings
            title={"color"}
            colorSettings={[
                {
                    value: backgroundColor,
                    onChange: (backgroundColor)=>{setAttributes( { backgroundColor } )},
                    label: "BackgorundColor"
                },
                {
                    value: textColor,
                    onChange: (textColor)=>{setAttributes( {textColor } )},
                    label: "TextColor"
                }
            ]}
        >
{/* //ContrastCheckerは色の組み合わせをチェックをします */}
            <ContrastChecker
                textColor={textColor}
                backgroundColor={backgroundColor}
            />
        </PanelColorSettings>
    </InspectorControls>
{/* //シャドウの「ON・OFF」を切り替え*/}
    <BlockControls
        controls={[
        {
            icon: "chart-bar",
            title: "Shadow",
            onClick: () => {setAttributes({shadow: !shadow})},
            isActive: shadow
        }
        ]}
    >
        <AlignmentToolbar
            value={ alignment }
            onChange={ onChangeAlignment }
        />
    </BlockControls>
{/* blockPropsを展開 */}
    <RichText  {...blockProps}
        allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
        tagName="p"
        onChange={ ( content ) => setAttributes( { content } ) }
        value={content}
        style={{textAlign: alignment, backgroundColor: backgroundColor ,color: textColor}}
    />
    </>
    );
    },

    save({ attributes }) {
//attributesのキーは分割代入
    const { alignment, content, backgroundColor, textColor, shadow, shadowOpacity} = attributes;
//useBlockProps.saveにclassnamesをわたします
    const blockProps =  useBlockProps.save( {
        className: classnames( {
            "has-shadow": shadow,
            [`shadow-opacity-${shadowOpacity * 100}`]: shadowOpacity
        } )
    } );

return (
    <>
{/* blockPropsを展開 */}
    <RichText.Content { ...blockProps }
        tagName="p"
        value={content}
        style={{textAlign: alignment, backgroundColor: backgroundColor ,color: textColor}}
    />
    </>
    );
    },

} );

.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);
        }
    }
}

.wp-block-create-block-test{
    border: solid 1px #eee;
}

"styles": [
		{
			"name": "rounded",
			"label": "Rounded",
			"isDefault": true
		},
		{
			"name": "outline",
			"label": "Outline"
		},
		{
			"name": "squared",
			"label": "Squared"
		}
	],

register_block_style(
//ブロックの名前
 'core/paragraph',
     array(
    'name'  => 'rounded',
    'label' => 'Rounded',
//インラインスタイルまたは
//エンキューしているスタイルシートのハンドルを追加
    'inline_style' => '.is-style-rounded {
        border-radius: 6px;
    }',
    )
);