Resolve conflicts

docs/reference-guides/block-api/block-styles.md

@@ -1,6 +1,6 @@
 # Styles
 
-Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example.
+Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block.
 
 _Example:_
 

docs/reference-guides/slotfills/README.md

@@ -33,7 +33,7 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 
 SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global.
 
-**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54))
+**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55))
 
 ```js
 /**
@@ -61,34 +61,70 @@ export default PluginPostStatusInfo;
 This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
-Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
+Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component.
 
-See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26).
+See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39).
 
 ```js
-const PostStatus = ( { isOpened, onTogglePanel } ) => (
-	<PanelBody
-		className="edit-post-post-status"
-		title={ __( 'Summary' ) }
-		opened={ isOpened }
-		onToggle={ onTogglePanel }
-	>
-		<PluginPostStatusInfo.Slot>
-			{ ( fills ) => (
-				<>
-					<PostVisibility />
-					<PostSchedule />
-					<PostFormat />
-					<PostSticky />
-					<PostPendingStatus />
-					<PostAuthor />
-					{ fills }
-					<PostTrash />
-				</>
-			) }
-		</PluginPostStatusInfo.Slot>
-	</PanelBody>
-);
+export default function PostSummary( { onActionPerformed } ) {
+	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
+		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+		const { isEditorPanelRemoved, getCurrentPostType } =
+			select( editorStore );
+		return {
+			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								actions={
+									<PostActions
+										onActionPerformed={ onActionPerformed }
+									/>
+								}
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
+									</VStack>
+									<TemplateAreas />
+									{ fills }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
 ```
 
 ## Currently available SlotFills and examples

lib/experimental/script-modules.php

@@ -205,10 +205,10 @@ function gutenberg_dequeue_module( $module_identifier ) {
  * This embeds data in the page HTML so that it is available on page load.
  *
  * Data can be associated with a given Script Module by using the
- * `scriptmoduledata_{$module_id}` filter.
+ * `script_module_data_{$module_id}` filter.
  *
  * The data for a given Script Module will be JSON serialized in a script tag with an ID
- * like `wp-scriptmodule-data_{$module_id}`.
+ * like `wp-script-module-data-{$module_id}`.
  */
 function gutenberg_print_script_module_data(): void {
 	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
@@ -236,14 +236,14 @@ function gutenberg_print_script_module_data(): void {
 		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
 		 *
 		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
-		 * with an ID like `wp-scriptmodule-data_{$module_id}`.
+		 * with an ID like `wp-script-module-data-{$module_id}`.
 		 *
 		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
 		 * the data is associated with.
 		 *
 		 * @param array $data The data that should be associated with the array.
 		 */
-		$data = apply_filters( "scriptmoduledata_{$module_id}", array() );
+		$data = apply_filters( "script_module_data_{$module_id}", array() );
 
 		if ( is_array( $data ) && ! empty( $data ) ) {
 			/*
@@ -281,7 +281,7 @@ function gutenberg_print_script_module_data(): void {
 				wp_json_encode( $data, $json_encode_flags ),
 				array(
 					'type' => 'application/json',
-					'id'   => "wp-scriptmodule-data_{$module_id}",
+					'id'   => "wp-script-module-data-{$module_id}",
 				)
 			);
 		}

packages/block-editor/src/components/inserter/hooks/use-block-types-state.js

@@ -8,7 +8,7 @@ import {
 	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,13 +25,18 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
+	const options = useMemo(
+		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		[ isQuick ]
+	);
 	const [ items ] = useSelect(
 		( select ) => [
-			select( blockEditorStore ).getInserterItems( rootClientId, {
-				[ withRootClientIdOptionKey ]: ! isQuick,
-			} ),
+			select( blockEditorStore ).getInserterItems(
+				rootClientId,
+				options
+			),
 		],
-		[ rootClientId, isQuick ]
+		[ rootClientId, options ]
 	);
 
 	const [ categories, collections ] = useSelect( ( select ) => {

packages/block-editor/src/components/link-control/search-input.js

@@ -125,7 +125,7 @@ const LinkControlSearchInput = forwardRef(
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					placeholder={ placeholder ?? __( 'Search or type URL' ) }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

packages/block-editor/src/components/provider/use-block-sync.js

@@ -9,7 +9,6 @@ import { cloneBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -274,18 +273,13 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
-				const undoIgnore = undoIgnoreBlocks.has( blocks );
-				if ( undoIgnore ) {
-					undoIgnoreBlocks.delete( blocks );
-				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
 						selectionEnd: getSelectionEnd(),
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
-					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

packages/block-editor/src/store/private-actions.js

@@ -6,7 +6,6 @@ import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { undoIgnoreBlocks } from './undo-ignore';
 import { store as blockEditorStore } from './index';
 import { unlock } from '../lock-unlock';
 
@@ -292,34 +291,6 @@ export function deleteStyleOverride( id ) {
 	};
 }
 
-/**
- * A higher-order action that mark every change inside a callback as "non-persistent"
- * and ignore pushing to the undo history stack. It's primarily used for synchronized
- * derived updates from the block editor without affecting the undo history.
- *
- * @param {() => void} callback The synchronous callback to derive updates.
- */
-export function syncDerivedUpdates( callback ) {
-	return ( { dispatch, select, registry } ) => {
-		registry.batch( () => {
-			// Mark every change in the `callback` as non-persistent.
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: false,
-			} );
-			callback();
-			dispatch( {
-				type: 'SET_EXPLICIT_PERSISTENT',
-				isPersistentChange: undefined,
-			} );
-
-			// Ignore pushing undo stack for the updated blocks.
-			const updatedBlocks = select.getBlocks();
-			undoIgnoreBlocks.add( updatedBlocks );
-		} );
-	};
-}
-
 /**
  * Action that sets the element that had focus when focus leaves the editor canvas.
  *

packages/block-editor/src/store/selectors.js

@@ -76,6 +76,8 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
+const EMPTY_OBJECT = {};
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -1996,7 +1998,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null, options = {} ) => {
+		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {

packages/block-library/src/missing/edit.native.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	TouchableOpacity,
-} from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -25,6 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -48,11 +44,38 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	toggleSheet() {
+		const { attributes, block, clientId } = this.props;
+		const { originalName } = attributes;
+		const title = this.getTitle();
+		const blockContent = serialize( block ? [ block ] : [] );
+
+		if ( this.canEditUnsupportedBlock() ) {
+			requestUnsupportedBlockFallback(
+				blockContent,
+				clientId,
+				originalName,
+				title
+			);
+			return;
+		}
+
 		this.setState( {
 			showHelp: ! this.state.showHelp,
 		} );
 	}
 
+	canEditUnsupportedBlock() {
+		const {
+			canEnableUnsupportedBlockEditor,
+			isUnsupportedBlockEditorSupported,
+		} = this.props;
+
+		return (
+			! canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported
+		);
+	}
+
 	closeSheet() {
 		this.setState( {
 			showHelp: false,
@@ -186,7 +209,11 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		const subtitle = (
-			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
+			<Text style={ subTitleStyle }>
+				{ this.canEditUnsupportedBlock()
+					? __( 'Tap to edit' )
+					: __( 'Unsupported' ) }
+			</Text>
 		);
 
 		const icon = blockType
@@ -198,8 +225,8 @@ export class UnsupportedBlockEdit extends Component {
 		);
 		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<TouchableWithoutFeedback
-				disabled={ ! this.props.isSelected }
+			<TouchableOpacity
+				activeOpacity={ 0.5 }
 				accessibilityLabel={ __( 'Help button' ) }
 				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
@@ -211,7 +238,8 @@ export class UnsupportedBlockEdit extends Component {
 						styles.unsupportedBlockDark
 					) }
 				>
-					{ this.renderHelpIcon() }
+					{ ! this.canEditUnsupportedBlock() &&
+						this.renderHelpIcon() }
 					<View style={ styles.unsupportedBlockHeader }>
 						<Icon
 							className={ iconClassName }
@@ -223,7 +251,7 @@ export class UnsupportedBlockEdit extends Component {
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>
-			</TouchableWithoutFeedback>
+			</TouchableOpacity>
 		);
 	}
 }