@wordpress/block-editor/build-module/hooks/anchor.js

Generic block editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { addFilter } from '@wordpress/hooks';
import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { hasBlockSupport } from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Platform } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { InspectorControls } from '../components';
import { useBlockEditingMode } from '../components/block-editing-mode';
/**
 * Regular expression matching invalid anchor characters for replacement.
 *
 * @type {RegExp}
 */

const ANCHOR_REGEX = /[\s#]/g;
const ANCHOR_SCHEMA = {
  type: 'string',
  source: 'attribute',
  attribute: 'id',
  selector: '*'
};
/**
 * Filters registered block settings, extending attributes with anchor using ID
 * of the first node.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */

export function addAttribute(settings) {
  var _settings$attributes$;

  // Allow blocks to specify their own attribute definition with default values if needed.
  if ('type' in ((_settings$attributes$ = settings.attributes?.anchor) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
    return settings;
  }

  if (hasBlockSupport(settings, 'anchor')) {
    // Gracefully handle if settings.attributes is undefined.
    settings.attributes = { ...settings.attributes,
      anchor: ANCHOR_SCHEMA
    };
  }

  return settings;
}
/**
 * Override the default edit UI to include a new block inspector control for
 * assigning the anchor ID, if block supports anchor.
 *
 * @param {WPComponent} BlockEdit Original component.
 *
 * @return {WPComponent} Wrapped component.
 */

export const withInspectorControl = createHigherOrderComponent(BlockEdit => {
  return props => {
    const hasAnchor = hasBlockSupport(props.name, 'anchor');
    const blockEditingMode = useBlockEditingMode();

    if (hasAnchor && props.isSelected) {
      const isWeb = Platform.OS === 'web';
      const textControl = createElement(TextControl, {
        __nextHasNoMarginBottom: true,
        className: "html-anchor-control",
        label: __('HTML anchor'),
        help: createElement(Fragment, null, __('Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'), isWeb && createElement(ExternalLink, {
          href: __('https://wordpress.org/documentation/article/page-jumps/')
        }, __('Learn more about anchors'))),
        value: props.attributes.anchor || '',
        placeholder: !isWeb ? __('Add an anchor') : null,
        onChange: nextValue => {
          nextValue = nextValue.replace(ANCHOR_REGEX, '-');
          props.setAttributes({
            anchor: nextValue
          });
        },
        autoCapitalize: "none",
        autoComplete: "off"
      });
      return createElement(Fragment, null, createElement(BlockEdit, props), isWeb && blockEditingMode === 'default' && createElement(InspectorControls, {
        group: "advanced"
      }, textControl), !isWeb && props.name === 'core/heading' && createElement(InspectorControls, null, createElement(PanelBody, {
        title: __('Heading settings')
      }, textControl)));
    }

    return createElement(BlockEdit, props);
  };
}, 'withInspectorControl');
/**
 * Override props assigned to save component to inject anchor ID, if block
 * supports anchor. This is only applied if the block's save result is an
 * element and not a markup string.
 *
 * @param {Object} extraProps Additional props applied to save element.
 * @param {Object} blockType  Block type.
 * @param {Object} attributes Current block attributes.
 *
 * @return {Object} Filtered props applied to save element.
 */

export function addSaveProps(extraProps, blockType, attributes) {
  if (hasBlockSupport(blockType, 'anchor')) {
    extraProps.id = attributes.anchor === '' ? null : attributes.anchor;
  }

  return extraProps;
}
addFilter('blocks.registerBlockType', 'core/anchor/attribute', addAttribute);
addFilter('editor.BlockEdit', 'core/editor/anchor/with-inspector-control', withInspectorControl);
addFilter('blocks.getSaveContent.extraProps', 'core/anchor/save-props', addSaveProps);
//# sourceMappingURL=anchor.js.map