@wordpress/block-editor/build/components/block-inspector/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _components = require("@wordpress/components");

var _data = require("@wordpress/data");

var _skipToSelectedBlock = _interopRequireDefault(require("../skip-to-selected-block"));

var _blockCard = _interopRequireDefault(require("../block-card"));

var _multiSelectionInspector = _interopRequireDefault(require("../multi-selection-inspector"));

var _blockVariationTransforms = _interopRequireDefault(require("../block-variation-transforms"));

var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));

var _store = require("../../store");

var _blockIcon = _interopRequireDefault(require("../block-icon"));

var _blockStyles = _interopRequireDefault(require("../block-styles"));

var _defaultStylePicker = _interopRequireDefault(require("../default-style-picker"));

var _inspectorControls = _interopRequireDefault(require("../inspector-controls"));

var _inspectorControlsTabs = _interopRequireDefault(require("../inspector-controls-tabs"));

var _useInspectorControlsTabs = _interopRequireDefault(require("../inspector-controls-tabs/use-inspector-controls-tabs"));

var _advancedControlsPanel = _interopRequireDefault(require("../inspector-controls-tabs/advanced-controls-panel"));

var _positionControlsPanel = _interopRequireDefault(require("../inspector-controls-tabs/position-controls-panel"));

var _useBlockInspectorAnimationSettings = _interopRequireDefault(require("./useBlockInspectorAnimationSettings"));

