@wordpress/edit-post 6.18.0 → 6.19.0

package/build-style/style.css

@@ -306,10 +306,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+.interface-interface-skeleton__content .interface-navigable-region__stacker {
+  flex-grow: 1;
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-  display: block;
   flex-shrink: 0;
   position: absolute;
   z-index: 100000;
@@ -324,9 +326,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
     position: relative !important;
-    z-index: 90;
     width: auto;
   }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
 }
 
 .interface-interface-skeleton__sidebar {
@@ -390,11 +395,17 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 280px;
   color: #1e1e1e;
 }
-.interface-interface-skeleton__actions:focus {
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
   top: auto;
   bottom: 0;
 }
 
+@media (min-width: 782px) {
+  .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
+    height: calc(100% - 25px);
+  }
+}
+
 .interface-more-menu-dropdown {
   margin-left: -4px;
 }
@@ -683,17 +694,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
+.show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
 .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
+.show-icon-labels .edit-post-header .editor-post-saved-state.editor-post-saved-state::after,
+.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after,
+.edit-post-header__dropdown .editor-post-saved-state.editor-post-saved-state::after {
   content: none;
 }
-@media (min-width: 600px) {
-  .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
-.show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
-.edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
-    content: attr(aria-label);
-  }
-}
 
 .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
 .edit-post-header__dropdown .components-button.editor-history__undo,
@@ -747,7 +754,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
   visibility: hidden;
 }
-.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
   display: none;
 }
 .is-distraction-free .interface-interface-skeleton__header:focus-within {
@@ -1176,6 +1183,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   bottom: auto;
   left: auto;
   right: 0;
+  box-sizing: border-box;
   width: 280px;
   background-color: #fff;
   border: 1px dotted #ddd;
@@ -1184,11 +1192,15 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   display: flex;
   justify-content: center;
 }
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-sidebar-panel,
-.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel,
-.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel {
+
+.interface-interface-skeleton__sidebar:focus .edit-post-layout__toggle-sidebar-panel, .interface-interface-skeleton__sidebar:focus-within .edit-post-layout__toggle-sidebar-panel {
+  top: auto;
+  bottom: 0;
+}
+
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel,
+.interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel,
+.interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel {
   top: auto;
   bottom: 0;
 }
@@ -1242,27 +1254,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 .edit-post-block-manager__checklist-item {
   border-bottom: 1px solid #ddd;
 }
-.edit-post-block-manager__category-title .components-base-control__field,
-.edit-post-block-manager__checklist-item .components-base-control__field {
-  align-items: center;
-  display: flex;
-  margin: 0;
-}
 
 .edit-post-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 0;
-  padding-left: 16px;
+  padding: 8px 0 8px 16px;
 }
 .components-modal__content .edit-post-block-manager__checklist-item.components-checkbox-control__input-container {
   margin: 0 8px;
 }
