@wordpress/edit-post 6.16.0 → 6.18.0

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,18 +11,19 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
+import ListViewOutline from './list-view-outline';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
@@ -32,35 +38,68 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-post-editor__list-view-panel-label-${ instanceId }`;
+	const [ tab, setTab ] = useState( 'list-view' );
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
+			aria-label={ __( 'List View' ) }
 			className="edit-post-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
 			<div
-				className="edit-post-editor__list-view-panel-header"
+				className="edit-post-editor__list-view-panel-header components-panel__header edit-post-sidebar__panel-tabs"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
+				<ul>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'list-view' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'list-view' }
+							) }
+							aria-current={ tab === 'list-view' }
+						>
+							{ __( 'List View' ) }
+						</Button>
+					</li>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'outline' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'outline' }
+							) }
+							aria-current={ tab === 'outline' }
+						>
+							{ __( 'Outline' ) }
+						</Button>
+					</li>
+				</ul>
 			</div>
 			<div
-				className="edit-post-editor__list-view-panel-content"
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
 				] ) }
+				className="edit-post-editor__list-view-container"
 			>
-				<ListView />
+				{ tab === 'list-view' && (
+					<div className="edit-post-editor__list-view-panel-content">
+						<ListView />
+					</div>
+				) }
+				{ tab === 'outline' && <ListViewOutline /> }
 			</div>
 		</div>
 	);

package/src/components/secondary-sidebar/style.scss

@@ -8,7 +8,12 @@
 .edit-post-editor__list-view-panel {
 	// Same width as the Inserter.
 	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	// Width of the list view panel.
+	width: 350px;
+
+	.edit-post-sidebar__panel-tabs {
+		flex-direction: row-reverse;
+	}
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -18,30 +23,81 @@
 	justify-content: flex-end;
 }
 
-.edit-post-editor__inserter-panel-content,
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__inserter-panel-content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-}
-
-.edit-post-editor__inserter-panel-content {
 	@include break-medium() {
 		height: 100%;
 	}
 }
 
 .edit-post-editor__list-view-panel-header {
-	align-items: center;
 	border-bottom: $border-width solid $gray-300;
 	display: flex;
 	justify-content: space-between;
 	height: $grid-unit-60;
 	padding-left: $grid-unit-20;
 	padding-right: $grid-unit-05;
+	ul {
+		width: calc(100% - #{ $grid-unit-50 });
+	}
+	li {
+		width: 50%;
+		button {
+			width: 100%;
+			text-align: initial;
+		}
+	}
+	li:only-child {
+		width: 100%;
+	}
 }
 
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+	overflow-x: hidden;
 	overflow-y: auto;
+	height: 100%;
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }
+
+.edit-post-editor__list-view-empty-headings {
+	& > svg {
+		margin-top: $grid-unit-30 + $grid-unit-05;
+	}
+	& > p {
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+	}
+	text-align: center;
+	color: $gray-700;
+}
+
+.edit-post-editor__list-view-overview {
+	& > div > span:first-child {
+		// Width of the text information fields.
+		width: 90px;
+		display: inline-block;
+	}
+	border-top: $border-width solid $gray-300;
+	width: calc(100% - #{ $grid-unit-40 });
+	padding: $grid-unit-20;
+	& > div {
+		padding: 0 0 $grid-unit-10;
+		& > span {
+			font-size: $helptext-font-size;
+			line-height: $default-line-height;
+			color: $gray-700;
+		}
+	}
+	// Height of the overview container.
+	height: 72px;
+}
+
+.edit-post-editor__list-view-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - #{$grid-unit-60});
+}

package/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PluginPostStatusInfo renders fill properly 1`] = `
-<div
-  className="components-panel__row my-plugin-post-status-info"
->
-  My plugin post status info
+<div>
+  <div
+    class="components-panel__row my-plugin-post-status-info"
+  >
+    My plugin post status info
+  </div>
 </div>
 `;

