diff --git a/packages/block-editor/src/components/inserter/block-types-tab.native.js b/packages/block-editor/src/components/inserter/block-types-tab.native.js index 4e7cdb800b7f39..394005ead40890 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.native.js +++ b/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 { diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js index bfe7d0b8d0c577..c424c85e1ce012 100644 --- a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js +++ b/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( { const { attributes: { @@ -242,7 +232,6 @@ const EmbedEdit = ( props ) => { themeSupportsResponsive={ themeSupportsResponsive } blockSupportsResponsive={ responsive } allowResponsive={ allowResponsive } - getResponsiveHelp={ getResponsiveHelp } toggleResponsive={ toggleResponsive } switchBackToURLInput={ () => setIsEditingURL( true ) } /> diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index 03732435595a24..623f08752e56da 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/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 ) => { <> setIsEditingURL( true ) } /> diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index e38ac3182dc46a..0a5744be52b9ea 100644 --- a/packages/block-library/src/embed/embed-controls.js +++ b/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, } ) => ( diff --git a/packages/block-library/src/embed/embed-controls.native.js b/packages/block-library/src/embed/embed-controls.native.js deleted file mode 100644 index 162b38a1c613fb..00000000000000 --- a/packages/block-library/src/embed/embed-controls.native.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -import { BlockControls } from '@wordpress/block-editor'; -import { edit } from '@wordpress/icons'; - -const EmbedControls = ( { showEditButton, switchBackToURLInput } ) => ( - - - { showEditButton && ( - - ) } - - -); - -export default EmbedControls; diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js index d56590b0b403a8..cd0af7b7308514 100644 --- a/packages/block-library/src/embed/embed-no-preview.native.js +++ b/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 } > - + { label } { __( 'Embed previews not yet available' ) } diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js index c52858df9ff256..bf0378ae71cdb7 100644 --- a/packages/block-library/src/embed/embed-placeholder.native.js +++ b/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 = ( { ) : ( <> - + { label } { __( 'ADD LINK' ) } diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss index 5289e2d50666fa..d1fb160a2341a4 100644 --- a/packages/block-library/src/embed/styles.native.scss +++ b/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; diff --git a/packages/block-library/src/embed/variations.native.js b/packages/block-library/src/embed/variations.native.js deleted file mode 100644 index 58e8e70c66530d..00000000000000 --- a/packages/block-library/src/embed/variations.native.js +++ /dev/null @@ -1,3 +0,0 @@ -const variations = []; - -export default variations; diff --git a/packages/components/src/toggle-control/index.native.js b/packages/components/src/toggle-control/index.native.js index 0466abcf840302..043ba2dd5d40f5 100644 --- a/packages/components/src/toggle-control/index.native.js +++ b/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 ( ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index ddd759094d1878..76ea1f0d2899fa 100644 --- 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 +- [**] Embed block: Add "Resize for smaller devices" setting. [#33654] ## 1.59.1 - [*] Global styles - Add color to the block styles filter list [#34000] diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js index ad04c96de11ed0..e2d9d5d4ece97d 100644 --- a/packages/react-native-editor/src/api-fetch-setup.js +++ b/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, ];