@wordpress/edit-post 6.18.0 → 7.0.0

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

@@ -66,6 +66,7 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
+	const isLargeViewport = useViewportMatch( 'large' );
 	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -116,7 +117,8 @@ function Layout( { styles } ) {
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
+				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
+				isLargeViewport,
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
@@ -164,7 +166,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/meta-boxes-section.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,8 +23,7 @@ export function MetaBoxesSection( {
 	...sectionProps
 } ) {
 	// The 'Custom Fields' meta box is a special case that we handle separately.
-	const thirdPartyMetaBoxes = filter(
-		metaBoxes,
+	const thirdPartyMetaBoxes = metaBoxes.filter(
 		( { id } ) => id !== 'postcustom'
 	);
 

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -41,6 +41,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -72,7 +83,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           />
         </div>
@@ -134,6 +147,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -166,7 +190,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           />
         </div>
@@ -217,6 +243,17 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -249,7 +286,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           />
         </div>
@@ -311,6 +350,17 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
     class="interface-preferences-modal__option"
@@ -342,7 +392,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           />
         </div>

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

@@ -42,6 +42,17 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-8 {
   margin-top: calc(4px * 2);
   margin-bottom: 0;
   font-size: 12px;
@@ -186,7 +197,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-0"
                   >
                     Include pre-publish checklist
@@ -194,7 +207,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-0__help"
               >
                 Review settings, such as visibility and tags.
@@ -250,15 +263,17 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-1"
                   >
-                    Distraction Free
+                    Distraction free
                   </label>
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-1__help"
               >
                 Reduce visual distractions by hiding the toolbar and other elements to focus on writing.
@@ -296,7 +311,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-2"
                   >
                     Spotlight mode
@@ -304,7 +321,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-2__help"
               >
                 Highlights the current block and fades other content.
@@ -342,7 +359,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-3"
                   >
                     Show button text labels
@@ -350,7 +369,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-3__help"
               >
                 Show text instead of icons on buttons.
@@ -388,7 +407,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-4"
                   >
                     Always open list view
@@ -396,7 +417,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-4__help"
               >
                 Opens the block list view sidebar by default.
@@ -434,7 +455,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-5"
                   >
                     Use theme styles
@@ -442,7 +465,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-5__help"
               >
                 Make the editor look like your theme.
@@ -480,7 +503,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                     />
                   </span>
                   <label
-                    class="components-toggle-control__label"
+                    class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexBlock"
                     for="inspector-toggle-control-6"
                   >
                     Display block breadcrumbs
@@ -488,7 +513,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 </div>
               </div>
               <p
-                class="components-base-control__help emotion-6 emotion-7"
+                class="components-base-control__help emotion-8 emotion-9"
                 id="inspector-toggle-control-6__help"
               >
                 Shows block breadcrumbs at the bottom of the editor.
@@ -580,13 +605,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;
 }
 

package/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -41,6 +41,17 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -83,7 +94,9 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           >
             Custom fields
@@ -136,6 +149,17 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -178,7 +202,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           >
             Custom fields
@@ -218,7 +244,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-4"
           >
             Meta Box 1
@@ -258,7 +286,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-5"
           >
             Meta Box 2
@@ -311,6 +341,17 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -354,7 +395,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           >
             Meta Box 1
@@ -394,7 +437,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           >
             Meta Box 2