-.edit-post-block-manager__checklist-item .components-checkbox-control__label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-  padding: 8px 0;
-}
 .edit-post-block-manager__checklist-item .block-editor-block-icon {
   margin-right: 10px;
   fill: #1e1e1e;
@@ -1366,16 +1368,16 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .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 {
   width: 350px;
 }
-.edit-post-editor__list-view-panel .edit-post-sidebar__panel-tabs {
+.edit-post-editor__document-overview-panel .edit-post-sidebar__panel-tabs {
   flex-direction: row-reverse;
 }
 
@@ -1395,7 +1397,7 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
-.edit-post-editor__list-view-panel-header {
+.edit-post-editor__document-overview-panel-header {
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
@@ -1403,17 +1405,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding-left: 16px;
   padding-right: 4px;
 }
-.edit-post-editor__list-view-panel-header ul {
+.edit-post-editor__document-overview-panel-header ul {
   width: calc(100% - 40px);
 }
-.edit-post-editor__list-view-panel-header li {
+.edit-post-editor__document-overview-panel-header li {
   width: 50%;
 }
-.edit-post-editor__list-view-panel-header li button {
+.edit-post-editor__document-overview-panel-header li button {
   width: 100%;
   text-align: initial;
 }
-.edit-post-editor__list-view-panel-header li:only-child {
+.edit-post-editor__document-overview-panel-header li:only-child {
   width: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.18.0",
+	"version": "6.19.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/block-library": "^7.18.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/editor": "^12.20.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/interface": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/media-utils": "^4.12.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/plugins": "^4.19.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/viewport": "^4.19.0",
-		"@wordpress/warning": "^2.21.0",
+		"@wordpress/a11y": "^3.22.0",
+		"@wordpress/api-fetch": "^6.19.0",
+		"@wordpress/block-editor": "^10.5.0",
+		"@wordpress/block-library": "^7.19.0",
+		"@wordpress/blocks": "^11.21.0",
+		"@wordpress/components": "^22.1.0",
+		"@wordpress/compose": "^5.20.0",
+		"@wordpress/core-data": "^5.5.0",
+		"@wordpress/data": "^7.6.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/editor": "^12.21.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/hooks": "^3.22.0",
+		"@wordpress/i18n": "^4.22.0",
+		"@wordpress/icons": "^9.13.0",
+		"@wordpress/interface": "^4.21.0",
+		"@wordpress/keyboard-shortcuts": "^3.20.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/media-utils": "^4.13.0",
+		"@wordpress/notices": "^3.22.0",
+		"@wordpress/plugins": "^4.20.0",
+		"@wordpress/preferences": "^2.14.0",
+		"@wordpress/url": "^3.23.0",
+		"@wordpress/viewport": "^4.20.0",
+		"@wordpress/warning": "^2.22.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/components/block-manager/category.js

@@ -71,15 +71,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 	const titleId = 'edit-post-block-manager__category-title-' + instanceId;
 
 	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
-
-	let ariaChecked;
-	if ( isAllChecked ) {
-		ariaChecked = 'true';
-	} else if ( checkedBlockNames.length > 0 ) {
-		ariaChecked = 'mixed';
-	} else {
-		ariaChecked = 'false';
-	}
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
 
 	return (
 		<div
@@ -88,10 +80,11 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			className="edit-post-block-manager__category"
 		>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
 				className="edit-post-block-manager__category-title"
-				aria-checked={ ariaChecked }
+				indeterminate={ isIndeterminate }
 				label={ <span id={ titleId }>{ title }</span> }
 			/>
 			<BlockTypesChecklist

package/src/components/block-manager/checklist.js

@@ -13,17 +13,14 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 					className="edit-post-block-manager__checklist-item"
 				>
 					<CheckboxControl
-						label={
-							<>
-								{ blockType.title }
-								<BlockIcon icon={ blockType.icon } />
-							</>
-						}
+						__nextHasNoMarginBottom
+						label={ blockType.title }
 						checked={ value.includes( blockType.name ) }
 						onChange={ ( ...args ) =>
 							onItemChange( blockType.name, ...args )
 						}
 					/>
+					<BlockIcon icon={ blockType.icon } />
 				</li>
 			) ) }
 		</ul>

package/src/components/block-manager/style.scss

@@ -51,30 +51,19 @@
 .edit-post-block-manager__category-title,
 .edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin: 0;
-	}
 }
 
 .edit-post-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	margin-bottom: 0;
-	padding-left: $grid-unit-20;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
 
 	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-unit-10;
 	}
 
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: $grid-unit-10 0;
-	}
-
 	.block-editor-block-icon {
 		margin-right: 10px;
 		fill: $gray-900;

package/src/components/header/header-toolbar/index.js

@@ -78,12 +78,12 @@ function HeaderToolbar() {
 		<>
 			<ToolbarItem
 				as={ Button }
-				className="edit-post-header-toolbar__list-view-toggle"
+				className="edit-post-header-toolbar__document-overview-toggle"
 				icon={ listView }
 				disabled={ isTextModeEnabled }
 				isPressed={ isListViewOpen }
 				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'List View' ) }
+				label={ __( 'Document Overview' ) }
 				onClick={ toggleListView }
 				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }

package/src/components/header/style.scss

@@ -146,16 +146,11 @@
 		}
 	}
 
