@wordpress/edit-widgets 4.7.0 → 4.10.0

package/src/components/error-boundary/index.js

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
+import { doAction } from '@wordpress/hooks';
 
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
@@ -29,6 +30,8 @@ export default class ErrorBoundary extends Component {
 
 	componentDidCatch( error ) {
 		this.setState( { error } );
+
+		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
 	reboot() {

package/src/components/header/index.js

@@ -35,19 +35,15 @@ function Header() {
 		[ widgetAreaClientId ]
 	);
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } = select(
-			editWidgetsStore
-		);
+		const { isInserterOpened, isListViewOpened } =
+			select( editWidgetsStore );
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
 		};
 	}, [] );
-	const {
-		setIsWidgetAreaOpen,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editWidgetsStore );
+	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editWidgetsStore );
 	const { selectBlock } = useDispatch( blockEditorStore );
 	const handleClick = () => {
 		if ( isInserterOpen ) {

package/src/components/header/style.scss

@@ -25,18 +25,12 @@
 
 .edit-widgets-header__actions {
 	display: flex;
+	align-items: center;
 
-	.components-button {
-		margin-right: $grid-unit-05;
-
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
-	}
+	gap: $grid-unit-05;
 
-	.edit-widgets-more-menu .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 }
 

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

@@ -20,8 +20,20 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primaryShift', character: 'k' },
 		description: __( 'Remove a link.' ),
 	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page' ),
+	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +36,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-widgets-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

package/src/components/layout/interface.js

@@ -36,11 +36,8 @@ const interfaceLabels = {
 function Interface( { blockEditorSettings } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const {
-		setIsInserterOpened,
-		setIsListViewOpened,
-		closeGeneralSidebar,
-	} = useDispatch( editWidgetsStore );
+	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
+		useDispatch( editWidgetsStore );
 	const {
 		hasBlockBreadCrumbsEnabled,
 		hasSidebarEnabled,

package/src/components/save-button/index.js

@@ -12,9 +12,8 @@ import { store as editWidgetsStore } from '../../store';
 
 function SaveButton() {
 	const { hasEditedWidgetAreaIds, isSaving } = useSelect( ( select ) => {
-		const { getEditedWidgetAreas, isSavingWidgetAreas } = select(
-			editWidgetsStore
-		);
+		const { getEditedWidgetAreas, isSavingWidgetAreas } =
+			select( editWidgetsStore );
 
 		return {
 			hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,

package/src/components/secondary-sidebar/index.js

@@ -15,9 +15,8 @@ import ListViewSidebar from './list-view-sidebar';
 
 export default function SecondarySidebar() {
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } = select(
-			editWidgetsStore
-		);
+		const { isInserterOpened, isListViewOpened } =
+			select( editWidgetsStore );
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),

package/src/components/sidebar/index.js

@@ -69,11 +69,8 @@ export default function Sidebar() {
 		isGeneralSidebarOpen,
 		selectedWidgetAreaBlock,
 	} = useSelect( ( select ) => {
-		const {
-			getSelectedBlock,
-			getBlock,
-			getBlockParentsByBlockName,
-		} = select( blockEditorStore );
+		const { getSelectedBlock, getBlock, getBlockParentsByBlockName } =
+			select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 
 		const selectedBlock = getSelectedBlock();

package/src/components/test/error-boundary.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../error-boundary';
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );

package/src/components/widget-areas-block-editor-provider/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { defaultTo } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,10 +36,8 @@ export default function WidgetAreasBlockEditorProvider( {
 		keepCaretInsideBlock,
 	} = useSelect(
 		( select ) => ( {
-			hasUploadPermissions: defaultTo(
-				select( coreStore ).canUser( 'create', 'media' ),
-				true
-			),
+			hasUploadPermissions:
+				select( coreStore ).canUser( 'create', 'media' ) ?? true,
 			widgetAreas: select( editWidgetsStore ).getWidgetAreas(),
 			widgets: select( editWidgetsStore ).getWidgets(),
 			reusableBlocks: ALLOW_REUSABLE_BLOCKS

package/src/filters/move-to-widget-area.js

@@ -16,33 +16,28 @@ import { store as editWidgetsStore } from '../store';
 const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { clientId, name: blockName } = props;
-		const {
-			widgetAreas,
-			currentWidgetAreaId,
-			canInsertBlockInWidgetArea,
-		} = useSelect(
-			( select ) => {
-				// Component won't display for a widget area, so don't run selectors.
-				if ( blockName === 'core/widget-area' ) {
-					return {};
-				}
+		const { widgetAreas, currentWidgetAreaId, canInsertBlockInWidgetArea } =
+			useSelect(
+				( select ) => {
+					// Component won't display for a widget area, so don't run selectors.
+					if ( blockName === 'core/widget-area' ) {
+						return {};
+					}
 
-				const selectors = select( editWidgetsStore );
+					const selectors = select( editWidgetsStore );
 
-				const widgetAreaBlock = selectors.getParentWidgetAreaBlock(
-					clientId
-				);
+					const widgetAreaBlock =
+						selectors.getParentWidgetAreaBlock( clientId );
 
-				return {
-					widgetAreas: selectors.getWidgetAreas(),
-					currentWidgetAreaId: widgetAreaBlock?.attributes?.id,
-					canInsertBlockInWidgetArea: selectors.canInsertBlockInWidgetArea(
-						blockName
-					),
-				};
-			},
-			[ clientId, blockName ]
-		);
+					return {
+						widgetAreas: selectors.getWidgetAreas(),
+						currentWidgetAreaId: widgetAreaBlock?.attributes?.id,
+						canInsertBlockInWidgetArea:
+							selectors.canInsertBlockInWidgetArea( blockName ),
+					};
+				},
+				[ clientId, blockName ]
+			);
 
 		const { moveBlockToWidgetArea } = useDispatch( editWidgetsStore );
 		const hasMultipleWidgetAreas = widgetAreas?.length > 1;

package/src/hooks/use-last-selected-widget-area.js

@@ -19,9 +19,8 @@ import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../store/utils';
  */
 const useLastSelectedWidgetArea = () =>
 	useSelect( ( select ) => {
-		const { getBlockSelectionEnd, getBlockName } = select(
-			blockEditorStore
-		);
+		const { getBlockSelectionEnd, getBlockName } =
+			select( blockEditorStore );
 		const selectionEndClientId = getBlockSelectionEnd();
 
 		// If the selected block is a widget area, return its clientId.
@@ -30,9 +29,8 @@ const useLastSelectedWidgetArea = () =>
 		}
 
 		const { getParentWidgetAreaBlock } = select( widgetsEditorStore );
-		const widgetAreaBlock = getParentWidgetAreaBlock(
-			selectionEndClientId
-		);
+		const widgetAreaBlock =
+			getParentWidgetAreaBlock( selectionEndClientId );
 		const widgetAreaBlockClientId = widgetAreaBlock?.clientId;
 
 		if ( widgetAreaBlockClientId ) {

package/src/hooks/use-widget-library-insertion-point.js

@@ -32,9 +32,8 @@ const useWidgetLibraryInsertionPoint = () => {
 				getBlockIndex,
 			} = select( blockEditorStore );
 
-			const insertionPoint = select(
-				editWidgetsStore
-			).__experimentalGetInsertionPoint();
+			const insertionPoint =
+				select( editWidgetsStore ).__experimentalGetInsertionPoint();
 
 			// "Browse all" in the quick inserter will set the rootClientId to the current block.
 			// Otherwise, it will just be undefined, and we'll have to handle it differently below.