@wordpress/edit-site 4.1.0-next.e230fbab09.0 → 4.2.0

package/src/components/header/style.scss

@@ -163,3 +163,48 @@ body.is-navigation-sidebar-open {
 		}
 	}
 }
+
+// Button text label styles
+
+.show-icon-labels .edit-site-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
+	.edit-site-save-button__button {
+		padding-left: 6px;
+		padding-right: 6px;
+		margin-right: $grid-unit-05;
+	}
+	.block-editor-post-preview__button-toggle {
+		margin-right: $grid-unit-05;
+	}
+	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
+	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+		&::after {
+			content: none;
+		}
+
+		height: 36px;
+		padding: 0 6px;
+	}
+}

package/src/components/list/actions/rename-menu-item.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	Button,
 	Flex,
@@ -19,7 +19,6 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { getLastEntitySaveError } = useSelect( coreStore );
 	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
 		coreStore
 	);
@@ -48,19 +47,10 @@ export default function RenameMenuItem( { template, onClose } ) {
 			await saveEditedEntityRecord(
 				'postType',
 				template.type,
-				template.id
+				template.id,
+				{ throwOnError: true }
 			);
 
-			const lastError = getLastEntitySaveError(
-				'postType',
-				template.type,
-				template.id
-			);
-
-			if ( lastError ) {
-				throw lastError;
-			}
-
 			createSuccessNotice( __( 'Entity renamed.' ), {
 				type: 'snackbar',
 			} );

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export default function EnableFeature( props ) {
+	const { featureName, ...remainingProps } = props;
+	const isChecked = useSelect(
+		( select ) =>
+			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
+		[ featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => toggle( 'core/edit-site', featureName );
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}

package/src/components/preferences-modal/index.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+} from '@wordpress/interface';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import EnableFeature from './enable-feature';
+
+export default function EditSitePreferencesModal( {
+	isModalActive,
+	toggleModal,
+} ) {
+	const sections = useMemo( () => [
+		{
+			name: 'general',
+			tabLabel: __( 'General' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Appearance' ) }
+					description={ __(
+						'Customize options related to the block editor interface and editing flow.'
+					) }
+				>
+					<EnableFeature
+						featureName="focusMode"
+						help={ __(
+							'Highlights the current block and fades other content.'
+						) }
+						label={ __( 'Spotlight mode' ) }
+					/>
+					<EnableFeature
+						featureName="showIconLabels"
+						label={ __( 'Show button text labels' ) }
+						help={ __( 'Show text instead of icons on buttons' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+		{
+			name: 'blocks',
+			tabLabel: __( 'Blocks' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Block interactions' ) }
+					description={ __(
+						'Customize how you interact with blocks in the block library and editing canvas.'
+					) }
+				>
+					<EnableFeature
+						featureName="keepCaretInsideBlock"
+						help={ __(
+							'Aids screen readers by stopping text caret from leaving blocks.'
+						) }
+						label={ __( 'Contain text cursor inside block' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+	] );
+	if ( ! isModalActive ) {
+		return null;
+	}
+	return (
+		<PreferencesModal closeModal={ toggleModal }>
+			<PreferencesModalTabs sections={ sections } />
+		</PreferencesModal>
+	);
+}

package/src/index.js

@@ -61,6 +61,7 @@ export function reinitializeEditor( target, settings ) {
 			editorMode: 'visual',
 			fixedToolbar: false,
 			focusMode: false,
+			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
 		} );

package/src/store/actions.js

@@ -333,11 +333,11 @@ export const revertTemplate = (
 	}
 
 	try {
-		const templateEntity = registry
+		const templateEntityConfig = registry
 			.select( coreStore )
-			.getEntity( 'postType', template.type );
+			.getEntityConfig( 'postType', template.type );
 
-		if ( ! templateEntity ) {
+		if ( ! templateEntityConfig ) {
 			registry
 				.dispatch( noticesStore )
 				.createErrorNotice(
@@ -350,7 +350,7 @@ export const revertTemplate = (
 		}
 
 		const fileTemplatePath = addQueryArgs(
-			`${ templateEntity.baseURL }/${ template.id }`,
+			`${ templateEntityConfig.baseURL }/${ template.id }`,
 			{ context: 'edit', source: 'theme' }
 		);
 

package/src/store/selectors.js

@@ -120,6 +120,14 @@ export const getSettings = createSelector(
 				state,
 				'fixedToolbar'
 			),
+			keepCaretInsideBlock: !! __unstableGetPreference(
+				state,
+				'keepCaretInsideBlock'
+			),
+			showIconLabels: !! __unstableGetPreference(
+				state,
+				'showIconLabels'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
 			__experimentalPreferPatternsOnRoot:
@@ -145,6 +153,8 @@ export const getSettings = createSelector(
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
+		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
+		__unstableGetPreference( state, 'showIconLabels' ),
 		getReusableBlocks( state ),
 		getEditedPostType( state ),
 	]

package/src/store/test/selectors.js

@@ -79,6 +79,8 @@ describe( 'selectors', () => {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
+				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				__experimentalPreferPatternsOnRoot: true,
@@ -102,6 +104,8 @@ describe( 'selectors', () => {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				keepCaretInsideBlock: false,
+				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),