-	// The post saved state button has a custom label only on small breakpoint
-	.editor-post-save-draft.editor-post-save-draft {
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
 		&::after {
 			content: none;
 		}
-		@include break-small {
-			&::after {
-				content: attr(aria-label);
-			}
-		}
 	}
 }
 
@@ -220,7 +215,7 @@
 		}
 
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle,
+		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
 		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -821,6 +821,76 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             </kbd>
           </div>
         </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current heading to a paragraph.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 0"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                0
+              </kbd>
+            </kbd>
+          </div>
+        </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current paragraph or heading to a heading of level 1 to 6.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 1 6"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                1-6
+              </kbd>
+            </kbd>
+          </div>
+        </li>
       </ul>
     </section>
   </div>

package/src/components/keyboard-shortcuts/index.js

@@ -12,6 +12,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -53,6 +54,35 @@ function KeyboardShortcuts() {
 		closeGeneralSidebar();
 	};
 
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const currentAttributes = getBlockAttributes( currentClientId );
+		const { content: currentContent, align: currentAlign } =
+			currentAttributes;
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: currentContent,
+				align: currentAlign,
+			} )
+		);
+	};
+
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-mode',
@@ -133,6 +163,10 @@ function KeyboardShortcuts() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 
@@ -145,6 +179,28 @@ function KeyboardShortcuts() {
 				character: 'h',
 			},
 		} );
+
+		registerShortcut( {
+			name: `core/block-editor/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
 	}, [] );
 
 	useShortcut(
@@ -198,6 +254,21 @@ function KeyboardShortcuts() {
 		setIsListViewOpened( ! isListViewOpened() )
 	);
 
+	useShortcut(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/block-editor/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 

package/src/components/layout/index.js

@@ -164,7 +164,7 @@ function Layout( { styles } ) {
 	);
 
 	const secondarySidebarLabel = isListViewOpened
-		? __( 'List View' )
+		? __( 'Document Overview' )
 		: __( 'Block Library' );
 
 	const secondarySidebar = () => {

package/src/components/layout/style.scss

@@ -60,7 +60,6 @@
 	justify-content: center;
 }
 
-
 .edit-post-layout__toggle-publish-panel,
 .edit-post-layout__toggle-sidebar-panel,
 .edit-post-layout__toggle-entities-saved-states-panel {
@@ -70,6 +69,7 @@
 	bottom: auto;
 	left: auto;
 	right: 0;
+	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
 	border: 1px dotted $gray-300;
@@ -77,7 +77,18 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
+}
+
+.edit-post-layout__toggle-sidebar-panel {
+	.interface-interface-skeleton__sidebar:focus &,
+	.interface-interface-skeleton__sidebar:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}
 
+.edit-post-layout__toggle-entities-saved-states-panel,
+.edit-post-layout__toggle-publish-panel {
 	.interface-interface-skeleton__actions:focus &,
 	.interface-interface-skeleton__actions:focus-within & {
 		top: auto;

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

@@ -116,7 +116,7 @@ export default function EditPostPreferencesModal() {
 								help={ __(
 									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
 								) }
-								label={ __( 'Distraction Free' ) }
+								label={ __( 'Distraction free' ) }
 							/>
 							<EnableFeature
 								featureName="focusMode"

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -253,7 +253,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     class="components-toggle-control__label"
                     for="inspector-toggle-control-1"
                   >
-                    Distraction Free
+                    Distraction free
                   </label>
                 </div>
               </div>
@@ -580,13 +580,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var( --wp-admin-theme-color, #007cba);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var( --wp-admin-theme-color, #007cba);
-  border-color: var( --wp-admin-theme-color, #007cba);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 3px solid transparent;
 }