@wordpress/edit-post 6.17.0 → 6.19.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 }
-			className="edit-post-editor__list-view-panel"
+			aria-label={ __( 'Document Overview' ) }
+			className="edit-post-editor__document-overview-panel"
 			onKeyDown={ closeOnEscape }
 		>
 			<div
-				className="edit-post-editor__list-view-panel-header"
+				className="edit-post-editor__document-overview-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' ) }
+					label={ __( 'Close Document Overview 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

@@ -1,14 +1,19 @@
 .edit-post-editor__inserter-panel,
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-panel {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 }
 
-.edit-post-editor__list-view-panel {
+.edit-post-editor__document-overview-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;
+.edit-post-editor__document-overview-panel-header {
 	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
-  class="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

@@ -24,6 +24,6 @@ describe( 'PluginPostStatusInfo', () => {
 			</SlotFillProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/sidebar/plugin-pre-publish-panel/test/index.js

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
 /**
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
-import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,21 +15,19 @@ import PluginPrePublishPanel from '../';
 
 describe( 'PluginPrePublishPanel', () => {
 	test( 'renders fill properly', () => {
-		const div = document.createElement( 'div' );
 		render(
 			<SlotFillProvider>
 				<PluginPrePublishPanel
 					className="my-plugin-pre-publish-panel"
 					title="My panel title"
-					initialOpen={ true }
+					initialOpen
 				>
 					My panel content
 				</PluginPrePublishPanel>
 				<PluginPrePublishPanel.Slot />
-			</SlotFillProvider>,
-			div
+			</SlotFillProvider>
 		);
 
-		expect( div.innerHTML ).toMatchSnapshot();
+		expect( screen.getByText( 'My panel title' ) ).toBeVisible();
 	} );
 } );

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/components/visual-editor/test/index.native.js

@@ -38,24 +38,24 @@ describe( 'when title is focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
 
 		// Focus title
 		fireEvent(
-			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
 			'select'
 		);
 
 		// Add new Heading block
-		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
-		expect( screen.getByA11yLabel( /Heading Block. Row 1/ ) ).toBeDefined();
+		expect( screen.getByLabelText( /Heading Block. Row 1/ ) ).toBeDefined();
 		expect(
-			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+			screen.getByLabelText( /Paragraph Block. Row 2/ )
 		).toBeDefined();
 		expect(
-			screen.getByA11yLabel( /Paragraph Block. Row 3/ )
+			screen.getByLabelText( /Paragraph Block. Row 3/ )
 		).toBeDefined();
 	} );
 } );
@@ -67,27 +67,27 @@ describe( 'when title is no longer focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
 
 		// Focus title
 		fireEvent(
-			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
 			'select'
 		);
 
 		// Focus last block
-		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 2/ ) );
+		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 2/ ) );
 
 		// Add new Heading block
-		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
 		expect(
-			screen.getByA11yLabel( /Paragraph Block. Row 1/ )
+			screen.getByLabelText( /Paragraph Block. Row 1/ )
 		).toBeDefined();
 		expect(
-			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+			screen.getByLabelText( /Paragraph Block. Row 2/ )
 		).toBeDefined();
-		expect( screen.getByA11yLabel( /Heading Block. Row 3/ ) ).toBeDefined();
+		expect( screen.getByLabelText( /Heading Block. Row 3/ ) ).toBeDefined();
 	} );
 } );

package/src/store/actions.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, reduce } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -296,7 +291,10 @@ export const showBlockTypes =
 				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
 
 		const newBlockNames = existingBlockNames.filter(
-			( type ) => ! castArray( blockNames ).includes( type )
+			( type ) =>
+				! (
+					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
+				 ).includes( type )
 		);
 
 		registry
@@ -319,7 +317,7 @@ export const hideBlockTypes =
 
 		const mergedBlockNames = new Set( [
 			...existingBlockNames,
-			...castArray( blockNames ),
+			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
 		] );
 
 		registry
@@ -330,18 +328,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.
@@ -384,16 +380,12 @@ export const requestMetaBoxUpdates =
 		];
 
 		// Merge all form data objects into a single one.
-		const formData = reduce(
-			formDataToMerge,
-			( memo, currentFormData ) => {
-				for ( const [ key, value ] of currentFormData ) {
-					memo.append( key, value );
-				}
-				return memo;
-			},
-			new window.FormData()
-		);
+		const formData = formDataToMerge.reduce( ( memo, currentFormData ) => {
+			for ( const [ key, value ] of currentFormData ) {
+				memo.append( key, value );
+			}
+			return memo;
+		}, new window.FormData() );
 		additionalData.forEach( ( [ key, value ] ) =>
 			formData.append( key, value )
 		);
@@ -566,7 +558,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 () => {
@@ -575,17 +566,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;

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' } ],
 			} );
 		} );
 	} );

package/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;