@wordpress/editor 12.6.0 → 12.9.0

package/src/components/post-visibility/index.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
+	Button,
 } from '@wordpress/components';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { close as closeIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,172 +18,150 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-export class PostVisibility extends Component {
-	constructor( props ) {
-		super( ...arguments );
+export default function PostVisibility( { onClose } ) {
+	const instanceId = useInstanceId( PostVisibility );
 
-		this.setPublic = this.setPublic.bind( this );
-		this.setPrivate = this.setPrivate.bind( this );
-		this.setPasswordProtected = this.setPasswordProtected.bind( this );
-		this.updatePassword = this.updatePassword.bind( this );
+	const { status, visibility, password } = useSelect( ( select ) => ( {
+		status: select( editorStore ).getEditedPostAttribute( 'status' ),
+		visibility: select( editorStore ).getEditedPostVisibility(),
+		password: select( editorStore ).getEditedPostAttribute( 'password' ),
+	} ) );
 
-		this.state = {
-			hasPassword: !! props.password,
-			showPrivateConfirmDialog: false,
-		};
-	}
+	const { editPost, savePost } = useDispatch( editorStore );
 
-	setPublic() {
-		const { visibility, onUpdateVisibility, status } = this.props;
+	const [ hasPassword, setHasPassword ] = useState( !! password );
+	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] = useState(
+		false
+	);
 
-		onUpdateVisibility( visibility === 'private' ? 'draft' : status );
-		this.setState( { hasPassword: false } );
-	}
-
-	setPrivate() {
-		this.setState( { showPrivateConfirmDialog: true } );
-	}
-
-	confirmPrivate = () => {
-		const { onUpdateVisibility, onSave } = this.props;
-
-		onUpdateVisibility( 'private' );
-		this.setState( {
-			hasPassword: false,
-			showPrivateConfirmDialog: false,
+	const setPublic = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: '',
 		} );
-		onSave();
+		setHasPassword( false );
 	};
 
-	handleDialogCancel = () => {
-		this.setState( { showPrivateConfirmDialog: false } );
+	const setPrivate = () => {
+		setShowPrivateConfirmDialog( true );
 	};
 
-	setPasswordProtected() {
-		const { visibility, onUpdateVisibility, status, password } = this.props;
-
-		onUpdateVisibility(
-			visibility === 'private' ? 'draft' : status,
-			password || ''
-		);
-		this.setState( { hasPassword: true } );
-	}
+	const confirmPrivate = () => {
+		editPost( { status: 'private', password: '' } );
+		setHasPassword( false );
+		setShowPrivateConfirmDialog( false );
+		savePost();
+	};
 
-	updatePassword( event ) {
-		const { status, onUpdateVisibility } = this.props;
-		onUpdateVisibility( status, event.target.value );
-	}
+	const handleDialogCancel = () => {
+		setShowPrivateConfirmDialog( false );
+	};
 
-	render() {
-		const { visibility, password, instanceId } = this.props;
+	const setPasswordProtected = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: password || '',
+		} );
+		setHasPassword( true );
+	};
 
-		const visibilityHandlers = {
-			public: {
-				onSelect: this.setPublic,
-				checked: visibility === 'public' && ! this.state.hasPassword,
-			},
-			private: {
-				onSelect: this.setPrivate,
-				checked: visibility === 'private',
-			},
-			password: {
-				onSelect: this.setPasswordProtected,
-				checked: this.state.hasPassword,
-			},
-		};
+	const updatePassword = ( event ) => {
+		editPost( { password: event.target.value } );
+	};
 
-		return [
-			<fieldset
-				key="visibility-selector"
-				className="editor-post-visibility__dialog-fieldset"
-			>
-				<legend className="editor-post-visibility__dialog-legend">
-					{ __( 'Post Visibility' ) }
+	return (
+		<>
+			<Button
+				className="editor-post-visibility__close"
+				isSmall
+				icon={ closeIcon }
+				onClick={ onClose }
+			/>
+			<fieldset className="editor-post-visibility__fieldset">
+				<legend className="editor-post-visibility__legend">
+					{ __( 'Visibility' ) }
 				</legend>
-				{ visibilityOptions.map( ( { value, label, info } ) => (
-					<div
-						key={ value }
-						className="editor-post-visibility__choice"
-					>
+				<p className="editor-post-visibility__description">
+					{ __( 'Control how this post is viewed.' ) }
+				</p>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="public"
+					label={ visibilityOptions.public.label }
+					info={ visibilityOptions.public.info }
+					checked={ visibility === 'public' && ! hasPassword }
+					onChange={ setPublic }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="private"
+					label={ visibilityOptions.private.label }
+					info={ visibilityOptions.private.info }
+					checked={ visibility === 'private' }
+					onChange={ setPrivate }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="password"
+					label={ visibilityOptions.password.label }
+					info={ visibilityOptions.password.info }
+					checked={ hasPassword }
+					onChange={ setPasswordProtected }
+				/>
+				{ hasPassword && (
+					<div className="editor-post-visibility__password">
+						<VisuallyHidden
+							as="label"
+							htmlFor={ `editor-post-visibility__password-input-${ instanceId }` }
+						>
+							{ __( 'Create password' ) }
+						</VisuallyHidden>
 						<input
-							type="radio"
-							name={ `editor-post-visibility__setting-${ instanceId }` }
-							value={ value }
-							onChange={ visibilityHandlers[ value ].onSelect }
-							checked={ visibilityHandlers[ value ].checked }
-							id={ `editor-post-${ value }-${ instanceId }` }
-							aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-							className="editor-post-visibility__dialog-radio"
+							className="editor-post-visibility__password-input"
+							id={ `editor-post-visibility__password-input-${ instanceId }` }
+							type="text"
+							onChange={ updatePassword }
+							value={ password }
+							placeholder={ __( 'Use a secure password' ) }
 						/>
-						<label
-							htmlFor={ `editor-post-${ value }-${ instanceId }` }
-							className="editor-post-visibility__dialog-label"
-						>
-							{ label }
-						</label>
-						{
-							<p
-								id={ `editor-post-${ value }-${ instanceId }-description` }
-								className="editor-post-visibility__dialog-info"
-							>
-								{ info }
-							</p>
-						}
 					</div>
-				) ) }
-			</fieldset>,
-			this.state.hasPassword && (
-				<div
-					className="editor-post-visibility__dialog-password"
-					key="password-selector"
-				>
-					<VisuallyHidden
-						as="label"
-						htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-					>
-						{ __( 'Create password' ) }
-					</VisuallyHidden>
-					<input
-						className="editor-post-visibility__dialog-password-input"
-						id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-						type="text"
-						onChange={ this.updatePassword }
-						value={ password }
-						placeholder={ __( 'Use a secure password' ) }
-					/>
-				</div>
-			),
+				) }
+			</fieldset>
 			<ConfirmDialog
-				key="private-publish-confirmation"
-				isOpen={ this.state.showPrivateConfirmDialog }
-				onConfirm={ this.confirmPrivate }
-				onCancel={ this.handleDialogCancel }
+				isOpen={ showPrivateConfirmDialog }
+				onConfirm={ confirmPrivate }
+				onCancel={ handleDialogCancel }
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
-			</ConfirmDialog>,
-		];
-	}
+			</ConfirmDialog>
+		</>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostVisibility } = select(
-			editorStore
-		);
-		return {
-			status: getEditedPostAttribute( 'status' ),
-			visibility: getEditedPostVisibility(),
-			password: getEditedPostAttribute( 'password' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { savePost, editPost } = dispatch( editorStore );
-		return {
-			onSave: savePost,
-			onUpdateVisibility( status, password = '' ) {
-				editPost( { status, password } );
-			},
-		};
-	} ),
-	withInstanceId,
-] )( PostVisibility );
+function PostVisibilityChoice( { instanceId, value, label, info, ...props } ) {
+	return (
+		<div className="editor-post-visibility__choice">
+			<input
+				type="radio"
+				name={ `editor-post-visibility__setting-${ instanceId }` }
+				value={ value }
+				id={ `editor-post-${ value }-${ instanceId }` }
+				aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__radio"
+				{ ...props }
+			/>
+			<label
+				htmlFor={ `editor-post-${ value }-${ instanceId }` }
+				className="editor-post-visibility__label"
+			>
+				{ label }
+			</label>
+			<p
+				id={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__info"
+			>
+				{ info }
+			</p>
+		</div>
+	);
+}

package/src/components/post-visibility/label.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +9,9 @@ import { withSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-function PostVisibilityLabel( { visibility } ) {
-	const getVisibilityLabel = () =>
-		find( visibilityOptions, { value: visibility } ).label;
-
-	return getVisibilityLabel( visibility );
+export default function PostVisibilityLabel() {
+	const visibility = useSelect( ( select ) =>
+		select( editorStore ).getEditedPostVisibility()
+	);
+	return visibilityOptions[ visibility ]?.label;
 }
-
-export default withSelect( ( select ) => ( {
-	visibility: select( editorStore ).getEditedPostVisibility(),
-} ) )( PostVisibilityLabel );

package/src/components/post-visibility/style.scss

@@ -1,39 +1,44 @@
-.edit-post-post-visibility__dialog,
-.editor-post-visibility__dialog-fieldset {
-	padding: $grid-unit-05;
-	padding-top: 0;
+.editor-post-visibility__close {
+	position: absolute;
+	right: $grid-unit-20;
+	top: $grid-unit-20;
+}
+
+.editor-post-visibility__fieldset {
+	padding: $grid-unit-10;
 
-	.editor-post-visibility__dialog-legend {
+	.editor-post-visibility__legend {
 		font-weight: 600;
-		margin-bottom: 1em;
+		padding: 1em 0 0 0;
+	}
+
+	.editor-post-visibility__description {
 		margin-top: 0.5em;
-		padding: 0;
 	}
 
-	.editor-post-visibility__dialog-radio[type="radio"] {
+	.editor-post-visibility__radio[type="radio"] {
 		@include radio-control;
 		margin-top: 2px;
 	}
 
-	.editor-post-visibility__dialog-label {
-		font-weight: 600;
-	}
+	.editor-post-visibility__info {
+		color: $gray-700;
+		margin-left: $grid-unit-15 + $radio-input-size-sm;
+		margin-top: 0.5em;
 
-	.editor-post-visibility__dialog-info {
-		margin-top: 0;
-		margin-left: $grid-unit-40;
+		@include break-small {
+			margin-left: $grid-unit-15 + $radio-input-size;
+		}
 	}
 
 	// Remove bottom margin on the last label only.
-	.editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info {
+	.editor-post-visibility__choice:last-child .editor-post-visibility__info {
 		margin-bottom: 0;
 	}
-}
 
-.editor-post-visibility__dialog-password {
-	.editor-post-visibility__dialog-password-input[type="text"] {
+	.editor-post-visibility__password .editor-post-visibility__password-input[type="text"] {
 		@include input-control;
-		margin-left: $grid-unit * 4.5;
-		margin-top: $grid-unit-10;
+		margin-left: $grid-unit * 4;
+		width: calc(100% - #{$grid-unit * 4});
 	}
 }

package/src/components/post-visibility/utils.js

@@ -3,22 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const visibilityOptions = [
-	{
-		value: 'public',
+export const visibilityOptions = {
+	public: {
 		label: __( 'Public' ),
 		info: __( 'Visible to everyone.' ),
 	},
-	{
-		value: 'private',
+	private: {
 		label: __( 'Private' ),
 		info: __( 'Only visible to site admins and editors.' ),
 	},
-	{
-		value: 'password',
-		label: __( 'Password Protected' ),
-		info: __(
-			'Protected with a password you choose. Only those with the password can view this post.'
-		),
+	password: {
+		label: __( 'Password protected' ),
+		info: __( 'Only those with the password can view this post.' ),
 	},
-];
+};

package/src/components/provider/index.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 /**
  * WordPress dependencies
@@ -333,7 +334,7 @@ class NativeEditorProvider extends Component {
 					settings={ editorSettings }
 					{ ...props }
 				>
-					{ children }
+					<SafeAreaProvider>{ children }</SafeAreaProvider>
 				</EditorProvider>
 				<EditorHelpTopics
 					isVisible={ this.state.isHelpVisible }

package/src/components/provider/use-block-editor-settings.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pick, defaultTo } from 'lodash';
+import { pick, defaultTo, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,20 +61,36 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		};
 	}, [] );
 
-	const {
-		__experimentalBlockPatterns: settingsBlockPatterns,
-		__experimentalBlockPatternCategories: settingsBlockPatternCategories,
-	} = settings;
+	const settingsBlockPatterns =
+		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		settings.__experimentalBlockPatterns; // WP 5.9
+	const settingsBlockPatternCategories =
+		settings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
+		settings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { blockPatterns, blockPatternCategories } = useSelect(
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
 		( select ) => ( {
-			blockPatterns:
-				settingsBlockPatterns ?? select( coreStore ).getBlockPatterns(),
-			blockPatternCategories:
-				settingsBlockPatternCategories ??
-				select( coreStore ).getBlockPatternCategories(),
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories: select(
+				coreStore
+			).getBlockPatternCategories(),
 		} ),
-		[ settingsBlockPatterns, settingsBlockPatternCategories ]
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() => unionBy( settingsBlockPatterns, restBlockPatterns, 'name' ),
+		[ settingsBlockPatterns, restBlockPatterns ]
+	);
+
+	const blockPatternCategories = useMemo(
+		() =>
+			unionBy(
+				settingsBlockPatternCategories,
+				restBlockPatternCategories,
+				'name'
+			),
+		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
 	const { undo } = useDispatch( editorStore );

package/src/components/table-of-contents/style.scss

@@ -8,9 +8,7 @@
 
 .table-of-contents__popover {
 	.components-popover__content {
-		> div {
-			padding: $grid-unit-20;
-		}
+		padding: $grid-unit-20;
 
 		@include break-small {
 			max-height: calc(100vh - 120px);

package/src/store/selectors.js

@@ -1606,14 +1606,16 @@ export function __experimentalGetTemplateInfo( state, template ) {
 		return {};
 	}
 
-	const { excerpt, slug, title, area } = template;
+	const { description, slug, title, area } = template;
 	const {
 		title: defaultTitle,
 		description: defaultDescription,
 	} = __experimentalGetDefaultTemplateType( state, slug );
 
 	const templateTitle = isString( title ) ? title : title?.rendered;
-	const templateDescription = isString( excerpt ) ? excerpt : excerpt?.raw;
+	const templateDescription = isString( description )
+		? description
+		: description?.raw;
 	const templateIcon =
 		__experimentalGetDefaultTemplatePartAreas( state ).find(
 			( item ) => area === item.area

package/src/store/test/selectors.js

@@ -2149,7 +2149,7 @@ describe( 'selectors', () => {
 			expect( didPostSaveRequestSucceed( state ) ).toBe( true );
 		} );
 
-		it( 'should return true if the post save request has failed', () => {
+		it( 'should return false if the post save request has failed', () => {
 			const state = {
 				saving: {
 					successful: false,
@@ -2171,7 +2171,7 @@ describe( 'selectors', () => {
 			expect( didPostSaveRequestFail( state ) ).toBe( true );
 		} );
 
-		it( 'should return true if the post save request is successful', () => {
+		it( 'should return false if the post save request is successful', () => {
 			const state = {
 				saving: {
 					error: false,
@@ -2968,7 +2968,7 @@ describe( 'selectors', () => {
 			expect(
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} ).description
 			).toEqual( 'test description' );
 		} );
@@ -2996,7 +2996,7 @@ describe( 'selectors', () => {
 			expect(
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} )
 			).toEqual( {
 				title: 'Default (Index)',
@@ -3008,7 +3008,7 @@ describe( 'selectors', () => {
 				__experimentalGetTemplateInfo( state, {
 					slug: 'index',
 					title: { rendered: 'test title' },
-					excerpt: { raw: 'test description' },
+					description: { raw: 'test description' },
 				} )
 			).toEqual( {
 				title: 'test title',