var _blockInfoSlotFill = _interopRequireDefault(require("../block-info-slot-fill"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function useContentBlocks(blockTypes, block) {
  const contentBlocksObjectAux = (0, _element.useMemo)(() => {
    return blockTypes.reduce((result, blockType) => {
      if (blockType.name !== 'core/list-item' && Object.entries(blockType.attributes).some(([, {
        __experimentalRole
      }]) => __experimentalRole === 'content')) {
        result[blockType.name] = true;
      }

      return result;
    }, {});
  }, [blockTypes]);
  const isContentBlock = (0, _element.useCallback)(blockName => {
    return !!contentBlocksObjectAux[blockName];
  }, [contentBlocksObjectAux]);
  return (0, _element.useMemo)(() => {
    return getContentBlocks([block], isContentBlock);
  }, [block, isContentBlock]);
}

function getContentBlocks(blocks, isContentBlock) {
  const result = [];

  for (const block of blocks) {
    if (isContentBlock(block.name)) {
      result.push(block);
    }

    result.push(...getContentBlocks(block.innerBlocks, isContentBlock));
  }

  return result;
}

function BlockNavigationButton({
  blockTypes,
  block,
  selectedBlock
}) {
  const {
    selectBlock
  } = (0, _data.useDispatch)(_store.store);
  const blockType = blockTypes.find(({
    name
  }) => name === block.name);
  const isSelected = selectedBlock && selectedBlock.clientId === block.clientId;
  return (0, _element.createElement)(_components.Button, {
    isPressed: isSelected,
    onClick: () => selectBlock(block.clientId)
  }, (0, _element.createElement)(_components.__experimentalHStack, {
    justify: "flex-start"
  }, (0, _element.createElement)(_blockIcon.default, {
    icon: blockType.icon
  }), (0, _element.createElement)(_components.FlexItem, null, blockType.title)));
}

function BlockInspectorLockedBlocks({
  topLevelLockedBlock
}) {
  const {
    blockTypes,
    block,
    selectedBlock
  } = (0, _data.useSelect)(select => {
    return {
      blockTypes: select(_blocks.store).getBlockTypes(),
      block: select(_store.store).getBlock(topLevelLockedBlock),
      selectedBlock: select(_store.store).getSelectedBlock()
    };
  }, [topLevelLockedBlock]);
  const blockInformation = (0, _useBlockDisplayInformation.default)(topLevelLockedBlock);
  const contentBlocks = useContentBlocks(blockTypes, block);
  return (0, _element.createElement)("div", {
    className: "block-editor-block-inspector"
  }, (0, _element.createElement)(_blockCard.default, (0, _extends2.default)({}, blockInformation, {
    className: blockInformation.isSynced && 'is-synced'
  })), (0, _element.createElement)(_blockVariationTransforms.default, {
    blockClientId: topLevelLockedBlock
  }), (0, _element.createElement)(_blockInfoSlotFill.default.Slot, null), (0, _element.createElement)(_components.__experimentalVStack, {
    spacing: 1,
    padding: 4,
    className: "block-editor-block-inspector__block-buttons-container"
  }, (0, _element.createElement)("h2", {
    className: "block-editor-block-card__title"
  }, (0, _i18n.__)('Content')), contentBlocks.map(contentBlock => (0, _element.createElement)(BlockNavigationButton, {
    selectedBlock: selectedBlock,
    key: contentBlock.clientId,
    block: contentBlock,
    blockTypes: blockTypes
  }))));
}

const BlockInspector = ({
  showNoBlockSelectedMessage = true
}) => {
  const {
    count,
    selectedBlockName,
    selectedBlockClientId,
    blockType,
    topLevelLockedBlock
  } = (0, _data.useSelect)(select => {
    const {
      getSelectedBlockClientId,
      getSelectedBlockCount,
      getBlockName,
      __unstableGetContentLockingParent,
      getTemplateLock
    } = select(_store.store);

    const _selectedBlockClientId = getSelectedBlockClientId();

    const _selectedBlockName = _selectedBlockClientId && getBlockName(_selectedBlockClientId);

    const _blockType = _selectedBlockName && (0, _blocks.getBlockType)(_selectedBlockName);

    return {
      count: getSelectedBlockCount(),
      selectedBlockClientId: _selectedBlockClientId,
      selectedBlockName: _selectedBlockName,
      blockType: _blockType,
      topLevelLockedBlock: __unstableGetContentLockingParent(_selectedBlockClientId) || (getTemplateLock(_selectedBlockClientId) === 'contentOnly' ? _selectedBlockClientId : undefined)
    };
  }, []);
  const availableTabs = (0, _useInspectorControlsTabs.default)(blockType?.name);
  const showTabs = availableTabs?.length > 1; // The block inspector animation settings will be completely
  // removed in the future to create an API which allows the block
  // inspector to transition between what it
  // displays based on the relationship between the selected block
  // and its parent, and only enable it if the parent is controlling
  // its children blocks.

  const blockInspectorAnimationSettings = (0, _useBlockInspectorAnimationSettings.default)(blockType, selectedBlockClientId);

  if (count > 1) {
    return (0, _element.createElement)("div", {
      className: "block-editor-block-inspector"
    }, (0, _element.createElement)(_multiSelectionInspector.default, null), showTabs ? (0, _element.createElement)(_inspectorControlsTabs.default, {
      tabs: availableTabs
    }) : (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inspectorControls.default.Slot, null), (0, _element.createElement)(_inspectorControls.default.Slot, {
      group: "color",
      label: (0, _i18n.__)('Color'),
      className: "color-block-support-panel__inner-wrapper"
    }), (0, _element.createElement)(_inspectorControls.default.Slot, {
      group: "typography",
      label: (0, _i18n.__)('Typography')
    }), (0, _element.createElement)(_inspectorControls.default.Slot, {
      group: "dimensions",
      label: (0, _i18n.__)('Dimensions')
    }), (0, _element.createElement)(_inspectorControls.default.Slot, {
      group: "border",
      label: (0, _i18n.__)('Border')
    }), (0, _element.createElement)(_inspectorControls.default.Slot, {
      group: "styles"
    })));
  }

  const isSelectedBlockUnregistered = selectedBlockName === (0, _blocks.getUnregisteredTypeHandlerName)();
  /*
   * If the selected block is of an unregistered type, avoid showing it as an actual selection
   * because we want the user to focus on the unregistered block warning, not block settings.
   */

  if (!blockType || !selectedBlockClientId || isSelectedBlockUnregistered) {
    if (showNoBlockSelectedMessage) {
      return (0, _element.createElement)("span", {
        className: "block-editor-block-inspector__no-blocks"
      }, (0, _i18n.__)('No block selected.'));
    }

    return null;
  }

  if (topLevelLockedBlock) {
    return (0, _element.createElement)(BlockInspectorLockedBlocks, {
      topLevelLockedBlock: topLevelLockedBlock
    });
  }

  return (0, _element.createElement)(BlockInspectorSingleBlockWrapper, {
    animate: blockInspectorAnimationSettings,
    wrapper: children => (0, _element.createElement)(AnimatedContainer, {
      blockInspectorAnimationSettings: blockInspectorAnimationSettings,
      selectedBlockClientId: selectedBlockClientId
    }, children)
  }, (0, _element.createElement)(BlockInspectorSingleBlock, {
    clientId: selectedBlockClientId,
    blockName: blockType.name
  }));
};

const BlockInspectorSingleBlockWrapper = ({
  animate,
  wrapper,
  children
}) => {
  return animate ? wrapper(children) : children;
};

const AnimatedContainer = ({
  blockInspectorAnimationSettings,
  selectedBlockClientId,
  children
}) => {
  const animationOrigin = blockInspectorAnimationSettings && blockInspectorAnimationSettings.enterDirection === 'leftToRight' ? -50 : 50;
  return (0, _element.createElement)(_components.__unstableMotion.div, {
    animate: {
      x: 0,
      opacity: 1,
      transition: {
        ease: 'easeInOut',
        duration: 0.14
      }
    },
    initial: {
      x: animationOrigin,
      opacity: 0
    },
    key: selectedBlockClientId
  }, children);
};

const BlockInspectorSingleBlock = ({
  clientId,
  blockName
}) => {
  const availableTabs = (0, _useInspectorControlsTabs.default)(blockName);
  const showTabs = availableTabs?.length > 1;
  const hasBlockStyles = (0, _data.useSelect)(select => {
    const {
      getBlockStyles
    } = select(_blocks.store);
    const blockStyles = getBlockStyles(blockName);
    return blockStyles && blockStyles.length > 0;
  }, [blockName]);
  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
  return (0, _element.createElement)("div", {
    className: "block-editor-block-inspector"
  }, (0, _element.createElement)(_blockCard.default, (0, _extends2.default)({}, blockInformation, {
    className: blockInformation.isSynced && 'is-synced'
  })), (0, _element.createElement)(_blockVariationTransforms.default, {
    blockClientId: clientId
  }), (0, _element.createElement)(_blockInfoSlotFill.default.Slot, null), showTabs && (0, _element.createElement)(_inspectorControlsTabs.default, {
    hasBlockStyles: hasBlockStyles,
    clientId: clientId,
    blockName: blockName,
    tabs: availableTabs
  }), !showTabs && (0, _element.createElement)(_element.Fragment, null, hasBlockStyles && (0, _element.createElement)("div", null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Styles')
  }, (0, _element.createElement)(_blockStyles.default, {
    clientId: clientId
  }), (0, _blocks.hasBlockSupport)(blockName, 'defaultStylePicker', true) && (0, _element.createElement)(_defaultStylePicker.default, {
    blockName: blockName
  }))), (0, _element.createElement)(_inspectorControls.default.Slot, null), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "list"
  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "color",
    label: (0, _i18n.__)('Color'),
    className: "color-block-support-panel__inner-wrapper"
  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "typography",
    label: (0, _i18n.__)('Typography')
  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "dimensions",
    label: (0, _i18n.__)('Dimensions')
  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "border",
    label: (0, _i18n.__)('Border')
  }), (0, _element.createElement)(_inspectorControls.default.Slot, {
    group: "styles"
  }), (0, _element.createElement)(_positionControlsPanel.default, null), (0, _element.createElement)("div", null, (0, _element.createElement)(_advancedControlsPanel.default, null))), (0, _element.createElement)(_skipToSelectedBlock.default, {
    key: "back"
  }));
};
/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
 */


var _default = BlockInspector;
exports.default = _default;
//# sourceMappingURL=index.js.map