WordPressブロック開発の始め方 2024年5月版

cd ../../
cd xampp/htdocs/wordpress/wp-content/plugins/

npx @wordpress/create-block@latest test-block --variant=dynamic

npm start

▼以下のプロパティの行の内容をそれぞれ変更　※この行は含めない
"description": "サイトの著作権と公開年を表示",
"category": "text",

▼サポートに、色とタイポグラフィを追加
"supports": {
	"color": {
		"background": false,
		"text": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"textAlign": true
	},
	"html": false
},

▼下記の各プロパティ行をそれぞれ削除
"icon":～
"editorStyle":～
"style":～
"viewScript":～

※カンマ(,)が一番の行にあったら削除

//import metadata from './block.json';の下に以下を挿入
const calendarIcon = (
    <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
    >
        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
    </svg>
);

//iconプロパティを追加 
registerBlockType( metadata.name, {
    icon: calendarIcon,
    edit: Edit
} );

export default function Edit() {
    const currentYear = new Date().getFullYear().toString();
    return (
        <p { ...useBlockProps() }>© { currentYear } YourSiteName.</p>
    );
}

<p <?php echo get_block_wrapper_attributes(); ?>>
	<small>© <?php echo date( "Y" );?> <?php bloginfo('name');?>.</small>
</p>

下記の行をコメントアウト
// import './editor.scss';

下記の行をコメントアウト
// import './style.scss';

npm run build

"example": {},
"attributes": {
	"showStartingYear": {
		"type": "boolean"
	},
	"startingYear": {
		"type": "string"
	}
},

下記の行に、InspectorControlsを追加します。
import { useBlockProps } from '@wordpress/block-editor';
↓
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
    const currentYear = new Date().getFullYear().toString();
    return (
        <>
            <InspectorControls>
                Testing
            </InspectorControls>
            <p { ...useBlockProps() }>© { currentYear } YourSiteName.</p>
        </>
    );
}

import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';

            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'test-block' ) }>
                    Testing
                </PanelBody>
            </InspectorControls>

export default function Edit( { attributes, setAttributes } ) {
    //console.log(attributes);
    const { showStartingYear, startingYear } = attributes;
    const currentYear = new Date().getFullYear().toString();

            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'test-block' ) }>
                    <TextControl
                        label={ __(
                            'Starting year',
                            'test-block'
                        ) }
                        value={ startingYear || '' }
                        onChange={ ( value ) =>
                            setAttributes( { startingYear: value } )
                        }
                    />
                </PanelBody>
            </InspectorControls>

            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'test-block' ) }>
                    <ToggleControl
                        checked={ !! showStartingYear }
                        label={ __(
                            'Show starting year',
                            'test-block'
                        ) }
                        onChange={ () =>
                            setAttributes( {
                                showStartingYear: ! showStartingYear,
                            } )
                        }
                    />
                    { showStartingYear && (
                        <TextControl
                            label={ __(
                                'Starting year',
                                'test-block'
                            ) }
                            value={ startingYear || '' }
                            onChange={ ( value ) =>
                                setAttributes( { startingYear: value } )
                            }
                        />
                    ) }
                </PanelBody>
            </InspectorControls>

//追記　定数設定とreturnの間に分岐する変数設置
let displayDate;
if ( showStartingYear && startingYear ) {
    displayDate = startingYear + '–' + currentYear;
} else {
    displayDate = currentYear;
}

//変更　Edit()関数の最後で変数を出力
<p { ...useBlockProps() }>© { displayDate } YourSiteName.</p>

<?php
$starting_year = null;
$current_year = date("Y");//現在の年

//開始年があれば変数を上書き
if ( !empty($attributes['showStartingYear']) && !empty($attributes['startingYear']) ){
	$starting_year = "{$attributes['startingYear']}-";
}
?>
<p <?php echo get_block_wrapper_attributes(); ?>>
<small>© <?php echo $starting_year . $current_year;?> <?php bloginfo('name');?>.</small>
</p>

//save.js

import { useBlockProps } from '@wordpress/block-editor';
 
export default function save() {
    return (
        <p { ...useBlockProps.save() }>
            { 'Copyright Date Block – hello from the saved content!' }
        </p>
    );
}

//index.js

//追記
import save from './save';


//saveプロパティを追記
registerBlockType( metadata.name, {
    icon: calendarIcon,
    edit: Edit,
    save //追記
} );

//block.json

//変更箇所　fallbackCurrentYearを追加
"attributes": {
    "fallbackCurrentYear": {
        "type": "string"
    },
    "showStartingYear": {
        "type": "boolean"
    },
    "startingYear": {
        "type": "string"
    }
},

//save.js

//変更箇所 Propsの記述に注意
export default function save( { attributes } ) {

    const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
    if ( ! fallbackCurrentYear ) { return null; }//現在の年がなければ静的データを作らずに戻す

    let displayDate;
    if ( showStartingYear && startingYear ) {
        displayDate = `${startingYear}–${fallbackCurrentYear}`;
    } else {
        displayDate = fallbackCurrentYear;
    }

    return (
        <p { ...useBlockProps.save() }>© { displayDate } YourSiteName.</p>
    );

}

//edit.js

//追加 importの並びに挿入
import { useEffect } from 'react';


//追加 定数fallbackCurrentYear
const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;


//追加 Edit()関数内、定数設定の下辺り　Reactの外部システム連携機能を使い、fallbackCurrentYearに値を設定
// ブロックロードのとき、fallbackCurrentYear が設定されていなければ、現在の年に設定する
useEffect( () => {
    if ( currentYear !== fallbackCurrentYear ) {
        setAttributes( { fallbackCurrentYear: currentYear } );
    }
}, [ currentYear, fallbackCurrentYear, setAttributes ] );

//render.php

$current_year = date( "Y" );//現在の年
 
// 静的or動的なレンダリングのどちらを利用するのか分岐
if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
 
	// 静的レンダリング
	// 現在の年はフォールバックと同じ。save.js 関数で保存された、データベース内のブロックコンテンツを使用する
    $block_content = $content;

} else {
 
	// 動的レンダリング
	// 現在の年はフォールバックと異なる。更新されたブロックコンテンツをレンダーする
    if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
        $display_date = $attributes['startingYear'] . '–' . $current_year;
    } else {
        $display_date = $current_year;
    }
 
    $block_content = '<p ' . get_block_wrapper_attributes() . '>© ' . esc_html( $display_date ) . ' ' . get_bloginfo('name') . '</p>';
}

echo wp_kses_post( $block_content );