@wordpress/editor/build-module/components/commands/index.js

Enhanced block editor for WordPress posts.

/**
 * WordPress dependencies
 */
import { useSelect, useDispatch } from '@wordpress/data';
import { __, isRTL } from '@wordpress/i18n';
import { blockDefault, code, drawerLeft, drawerRight, edit, formatListBullets, listView, external, keyboard, symbol } from '@wordpress/icons';
import { useCommandLoader } from '@wordpress/commands';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as noticesStore } from '@wordpress/notices';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { store as interfaceStore } from '@wordpress/interface';

/**
 * Internal dependencies
 */
import { store as editorStore } from '../../store';
import { PATTERN_POST_TYPE } from '../../store/constants';
import { modalName as patternRenameModalName } from '../pattern-rename-modal';
import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
function useEditorCommandLoader() {
  const {
    editorMode,
    isListViewOpen,
    showBlockBreadcrumbs,
    isDistractionFree,
    isTopToolbar,
    isFocusMode,
    isPreviewMode,
    isViewable,
    isCodeEditingEnabled,
    isRichEditingEnabled,
    isPublishSidebarEnabled
  } = useSelect(select => {
    var _get, _getPostType$viewable;
    const {
      get
    } = select(preferencesStore);
    const {
      isListViewOpened,
      getCurrentPostType,
      getEditorSettings
    } = select(editorStore);
    const {
      getSettings
    } = select(blockEditorStore);
    const {
      getPostType
    } = select(coreStore);
    return {
      editorMode: (_get = get('core', 'editorMode')) !== null && _get !== void 0 ? _get : 'visual',
      isListViewOpen: isListViewOpened(),
      showBlockBreadcrumbs: get('core', 'showBlockBreadcrumbs'),
      isDistractionFree: get('core', 'distractionFree'),
      isFocusMode: get('core', 'focusMode'),
      isTopToolbar: get('core', 'fixedToolbar'),
      isPreviewMode: getSettings().__unstableIsPreviewMode,
      isViewable: (_getPostType$viewable = getPostType(getCurrentPostType())?.viewable) !== null && _getPostType$viewable !== void 0 ? _getPostType$viewable : false,
      isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
      isRichEditingEnabled: getEditorSettings().richEditingEnabled,
      isPublishSidebarEnabled: select(editorStore).isPublishSidebarEnabled()
    };
  }, []);
  const {
    getActiveComplementaryArea
  } = useSelect(interfaceStore);
  const {
    toggle
  } = useDispatch(preferencesStore);
  const {
    createInfoNotice
  } = useDispatch(noticesStore);
  const {
    __unstableSaveForPreview,
    setIsListViewOpened,
    switchEditorMode,
    toggleDistractionFree
  } = useDispatch(editorStore);
  const {
    openModal,
    enableComplementaryArea,
    disableComplementaryArea
  } = useDispatch(interfaceStore);
  const {
    getCurrentPostId
  } = useSelect(editorStore);
  const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
  if (isPreviewMode) {
    return {
      commands: [],
      isLoading: false
    };
  }
  const commands = [];
  commands.push({
    name: 'core/open-shortcut-help',
    label: __('Keyboard shortcuts'),
    icon: keyboard,
    callback: ({
      close
    }) => {
      close();
      openModal('editor/keyboard-shortcut-help');
    }
  });
  commands.push({
    name: 'core/toggle-distraction-free',
    label: isDistractionFree ? __('Exit Distraction Free') : __('Enter Distraction Free'),
    callback: ({
      close
    }) => {
      toggleDistractionFree();
      close();
    }
  });
  commands.push({
    name: 'core/open-preferences',
    label: __('Editor preferences'),
    callback: ({
      close
    }) => {
      close();
      openModal('editor/preferences');
    }
  });
  commands.push({
    name: 'core/toggle-spotlight-mode',
    label: __('Toggle spotlight'),
    callback: ({
      close
    }) => {
      toggle('core', 'focusMode');
      close();
      createInfoNotice(isFocusMode ? __('Spotlight off.') : __('Spotlight on.'), {
        id: 'core/editor/toggle-spotlight-mode/notice',
        type: 'snackbar',
        actions: [{
          label: __('Undo'),
          onClick: () => {
            toggle('core', 'focusMode');
          }
        }]
      });
    }
  });
  commands.push({
    name: 'core/toggle-list-view',
    label: isListViewOpen ? __('Close List View') : __('Open List View'),
    icon: listView,
    callback: ({
      close
    }) => {
      setIsListViewOpened(!isListViewOpen);
      close();
      createInfoNotice(isListViewOpen ? __('List View off.') : __('List View on.'), {
        id: 'core/editor/toggle-list-view/notice',
        type: 'snackbar'
      });
    }
  });
  commands.push({
    name: 'core/toggle-top-toolbar',
    label: __('Toggle top toolbar'),
    callback: ({
      close
    }) => {
      toggle('core', 'fixedToolbar');
      if (isDistractionFree) {
        toggleDistractionFree();
      }
      close();
      createInfoNotice(isTopToolbar ? __('Top toolbar off.') : __('Top toolbar on.'), {
        id: 'core/editor/toggle-top-toolbar/notice',
        type: 'snackbar',
        actions: [{
          label: __('Undo'),
          onClick: () => {
            toggle('core', 'fixedToolbar');
          }
        }]
      });
    }
  });
  if (allowSwitchEditorMode) {
    commands.push({
      name: 'core/toggle-code-editor',
      label: editorMode === 'visual' ? __('Open code editor') : __('Exit code editor'),
      icon: code,
      callback: ({
        close
      }) => {
        switchEditorMode(editorMode === 'visual' ? 'text' : 'visual');
        close();
      }
    });
  }
  commands.push({
    name: 'core/toggle-breadcrumbs',
    label: showBlockBreadcrumbs ? __('Hide block breadcrumbs') : __('Show block breadcrumbs'),
    callback: ({
      close
    }) => {
      toggle('core', 'showBlockBreadcrumbs');
      close();
      createInfoNotice(showBlockBreadcrumbs ? __('Breadcrumbs hidden.') : __('Breadcrumbs visible.'), {
        id: 'core/editor/toggle-breadcrumbs/notice',
        type: 'snackbar'
      });
    }
  });
  commands.push({
    name: 'core/open-settings-sidebar',
    label: __('Toggle settings sidebar'),
    icon: isRTL() ? drawerLeft : drawerRight,
    callback: ({
      close
    }) => {
      const activeSidebar = getActiveComplementaryArea('core');
      close();
      if (activeSidebar === 'edit-post/document') {
        disableComplementaryArea('core');
      } else {
        enableComplementaryArea('core', 'edit-post/document');
      }
    }
  });
  commands.push({
    name: 'core/open-block-inspector',
    label: __('Toggle block inspector'),
    icon: blockDefault,
    callback: ({
      close
    }) => {
      const activeSidebar = getActiveComplementaryArea('core');
      close();
      if (activeSidebar === 'edit-post/block') {
        disableComplementaryArea('core');
      } else {
        enableComplementaryArea('core', 'edit-post/block');
      }
    }
  });
  commands.push({
    name: 'core/toggle-publish-sidebar',
    label: isPublishSidebarEnabled ? __('Disable pre-publish checks') : __('Enable pre-publish checks'),
    icon: formatListBullets,
    callback: ({
      close
    }) => {
      close();
      toggle('core', 'isPublishSidebarEnabled');
      createInfoNotice(isPublishSidebarEnabled ? __('Pre-publish checks disabled.') : __('Pre-publish checks enabled.'), {
        id: 'core/editor/publish-sidebar/notice',
        type: 'snackbar'
      });
    }
  });
  if (isViewable) {
    commands.push({
      name: 'core/preview-link',
      label: __('Preview in a new tab'),
      icon: external,
      callback: async ({
        close
      }) => {
        close();
        const postId = getCurrentPostId();
        const link = await __unstableSaveForPreview();
        window.open(link, `wp-preview-${postId}`);
      }
    });
  }
  return {
    commands,
    isLoading: false
  };
}
function useEditedEntityContextualCommands() {
  const {
    postType
  } = useSelect(select => {
    const {
      getCurrentPostType
    } = select(editorStore);
    return {
      postType: getCurrentPostType()
    };
  }, []);
  const {
    openModal
  } = useDispatch(interfaceStore);
  const commands = [];
  if (postType === PATTERN_POST_TYPE) {
    commands.push({
      name: 'core/rename-pattern',
      label: __('Rename pattern'),
      icon: edit,
      callback: ({
        close
      }) => {
        openModal(patternRenameModalName);
        close();
      }
    });
    commands.push({
      name: 'core/duplicate-pattern',
      label: __('Duplicate pattern'),
      icon: symbol,
      callback: ({
        close
      }) => {
        openModal(patternDuplicateModalName);
        close();
      }
    });
  }
  return {
    isLoading: false,
    commands
  };
}
export default function useCommands() {
  useCommandLoader({
    name: 'core/editor/edit-ui',
    hook: useEditorCommandLoader
  });
  useCommandLoader({
    name: 'core/editor/contextual-commands',
    hook: useEditedEntityContextualCommands,
    context: 'entity-edit'
  });
}
//# sourceMappingURL=index.js.map