@wordpress/block-editor/build-module/components/list-view/block.js

Generic block editor.

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

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

import { hasBlockSupport } from '@wordpress/blocks';
import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { moreVertical } from '@wordpress/icons';
import { useState, useRef, useEffect, useCallback, memo } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { sprintf, __ } from '@wordpress/i18n';
import { focus } from '@wordpress/dom';
/**
 * Internal dependencies
 */

import ListViewLeaf from './leaf';
import useListViewScrollIntoView from './use-list-view-scroll-into-view';
import { BlockMoverUpButton, BlockMoverDownButton } from '../block-mover/button';
import ListViewBlockContents from './block-contents';
import { useListViewContext } from './context';
import { getBlockPositionDescription } from './utils';
import { store as blockEditorStore } from '../../store';
import useBlockDisplayInformation from '../use-block-display-information';
import { useBlockLock } from '../block-lock';
import { unlock } from '../../lock-unlock';
import AriaReferencedText from './aria-referenced-text';

function ListViewBlock({
  block: {
    clientId
  },
  isDragged,
  isSelected,
  isBranchSelected,
  selectBlock,
  position,
  level,
  rowCount,
  siblingBlockCount,
  showBlockMovers,
  path,
  isExpanded,
  selectedClientIds,
  isSyncedBranch
}) {
  const cellRef = useRef(null);
  const rowRef = useRef(null);
  const [isHovered, setIsHovered] = useState(false);
  const {
    isLocked,
    canEdit
  } = useBlockLock(clientId);
  const isFirstSelectedBlock = isSelected && selectedClientIds[0] === clientId;
  const isLastSelectedBlock = isSelected && selectedClientIds[selectedClientIds.length - 1] === clientId;
  const {
    toggleBlockHighlight
  } = useDispatch(blockEditorStore);
  const blockInformation = useBlockDisplayInformation(clientId);

  const blockTitle = blockInformation?.title || __('Untitled');

  const block = useSelect(select => select(blockEditorStore).getBlock(clientId), [clientId]);
  const blockName = useSelect(select => select(blockEditorStore).getBlockName(clientId), [clientId]);
  const blockEditingMode = useSelect(select => unlock(select(blockEditorStore)).getBlockEditingMode(clientId), [clientId]);
  const showBlockActions = // When a block hides its toolbar it also hides the block settings menu,
  // since that menu is part of the toolbar in the editor canvas.
  // List View respects this by also hiding the block settings menu.
  hasBlockSupport(blockName, '__experimentalToolbar', true) && // Don't show the settings menu if block is disabled or content only.
  blockEditingMode === 'default';
  const instanceId = useInstanceId(ListViewBlock);
  const descriptionId = `list-view-block-select-button__${instanceId}`;
  const blockPositionDescription = getBlockPositionDescription(position, siblingBlockCount, level);
  const blockAriaLabel = isLocked ? sprintf( // translators: %s: The title of the block. This string indicates a link to select the locked block.
  __('%s (locked)'), blockTitle) : blockTitle;
  const settingsAriaLabel = sprintf( // translators: %s: The title of the block.
  __('Options for %s'), blockTitle);
  const {
    isTreeGridMounted,
    expand,
    collapse,
    BlockSettingsMenu,
    listViewInstanceId,
    expandedState,
    setInsertedBlock,
    treeGridElementRef
  } = useListViewContext();
  const hasSiblings = siblingBlockCount > 0;
  const hasRenderedMovers = showBlockMovers && hasSiblings;
  const moverCellClassName = classnames('block-editor-list-view-block__mover-cell', {
    'is-visible': isHovered || isSelected
  });
  const listViewBlockSettingsClassName = classnames('block-editor-list-view-block__menu-cell', {
    'is-visible': isHovered || isFirstSelectedBlock
  }); // If ListView has experimental features related to the Persistent List View,
  // only focus the selected list item on mount; otherwise the list would always
  // try to steal the focus from the editor canvas.

  useEffect(() => {
    if (!isTreeGridMounted && isSelected) {
      cellRef.current.focus();
    }
  }, []);
  const onMouseEnter = useCallback(() => {
    setIsHovered(true);
    toggleBlockHighlight(clientId, true);
  }, [clientId, setIsHovered, toggleBlockHighlight]);
  const onMouseLeave = useCallback(() => {
    setIsHovered(false);
    toggleBlockHighlight(clientId, false);
  }, [clientId, setIsHovered, toggleBlockHighlight]);
  const selectEditorBlock = useCallback(event => {
    selectBlock(event, clientId);
    event.preventDefault();
  }, [clientId, selectBlock]);
  const updateFocusAndSelection = useCallback((focusClientId, shouldSelectBlock) => {
    if (shouldSelectBlock) {
      selectBlock(undefined, focusClientId, null, null);
    }

    const getFocusElement = () => {
      const row = treeGridElementRef.current?.querySelector(`[role=row][data-block="${focusClientId}"]`);
      if (!row) return null; // Focus the first focusable in the row, which is the ListViewBlockSelectButton.

      return focus.focusable.find(row)[0];
    };

    let focusElement = getFocusElement();

    if (focusElement) {
      focusElement.focus();
    } else {
      // The element hasn't been painted yet. Defer focusing on the next frame.
      // This could happen when all blocks have been deleted and the default block
      // hasn't been added to the editor yet.
      window.requestAnimationFrame(() => {
        focusElement = getFocusElement(); // Ignore if the element still doesn't exist.

        if (focusElement) {
          focusElement.focus();
        }
      });
    }
  }, [selectBlock, treeGridElementRef]);
  const toggleExpanded = useCallback(event => {
    // Prevent shift+click from opening link in a new window when toggling.
    event.preventDefault();
    event.stopPropagation();

    if (isExpanded === true) {
      collapse(clientId);
    } else if (isExpanded === false) {
      expand(clientId);
    }
  }, [clientId, expand, collapse, isExpanded]);
  let colSpan;

  if (hasRenderedMovers) {
    colSpan = 2;
  } else if (!showBlockActions) {
    colSpan = 3;
  }

  const classes = classnames({
    'is-selected': isSelected,
    'is-first-selected': isFirstSelectedBlock,
    'is-last-selected': isLastSelectedBlock,
    'is-branch-selected': isBranchSelected,
    'is-synced-branch': isSyncedBranch,
    'is-dragging': isDragged,
    'has-single-cell': !showBlockActions,
    'is-synced': blockInformation?.isSynced
  }); // Only include all selected blocks if the currently clicked on block
  // is one of the selected blocks. This ensures that if a user attempts
  // to alter a block that isn't part of the selection, they're still able
  // to do so.

  const dropdownClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId]; // Pass in a ref to the row, so that it can be scrolled
  // into view when selected. For long lists, the placeholder for the
  // selected block is also observed, within ListViewLeafPlaceholder.

  useListViewScrollIntoView({
    isSelected,
    rowItemRef: rowRef,
    selectedClientIds
  }); // Detect if there is a block in the canvas currently being edited and multi-selection is not happening.

  const currentlyEditingBlockInCanvas = isSelected && selectedClientIds.length === 1;
  return createElement(ListViewLeaf, {
    className: classes,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onFocus: onMouseEnter,
    onBlur: onMouseLeave,
    level: level,
    position: position,
    rowCount: rowCount,
    path: path,
    id: `list-view-${listViewInstanceId}-block-${clientId}`,
    "data-block": clientId,
    "data-expanded": canEdit ? isExpanded : undefined,
    ref: rowRef
  }, createElement(TreeGridCell, {
    className: "block-editor-list-view-block__contents-cell",
    colSpan: colSpan,
    ref: cellRef,
    "aria-selected": !!isSelected
  }, ({
    ref,
    tabIndex,
    onFocus
  }) => createElement("div", {
    className: "block-editor-list-view-block__contents-container"
  }, createElement(ListViewBlockContents, {
    block: block,
    onClick: selectEditorBlock,
    onToggleExpanded: toggleExpanded,
    isSelected: isSelected,
    position: position,
    siblingBlockCount: siblingBlockCount,
    level: level,
    ref: ref,
    tabIndex: currentlyEditingBlockInCanvas ? 0 : tabIndex,
    onFocus: onFocus,
    isExpanded: canEdit ? isExpanded : undefined,
    selectedClientIds: selectedClientIds,
    ariaLabel: blockAriaLabel,
    ariaDescribedBy: descriptionId,
    updateFocusAndSelection: updateFocusAndSelection
  }), createElement(AriaReferencedText, {
    id: descriptionId
  }, blockPositionDescription))), hasRenderedMovers && createElement(Fragment, null, createElement(TreeGridCell, {
    className: moverCellClassName,
    withoutGridItem: true
  }, createElement(TreeGridItem, null, ({
    ref,
    tabIndex,
    onFocus
  }) => createElement(BlockMoverUpButton, {
    orientation: "vertical",
    clientIds: [clientId],
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus
  })), createElement(TreeGridItem, null, ({
    ref,
    tabIndex,
    onFocus
  }) => createElement(BlockMoverDownButton, {
    orientation: "vertical",
    clientIds: [clientId],
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus
  })))), showBlockActions && BlockSettingsMenu && createElement(TreeGridCell, {
    className: listViewBlockSettingsClassName,
    "aria-selected": !!isSelected
  }, ({
    ref,
    tabIndex,
    onFocus
  }) => createElement(BlockSettingsMenu, {
    clientIds: dropdownClientIds,
    block: block,
    icon: moreVertical,
    label: settingsAriaLabel,
    toggleProps: {
      ref,
      className: 'block-editor-list-view-block__menu',
      tabIndex,
      onFocus
    },
    disableOpenOnArrowDown: true,
    expand: expand,
    expandedState: expandedState,
    setInsertedBlock: setInsertedBlock,
    __experimentalSelectBlock: updateFocusAndSelection
  })));
}

export default memo(ListViewBlock);
//# sourceMappingURL=block.js.map