Question

我已经为Gutenberg设置了JavaScript环境，现在正尝试扩展core / image块以包装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>
    );
  }
});

扩展古腾堡核心/图像

1 个答案: