@wordpress/block-library 7.7.0 → 7.10.0

package/src/media-text/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,7 @@ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 import { imageFillStyles } from './media-container';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 const migrateCustomColors = ( attributes ) => {
 	if ( ! attributes.customBackgroundColor ) {
@@ -173,7 +174,8 @@ export default [
 				'has-background': backgroundClass || customBackgroundColor,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill
@@ -268,7 +270,8 @@ export default [
 				'has-media-on-the-right': 'right' === mediaPosition,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill

package/src/media-text/edit.native.js

@@ -395,11 +395,8 @@ class MediaTextEdit extends Component {
 export default compose(
 	withColors( 'backgroundColor' ),
 	withSelect( ( select, { clientId } ) => {
-		const {
-			getSelectedBlockClientId,
-			getBlockParents,
-			getSettings,
-		} = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlockParents, getSettings } =
+			select( blockEditorStore );
 
 		const parents = getBlockParents( clientId, true );
 

package/src/media-text/media-container.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,6 +29,7 @@ import icon from './media-container-icon';
  * Constants
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+const noop = () => {};
 
 export function imageFillStyles( url, focalPoint ) {
 	return url

package/src/media-text/media-container.native.js

@@ -50,16 +50,13 @@ class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
 		this.onMediaPressed = this.onMediaPressed.bind( this );
 
 		this.state = {

package/src/media-text/save.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import { imageFillStyles } from './media-container';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 export default function save( { attributes } ) {
 	const {

package/src/missing/edit.native.js

@@ -298,9 +298,8 @@ export default compose( [
 			canEnableUnsupportedBlockEditor:
 				getSettings( 'capabilities' )
 					.canEnableUnsupportedBlockEditor === true,
-			isEditableInUnsupportedBlockEditor: ! UBE_INCOMPATIBLE_BLOCKS.includes(
-				attributes.originalName
-			),
+			isEditableInUnsupportedBlockEditor:
+				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

package/src/missing/test/edit-integration.native.js

@@ -48,9 +48,8 @@ describe( 'Unsupported block', () => {
 			getByA11yLabel( /Unsupported Block\. Row 1/ )
 		);
 
-		const translatedTableTitle = within( missingBlock ).getByText(
-			'Tabla'
-		);
+		const translatedTableTitle =
+			within( missingBlock ).getByText( 'Tabla' );
 
 		expect( translatedTableTitle ).toBeDefined();
 	} );

package/src/missing/test/edit.native.js

@@ -74,9 +74,8 @@ describe( 'Missing block', () => {
 
 			it( 'renders edit action if UBE is available', () => {
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				const bottomSheetCells = bottomSheet.props.children[ 1 ];
 				expect( bottomSheetCells ).toBeTruthy();
 				expect( bottomSheetCells.props.children.length ).toBe( 2 );
@@ -91,9 +90,8 @@ describe( 'Missing block', () => {
 				} );
 
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 
@@ -101,9 +99,8 @@ describe( 'Missing block', () => {
 				const testInstance = getTestComponentWithContent( {
 					originalName: 'core/block',
 				} );
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 		} );

package/src/more/edit.js

@@ -53,17 +53,15 @@ export default function MoreEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
-				<div className="wp-block-more">
-					<input
-						aria-label={ __( 'Read more link text' ) }
-						type="text"
-						value={ customText }
-						placeholder={ DEFAULT_TEXT }
-						onChange={ onChangeInput }
-						onKeyDown={ onKeyDown }
-						style={ style }
-					/>
-				</div>
+				<input
+					aria-label={ __( 'Read more link text' ) }
+					type="text"
+					value={ customText }
+					placeholder={ DEFAULT_TEXT }
+					onChange={ onChangeInput }
+					onKeyDown={ onKeyDown }
+					style={ style }
+				/>
 			</div>
 		</>
 	);

package/src/navigation/block.json

@@ -114,6 +114,15 @@
 			"default": {
 				"type": "flex"
 			}
+		},
+		"__experimentalStyle": {
+			"elements": {
+				"link": {
+					"color": {
+						"text": "inherit"
+					}
+				}
+			}
 		}
 	},
 	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],

package/src/navigation/deprecated.js

@@ -33,11 +33,8 @@ const migrateWithLayout = ( attributes ) => {
 		return attributes;
 	}
 
-	const {
-		itemsJustification,
-		orientation,
-		...updatedAttributes
-	} = attributes;
+	const { itemsJustification, orientation, ...updatedAttributes } =
+		attributes;
 
 	if ( itemsJustification || orientation ) {
 		Object.assign( updatedAttributes, {

package/src/navigation/edit/index.js

@@ -79,8 +79,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 	setColor( getComputedStyle( colorsDetectionElement ).color );
 
 	let backgroundColorNode = colorsDetectionElement;
-	let backgroundColor = getComputedStyle( backgroundColorNode )
-		.backgroundColor;
+	let backgroundColor =
+		getComputedStyle( backgroundColorNode ).backgroundColor;
 	while (
 		backgroundColor === 'rgba(0, 0, 0, 0)' &&
 		backgroundColorNode.parentNode &&
@@ -88,8 +88,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
 			backgroundColorNode.parentNode.ELEMENT_NODE
 	) {
 		backgroundColorNode = backgroundColorNode.parentNode;
-		backgroundColor = getComputedStyle( backgroundColorNode )
-			.backgroundColor;
+		backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
 	}
 
 	setBackground( backgroundColor );
@@ -147,12 +147,10 @@ function Navigation( {
 		name: 'block-library/core/navigation/delete',
 	} );
 
-	const [
-		showNavigationMenuCreateNotice,
-		hideNavigationMenuCreateNotice,
-	] = useNavigationNotice( {
-		name: 'block-library/core/navigation/create',
-	} );
+	const [ showNavigationMenuCreateNotice, hideNavigationMenuCreateNotice ] =
+		useNavigationNotice( {
+			name: 'block-library/core/navigation/create',
+		} );
 
 	const {
 		create: createNavigationMenu,
@@ -199,16 +197,16 @@ function Navigation( {
 		hasSubmenus,
 	} = useSelect(
 		( select ) => {
-			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const { getBlock, getBlocks, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 
 			// This relies on the fact that `getBlock` won't return controlled
 			// inner blocks, while `getBlocks` does. It might be more stable to
 			// introduce a selector like `getUncontrolledInnerBlocks`, just in
 			// case `getBlock` is fixed.
 			const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks;
-			const _hasUncontrolledInnerBlocks = !! _uncontrolledInnerBlocks?.length;
+			const _hasUncontrolledInnerBlocks =
+				!! _uncontrolledInnerBlocks?.length;
 			const _controlledInnerBlocks = _hasUncontrolledInnerBlocks
 				? EMPTY_ARRAY
 				: getBlocks( clientId );
@@ -233,14 +231,11 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
-	const [
-		hasSavedUnsavedInnerBlocks,
-		setHasSavedUnsavedInnerBlocks,
-	] = useState( false );
+	const [ hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks ] =
+		useState( false );
 
-	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
-		false
-	);
+	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
+		useState( false );
 
 	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
 
@@ -335,10 +330,8 @@ function Navigation( {
 				'no-wrap': flexWrap === 'nowrap',
 				'is-responsive': 'never' !== overlayMenu,
 				'has-text-color': !! textColor.color || !! textColor?.class,
-				[ getColorClassName(
-					'color',
-					textColor?.slug
-				) ]: !! textColor?.slug,
+				[ getColorClassName( 'color', textColor?.slug ) ]:
+					!! textColor?.slug,
 				'has-background':
 					!! backgroundColor.color || backgroundColor.class,
 				[ getColorClassName(
@@ -360,10 +353,8 @@ function Navigation( {
 	const overlayClassnames = classnames( {
 		'has-text-color':
 			!! overlayTextColor.color || !! overlayTextColor?.class,
-		[ getColorClassName(
-			'color',
-			overlayTextColor?.slug
-		) ]: !! overlayTextColor?.slug,
+		[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
+			!! overlayTextColor?.slug,
 		'has-background':
 			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
 		[ getColorClassName(
@@ -481,6 +472,7 @@ function Navigation( {
 
 		if ( isSelected || isInnerBlockSelected ) {
 			if (
+				ref &&
 				hasResolvedCanUserUpdateNavigationMenu &&
 				! canUserUpdateNavigationMenu
 			) {
@@ -506,19 +498,16 @@ function Navigation( {
 	] );
 
 	const navigationSelectorRef = useRef();
-	const [
-		shouldFocusNavigationSelector,
-		setShouldFocusNavigationSelector,
-	] = useState( false );
+	const [ shouldFocusNavigationSelector, setShouldFocusNavigationSelector ] =
+		useState( false );
 	const handleSelectNavigation = useCallback(
 		( navPostOrClassicMenu ) => {
 			if ( ! navPostOrClassicMenu ) {
 				return;
 			}
 
-			const isClassicMenu = navPostOrClassicMenu.hasOwnProperty(
-				'auto_add'
-			);
+			const isClassicMenu =
+				navPostOrClassicMenu.hasOwnProperty( 'auto_add' );
 
 			if ( isClassicMenu ) {
 				convert( navPostOrClassicMenu.id, navPostOrClassicMenu.name );

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -12,9 +12,8 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function NavigationMenuDeleteControl( { onDelete } ) {
-	const [ isConfirmModalVisible, setIsConfirmModalVisible ] = useState(
-		false
-	);
+	const [ isConfirmModalVisible, setIsConfirmModalVisible ] =
+		useState( false );
 	const id = useEntityId( 'postType', 'wp_navigation' );
 	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	const { deleteEntityRecord } = useDispatch( coreStore );

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -88,39 +88,40 @@ export default function UnsavedInnerBlocks( {
 		__experimentalDirectInsert: shouldDirectInsert,
 	} );
 
-	const {
-		isSaving,
-		draftNavigationMenus,
-		hasResolvedDraftNavigationMenus,
-	} = useSelect(
-		( select ) => {
-			if ( isDisabled ) {
-				return EMPTY_OBJECT;
-			}
-
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				isSavingEntityRecord,
-			} = select( coreStore );
-
-			return {
-				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
-				draftNavigationMenus: getEntityRecords( ...DRAFT_MENU_PARAMS ),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					DRAFT_MENU_PARAMS
-				),
-			};
-		},
-		[ isDisabled ]
-	);
+	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
+		useSelect(
+			( select ) => {
+				if ( isDisabled ) {
+					return EMPTY_OBJECT;
+				}
+
+				const {
+					getEntityRecords,
+					hasFinishedResolution,
+					isSavingEntityRecord,
+				} = select( coreStore );
+
+				return {
+					isSaving: isSavingEntityRecord(
+						'postType',
+						'wp_navigation'
+					),
+					draftNavigationMenus: getEntityRecords(
+						...DRAFT_MENU_PARAMS
+					),
+					hasResolvedDraftNavigationMenus: hasFinishedResolution(
+						'getEntityRecords',
+						DRAFT_MENU_PARAMS
+					),
+				};
+			},
+			[ isDisabled ]
+		);
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId
-	);
+	const { create: createNavigationMenu } =
+		useCreateNavigationMenu( clientId );
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -18,9 +18,8 @@ export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
 export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 
 function useConvertClassicToBlockMenu( clientId ) {
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId
-	);
+	const { create: createNavigationMenu } =
+		useCreateNavigationMenu( clientId );
 	const registry = useRegistry();
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );

package/src/navigation/style.scss

@@ -44,7 +44,6 @@ $navigation-icon-size: 24px;
 	// By adding low specificity, we enable compatibility with link colors set in theme.json,
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
-		color: inherit;
 		display: block;
 
 		// Set the default menu item padding to zero, to allow text-only buttons.
@@ -106,7 +105,7 @@ $navigation-icon-size: 24px;
 			width: inherit;
 			height: inherit;
 
-			// Position the arrow to balance with the the text.
+			// Position the arrow to balance with the text.
 			margin-top: 0.075em;
 		}
 	}
@@ -675,6 +674,16 @@ button.wp-block-navigation-item__content {
 	position: relative;
 }
 
+// Adjust open dialog top margin when admin-bar is visible.
+.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+	margin-top: $admin-bar-height-big;
+
+	// Handle smaller admin-bar.
+	@include break-medium() {
+		margin-top: $admin-bar-height;
+	}
+}
+
 // Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;