@wordpress/block-library/build-module/quote/edit.js

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classNames from 'classnames';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { AlignmentControl, BlockControls, RichText, useBlockProps, useInnerBlocksProps, store as blockEditorStore } from '@wordpress/block-editor';
import { BlockQuotation } from '@wordpress/components';
import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { Platform, useEffect } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
 * Internal dependencies
 */

import { migrateToQuoteV2 } from './deprecated';
const isWebPlatform = Platform.OS === 'web';
const TEMPLATE = [['core/paragraph', {}]];
/**
 * At the moment, deprecations don't handle create blocks from attributes
 * (like when using CPT templates). For this reason, this hook is necessary
 * to avoid breaking templates using the old quote block format.
 *
 * @param {Object} attributes Block attributes.
 * @param {string} clientId   Block client ID.
 */

const useMigrateOnLoad = (attributes, clientId) => {
  const registry = useRegistry();
  const {
    updateBlockAttributes,
    replaceInnerBlocks
  } = useDispatch(blockEditorStore);
  useEffect(() => {
    // As soon as the block is loaded, migrate it to the new version.
    if (!attributes.value) {
      // No need to migrate if it doesn't have the value attribute.
      return;
    }

    const [newAttributes, newInnerBlocks] = migrateToQuoteV2(attributes);
    deprecated('Value attribute on the quote block', {
      since: '6.0',
      version: '6.5',
      alternative: 'inner blocks'
    });
    registry.batch(() => {
      updateBlockAttributes(clientId, newAttributes);
      replaceInnerBlocks(clientId, newInnerBlocks);
    });
  }, [attributes.value]);
};

export default function QuoteEdit(_ref) {
  let {
    attributes,
    setAttributes,
    insertBlocksAfter,
    clientId,
    className,
    style
  } = _ref;
  const {
    align,
    citation
  } = attributes;
  useMigrateOnLoad(attributes, clientId);
  const hasSelection = useSelect(select => {
    const {
      isBlockSelected,
      hasSelectedInnerBlock
    } = select(blockEditorStore);
    return hasSelectedInnerBlock(clientId) || isBlockSelected(clientId);
  }, []);
  const blockProps = useBlockProps({
    className: classNames(className, {
      [`has-text-align-${align}`]: align
    }),
    ...(!isWebPlatform && {
      style
    })
  });
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    template: TEMPLATE,
    templateInsertUpdatesSelection: true
  });
  return createElement(Fragment, null, createElement(BlockControls, {
    group: "block"
  }, createElement(AlignmentControl, {
    value: align,
    onChange: nextAlign => {
      setAttributes({
        align: nextAlign
      });
    }
  })), createElement(BlockQuotation, innerBlocksProps, innerBlocksProps.children, (!RichText.isEmpty(citation) || hasSelection) && createElement(RichText, _extends({
    identifier: "citation",
    tagName: isWebPlatform ? 'cite' : undefined,
    style: {
      display: 'block'
    },
    value: citation,
    onChange: nextCitation => {
      setAttributes({
        citation: nextCitation
      });
    },
    __unstableMobileNoFocusOnMount: true,
    "aria-label": __('Quote citation'),
    placeholder: // translators: placeholder text used for the
    // citation
    __('Add citation'),
    className: "wp-block-quote__citation",
    __unstableOnSplitAtEnd: () => insertBlocksAfter(createBlock(getDefaultBlockName()))
  }, !isWebPlatform ? {
    textAlign: align
  } : {}))));
}
//# sourceMappingURL=edit.js.map