[RNMobile][Embed block] Block settings (#33654)

packages/block-editor/src/components/inserter/block-types-tab.native.js

@@ -13,6 +13,8 @@ import useBlockTypeImpressions from './hooks/use-block-type-impressions';
 
 const NON_BLOCK_CATEGORIES = [ 'reusable' ];
 
+const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const clipboardBlock = useClipboardBlock( rootClientId );
 
@@ -22,7 +24,14 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 
 			const allItems = getInserterItems( rootClientId );
 			const blockItems = allItems.filter(
-				( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category )
+				( { id, category } ) =>
+					! NON_BLOCK_CATEGORIES.includes( category ) &&
+					// We don't want to show all possible embed variations
+					// as different blocks in the inserter. We'll only show a
+					// few popular ones.
+					( category !== 'embed' ||
+						( category === 'embed' &&
+							ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
 			);
 
 			return {

packages/block-editor/src/components/inserter/test/block-types-tab.native.js

@@ -49,7 +49,8 @@ describe( 'BlockTypesTab component', () => {
 		selectMock.getInserterItems.mockReturnValue( items );
 
 		const blockItems = items.filter(
-			( { category } ) => category !== 'reusable'
+			( { id, category } ) =>
+				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
 		);
 		const component = shallow(
 			<BlockTypesTab

packages/block-library/src/embed/edit.js

@@ -29,16 +29,6 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 
-function getResponsiveHelp( checked ) {
-	return checked
-		? __(
-				'This embed will preserve its aspect ratio when the browser is resized.'
-		  )
-		: __(
-				'This embed may not preserve its aspect ratio when the browser is resized.'
-		  );
-}
-
 const EmbedEdit = ( props ) => {
 	const {
 		attributes: {
@@ -242,7 +232,6 @@ const EmbedEdit = ( props ) => {
 				themeSupportsResponsive={ themeSupportsResponsive }
 				blockSupportsResponsive={ responsive }
 				allowResponsive={ allowResponsive }
-				getResponsiveHelp={ getResponsiveHelp }
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>

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

@@ -3,6 +3,7 @@
  */
 import {
 	createUpgradedEmbedBlock,
+	getClassNames,
 	getAttributesFromPreview,
 	getEmbedInfoByProvider,
 } from './util';
@@ -62,12 +63,18 @@ const EmbedEdit = ( props ) => {
 		isSelected && wasBlockJustInserted && ! url
 	);
 
-	const { preview, fetching, cannotEmbed } = useSelect(
+	const {
+		preview,
+		fetching,
+		themeSupportsResponsive,
+		cannotEmbed,
+	} = useSelect(
 		( select ) => {
 			const {
 				getEmbedPreview,
 				isPreviewEmbedFallback,
 				isRequestingEmbedPreview,
+				getThemeSupports,
 			} = select( coreStore );
 			if ( ! url ) {
 				return { fetching: false, cannotEmbed: false };
@@ -97,6 +104,9 @@ const EmbedEdit = ( props ) => {
 			return {
 				preview: validPreview ? embedPreview : undefined,
 				fetching: isFetching,
+				themeSupportsResponsive: getThemeSupports()[
+					'responsive-embeds'
+				],
 				cannotEmbed: ! validPreview || previewIsFallback,
 			};
 		},
@@ -120,6 +130,21 @@ const EmbedEdit = ( props ) => {
 		};
 	};
 
+	const toggleResponsive = () => {
+		const { allowResponsive, className } = attributes;
+		const { html } = preview;
+		const newAllowResponsive = ! allowResponsive;
+
+		setAttributes( {
+			allowResponsive: newAllowResponsive,
+			className: getClassNames(
+				html,
+				className,
+				responsive && newAllowResponsive
+			),
+		} );
+	};
+
 	useEffect( () => {
 		if ( ! preview?.html || ! cannotEmbed || fetching ) {
 			return;
@@ -167,7 +192,19 @@ const EmbedEdit = ( props ) => {
 	}
 
 	const showEmbedPlaceholder = ! preview || cannotEmbed;
-	const { type, className: classFromPreview } = getMergedAttributes();
+
+	// Even though we set attributes that get derived from the preview,
+	// we don't access them directly because for the initial render,
+	// the `setAttributes` call will not have taken effect. If we're
+	// rendering responsive content, setting the responsive classes
+	// after the preview has been rendered can result in unwanted
+	// clipping or scrollbars. The `getAttributesFromPreview` function
+	// that `getMergedAttributes` uses is memoized so that we're not
+	const {
+		type,
+		allowResponsive,
+		className: classFromPreview,
+	} = getMergedAttributes();
 	const className = classnames( classFromPreview, props.className );
 
 	return (
@@ -189,6 +226,10 @@ const EmbedEdit = ( props ) => {
 				<>
 					<EmbedControls
 						showEditButton={ preview && ! cannotEmbed }
+						themeSupportsResponsive={ themeSupportsResponsive }
+						blockSupportsResponsive={ responsive }
+						allowResponsive={ allowResponsive }
+						toggleResponsive={ toggleResponsive }
 						switchBackToURLInput={ () => setIsEditingURL( true ) }
 					/>
 					<View { ...blockProps }>

packages/block-library/src/embed/embed-controls.js

@@ -11,12 +11,21 @@ import {
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+function getResponsiveHelp( checked ) {
+	return checked
+		? __(
+				'This embed will preserve its aspect ratio when the browser is resized.'
+		  )
+		: __(
+				'This embed may not preserve its aspect ratio when the browser is resized.'
+		  );
+}
+
 const EmbedControls = ( {
 	blockSupportsResponsive,
 	showEditButton,
 	themeSupportsResponsive,
 	allowResponsive,
-	getResponsiveHelp,
 	toggleResponsive,
 	switchBackToURLInput,
 } ) => (

packages/block-library/src/embed/embed-no-preview.native.js

@@ -16,6 +16,7 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { BottomSheet, Icon, TextControl } from '@wordpress/components';
 import { help } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -38,10 +39,6 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const descriptionStyle = usePreferredColorSchemeStyle(
 		styles.embed__description,
 		styles[ 'embed__description--dark' ]
@@ -118,7 +115,7 @@ const EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {
 				onPress={ onPressContainer }
 			>
 				<View style={ containerStyle }>
-					<Icon icon={ icon } fill={ embedIconStyle.fill } />
+					<BlockIcon icon={ icon } />
 					<Text style={ labelStyle }>{ label }</Text>
 					<Text style={ descriptionStyle }>
 						{ __( 'Embed previews not yet available' ) }

packages/block-library/src/embed/embed-placeholder.native.js

@@ -9,6 +9,7 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon } from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -37,10 +38,6 @@ const EmbedPlaceholder = ( {
 		styles.embed__action,
 		styles[ 'embed__action--dark' ]
 	);
-	const embedIconStyle = usePreferredColorSchemeStyle(
-		styles.embed__icon,
-		styles[ 'embed__icon--dark' ]
-	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
 	return (
@@ -73,7 +70,7 @@ const EmbedPlaceholder = ( {
 						</>
 					) : (
 						<>
-							<Icon icon={ icon } fill={ embedIconStyle.fill } />
+							<BlockIcon icon={ icon } />
 							<Text style={ labelStyle }>{ label }</Text>
 							<Text style={ actionStyle }>
 								{ __( 'ADD LINK' ) }

packages/block-library/src/embed/styles.native.scss

@@ -19,14 +19,6 @@
 	background-color: $background-dark-secondary;
 }
 
-.embed__icon {
-	fill: $light-secondary;
-}
-
-.embed__icon--dark {
-	fill: $dark-secondary;
-}
-
 .embed__icon--error {
 	margin-bottom: 6;
 	fill: $alert-red;

packages/components/src/toggle-control/index.native.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isFunction } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -11,15 +16,16 @@ const ToggleControl = memo(
 	( { label, checked, help, instanceId, className, onChange, ...props } ) => {
 		const id = `inspector-toggle-control-${ instanceId }`;
 
+		const helpLabel = help && isFunction( help ) ? help( checked ) : help;
+
 		return (
 			<SwitchCell
 				label={ label }
 				id={ id }
-				help={ help }
+				help={ helpLabel }
 				className={ className }
 				value={ checked }
 				onValueChange={ onChange }
-				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props }
 			/>
 		);

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
+-   [**] Embed block: Add "Resize for smaller devices" setting. [#33654]
 
 ## 1.59.1
 -   [*] Global styles - Add color to the block styles filter list [#34000]

packages/react-native-editor/src/api-fetch-setup.js

@@ -6,7 +6,7 @@ import apiFetch from '@wordpress/api-fetch';
 
 // Please add only wp.org API paths here!
 const SUPPORTED_ENDPOINTS = [
-	/wp\/v2\/(media|categories|blocks)\/?\d*?.*/i,
+	/wp\/v2\/(media|categories|blocks|themes)\/?\d*?.*/i,
 	/wp\/v2\/search\?.*/i,
 	/oembed\/1\.0\/proxy\?.*/i,
 ];