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

* Revert "Honor the Disable Visual Editor setting (#12000)" This reverts commit 095d18f. * Add support for RichEditing in Gutenberg * Typo
WordPress · Nov 21, 2018 · 278b322 · 278b322
1 parent ec1a4cb
commit 278b322
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 41 deletions.
diff --git a/gutenberg.php b/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.
  *

diff --git a/lib/client-assets.php b/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,

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/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 );
diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/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 );

diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/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(),

diff --git a/packages/edit-post/src/components/layout/index.js b/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' );

diff --git a/packages/edit-post/src/components/text-editor/index.js b/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 );
diff --git a/packages/editor/src/store/defaults.js b/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,
 };
 
 /**