Web Design Leaves

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );
  //wp_set_script_translations( 'wdl-dynamic-block-sample-block-editor', 'dynamic-block-sample' );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback に指定したコールバック関数
function wdl_dynamic_block_sample_render($attr, $content) {
  ob_start();
?>
<div class="wp-block-wdl-dynamic-block-sample">
  <h3 class="myRichTextTitle"><?php echo $attr['myTitle']; ?></h3>
  <div class="myRichTextContent"><?php echo $attr['myContent']; ?></div>
</div>
<?php
  $output = ob_get_contents();
  ob_end_clean();
  return $output;
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';

registerBlockType( 'wdl/dynamic-block-sample', {
  title:'Dynamic Block Sample',
  description: 'My first dynamic block sample.',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //入力された値を保存するための属性（PHP 側で設定したのでコメントアウト）
  /*attributes: {
    //タイトル（h3）の内容を保持するための属性
    myTitle: {
      type: 'string',
      default: '',
      //source: 'html',
      selector:'.myRichTextTitle'
    },
    //コンテンツ（div）の内容を保持するためのの属性
    myContent: {
      //type: 'array',
      type: 'string',
      default: '',
      //source: 'children',
      selector:'.myRichTextContent'
    },
  },*/
  edit: Edit,
  save: () => { return null }
} );

import './editor.scss';
import { RichText } from '@wordpress/block-editor';

export default function Edit( props ) {

  const { attributes: { myTitle, myContent}, className, setAttributes } = props;

  return (
    <div className={ className }  >
      <RichText
        className='myRichTextTitle'
        value={ myTitle }
        onChange={ (newTitle) => setAttributes({ myTitle: newTitle }) }
        tagName='h3'
        placeholder= 'タイトルを入力'
        keepPlaceholderOnFocus={true}
      />
      <RichText
        className='myRichTextContent'
        value={ myContent }
        onChange={ (newContent) => setAttributes({ myContent: newContent }) }
        tagName='div'
        multiline= 'p'
        placeholder= '文章を入力'
      />
    </div>
  );
}

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );
  //wp_set_script_translations( 'wdl-dynamic-block-sample-block-editor', 'dynamic-block-sample' );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
      //isEditMode を属性として追加
      'isEditMode' => [
        'type' => 'boolean',
        'default' => true
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback に指定したコールバック関数
function wdl_dynamic_block_sample_render($attr, $content) {
  ob_start();
?>
<div class="wp-block-wdl-dynamic-block-sample">
  <h3 class="myRichTextTitle"><?php echo $attr['myTitle']; ?></h3>
  <div class="myRichTextContent"><?php echo $attr['myContent']; ?></div>
</div>
<?php
  $output = ob_get_contents();
  ob_end_clean();
  return $output;
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';

registerBlockType( 'wdl/dynamic-block-sample', {
  title:'Dynamic Block Sample',
  description: 'My first dynamic block sample.',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //attributes は PHP 側（dynamic-block-sample.php）で設定
  edit: Edit,
  save: () => { return null }
} );

0:
author: 1
categories: [1]
comment_status: "open"
content: {raw: "<!-- wp:wdl/dynamic-block-sample {"myTitle":"サンプルタ…003cp\u003eサンプルテキスト abcdefgh\u003c/p\u003e"} /-->", rendered: "<div class="wp-block-wdl-dynamic-block-sample my-d…le-block-09/">Sample Block 09</a></li></ul></div>", protected: false, block_version: 1}
date: "2020-09-27T17:17:36"
date_gmt: "2020-09-27T08:17:36"
excerpt: {raw: "", rendered: "", protected: false}
featured_media: 0
format: "standard"
generated_slug: "sample-01"
guid: {rendered: "http://localhost/blocks/?p=1353", raw: "http://localhost/blocks/?p=1353"}
id: 1353
link: "http://localhost/blocks/2020/09/27/%e3%83%80%e3%82%a4%e3%83%8a%e3%83%9f%e3%83%83%e3%82%af%e3%83%96%e3%83%ad%e3%83%83%e3%82%af-01/"
meta: []
modified: "2020-09-30T13:54:29"
modified_gmt: "2020-09-30T04:54:29"
password: ""
permalink_template: "http://localhost/blocks/2020/09/27/%postname%/"
ping_status: "open"
slug: "%e3%83%80%e3%82%a4%e3%83%8a%e3%83%9f%e3%83%83%e3%82%af%e3%83%96%e3%83%ad%e3%83%83%e3%82%af-01"
status: "publish"
sticky: false
tags: []
template: ""
title: // title には raw と rendered がある
  raw: "Sample 01"
  rendered: "Sample 01"
__proto__: Object
type: "post"
_links: {self: Array(1), collection: Array(1), about: Array(1), author: Array(1), replies: Array(1), …}
__proto__: Object

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
//withSelect, select をインポート
import { withSelect, select } from '@wordpress/data';

registerBlockType( 'wdl/dynamic-block-sample', {
  title:'Dynamic Block Sample',
  description: 'My first dynamic block sample.',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //withSelect を使って投稿を取得（投稿 posts を props で Edit に渡す）
  edit: withSelect(select => {
    //現在の投稿の post ID を取得
    const currentPostId = select('core/editor').getCurrentPostId();
    //クエリパラメータ
    const query = {
      per_page: 3,
      exclude: currentPostId //除外する投稿
    }
    return {
      posts: select('core').getEntityRecords('postType', 'post', query)
    }
  })(Edit),
  save: () => { return null }
} );

import './editor.scss';
import { RichText } from '@wordpress/block-editor';
// Spinner をインポート
import { Spinner } from '@wordpress/components';

export default function Edit( props ) {
  const { posts, className, setAttributes, attributes: { myTitle, myContent } }
  = props;

  //投稿部分のレンダリング
  let post_content = [];

  if (!posts) {
    //読み込みが完了していない場合
    post_content = <li><Spinner /> 投稿を読込中です・・・。</li>;
  }else{
    if (0 === posts.length) {
      //読み込みが完了して投稿数が0の場合
      post_content = <li>表示する投稿がありません。</li>;
    }else{
      //読み込みが完了して投稿がある場合
      post_content =
      posts.map(post => {
        return (
          <li><a href={ post.link }> { post.title.rendered } </a></li>
        );
      })
    }
  }

  return (
    <div className={ className }  >
      <RichText
        className='myRichTextTitle'
        value={ myTitle }
        onChange={ (newTitle) => setAttributes({ myTitle: newTitle }) }
        tagName='h3'
        placeholder= 'タイトルを入力'
        keepPlaceholderOnFocus={true}
      />
      <RichText
        className='myRichTextContent'
        value={ myContent }
        onChange={ (newContent) => setAttributes({ myContent: newContent }) }
        tagName='div'
        multiline= 'p'
        placeholder= '文章を入力'
      />
      <ul>
        { post_content }
      </ul>
    </div>
  );
}

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
      // addClassName（追加のクラス名）を属性として追加
      'addClassName' => [
        'type' => 'string',
        'default' => 'my-dynamic-block-sample'
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback のコールバック関数（PHP でレンダリングする関数）
function wdl_dynamic_block_sample_render($attr) {

  // 属性の myTitle を使った h3 要素のマークアップ
  $dynamic_block_title = ( $attr['myTitle'] ) ? sprintf( '<h3>%1$s</h3>', $attr['myTitle'] ) : '';
  // 属性の myContent を使った div 要素のマークアップ
  $dynamic_block_content = ( $attr['myContent'] ) ? sprintf( '<div>%1$s</div>', $attr['myContent'] ) : '';
  // 投稿をリストで表示するマークアップ（空文字で初期化）
  $list_item_markup = '';

  // get_posts で最新の記事3件を取得（現在の投稿は除外）
  $args = array(
    'numberposts' => 3,
    'post_stats'  => 'publish',
    'exclude' => [get_the_ID()],
  );
  $my_posts = get_posts( $args );

  // 各投稿のマークアップを作成
  if (! empty($my_posts)) {
    foreach ($my_posts as $post) {
      $title = get_the_title( $post->ID );
      $list_item_markup .= sprintf(
        '<li><a href="%1$s">%2$s</a></li>',
        esc_url( get_permalink(  $post->ID  ) ),
        esc_html( $title )
      );
    }
  }

  // クラス属性の値を作成（属性 addClassName が指定されていれば追加）
  $class = 'wp-block-wdl-dynamic-block-sample';
  if ( isset( $attr['addClassName'] ) ) {
    $class .= ' ' . $attr['addClassName'];
  }

  // 最終的なマークアップを作成
  $block_content = sprintf(
    '<div class="%1$s">%2$s%3$s<ul>%4$s</ul></div>',
    esc_attr( $class ),
    $dynamic_block_title,
    $dynamic_block_content,
    $list_item_markup
  );

  //ブロックの出力の文字列を返す
  return $block_content;
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
//withSelect, select をインポート
import { withSelect, select } from '@wordpress/data';

registerBlockType( 'wdl/dynamic-block-sample', {
  title:'Dynamic Block Sample',
  description: 'My first dynamic block sample.',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //withSelect を使って投稿を取得（投稿 posts を props で Edit に渡す）
  edit: withSelect(select => {
    //現在の投稿の ID
    const currentPostId = select('core/editor').getCurrentPostId();
    //クエリパラメータ
    const query = {
      per_page: -1,
      exclude: currentPostId
    }
    return {
      posts: select('core').getEntityRecords('postType', 'post', query)
    }
  })(Edit),
  save: () => { return null }
} );

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
      'selectedPostId' => [
        'type' => 'number',
        'default' => 0
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback のコールバック関数（PHP でレンダリングする関数）
function wdl_dynamic_block_sample_render($attr) {

  // 属性の myTitle を使った h3 要素のマークアップ
  $dynamic_block_title = ( $attr['myTitle'] ) ? sprintf( '<h3>%1$s</h3>', $attr['myTitle'] ) : '';
  // 属性の myContent を使った div 要素のマークアップ
  $dynamic_block_content = ( $attr['myContent'] ) ? sprintf( '<div>%1$s</div>', $attr['myContent'] ) : '';
  // 投稿のタイトルを表示するマークアップ（空文字で初期化）
  $post_title_markup = '';
  // 投稿の抜粋を表示するマークアップ（空文字で初期化）
  $my_excerpt_markup = '';

  if ($attr['selectedPostId'] > 0) {
    $my_post = get_post($attr['selectedPostId']);
    if (!$my_post) {
      $post_title_markup = '';
    }
    $my_url = esc_url( get_permalink($my_post) );
    $my_title = esc_html( get_the_title($my_post) );
    $post_title_markup = '<h4><a href="' . $my_url . '">'. $my_title . '</a></h4>';
    $my_excerpt = get_the_excerpt($attr['selectedPostId']);
    if($my_excerpt) {
      $my_excerpt_markup = '<p>'. esc_html( $my_excerpt ).'</p>' ;
      //$my_excerpt_markup = '<p>'. $my_excerpt .'</p>' ;
    }
  }

  // 全体のクラス名
  $class = 'wp-block-wdl-dynamic-block-sample';
  //投稿部分のクラス名
  $post_class = 'post-content';

  // 最終的なマークアップを作成
  $block_content = sprintf(
    '<div class="%1$s">%2$s%3$s<div class="%4$s">%5$s%6$s</div></div>',
    esc_attr( $class ),
    $dynamic_block_title,
    $dynamic_block_content,
    esc_attr( $post_class ),
    $post_title_markup,
    $my_excerpt_markup
  );

  //ブロックの出力の文字列を返す
  return $block_content;
}

import './editor.scss';
// InspectorControls を block-editor パッケージからインポート
import { RichText, InspectorControls } from '@wordpress/block-editor';
// SelectControl, PanelBody, PanelRow を components パッケージからインポート
import { SelectControl, PanelBody, PanelRow } from '@wordpress/components';

export default function Edit( props ) {
  //attributes:selectedPostId を追加
  const { posts, className, setAttributes, attributes: { selectedPostId, myTitle, myContent } }
  = props;

  //SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列
  let select_options = [];
  if (posts) {
    select_options.push({ value: 0, label:'投稿を選択' });
    posts.forEach(post => {
      select_options.push({ value: post.id, label: post.title.rendered });
    });
  } else {
    select_options.push({ value: 0, label:'読み込み中' })
  }

  //選択された投稿部分のレンダリング
  let post_content = "";

  if(selectedPostId && posts) {
    posts.forEach(post => {
      if(selectedPostId === post.id) {
        post_content = (
          <div className="post-content">
            <h3><a href={ post.link }> { post.title.rendered } </a></h3>
            { post.excerpt &&
              <p> {post.excerpt.rendered} </p>
            }
          </div>
        )
      }
    });
  }

  //インスペクターを追加する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title="投稿の挿入"
          initialOpen={true}
        >
        <PanelRow>
          <SelectControl
            label='投稿セレクトメニュー'
            //multiple={true}
            options={select_options}
            value={selectedPostId}
            onChange={(newId) => setAttributes({ selectedPostId: parseInt(newId) })}
          />
        </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  return (
    [
      getInspectorControls(), //インスペクター
      <div className={ className }  >
        <RichText
          className='myRichTextTitle'
          value={ myTitle }
          onChange={ (newTitle) => setAttributes({ myTitle: newTitle }) }
          tagName='h3'
          placeholder= 'タイトルを入力'
          keepPlaceholderOnFocus={true}
        />
        <RichText
          className='myRichTextContent'
          value={ myContent }
          onChange={ (newContent) => setAttributes({ myContent: newContent }) }
          tagName='div'
          multiline= 'p'
          placeholder= '文章を入力'
        />
        { post_content }
      </div>
    ]
  );
}

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
      'selectedPostId' => [
        'type' => 'number',
        'default' => 0
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback のコールバック関数（PHP でレンダリングする関数）
function wdl_dynamic_block_sample_render($attr) {

  // 属性の myTitle を使った h3 要素のマークアップ
  $dynamic_block_title = ( $attr['myTitle'] ) ? sprintf( '<h3>%1$s</h3>', $attr['myTitle'] ) : '';
  // 属性の myContent を使った div 要素のマークアップ
  $dynamic_block_content = ( $attr['myContent'] ) ? sprintf( '<div>%1$s</div>', $attr['myContent'] ) : '';
  // 投稿のタイトルを表示するマークアップ（空文字で初期化）
  $post_title_markup = '';
  // 投稿の抜粋を表示するマークアップ（空文字で初期化）
  $my_excerpt_markup = '';

  if ($attr['selectedPostId'] > 0) {
    $my_post = get_post($attr['selectedPostId']);
    if (!$my_post) {
      $post_title_markup = '';
    }
    $my_url = esc_url( get_permalink($my_post) );
    $my_title = esc_html( get_the_title($my_post) );
    $post_title_markup = '<h4><a href="' . $my_url . '">'. $my_title . '</a></h4>';
    $my_excerpt = get_the_excerpt($attr['selectedPostId']);
    if($my_excerpt) {
      $my_excerpt_markup = '<p>'. esc_html( $my_excerpt ).'</p>' ;
    }
  }

  // 全体のクラス名
  $class = 'wp-block-wdl-dynamic-block-sample';
  //投稿部分のクラス名
  $post_class = 'post-content';

  // 最終的なマークアップを作成
  $block_content = sprintf(
    '<div class="%1$s">%2$s%3$s<div class="%4$s">%5$s%6$s</div></div>',
    esc_attr( $class ),
    $dynamic_block_title,
    $dynamic_block_content,
    esc_attr( $post_class ),
    $post_title_markup,
    $my_excerpt_markup
  );

  //ブロックの出力の文字列を返す
  return $block_content;
}

<?php
/**
 * Plugin Name:     Dynamic Block Sample
 * Description:     My first dynamic block sample.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     dynamic-block-sample
 *
 * @package         wdl
 */

function wdl_dynamic_block_sample_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/dynamic-block-sample" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-dynamic-block-sample-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/dynamic-block-sample', array(
    'editor_script' => 'wdl-dynamic-block-sample-block-editor',
    'editor_style'  => 'wdl-dynamic-block-sample-block-editor',
    'style'         => 'wdl-dynamic-block-sample-block',
    //コールバック関数を指定
    'render_callback' => 'wdl_dynamic_block_sample_render',
    //属性を設定
    'attributes' => [
      'myTitle' => [
        'type' => 'string',
        'default' => ''
      ],
      'myContent' => [
        'type' => 'string',
        'default' => ''
      ],
      'selectedPostId' => [
        'type' => 'number',
        'default' => 0
      ],
      //isEditMode を属性として追加
      'isEditMode' => [
        'type' => 'boolean',
        'default' => true
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_dynamic_block_sample_block_init' );

//render_callback のコールバック関数（PHP でレンダリングする関数）
function wdl_dynamic_block_sample_render($attr) {

  // 属性の myTitle を使った h3 要素のマークアップ
  $dynamic_block_title = ( $attr['myTitle'] ) ? sprintf( '<h3>%1$s</h3>', $attr['myTitle'] ) : '';
  // 属性の myContent を使った div 要素のマークアップ
  $dynamic_block_content = ( $attr['myContent'] ) ? sprintf( '<div>%1$s</div>', $attr['myContent'] ) : '';
  // 投稿のタイトルを表示するマークアップ（空文字で初期化）
  $post_title_markup = '';
  // 投稿の抜粋を表示するマークアップ（空文字で初期化）
  $my_excerpt_markup = '';

  if ($attr['selectedPostId'] > 0) {
    $my_post = get_post($attr['selectedPostId']);
    if (!$my_post) {
      $post_title_markup = '';
    }
    $my_url = esc_url( get_permalink($my_post) );
    $my_title = esc_html( get_the_title($my_post) );
    $post_title_markup = '<h4><a href="' . $my_url . '">'. $my_title . '</a></h4>';
    $my_excerpt = get_the_excerpt($attr['selectedPostId']);
    if($my_excerpt) {
      $my_excerpt_markup = '<p>'. esc_html( $my_excerpt ).'</p>' ;
      //$my_excerpt_markup = '<p>'. $my_excerpt .'</p>' ;
    }
  }

  // 全体のクラス名
  $class = 'wp-block-wdl-dynamic-block-sample';
  //投稿部分のクラス名
  $post_class = 'post-content';

  // 最終的なマークアップを作成
  $block_content = sprintf(
    '<div class="%1$s">%2$s%3$s<div class="%4$s">%5$s%6$s</div></div>',
    esc_attr( $class ),
    $dynamic_block_title,
    $dynamic_block_content,
    esc_attr( $post_class ),
    $post_title_markup,
    $my_excerpt_markup
  );

  //ブロックの出力の文字列を返す
  return $block_content;
}

import './editor.scss';
// BlockControls を追加でインポート
import { RichText, InspectorControls, BlockControls} from '@wordpress/block-editor';
// Button、Toolbar を追加でインポート
import { SelectControl, PanelBody, PanelRow, Button, Toolbar  } from '@wordpress/components';
// ServerSideRender を追加でインポート
import ServerSideRender from '@wordpress/server-side-render';
//Fragment を追加でインポート
import { Fragment } from '@wordpress/element';


export default function Edit( props ) {
  //attributes:isEditMode を追加
  const { posts, className, setAttributes, attributes: { isEditMode, selectedPostId, myTitle, myContent } }
  = props;

  //ツールバーにプレビューボタンを追加する関数
  const getBlockControls = () => {
    return (
      <BlockControls>
        <Toolbar>
          <Button
            //属性 isEditMode の値により表示するラベルを切り替え
            label={ isEditMode ? "Preview" : "Edit" }
            //属性 isEditMode の値により表示するアイコンを切り替え
            icon={ isEditMode ? "format-image" : "edit" }
            className="my-custom-button"
            //setAttributes を使って属性の値を更新（真偽値を反転）
            onClick={() => setAttributes({ isEditMode: !isEditMode })}
          />
        </Toolbar>
      </BlockControls>
    );
  }

  //SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列
  let select_options = [];
  if (posts) {
    select_options.push({ value: 0, label:'投稿を選択' });
    posts.forEach(post => {
      select_options.push({ value: post.id, label: post.title.rendered });
    });
  } else {
    select_options.push({ value: 0, label:'読み込み中' })
  }

  //選択された投稿部分のレンダリング
  let post_content = "";

  if(selectedPostId && posts) {
    posts.forEach(post => {
      if(selectedPostId === post.id) {
        post_content = (
          <div className="post-content">
            <h3><a href={ post.link }> { post.title.rendered } </a></h3>
            { post.excerpt &&
              <p> {post.excerpt.rendered} </p>
            }
          </div>
        )
      }
    });
  }

  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title="投稿の挿入"
          initialOpen={true}
        >
        <PanelRow>
          <SelectControl
            label='投稿セレクトメニュー'
            options={select_options}
            value={selectedPostId}
            onChange={(newId) => setAttributes({ selectedPostId: parseInt(newId) })}
          />
        </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  return (
    [
      getBlockControls(), //プレビューボタン
      getInspectorControls(),  //インスペクター
      <div className={ className }  >
      { isEditMode &&  // isEditMode が true の場合（編集 モード）
        <Fragment>
          <RichText
            className='myRichTextTitle'
            value={ myTitle }
            onChange={ (newTitle) => setAttributes({ myTitle: newTitle }) }
            tagName='h3'
            placeholder= 'タイトルを入力'
            keepPlaceholderOnFocus={true}
          />
          <RichText
            className='myRichTextContent'
            value={ myContent }
            onChange={ (newContent) => setAttributes({ myContent: newContent }) }
            tagName='div'
            multiline= 'p'
            placeholder= '文章を入力'
          />
          { post_content }
        </Fragment>
      }
      { !isEditMode &&   // isEditMode が false の場合（プレビュー モード）
        <ServerSideRender
          block={props.name}
          attributes={{
            myTitle: myTitle,
            myContent: myContent,
            selectedPostId: selectedPostId,
          }}
          className='my-custom-ssr' //ServerSideRender 用のクラスを追加
        />
      }
      </div>
    ]
  );
}