Revert "Honor the Disable Visual Editor setting (#12000)"

gutenberg.php

@@ -200,13 +200,6 @@ function gutenberg_pre_init() {
  add_filter( 'replace_editor', 'gutenberg_init', 10, 2 );
 }
 
-/**
- * Enable Gutenberg based on user_can_richedit setting.
- * Set gutenberg_can_edit_post based on user setting for disable visual editor.
- */
-add_filter( 'gutenberg_can_edit_post_type', 'user_can_richedit', 5 );
-add_filter( 'gutenberg_can_edit_post', 'user_can_richedit', 5 );
-
 /**
  * Initialize Gutenberg.
  *

lib/client-assets.php

@@ -1055,6 +1055,13 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
  'after'
  );
 
+ // Ignore Classic Editor's `rich_editing` user option, aka "Disable visual
+ // editor". Forcing this to be true guarantees that TinyMCE and its plugins
+ // are available in Gutenberg. Fixes
+ // https://github.com/WordPress/gutenberg/issues/5667.
+ $user_can_richedit = user_can_richedit();
+ add_filter( 'user_can_richedit', '__return_true' );
+
  wp_enqueue_script( 'wp-edit-post' );
  wp_enqueue_script( 'wp-format-library' );
  wp_enqueue_style( 'wp-format-library' );
@@ -1294,6 +1301,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
  'allowedMimeTypes' => get_allowed_mime_types(),
  'styles' => $styles,
  'imageSizes' => gutenberg_get_available_image_sizes(),
+ 'richEditingEnabled' => $user_can_richedit,
 
  // Ideally, we'd remove this and rely on a REST API endpoint.
  'postLock' => $lock_details,

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -21,7 +21,7 @@ import {
  */
 import FullscreenModeClose from '../fullscreen-mode-close';
 
