@wordpress/block-library 6.0.8 → 6.0.12

package/src/gallery/edit-wrapper.js

@@ -1,47 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { withNotices } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import EditWithInnerBlocks from './edit';
 import EditWithoutInnerBlocks from './v1/edit';
+import { isGalleryV2Enabled } from './shared';
 
 /*
  * Using a wrapper around the logic to load the edit for v1 of Gallery block
  * or the refactored version with InnerBlocks. This is to prevent conditional
  * use of hooks lint errors if adding this logic to the top of the edit component.
  */
-export default function GalleryEditWrapper( props ) {
-	const { attributes, clientId } = props;
-
-	const innerBlockImages = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
-		},
-		[ clientId ]
-	);
-
-	const __unstableGalleryWithImageBlocks = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return settings.__unstableGalleryWithImageBlocks;
-	}, [] );
-
-	// This logic is used to infer version information from content with higher
-	// precedence than the flag. New galleries (and existing empty galleries) will
-	// honor the flag.
-	const hasNewVersionContent = !! innerBlockImages?.length;
-	const hasOldVersionContent =
-		0 < attributes?.ids?.length || 0 < attributes?.images?.length;
-	if (
-		hasOldVersionContent ||
-		( ! hasNewVersionContent && ! __unstableGalleryWithImageBlocks )
-	) {
+function GalleryEditWrapper( props ) {
+	if ( ! isGalleryV2Enabled() ) {
 		return <EditWithoutInnerBlocks { ...props } />;
 	}
 
 	return <EditWithInnerBlocks { ...props } />;
 }
+
+export default compose( [ withNotices ] )( GalleryEditWrapper );

package/src/gallery/edit.js

@@ -144,7 +144,7 @@ function GalleryEdit( props ) {
 	useEffect( () => {
 		newImages?.forEach( ( newImage ) => {
 			updateBlockAttributes( newImage.clientId, {
-				...buildImageAttributes( false, newImage.attributes ),
+				...buildImageAttributes( newImage.attributes ),
 				id: newImage.id,
 				align: undefined,
 			} );
@@ -176,26 +176,24 @@ function GalleryEdit( props ) {
 	 * it already existed in the gallery. If the image is in fact new, we need
 	 * to apply the gallery's current settings to the image.
 	 *
-	 * @param {Object} existingBlock Existing Image block that still exists after gallery update.
-	 * @param {Object} image         Media object for the actual image.
-	 * @return {Object}               Attributes to set on the new image block.
+	 * @param {Object} imageAttributes Media object for the actual image.
+	 * @return {Object}                Attributes to set on the new image block.
 	 */
-	function buildImageAttributes( existingBlock, image ) {
-		if ( existingBlock ) {
-			return existingBlock.attributes;
-		}
+	function buildImageAttributes( imageAttributes ) {
+		const image = imageAttributes.id
+			? find( imageData, { id: imageAttributes.id } )
+			: null;
 
 		let newClassName;
-		if ( image.className && image.className !== '' ) {
-			newClassName = image.className;
+		if ( imageAttributes.className && imageAttributes.className !== '' ) {
+			newClassName = imageAttributes.className;
 		} else {
 			newClassName = preferredStyle
 				? `is-style-${ preferredStyle }`
 				: undefined;
 		}
-
 		return {
-			...pickRelevantMediaFiles( image, sizeSlug ),
+			...pickRelevantMediaFiles( imageAttributes, sizeSlug ),
 			...getHrefAndDestination( image, linkTo ),
 			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
 			className: newClassName,
@@ -498,7 +496,7 @@ function GalleryEdit( props ) {
 							hideCancelButton={ true }
 						/>
 					) }
-					{ Platform.isWeb && ! imageSizeOptions && (
+					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
 								{ __( 'Image size' ) }

package/src/gallery/editor.scss

@@ -128,6 +128,7 @@ figure.wp-block-gallery {
 			bottom: 0;
 			left: 0;
 			z-index: 1;
+			pointer-events: none;
 		}
 	}
 

package/src/gallery/save.js

@@ -16,9 +16,10 @@ import {
  * Internal dependencies
  */
 import saveWithoutInnerBlocks from './v1/save';
+import { isGalleryV2Enabled } from './shared';
 
 export default function saveWithInnerBlocks( { attributes } ) {
-	if ( attributes?.ids?.length > 0 || attributes?.images?.length > 0 ) {
+	if ( ! isGalleryV2Enabled() ) {
 		return saveWithoutInnerBlocks( { attributes } );
 	}
 

package/src/gallery/shared.js

@@ -21,3 +21,27 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	}
 	return imageProps;
 };
+
+/**
+ * The new gallery block format is not compatible with the use_BalanceTags option
+ * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130. The
+ * window.wp.galleryBlockV2Enabled flag is set in lib/compat.php. This method
+ * can be removed when minimum supported WP version >=5.9.
+ */
+export function isGalleryV2Enabled() {
+	// Only run the Gallery version compat check if the plugin is running, otherwise
+	// assume we are in 5.9 core and enable by default.
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		// We want to fail early here, at least during beta testing phase, to ensure
+		// there aren't instances where undefined values cause false negatives.
+		if (
+			! window.wp ||
+			typeof window.wp.galleryBlockV2Enabled !== 'boolean'
+		) {
+			throw 'window.wp.galleryBlockV2Enabled is not defined';
+		}
+		return window.wp.galleryBlockV2Enabled;
+	}
+
+	return true;
+}

package/src/gallery/transforms.js

@@ -8,8 +8,6 @@ import { filter, every, toString } from 'lodash';
  */
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
-import { select } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -24,7 +22,7 @@ import {
 	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
 } from './v1/constants';
-import { pickRelevantMediaFiles } from './shared';
+import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
 	if ( ! ids ) {
@@ -49,9 +47,8 @@ const parseShortcodeIds = ( ids ) => {
  * @return   {Block}                 The transformed block.
  */
 function updateThirdPartyTransformToGallery( block ) {
-	const settings = select( blockEditorStore ).getSettings();
 	if (
-		settings.__unstableGalleryWithImageBlocks &&
+		isGalleryV2Enabled() &&
 		block.name === 'core/gallery' &&
 		block.attributes?.images.length > 0
 	) {
@@ -145,8 +142,7 @@ const transforms = {
 
 				const validImages = filter( attributes, ( { url } ) => url );
 
-				const settings = select( blockEditorStore ).getSettings();
-				if ( settings.__unstableGalleryWithImageBlocks ) {
+				if ( isGalleryV2Enabled() ) {
 					const innerBlocks = validImages.map( ( image ) => {
 						return createBlock( 'core/image', image );
 					} );
@@ -184,10 +180,7 @@ const transforms = {
 				images: {
 					type: 'array',
 					shortcode: ( { named: { ids } } ) => {
-						const settings = select(
-							blockEditorStore
-						).getSettings();
-						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+						if ( ! isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids ).map( ( id ) => ( {
 								id: toString( id ),
 							} ) );
@@ -197,10 +190,7 @@ const transforms = {
 				ids: {
 					type: 'array',
 					shortcode: ( { named: { ids } } ) => {
-						const settings = select(
-							blockEditorStore
-						).getSettings();
-						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+						if ( ! isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids );
 						}
 					},
@@ -208,10 +198,7 @@ const transforms = {
 				shortCodeTransforms: {
 					type: 'array',
 					shortcode: ( { named: { ids } } ) => {
-						const settings = select(
-							blockEditorStore
-						).getSettings();
-						if ( settings.__unstableGalleryWithImageBlocks ) {
+						if ( isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids ).map( ( id ) => ( {
 								id: parseInt( id ),
 							} ) );
@@ -227,10 +214,7 @@ const transforms = {
 				linkTo: {
 					type: 'string',
 					shortcode: ( { named: { link } } ) => {
-						const settings = select(
-							blockEditorStore
-						).getSettings();
-						if ( ! settings.__unstableGalleryWithImageBlocks ) {
+						if ( ! isGalleryV2Enabled() ) {
 							switch ( link ) {
 								case 'post':
 									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
@@ -273,8 +257,7 @@ const transforms = {
 				);
 			},
 			transform( files ) {
-				const settings = select( blockEditorStore ).getSettings();
-				if ( settings.__unstableGalleryWithImageBlocks ) {
+				if ( isGalleryV2Enabled() ) {
 					const innerBlocks = files.map( ( file ) =>
 						createBlock( 'core/image', {
 							url: createBlobURL( file ),
@@ -299,8 +282,7 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/image' ],
 			transform: ( { align, images, ids, sizeSlug }, innerBlocks ) => {
-				const settings = select( blockEditorStore ).getSettings();
-				if ( settings.__unstableGalleryWithImageBlocks ) {
+				if ( isGalleryV2Enabled() ) {
 					if ( innerBlocks.length > 0 ) {
 						return innerBlocks.map(
 							( {

package/src/gallery/use-mobile-warning.js

@@ -20,7 +20,7 @@ export default function useMobileWarning( newImages ) {
 
 	createWarningNotice(
 		__(
-			'Editing this Gallery in the WordPress mobile app requires version 18.2 or higher.'
+			'If you want to edit the gallery you just added in the mobile app, to avoid losing any data please make sure you use version 18.2 of the app or above.'
 		),
 		{ type: 'snackbar', explicitDismiss: true }
 	);

package/src/gallery/v1/edit.js

@@ -24,10 +24,8 @@ import {
 	ToggleControl,
 	withNotices,
 	RangeControl,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
-	BlockControls,
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
@@ -53,7 +51,6 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 } from './constants';
-import UpdateGalleryModal from './update-gallery-modal';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -102,13 +99,10 @@ function GalleryEdit( props ) {
 		mediaUpload,
 		getMedia,
 		wasBlockJustInserted,
-		__unstableGalleryWithImageBlocks,
 	} = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 
 		return {
-			__unstableGalleryWithImageBlocks:
-				settings.__unstableGalleryWithImageBlocks,
 			imageSizes: settings.imageSizes,
 			mediaUpload: settings.mediaUpload,
 			getMedia: select( coreStore ).getMedia,
@@ -414,10 +408,6 @@ function GalleryEdit( props ) {
 		/>
 	);
 
-	const [ isUpdateOpen, setUpdateOpen ] = useState( false );
-	const openUpdateModal = () => setUpdateOpen( true );
-	const closeUpdateModal = () => setUpdateOpen( false );
-
 	const blockProps = useBlockProps();
 
 	if ( ! hasImages ) {
@@ -466,24 +456,7 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ /* TODO: Remove platform condition when native conversion is ready */ }
-			{ Platform.isWeb && __unstableGalleryWithImageBlocks && (
-				<BlockControls group="other">
-					<ToolbarButton
-						onClick={ openUpdateModal }
-						title={ __( 'Update' ) }
-						label={ __( 'Update to the new gallery format' ) }
-					>
-						{ __( 'Update' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ Platform.isWeb && isUpdateOpen && (
-				<UpdateGalleryModal
-					onClose={ closeUpdateModal }
-					clientId={ clientId }
-				/>
-			) }
+
 			{ noticeUI }
 			<Gallery
 				{ ...props }

package/src/index.js

@@ -149,54 +149,55 @@ export const __experimentalGetCoreBlocks = () => [
 	html,
 	latestComments,
 	latestPosts,
-	logInOut,
 	mediaText,
 	missing,
 	more,
-	navigation,
-	navigationArea,
-	navigationLink,
-	navigationSubmenu,
 	nextpage,
 	pageList,
 	pattern,
-	postAuthor,
-	postComments,
-	postContent,
-	postDate,
-	postExcerpt,
-	postFeaturedImage,
-	postNavigationLink,
-	postTemplate,
-	postTerms,
-	postTitle,
 	preformatted,
 	pullquote,
-	query,
-	queryPagination,
-	queryPaginationNext,
-	queryPaginationNumbers,
-	queryPaginationPrevious,
-	queryTitle,
 	reusableBlock,
 	rss,
 	search,
 	separator,
 	shortcode,
-	siteLogo,
-	siteTagline,
-	siteTitle,
 	socialLink,
 	socialLinks,
 	spacer,
 	table,
 	// tableOfContents,
 	tagCloud,
-	templatePart,
-	termDescription,
 	textColumns,
 	verse,
 	video,
+
+	// theme blocks
+	navigation,
+	navigationLink,
+	navigationSubmenu,
+	siteLogo,
+	siteTitle,
+	siteTagline,
+	query,
+	templatePart,
+	postTitle,
+	postExcerpt,
+	postFeaturedImage,
+	postContent,
+	postAuthor,
+	postDate,
+	postTerms,
+	postNavigationLink,
+	postTemplate,
+	queryPagination,
+	queryPaginationNext,
+	queryPaginationNumbers,
+	queryPaginationPrevious,
+	postComments,
+	logInOut,
+	termDescription,
+	queryTitle,
 ];
 
 /**
@@ -253,6 +254,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentReplyLink,
 								commentTemplate,
 								commentsQueryLoop,
+								navigationArea,
 								postComment,
 								postCommentsCount,
 								postCommentsForm,

package/src/navigation/block.json

@@ -11,7 +11,7 @@
 	],
 	"textdomain": "default",
 	"attributes": {
-		"navigationMenuId": {
+		"ref": {
 			"type": "number"
 		},
 		"textColor": {

package/src/navigation/deprecated.js

@@ -21,32 +21,131 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = {
 	textTransform: 'var:preset|text-transform|',
 };
 
+const migrateIdToRef = ( { navigationMenuId, ...attributes } ) => {
+	return {
+		...attributes,
+		ref: navigationMenuId,
+	};
+};
+
 const migrateWithLayout = ( attributes ) => {
 	if ( !! attributes.layout ) {
 		return attributes;
 	}
 
-	const { itemsJustification, orientation } = attributes;
-
-	const updatedAttributes = {
-		...attributes,
-	};
+	const {
+		itemsJustification,
+		orientation,
+		...updatedAttributes
+	} = attributes;
 
 	if ( itemsJustification || orientation ) {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				justifyContent: itemsJustification || 'left',
-				orientation: orientation || 'horizontal',
+				setCascadingProperties: 'true',
+				...( itemsJustification && {
+					justifyContent: itemsJustification,
+				} ),
+				...( orientation && { orientation } ),
 			},
 		} );
-		delete updatedAttributes.itemsJustification;
-		delete updatedAttributes.orientation;
 	}
 
 	return updatedAttributes;
 };
 
+const v6 = {
+	attributes: {
+		navigationMenuId: {
+			type: 'number',
+		},
+		textColor: {
+			type: 'string',
+		},
+		customTextColor: {
+			type: 'string',
+		},
+		rgbTextColor: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		rgbBackgroundColor: {
+			type: 'string',
+		},
+		showSubmenuIcon: {
+			type: 'boolean',
+			default: true,
+		},
+		openSubmenusOnClick: {
+			type: 'boolean',
+			default: false,
+		},
+		overlayMenu: {
+			type: 'string',
+			default: 'mobile',
+		},
+		__unstableLocation: {
+			type: 'string',
+		},
+		overlayBackgroundColor: {
+			type: 'string',
+		},
+		customOverlayBackgroundColor: {
+			type: 'string',
+		},
+		overlayTextColor: {
+			type: 'string',
+		},
+		customOverlayTextColor: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		inserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalTextTransform: true,
+			__experimentalFontFamily: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		spacing: {
+			blockGap: true,
+			units: [ 'px', 'em', 'rem', 'vh', 'vw' ],
+			__experimentalDefaultControls: {
+				blockGap: true,
+			},
+		},
+		__experimentalLayout: {
+			allowSwitching: false,
+			allowInheriting: false,
+			default: {
+				type: 'flex',
+				setCascadingProperties: true,
+			},
+		},
+	},
+	save() {
+		return <InnerBlocks.Content />;
+	},
+	isEligible: ( { navigationMenuId } ) => !! navigationMenuId,
+	migrate: migrateIdToRef,
+};
+
 const v5 = {
 	attributes: {
 		navigationMenuId: {
@@ -135,7 +234,7 @@ const v5 = {
 	},
 	isEligible: ( { itemsJustification, orientation } ) =>
 		!! itemsJustification || !! orientation,
-	migrate: migrateWithLayout,
+	migrate: compose( migrateIdToRef, migrateWithLayout ),
 };
 
 const v4 = {
@@ -218,7 +317,7 @@ const v4 = {
 	save() {
 		return <InnerBlocks.Content />;
 	},
-	migrate: compose( migrateWithLayout, migrateFontFamily ),
+	migrate: compose( migrateIdToRef, migrateWithLayout, migrateFontFamily ),
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -259,6 +358,7 @@ const migrateTypographyPresets = function ( attributes ) {
 };
 
 const deprecated = [
+	v6,
 	v5,
 	v4,
 	// Remove `isResponsive` attribute.
@@ -336,6 +436,7 @@ const deprecated = [
 			return attributes.isResponsive;
 		},
 		migrate: compose(
+			migrateIdToRef,
 			migrateWithLayout,
 			migrateFontFamily,
 			migrateIsResponsive
@@ -410,6 +511,7 @@ const deprecated = [
 			return false;
 		},
 		migrate: compose(
+			migrateIdToRef,
 			migrateWithLayout,
 			migrateFontFamily,
 			migrateTypographyPresets
@@ -454,7 +556,7 @@ const deprecated = [
 			html: false,
 			inserter: true,
 		},
-		migrate( attributes ) {
+		migrate: compose( migrateIdToRef, ( attributes ) => {
 			return {
 				...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
 				customTextColor: attributes.textColor
@@ -464,7 +566,7 @@ const deprecated = [
 					? undefined
 					: attributes.rgbBackgroundColor,
 			};
-		},
+		} ),
 		save() {
 			return <InnerBlocks.Content />;
 		},