扩展古腾堡核心/图像

Question

我已经为 Gutenberg 设置了我的 JavaScript 环境，现在正在尝试扩展核心/图像块以包装 HTML。

wp.hooks.addFilter(
  'blocks.getSaveElement',
  'slug/modify-get-save-content-extra-props',
  modifyGetSaveContentExtraProps
);

/**
 * Wrap image block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveContentExtraProps(element, blockType, attributes) {
  // Check if that is not an image block.
  if (blockType.name !== 'core/image') {
    return element;
  }
  // Return the block with div wrapper.
  return (
    <div className='nice-img'>
      <a href={attributes.url}>
        {element}
      </a>
    </div >
  );
}

除了这段代码在控制台中抛出大量块验证错误（编辑帖子时）之外，该代码包装了整个{element}，其中包括标题。我需要以某种方式获得{element}之外的标题。

我在这里在黑暗中拍摄。谁能指出我正确的方向？

Answer 1

好吧，我终于到了那里。扩展核心映像基本上不是要走的路。相反，您最好的选择是创建一个新块。如果你很少接触 React，这是一个陡峭的学习曲线。

本教程帮助很大：https://css-tricks.com/learning-gutenberg-7-building-our-block-custom-card-block/

以下代码使用自定义图像尺寸为我完成了这项工作。就我而言，我也在使用灯箱插件。

// Used to create the $asset_file for functions.php enqueue
import editor from '@wordpress/editor'
import blocks from '@wordpress/blocks'
import components from '@wordpress/components'

const {MediaUpload, PlainText} = wp.editor;
const {registerBlockType} = wp.blocks;
const {Button} = wp.components;

registerBlockType('card-block/main', {
  title: 'Fancy Image',
  icon: <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M448 384H64v-48l71.51-71.52a12 12 0 0 1 17 0L208 320l135.51-135.52a12 12 0 0 1 17 0L448 272z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M464 64H48a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-352 56a56 56 0 1 1-56 56 56 56 0 0 1 56-56zm336 264H64v-48l71.51-71.52a12 12 0 0 1 17 0L208 320l135.51-135.52a12 12 0 0 1 17 0L448 272z"></path></g></svg>,
  category: 'common',
  attributes: {
    title: {
      source: 'text',
      selector: '.card__title'
    },
    body: {
      type: 'array',
      source: 'children',
      selector: '.card__body'
    },
    imageAlt: {
      attribute: 'alt',
      selector: '.card__image'
    },
    imageHref: {
      attribute: 'href',
      selector: '.card__image'
    },
    imageUrl: {
      attribute: 'src',
      selector: '.card__image'
    }
  },
  edit({attributes, className, setAttributes}) {
    const getImageButton = (openEvent) => {
      if (attributes.imageUrl) {
        return (
          <img
            src={attributes.imageUrl}
            onClick={openEvent}
            className="image"
          />
        );
      }
      else {
        return (
          <div className="button-container">
            <Button
              onClick={openEvent}
              className="button button-large"
            >
              Pick an image
        </Button>
          </div>
        );
      }
    };
    return (<div className="container">
      <MediaUpload
        onSelect={media => {setAttributes({imageAlt: media.alt, imageUrl: media.sizes['post-image'].url, imageHref: media.url});}}
        type="image"
        value={attributes.imageID}
        render={({open}) => getImageButton(open)}
      />
      <PlainText
        onChange={content => setAttributes({title: content})}
        value={attributes.title}
        placeholder="Image caption"
      />
    </div>
    );
  },
  save({attributes}) {

    const cardImage = (src, alt) => {
      if (!src) return null;

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

      // No alt set, so let's hide it from screen readers
      return (
        <img
          className="card__image"
          src={src}
          alt=""
          aria-hidden="true"
        />
      );
    };

    return (
      <div className="nice-img">
        <figure className="wp-block-image">
          <a data-lightbox="gallery" href={attributes.imageHref}>
            {cardImage(attributes.imageUrl, attributes.imageAlt)}
          </a>
          <figcaption>{attributes.title}</figcaption>
        </figure>
      </div>
    );
  }
});