-function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
+function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter } ) {
  const toolbarAriaLabel = hasFixedToolbar ?
  /* translators: accessibility text for the editor toolbar when Top Toolbar is on */
  __( 'Document and block tools' ) :
@@ -35,7 +35,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
  >
  <FullscreenModeClose />
  <div>
- <Inserter disabled={ mode !== 'visual' } position="bottom right" />
+ <Inserter disabled={ ! showInserter } position="bottom right" />
  <DotTip tipId="core/editor.inserter">
  { __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more!' ) }
  </DotTip>
@@ -56,7 +56,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
 export default compose( [
  withSelect( ( select ) => ( {
  hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
- mode: select( 'core/edit-post' ).getEditorMode(),
+ showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled,
  } ) ),
  withViewportMatch( { isLargeViewport: 'medium' } ),
 ] )( HeaderToolbar );

packages/edit-post/src/components/header/mode-switcher/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
@@ -49,8 +49,10 @@ function ModeSwitcher( { onSwitch, mode } ) {
 
 export default compose( [
  withSelect( ( select ) => ( {
+ isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
  mode: select( 'core/edit-post' ).getEditorMode(),
  } ) ),
+ ifCondition( ( { isRichEditingEnabled } ) => isRichEditingEnabled ),
  withDispatch( ( dispatch, ownProps ) => ( {
  onSwitch( mode ) {
  dispatch( 'core/edit-post' ).switchEditorMode( mode );

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -20,7 +20,10 @@ class EditorModeKeyboardShortcuts extends Component {
  }
 
  toggleMode() {
- const { mode, switchMode } = this.props;
+ const { mode, switchMode, isRichEditingEnabled } = this.props;
+ if ( ! isRichEditingEnabled ) {
+ return;
+ }
  switchMode( mode === 'visual' ? 'text' : 'visual' );
  }
 
@@ -52,6 +55,7 @@ class EditorModeKeyboardShortcuts extends Component {
 
 export default compose( [
  withSelect( ( select ) => ( {
+ isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
  mode: select( 'core/edit-post' ).getEditorMode(),
  isEditorSidebarOpen: select( 'core/edit-post' ).isEditorSidebarOpened(),
  hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(),

packages/edit-post/src/components/layout/index.js

@@ -50,6 +50,7 @@ function Layout( {
  hasActiveMetaboxes,
  isSaving,
  isMobileViewport,
+ isRichEditingEnabled,
 } ) {
  const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened;
 
@@ -84,8 +85,8 @@ function Layout( {
  <EditorModeKeyboardShortcuts />
  <KeyboardShortcutHelpModal />
  <OptionsModal />
- { mode === 'text' && <TextEditor /> }
- { mode === 'visual' && <VisualEditor /> }
+ { ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
+ { isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
  <div className="edit-post-layout__metaboxes">
  <MetaBoxes location="normal" />
  </div>
@@ -137,6 +138,7 @@ export default compose(
  hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
  hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
  isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+ isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
  } ) ),
  withDispatch( ( dispatch ) => {
  const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );

packages/edit-post/src/components/text-editor/index.js

@@ -3,23 +3,26 @@
  */
 import { PostTextEditor, PostTitle } from '@wordpress/editor';
 import { IconButton } from '@wordpress/components';
-import { withDispatch } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
+import { compose } from '@wordpress/compose';
 
-function TextEditor( { onExit } ) {
+function TextEditor( { onExit, isRichEditingEnabled } ) {
  return (
  <div className="edit-post-text-editor">
- <div className="edit-post-text-editor__toolbar">
- <h2>{ __( 'Editing Code' ) }</h2>
- <IconButton
- onClick={ onExit }
- icon="no-alt"
- shortcut={ displayShortcut.secondary( 'm' ) }
- >
- { __( 'Exit Code Editor' ) }
- </IconButton>
- </div>
+ { isRichEditingEnabled && (
+ <div className="edit-post-text-editor__toolbar">
+ <h2>{ __( 'Editing Code' ) }</h2>
+ <IconButton
+ onClick={ onExit }
+ icon="no-alt"
+ shortcut={ displayShortcut.secondary( 'm' ) }
+ >
+ { __( 'Exit Code Editor' ) }
+ </IconButton>
+ </div>
+ ) }
  <div className="edit-post-text-editor__body">
  <PostTitle />
  <PostTextEditor />
@@ -28,10 +31,15 @@ function TextEditor( { onExit } ) {
  );
 }
 
-export default withDispatch( ( dispatch ) => {
- return {
- onExit() {
- dispatch( 'core/edit-post' ).switchEditorMode( 'visual' );
- },
- };
-} )( TextEditor );
+export default compose(
+ withSelect( ( select ) => ( {
+ isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
+ } ) ),
+ withDispatch( ( dispatch ) => {
+ return {
+ onExit() {
+ dispatch( 'core/edit-post' ).switchEditorMode( 'visual' );
+ },
+ };
+ } )
+)( TextEditor );

packages/editor/src/store/defaults.js

@@ -11,14 +11,15 @@ export const PREFERENCES_DEFAULTS = {
 /**
  * The default editor settings
  *
- * alignWide boolean Enable/Disable Wide/Full Alignments
- * colors Array Palette colors
- * fontSizes Array Available font sizes
- * imageSizes Array Available image sizes
- * maxWidth number Max width to constraint resizing
- * blockTypes boolean|Array Allowed block types
- * hasFixedToolbar boolean Whether or not the editor toolbar is fixed
- * focusMode boolean Whether the focus mode is enabled or not
+ * alignWide boolean Enable/Disable Wide/Full Alignments
+ * colors Array Palette colors
+ * fontSizes Array Available font sizes
+ * imageSizes Array Available image sizes
+ * maxWidth number Max width to constraint resizing
+ * blockTypes boolean|Array Allowed block types
+ * hasFixedToolbar boolean Whether or not the editor toolbar is fixed
+ * focusMode boolean Whether the focus mode is enabled or not
+ * richEditingEnabled boolean Whether rich editing is enabled or not
  */
 export const EDITOR_SETTINGS_DEFAULTS = {
  alignWide: false,
@@ -126,6 +127,9 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 
  // List of allowed mime types and file extensions.
  allowedMimeTypes: null,
+
+ // Whether richs editing is enabled or not.
+ richEditingEnabled: true,
 };
 
 /**