@wordpress/editor 13.26.1-next.79a6196f.0 → 13.27.0

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

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { NoticeList } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -11,7 +10,14 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
-export function EditorNotices( { notices, onRemove } ) {
+export function EditorNotices() {
+	const { notices } = useSelect(
+		( select ) => ( {
+			notices: select( noticesStore ).getNotices(),
+		} ),
+		[]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
 	const dismissibleNotices = notices.filter(
 		( { isDismissible, type } ) => isDismissible && type === 'default'
 	);
@@ -28,7 +34,7 @@ export function EditorNotices( { notices, onRemove } ) {
 			<NoticeList
 				notices={ dismissibleNotices }
 				className="components-editor-notices__dismissible"
-				onRemove={ onRemove }
+				onRemove={ removeNotice }
 			>
 				<TemplateValidationNotice />
 			</NoticeList>
@@ -36,11 +42,4 @@ export function EditorNotices( { notices, onRemove } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => ( {
-		notices: select( noticesStore ).getNotices(),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		onRemove: dispatch( noticesStore ).removeNotice,
-	} ) ),
-] )( EditorNotices );
+export default EditorNotices;

package/src/components/editor-notices/style.scss

@@ -9,7 +9,6 @@
 
 	.components-notice {
 		box-sizing: border-box;
-		margin: 0;
 		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
 		padding: 0 $grid-unit-15;
 

package/src/components/entities-saved-states/entity-type-list.js

@@ -5,11 +5,18 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
+import { unlock } from '../../lock-unlock';
+
+const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 function getEntityDescription( entity, count ) {
 	switch ( entity ) {
@@ -27,6 +34,44 @@ function getEntityDescription( entity, count ) {
 	}
 }
 
+function GlobalStylesDescription( { record } ) {
+	const { user: currentEditorGlobalStyles } =
+		useContext( GlobalStylesContext );
+	const savedRecord = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord(
+				record.kind,
+				record.name,
+				record.key
+			),
+		[ record.kind, record.name, record.key ]
+	);
+
+	const globalStylesChanges = getGlobalStylesChanges(
+		currentEditorGlobalStyles,
+		savedRecord,
+		{
+			maxResults: 10,
+		}
+	);
+	return globalStylesChanges.length ? (
+		<>
+			<h3 className="entities-saved-states__description-heading">
+				{ __( 'Changes made to:' ) }
+			</h3>
+			<PanelRow>{ globalStylesChanges.join( ', ' ) }</PanelRow>
+		</>
+	) : null;
+}
+
+function EntityDescription( { record, count } ) {
+	if ( 'globalStyles' === record?.name ) {
+		return <GlobalStylesDescription record={ record } />;
+	}
+	const description = getEntityDescription( record?.name, count );
+	return description ? <PanelRow>{ description }</PanelRow> : null;
+}
+
 export default function EntityTypeList( {
 	list,
 	unselectedEntities,
@@ -42,19 +87,16 @@ export default function EntityTypeList( {
 			),
 		[ firstRecord.kind, firstRecord.name ]
 	);
-	const { name } = firstRecord;
 
 	let entityLabel = entityConfig.label;
-	if ( name === 'wp_template_part' ) {
+	if ( firstRecord?.name === 'wp_template_part' ) {
 		entityLabel =
 			1 === count ? __( 'Template Part' ) : __( 'Template Parts' );
 	}
-	// Set description based on type of entity.
-	const description = getEntityDescription( name, count );
 
 	return (
 		<PanelBody title={ entityLabel } initialOpen={ true }>
-			{ description && <PanelRow>{ description }</PanelRow> }
+			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (
 					<EntityRecordItem

package/src/components/entities-saved-states/style.scss

@@ -15,3 +15,7 @@
 		margin-bottom: $grid-unit-15;
 	}
 }
+
+.entities-saved-states__description-heading {
+	font-size: $default-font-size;
+}

package/src/components/offline-status/index.native.js

@@ -90,10 +90,8 @@ const OfflineStatus = () => {
 			) }
 			style={ containerStyle }
 		>
-			<View style={ containerStyle }>
-				<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
-				<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
-			</View>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) } </Text>
 		</View>
 	) : null;
 };

package/src/components/post-locked-modal/index.js

@@ -172,7 +172,7 @@ export default function PostLockedModal() {
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }
-			className="editor-post-locked-modal"
+			size="medium"
 		>
 			<HStack alignment="top" spacing={ 6 }>
 				{ !! userAvatar && (

package/src/components/post-locked-modal/style.scss

@@ -1,9 +1,3 @@
-.editor-post-locked-modal {
-	@include break-small() {
-		max-width: $break-mobile;
-	}
-}
-
 .editor-post-locked-modal__buttons {
 	margin-top: $grid-unit-30;
 }

package/src/components/post-saved-state/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	Button,
-	Tooltip,
 } from '@wordpress/components';
 import { usePrevious, useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -129,54 +128,38 @@ export default function PostSavedState( { forceIsDirty } ) {
 		text = shortLabel;
 	}
 
-	const buttonAccessibleLabel = text || label;
-
-	/**
-	 * The tooltip needs to be enabled only if the button is not disabled. When
-	 * relying on the internal Button tooltip functionality, this causes the
-	 * resulting `button` element to be always removed and re-added to the DOM,
-	 * causing focus loss. An alternative approach to circumvent the issue
-	 * is not to use the `label` and `shortcut` props on `Button` (which would
-	 * trigger the tooltip), and instead manually wrap the `Button` in a separate
-	 * `Tooltip` component.
-	 */
-	const tooltipProps = isDisabled
-		? undefined
-		: {
-				text: buttonAccessibleLabel,
-				shortcut: displayShortcut.primary( 's' ),
-		  };
-
 	// Use common Button instance for all saved states so that focus is not
 	// lost.
 	return (
-		<Tooltip { ...tooltipProps }>
-			<Button
-				className={
-					isSaveable || isSaving
-						? classnames( {
-								'editor-post-save-draft': ! isSavedState,
-								'editor-post-saved-state': isSavedState,
-								'is-saving': isSaving,
-								'is-autosaving': isAutosaving,
-								'is-saved': isSaved,
-								[ getAnimateClassName( {
-									type: 'loading',
-								} ) ]: isSaving,
-						  } )
-						: undefined
-				}
-				onClick={ isDisabled ? undefined : () => savePost() }
-				variant="tertiary"
-				size="compact"
-				icon={ isLargeViewport ? undefined : cloudUpload }
-				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
-				aria-label={ buttonAccessibleLabel }
-				aria-disabled={ isDisabled }
-			>
-				{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
-				{ text }
-			</Button>
-		</Tooltip>
+		<Button
+			className={
+				isSaveable || isSaving
+					? classnames( {
+							'editor-post-save-draft': ! isSavedState,
+							'editor-post-saved-state': isSavedState,
+							'is-saving': isSaving,
+							'is-autosaving': isAutosaving,
+							'is-saved': isSaved,
+							[ getAnimateClassName( {
+								type: 'loading',
+							} ) ]: isSaving,
+					  } )
+					: undefined
+			}
+			onClick={ isDisabled ? undefined : () => savePost() }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
+			variant="tertiary"
+			size="compact"
+			icon={ isLargeViewport ? undefined : cloudUpload }
+			label={ text || label }
+			aria-disabled={ isDisabled }
+		>
+			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
+			{ text }
+		</Button>
 	);
 }

package/src/components/post-schedule/check.js

@@ -1,29 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostScheduleCheck( { hasPublishAction, children } ) {
+export default function PostScheduleCheck( { children } ) {
+	const hasPublishAction = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPost()._links?.[
+				'wp:action-publish'
+			] ?? false
+		);
+	}, [] );
+
 	if ( ! hasPublishAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getCurrentPostType } = select( editorStore );
-		return {
-			hasPublishAction:
-				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
-			postType: getCurrentPostType(),
-		};
-	} ),
-] )( PostScheduleCheck );