package/src/components/sidebar/plugin-post-status-info/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import ReactTestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -15,15 +15,15 @@ import PluginPostStatusInfo from '../';
 
 describe( 'PluginPostStatusInfo', () => {
 	test( 'renders fill properly', () => {
-		const tree = ReactTestRenderer.create(
+		const { container } = render(
 			<SlotFillProvider>
 				<PluginPostStatusInfo className="my-plugin-post-status-info">
 					My plugin post status info
 				</PluginPostStatusInfo>
 				<PluginPostStatusInfo.Slot />
 			</SlotFillProvider>
-		).toJSON();
+		);
 
-		expect( tree ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/visual-editor/index.js

@@ -38,6 +38,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -137,6 +138,10 @@ export default function VisualEditor( { styles } ) {
 		}
 
 		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
+		const canEditTemplate = select( coreStore ).canUser(
+			'create',
+			'templates'
+		);
 
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
@@ -144,9 +149,10 @@ export default function VisualEditor( { styles } ) {
 			isTemplateMode: _isTemplateMode,
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so we check it's a block theme first.
-			editedPostTemplate: supportsTemplateMode
-				? getEditedPostTemplate()
-				: {},
+			editedPostTemplate:
+				supportsTemplateMode && canEditTemplate
+					? getEditedPostTemplate()
+					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 		};

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, without } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ function Editor( {
 	const {
 		hasFixedToolbar,
 		focusMode,
-		hasReducedUI,
+		isDistractionFree,
 		hasInlineToolbar,
 		hasThemeStyles,
 		post,
@@ -85,7 +85,7 @@ function Editor( {
 					isFeatureActive( 'fixedToolbar' ) ||
 					__experimentalGetPreviewDeviceType() !== 'Desktop',
 				focusMode: isFeatureActive( 'focusMode' ),
-				hasReducedUI: isFeatureActive( 'reducedUI' ),
+				isDistractionFree: isFeatureActive( 'distractionFree' ),
 				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
 				hasThemeStyles: isFeatureActive( 'themeStyles' ),
 				preferredStyleVariations: select( preferencesStore ).get(
@@ -118,7 +118,7 @@ function Editor( {
 			},
 			hasFixedToolbar,
 			focusMode,
-			hasReducedUI,
+			isDistractionFree,
 			hasInlineToolbar,
 
 			// This is marked as experimental to give time for the quick inserter to mature.
@@ -139,9 +139,8 @@ function Editor( {
 					? map( blockTypes, 'name' )
 					: settings.allowedBlockTypes || [];
 
-			result.allowedBlockTypes = without(
-				defaultAllowedBlockTypes,
-				...hiddenBlockTypes
+			result.allowedBlockTypes = defaultAllowedBlockTypes.filter(
+				( type ) => ! hiddenBlockTypes.includes( type )
 			);
 		}
 
@@ -150,7 +149,7 @@ function Editor( {
 		settings,
 		hasFixedToolbar,
 		focusMode,
-		hasReducedUI,
+		isDistractionFree,
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,

package/src/editor.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
-import { map, without } from 'lodash';
+import { map } from 'lodash';
 import { I18nManager } from 'react-native';
 
 /**
@@ -76,9 +76,8 @@ class Editor extends Component {
 					? map( blockTypes, 'name' )
 					: settings.allowedBlockTypes || [];
 
-			settings.allowedBlockTypes = without(
-				defaultAllowedBlockTypes,
-				...hiddenBlockTypes
+			settings.allowedBlockTypes = defaultAllowedBlockTypes.filter(
+				( type ) => ! hiddenBlockTypes.includes( type )
 			);
 		}
 

package/src/store/actions.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, reduce, without } from 'lodash';
+import { reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -295,9 +295,11 @@ export const showBlockTypes =
 				.select( preferencesStore )
 				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
 
-		const newBlockNames = without(
-			existingBlockNames,
-			...castArray( blockNames )
+		const newBlockNames = existingBlockNames.filter(
+			( type ) =>
+				! (
+					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
+				 ).includes( type )
 		);
 
 		registry
@@ -320,7 +322,7 @@ export const hideBlockTypes =
 
 		const mergedBlockNames = new Set( [
 			...existingBlockNames,
-			...castArray( blockNames ),
+			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
 		] );
 
 		registry
@@ -331,18 +333,16 @@ export const hideBlockTypes =
 	};
 
 /**
- * Returns an action object used in signaling
- * what Meta boxes are available in which location.
+ * Stores info about which Meta boxes are available in which location.
  *
  * @param {Object} metaBoxesPerLocation Meta boxes per location.
  */
-export const setAvailableMetaBoxesPerLocation =
-	( metaBoxesPerLocation ) =>
-	( { dispatch } ) =>
-		dispatch( {
-			type: 'SET_META_BOXES_PER_LOCATIONS',
-			metaBoxesPerLocation,
-		} );
+export function setAvailableMetaBoxesPerLocation( metaBoxesPerLocation ) {
+	return {
+		type: 'SET_META_BOXES_PER_LOCATIONS',
+		metaBoxesPerLocation,
+	};
+}
 
 /**
  * Update a metabox.
@@ -567,7 +567,6 @@ export const initializeMetaBoxes =
 		let wasAutosavingPost = registry
 			.select( editorStore )
 			.isAutosavingPost();
-		const hasMetaBoxes = select.hasMetaBoxes();
 
 		// Save metaboxes when performing a full save on the post.
 		registry.subscribe( async () => {
@@ -576,17 +575,12 @@ export const initializeMetaBoxes =
 				.select( editorStore )
 				.isAutosavingPost();
 
-			// Save metaboxes on save completion, except for autosaves that are not a post preview.
-			//
-			// Meta boxes are initialized once at page load. It is not necessary to
-			// account for updates on each state change.
-			//
-			// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309.
+			// Save metaboxes on save completion, except for autosaves.
 			const shouldTriggerMetaboxesSave =
-				hasMetaBoxes &&
 				wasSavingPost &&
+				! wasAutosavingPost &&
 				! isSavingPost &&
-				! wasAutosavingPost;
+				select.hasMetaBoxes();
 
 			// Save current state for next inspection.
 			wasSavingPost = isSavingPost;

package/src/store/reducer.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,7 +14,7 @@ import { combineReducers } from '@wordpress/data';
 export function removedPanels( state = [], action ) {
 	switch ( action.type ) {
 		case 'REMOVE_PANEL':
-			if ( ! includes( state, action.panelName ) ) {
+			if ( ! state.includes( action.panelName ) ) {
 				return [ ...state, action.panelName ];
 			}
 	}
@@ -80,6 +75,21 @@ export function isSavingMetaBoxes( state = false, action ) {
 	}
 }
 
+function mergeMetaboxes( metaboxes = [], newMetaboxes ) {
+	const mergedMetaboxes = [ ...metaboxes ];
+	for ( const metabox of newMetaboxes ) {
+		const existing = mergedMetaboxes.findIndex(
+			( box ) => box.id === metabox.id
+		);
+		if ( existing !== -1 ) {
+			mergedMetaboxes[ existing ] = metabox;
+		} else {
+			mergedMetaboxes.push( metabox );
+		}
+	}
+	return mergedMetaboxes;
+}
+
 /**
  * Reducer keeping track of the meta boxes per location.
  *
@@ -90,8 +100,18 @@ export function isSavingMetaBoxes( state = false, action ) {
  */
 export function metaBoxLocations( state = {}, action ) {
 	switch ( action.type ) {
-		case 'SET_META_BOXES_PER_LOCATIONS':
-			return action.metaBoxesPerLocation;
+		case 'SET_META_BOXES_PER_LOCATIONS': {
+			const newState = { ...state };
+			for ( const [ location, metaboxes ] of Object.entries(
+				action.metaBoxesPerLocation
+			) ) {
+				newState[ location ] = mergeMetaboxes(
+					newState[ location ],
+					metaboxes
+				);
+			}
+			return newState;
+		}
 	}
 
 	return state;
@@ -153,7 +173,7 @@ export function listViewPanel( state = false, action ) {
 }
 
 /**
- * Reducer tracking whether the inserter is open.
+ * Reducer tracking whether template editing is on or off.
  *
  * @param {boolean} state
  * @param {Object}  action

package/src/store/test/reducer.js

@@ -78,14 +78,44 @@ describe( 'state', () => {
 			const action = {
 				type: 'SET_META_BOXES_PER_LOCATIONS',
 				metaBoxesPerLocation: {
-					normal: [ 'postcustom' ],
+					normal: [ { id: 'postcustom' } ],
 				},
 			};
 
 			const state = metaBoxLocations( undefined, action );
 
 			expect( state ).toEqual( {
-				normal: [ 'postcustom' ],
+				normal: [ { id: 'postcustom' } ],
+			} );
+		} );
+
+		it( 'should merge new meta box locations into the existing ones', () => {
+			const oldState = {
+				normal: [
+					{ id: 'a', title: 'A' },
+					{ id: 'b', title: 'B' },
+				],
+				side: [ { id: 's', title: 'S' } ],
+			};
+			const action = {
+				type: 'SET_META_BOXES_PER_LOCATIONS',
+				metaBoxesPerLocation: {
+					normal: [
+						{ id: 'b', title: 'B-updated' },
+						{ id: 'c', title: 'C' },
+					],
+					advanced: [ { id: 'd', title: 'D' } ],
+				},
+			};
+			const newState = metaBoxLocations( oldState, action );
+			expect( newState ).toEqual( {
+				normal: [
+					{ id: 'a', title: 'A' },
+					{ id: 'b', title: 'B-updated' },
+					{ id: 'c', title: 'C' },
+				],
+				advanced: [ { id: 'd', title: 'D' } ],
+				side: [ { id: 's', title: 'S' } ],
 			} );
 		} );
 	} );