Web Design Leaves

//属性を設定
attributes: {
  //RichText のタイトル
  title: {
    type: 'array',
    source: 'children',
    selector: '.card_title',
  },
  //RichText のテキスト（文章）
  body: {
    type: 'array',
    source: 'children',
    selector: '.card_body'
  },
  //MediaUpload の value の値
  mediaID: {
    type: 'number',
    default: 0
  },
  //img の src に指定する URL
  imageUrl: {
    type: 'string',
    source: 'attribute',
    attribute: 'src',
    selector: '.card_image'
  },
  //img の alt 属性の値
  imageAlt: {
    type: 'string',
    source: 'attribute',
    attribute: 'alt',
    selector: '.card_image'
  },
},

import { RichText, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import './editor.scss';

export default function Edit( props ) {
  //分割代入を使って props 経由でプロパティを変数に代入
  const { className, attributes, setAttributes} = props;

  //選択された画像の情報（alt 属性、URL、ID）を更新する関数
  const onSelectImage = ( media ) => {
    setAttributes( {
      imageAlt: media.alt,
      imageUrl: media.url,
      mediaID: media.id
    } );
  };

  //メディアライブラリを開くボタンをレンダリングする関数
  const getImageButton = (open) => {
    if(attributes.imageUrl) {
      return (
        <img
          src={ attributes.imageUrl }
          onClick={ open }
          className="image"
          alt="アップロード画像"
        />
      );
    }
    else {
      return (
        <div className="button-container">
          <Button
            onClick={ open }
            className="button button-large"
          >
            画像をアップロード
          </Button>
        </div>
      );
    }
  };

  //画像を削除する（メディアをリセットする）関数
  const removeMedia = () => {
    setAttributes({
      mediaID: 0,
      imageUrl: '',
      imageAlt: ''
    });
  }

  return (
    <div className={"container " + className}>
      <MediaUploadCheck>
        <MediaUpload
          onSelect={ onSelectImage }
          allowedTypes={ ['image'] }
          value={ attributes.mediaID }
          render={ ({ open }) => getImageButton(open) }
        />
      </MediaUploadCheck>
      { attributes.mediaID != 0  &&
        <MediaUploadCheck>
          <Button
            onClick={removeMedia}
            isLink
            isDestructive
            className="removeImage">画像を削除
          </Button>
        </MediaUploadCheck>
      }
      <RichText
        onChange={ value => setAttributes({ title: value }) }
        value={ attributes.title }
        tagName='h3'
        placeholder="カードのタイトル"
        keepPlaceholderOnFocus={true}
        className="heading"
      />
      <RichText
        onChange={ value => setAttributes({ body: value }) }
        value={ attributes.body }
        multiline="p"
        placeholder="カードのテキスト"
      />
    </div>
  );
}

import { RichText, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

const { className, attributes, setAttributes} = props;

const onSelectImage = ( media ) => {
  setAttributes( {
    imageAlt: media.alt,
    imageUrl: media.url,
    mediaID: media.id
  } );
};

const getImageButton = (open) => {
  if(attributes.imageUrl) { //属性 imageUrl が取得されていれば img 要素をレンダリング
    return (
      <img
        src={ attributes.imageUrl }
        onClick={ open }
        className="image"
        alt="アップロード画像"
      />
    );
  }
  else { //属性 imageUrl が取得されていなければ、Button コンポーネントでボタンをレンダリング
    return (
      <div className="button-container">
        <Button
          onClick={ open }
          className="button button-large"
        >
          画像をアップロード
        </Button>
      </div>
    );
  }
};

const removeMedia = () => {
  setAttributes({
    mediaID: 0,
    imageUrl: '',
    imageAlt: ''
  });
}

return (
  <div className={"container " + className}>
    <MediaUploadCheck>
      <MediaUpload
        onSelect={ onSelectImage }
        allowedTypes={ ['image'] } //選択できるメディアのタイプを配列で指定
        value={ attributes.mediaID } //選択したメディアの Media ID
        render={ ({ open }) => getImageButton(open) }
      />
    </MediaUploadCheck>
    { attributes.mediaID != 0  &&
      <MediaUploadCheck>
        <Button
          onClick={removeMedia}
          isLink  //アンカースタイルのボタン
          isDestructive //赤いテキストベースのスタイル
          className="removeImage">画像を削除
        </Button>
      </MediaUploadCheck>
    }
    <RichText
      onChange={ value => setAttributes({ title: value }) }
      value={ attributes.title }
      tagName='h3'
      placeholder="カードのタイトル"
      keepPlaceholderOnFocus={true}
      className="heading"
    />
    <RichText
      onChange={ value => setAttributes({ body: value }) }
      value={ attributes.body }
      multiline="p"
      placeholder="カードのテキスト"
    />
  </div>
);

export default function save( { attributes } ) {

  //画像をレンダリングする関数
  const cardImage = (src, alt) => {
    if(!src) return null;

    if(alt) {
      return (
        <img
          className="card_image"
          src={ src }
          alt={ alt }
        />
      );
    }

    //alt 属性が設定されていないので、スクリーンリーダーでは aria-hidden で隠す
    return (
      <img
        className="card_image"
        src={ src }
        alt=""
        aria-hidden="true"
      />
    );
  };

  return (
    <div className="card">
      { cardImage(attributes.imageUrl, attributes.imageAlt) }
      <div className="card_content">
        <h3 className="card_title">{ attributes.title }</h3>
        <div className="card_body">
          { attributes.body }
        </div>
      </div>
    </div>
  );
}

//画像をレンダリングする関数
const cardImage = (src, alt) => {
  if(!src) return null;

  if(alt) {
    return (
      <img
        className="card_image"
        src={ src }
        alt={ alt }
      />
    );
  }

  //alt 属性が設定されていないので、スクリーンリーダーでは aria-hidden で隠す
  return (
    <img
      className="card_image"
      src={ src }
      alt=""
      aria-hidden="true"
    />
  );
};

return (
  <div className="card">
    { cardImage(attributes.imageUrl, attributes.imageAlt) }
    <div className="card_content">
      <h3 className="card_title">{ attributes.title }</h3>
      <div className="card_body">
        { attributes.body }
      </div>
    </div>
  </div>
);

$gray: #cccccc;
$off-white: #f1f1f1;

.container .image {
  cursor: pointer;
}

.container {
  border: 1px solid $gray;
  padding: 1rem;
}

.button-container {
  text-align: center;
  padding: 22% 0;
  background: $off-white;
  border: 1px solid $gray;
  border-radius: 2px;
  margin: 0 0 1.2rem 0;
}

.heading {
  font-size: 1.5rem;
  font-weight: 600;
}

.image {
  height: 10rem;
  width: 100%;
  object-fit: cover;
}

<img
  src={ attributes.imageUrl }
  onClick={ open }
  className="image"
  alt="アップロード画像"
/>

.wp-block-wdl-custom-card {
  background-color: #fefefe;
  color: #999;
  padding: 10px;
}

$ npm run build  return  //ビルドを実行

$ npm run build

> custom-card@0.1.0 build /Applications/MAMP/htdocs/blocks/wp-content/plugins/custom-card
> wp-scripts build

Hash: c5d89b50a9d2bca2d1fc
Version: webpack 4.44.2
Time: 1963ms
Built at: 2020/10/08 10:19:10
          Asset       Size  Chunks             Chunk Names
index.asset.php  171 bytes       0  [emitted]  index
      index.css  320 bytes       0  [emitted]  index
       index.js   4.02 KiB       0  [emitted]  index
style-index.css   77 bytes       1  [emitted]  style-index
Entrypoint index = style-index.css style-index.js index.css index.js index.asset.php
[0] external {"this":["wp","element"]} 42 bytes {0} [built]
[1] external {"this":["wp","blockEditor"]} 42 bytes {0} [built]
[2] external {"this":["wp","components"]} 42 bytes {0} [built]
[3] external {"this":["wp","blocks"]} 42 bytes {0} [built]
[4] ./src/style.scss 39 bytes {1} [built]
[5] ./src/editor.scss 39 bytes {0} [built]
[6] ./src/index.js + 2 modules 4.7 KiB {0} [built]
    | ./src/index.js 1.25 KiB [built]
    | ./src/edit.js 2.54 KiB [built]
    | ./src/save.js 902 bytes [built]
    + 2 hidden modules

attributes: {
  ・・・中略・・・
  //タイトルの要素（h2〜h5）
  headingElem: {
    type: 'string',
    default: 'h3'
  },
},