package/src/components/post-schedule/test/check.js

@@ -3,25 +3,40 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostScheduleCheck } from '../check';
+import PostScheduleCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupMockSelect( hasPublishAction ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostScheduleCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ false }>
-				yes
-			</PostScheduleCheck>
-		);
+		setupMockSelect( false );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ true }>yes</PostScheduleCheck>
-		);
+		setupMockSelect( true );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
 } );

package/src/components/preferences-modal/enable-panel.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { compose, ifCondition } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default compose(
+	withSelect( ( select, { panelName } ) => {
+		const { isEditorPanelEnabled, isEditorPanelRemoved } =
+			select( editorStore );
+		return {
+			isRemoved: isEditorPanelRemoved( panelName ),
+			isChecked: isEditorPanelEnabled( panelName ),
+		};
+	} ),
+	ifCondition( ( { isRemoved } ) => ! isRemoved ),
+	withDispatch( ( dispatch, { panelName } ) => ( {
+		onChange: () =>
+			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
+	} ) )
+)( PreferenceBaseOption );

package/src/components/preferences-modal/enable-plugin-document-setting-panel.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import EnablePanelOption from './enable-panel';
+
+const { Fill, Slot } = createSlotFill(
+	'EnablePluginDocumentSettingPanelOption'
+);
+
+const EnablePluginDocumentSettingPanelOption = ( { label, panelName } ) => (
+	<Fill>
+		<EnablePanelOption label={ label } panelName={ panelName } />
+	</Fill>
+);
+
+EnablePluginDocumentSettingPanelOption.Slot = Slot;
+
+export default EnablePluginDocumentSettingPanelOption;