Merge branch 'trunk' of github.com:WordPress/gutenberg into rnmobile/…

…upgrade/react-native-0.71.8
WordPress · Jul 26, 2023 · 5040e6a · 5040e6a
2 parents 61669c8 + 4404be9
commit 5040e6a
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 65 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.native.js b/packages/block-editor/src/components/media-replace-flow/index.native.js
@@ -1,3 +1,12 @@
-// MediaReplaceFlow component is not yet implemented in the native version,
-// so we return an empty component instead.
-export default () => null;
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+// MediaReplaceFlow component is not yet implemented in the native version.
+// For testing purposes, we are using an empty View component with a testID prop.
+const MediaReplaceFlow = () => {
+	return <View testID="media-replace-flow" />;
+};
+
+export default MediaReplaceFlow;
diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -2,43 +2,67 @@
  * WordPress dependencies
  */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
-
-		if ( ! Edit ) {
-			return null;
-		}
-
-		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
-
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
+
+export const usesContextKey = Symbol( 'usesContext' );
+
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
+
+	const blockContext = useContext( BlockContext );
+
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
+
+	if ( ! EditFunction ) {
+		return null;
+	}
+
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
+
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
+			}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
+
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -23,6 +23,7 @@ import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 } from './components/inserter/reusable-block-rename-hint';
+import { usesContextKey } from './components/rich-text/format-edit';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -49,4 +50,5 @@ lock( privateApis, {
 	ResolutionTool,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
+	usesContextKey,
 } );
diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js
@@ -17,6 +17,18 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
 	const blockProps = useBlockProps();
 
+	if ( postType !== 'post' && postType !== 'page' ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					// To do: add instructions. We can't add new string in RC.
+				/>
+			</div>
+		);
+	}
+
 	if ( ! footnotes.length ) {
 		return (
 			<div { ...blockProps }>

diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js
@@ -12,14 +12,18 @@ import { insertObject } from '@wordpress/rich-text';
 import {
 	RichTextToolbarButton,
 	store as blockEditorStore,
+	privateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { name } from './block.json';
+import { unlock } from '../lock-unlock';
+
+const { usesContextKey } = unlock( privateApis );
 
 export const formatName = 'core/footnote';
 export const format = {
@@ -30,17 +34,34 @@ export const format = {
 		'data-fn': 'data-fn',
 	},
 	contentEditable: false,
-	edit: function Edit( { value, onChange, isObjectActive } ) {
+	[ usesContextKey ]: [ 'postType' ],
+	edit: function Edit( {
+		value,
+		onChange,
+		isObjectActive,
+		context: { postType },
+	} ) {
 		const registry = useRegistry();
 		const {
 			getSelectedBlockClientId,
 			getBlockRootClientId,
 			getBlockName,
 			getBlocks,
 		} = useSelect( blockEditorStore );
+		const footnotesBlockType = useSelect( ( select ) =>
+			select( blocksStore ).getBlockType( name )
+		);
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
+		if ( ! footnotesBlockType ) {
+			return null;
+		}
+
+		if ( postType !== 'post' && postType !== 'page' ) {
+			return null;
+		}
+
 		function onClick() {
 			registry.batch( () => {
 				let id;

diff --git a/packages/block-library/src/footnotes/index.js b/packages/block-library/src/footnotes/index.js
@@ -21,7 +21,6 @@ export const settings = {
 	edit,
 };
 
-// Would be good to remove the format and HoR if the block is unregistered.
 registerFormatType( formatName, format );
 
 export const init = () => {

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -635,25 +635,27 @@ function GalleryEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
-					handleUpload={ false }
-					onSelect={ updateImages }
-					name={ __( 'Add' ) }
-					multiple={ true }
-					mediaIds={ images
-						.filter( ( image ) => image.id )
-						.map( ( image ) => image.id ) }
-					addToGallery={ hasImageIds }
-				/>
-			</BlockControls>
 			{ Platform.isWeb && (
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
-					clientId={ clientId }
-				/>
+				<>
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="image/*"
+							handleUpload={ false }
+							onSelect={ updateImages }
+							name={ __( 'Add' ) }
+							multiple={ true }
+							mediaIds={ images
+								.filter( ( image ) => image.id )
+								.map( ( image ) => image.id ) }
+							addToGallery={ hasImageIds }
+						/>
+					</BlockControls>
+					<GapStyles
+						blockGap={ attributes.style?.spacing?.blockGap }
+						clientId={ clientId }
+					/>
+				</>
 			) }
 			<Gallery
 				{ ...props }

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -622,6 +622,20 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'does not display MediaReplaceFlow component within the block toolbar', async () => {
+		const screen = await initializeWithGalleryBlock( {
+			numberOfItems: 3,
+			media,
+		} );
+		const { queryByTestId } = screen;
+
+		fireEvent.press( getBlock( screen, 'Gallery' ) );
+
+		// Expect the native MediaReplaceFlow component to not be present in the block toolbar
+		const mediaReplaceFlow = queryByTestId( 'media-replace-flow' );
+		expect( mediaReplaceFlow ).toBeNull();
+	} );
+
 	// Test cases related to TC013 - Settings - Columns
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013
 	describe( 'Columns setting', () => {

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -128,7 +128,10 @@ function TemplateDocumentActions( { className, onBack } ) {
 
 	return (
 		<BaseDocumentActions
-			className={ className }
+			className={ classnames( className, {
+				'is-synced-entity':
+					record.wp_pattern_sync_status !== 'unsynced',
+			} ) }
 			icon={ typeIcon }
 			onBack={ onBack }
 		>

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -24,6 +24,15 @@
 	@include break-large() {
 		width: min(100%, 450px);
 	}
+
+	&.is-synced-entity {
+		.edit-site-document-actions__title {
+			color: var(--wp-block-synced-color);
+			h1 {
+				color: var(--wp-block-synced-color);
+			}
+		}
+	}
 }
 
 .edit-site-document-actions__command {
@@ -36,7 +45,6 @@
 
 .edit-site-document-actions__title {
 	flex-grow: 1;
-	color: var(--wp-block-synced-color);
 	overflow: hidden;
 	grid-column: 2 / 3;
 
@@ -48,7 +56,6 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--wp-block-synced-color);
 	}
 
 	.edit-site-document-actions.is-page & {

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Remove visual gap in mobile toolbar when a Gallery block is selected [#52966]
 -   [**] Upgrade React Native to 0.71.11 [#51303]
 
 ## 1.100.1