From f81e5285dfb704105c992ffaa07d92d647c07dea Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Thu, 22 Jul 2021 19:57:33 +0200 Subject: [PATCH 01/17] Make ToggleControl accept a 'help' prop as function --- .../components/src/toggle-control/index.native.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/components/src/toggle-control/index.native.js b/packages/components/src/toggle-control/index.native.js index 0466abcf840302..d783c8ae918c6f 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,11 +16,16 @@ const ToggleControl = memo( ( { label, checked, help, instanceId, className, onChange, ...props } ) => { const id = `inspector-toggle-control-${ instanceId }`; + let helpLabel; + if ( help ) { + helpLabel = isFunction( help ) ? help( checked ) : help; + } + return ( Date: Thu, 22 Jul 2021 19:58:02 +0200 Subject: [PATCH 02/17] Add /themes to supported endpoints --- packages/react-native-editor/src/api-fetch-setup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, ]; From abc6857309fc717f4e1b832e4dec070f2608ace3 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Thu, 22 Jul 2021 20:01:51 +0200 Subject: [PATCH 03/17] Derive and pass responsiveness props to EmbedControls --- .../block-library/src/embed/edit.native.js | 44 ++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index 72f1407b684ec6..36129983a7c89e 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -16,7 +16,7 @@ import EmbedBottomSheet from './embed-bottom-sheet'; /** * WordPress dependencies */ -import { _x } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { @@ -26,6 +26,16 @@ import { 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: { providerNameSlug, responsive, url: attributesUrl }, @@ -59,12 +69,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 ( ! attributesUrl ) { return { fetching: false, cannotEmbed: false }; @@ -95,6 +111,9 @@ const EmbedEdit = ( props ) => { return { preview: validPreview ? embedPreview : undefined, fetching: isFetching, + themeSupportsResponsive: getThemeSupports()[ + 'responsive-embeds' + ], cannotEmbed: ! validPreview || previewIsFallback, }; }, @@ -118,6 +137,13 @@ const EmbedEdit = ( props ) => { }; }; + const toggleResponsive = () => { + const { allowResponsive } = attributes; + setAttributes( { + allowResponsive: ! allowResponsive, + } ); + }; + useEffect( () => { if ( ! preview?.html || ! cannotEmbed || fetching ) { return; @@ -167,6 +193,15 @@ const EmbedEdit = ( props ) => { const showEmbedPlaceholder = ! preview || cannotEmbed; + // 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 { allowResponsive } = getMergedAttributes(); + return ( <> { showEmbedPlaceholder ? ( @@ -186,6 +221,11 @@ const EmbedEdit = ( props ) => { <> setIsEditingURL( true ) } /> From 6ecadb1246dbf5e480a62bfe0487196b5ca6a730 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 14:35:40 +0200 Subject: [PATCH 04/17] Show responsive setting when supported --- .../src/embed/embed-controls.native.js | 57 ++++++++++++++----- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/embed/embed-controls.native.js b/packages/block-library/src/embed/embed-controls.native.js index 162b38a1c613fb..6df8a9cc6b261b 100644 --- a/packages/block-library/src/embed/embed-controls.native.js +++ b/packages/block-library/src/embed/embed-controls.native.js @@ -2,22 +2,51 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; -import { BlockControls } from '@wordpress/block-editor'; +import { + ToolbarButton, + PanelBody, + ToggleControl, + ToolbarGroup, +} from '@wordpress/components'; +import { BlockControls, InspectorControls } from '@wordpress/block-editor'; import { edit } from '@wordpress/icons'; -const EmbedControls = ( { showEditButton, switchBackToURLInput } ) => ( - - - { showEditButton && ( - +const EmbedControls = ( { + blockSupportsResponsive, + showEditButton, + themeSupportsResponsive, + allowResponsive, + getResponsiveHelp, + toggleResponsive, + switchBackToURLInput, +} ) => { + return ( + <> + + + { showEditButton && ( + + ) } + + + { themeSupportsResponsive && blockSupportsResponsive && ( + + + + + ) } - - -); + + ); +}; export default EmbedControls; From c78c547ed3a8e3cf748e2289731b8d75fb3c93c3 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 14:36:25 +0200 Subject: [PATCH 05/17] Re-enable all embed variations on native --- packages/block-library/src/embed/variations.native.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 packages/block-library/src/embed/variations.native.js 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; From bef557892e77b911414e1f177afed77202b7f7fc Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 14:37:58 +0200 Subject: [PATCH 06/17] Show only certain embed variations in inserter --- .../inserter/block-types-tab.native.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) 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 1ae14c2e962182..289033dc8bdc4a 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 @@ -12,6 +12,13 @@ import { store as blockEditorStore } from '../../store'; const NON_BLOCK_CATEGORIES = [ 'reusable' ]; +const ALLOWED_EMBED_VARIATIONS = [ + 'core/embed', + 'core/embed/youtube', + 'core/embed/twitter', + 'core/embed/instagram', +]; + function BlockTypesTab( { onSelect, rootClientId, listProps } ) { const clipboardBlock = useClipboardBlock( rootClientId ); @@ -21,7 +28,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 { From 9ecad94f252c04ee58252804a32ec8a9bf254294 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 14:39:03 +0200 Subject: [PATCH 07/17] Hide embed variations in inserter --- .../src/components/inserter/block-types-tab.native.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) 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 289033dc8bdc4a..ecbc2a9443ea70 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 @@ -12,12 +12,7 @@ import { store as blockEditorStore } from '../../store'; const NON_BLOCK_CATEGORIES = [ 'reusable' ]; -const ALLOWED_EMBED_VARIATIONS = [ - 'core/embed', - 'core/embed/youtube', - 'core/embed/twitter', - 'core/embed/instagram', -]; +const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ]; function BlockTypesTab( { onSelect, rootClientId, listProps } ) { const clipboardBlock = useClipboardBlock( rootClientId ); From 3bb454c9b9ce05addbd26824f616687f0de6da01 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 15:31:47 +0200 Subject: [PATCH 08/17] Use BlockIcon component where icon prop can be an object --- .../block-library/src/embed/embed-no-preview.native.js | 7 ++----- .../block-library/src/embed/embed-placeholder.native.js | 7 ++----- packages/block-library/src/embed/styles.native.scss | 8 -------- 3 files changed, 4 insertions(+), 18 deletions(-) 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; From 5359651dbdfa9e2e8dea8699963ec29e1d864811 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 15:42:00 +0200 Subject: [PATCH 09/17] Delete native EmbedControls component --- .../src/embed/embed-controls.native.js | 52 ------------------- 1 file changed, 52 deletions(-) delete mode 100644 packages/block-library/src/embed/embed-controls.native.js 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 6df8a9cc6b261b..00000000000000 --- a/packages/block-library/src/embed/embed-controls.native.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { - ToolbarButton, - PanelBody, - ToggleControl, - ToolbarGroup, -} from '@wordpress/components'; -import { BlockControls, InspectorControls } from '@wordpress/block-editor'; -import { edit } from '@wordpress/icons'; - -const EmbedControls = ( { - blockSupportsResponsive, - showEditButton, - themeSupportsResponsive, - allowResponsive, - getResponsiveHelp, - toggleResponsive, - switchBackToURLInput, -} ) => { - return ( - <> - - - { showEditButton && ( - - ) } - - - { themeSupportsResponsive && blockSupportsResponsive && ( - - - - - - ) } - - ); -}; - -export default EmbedControls; From 3e77c785d114e3a4cad7d34b5df66a0fbea6f1f9 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 23 Jul 2021 15:42:25 +0200 Subject: [PATCH 10/17] Move getResponsiveHelp function in EmbedControls --- packages/block-library/src/embed/edit.js | 11 ----------- packages/block-library/src/embed/edit.native.js | 13 +------------ .../block-library/src/embed/embed-controls.js | 17 +++++++++++------ 3 files changed, 12 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index f00209933f2eb6..8c5b3dd0e90051 100644 --- a/packages/block-library/src/embed/edit.js +++ b/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 ) } /> diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index 36129983a7c89e..bb58949c3762db 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -16,7 +16,7 @@ import EmbedBottomSheet from './embed-bottom-sheet'; /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { _x } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { @@ -26,16 +26,6 @@ import { 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: { providerNameSlug, responsive, url: attributesUrl }, @@ -224,7 +214,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/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index e38ac3182dc46a..a2a4190fa360be 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, } ) => ( @@ -25,7 +34,6 @@ const EmbedControls = ( { { showEditButton && ( { themeSupportsResponsive && blockSupportsResponsive && ( - + Date: Fri, 23 Jul 2021 16:46:06 +0200 Subject: [PATCH 11/17] Update test --- .../src/components/inserter/test/block-types-tab.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 311bcba757d255..31cbf3a36f2ae5 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 @@ -48,7 +48,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( Date: Tue, 27 Jul 2021 19:24:37 +0200 Subject: [PATCH 12/17] Re-add classnames removed by mistake --- packages/block-library/src/embed/embed-controls.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index a2a4190fa360be..30234da263578e 100644 --- a/packages/block-library/src/embed/embed-controls.js +++ b/packages/block-library/src/embed/embed-controls.js @@ -34,6 +34,7 @@ const EmbedControls = ( { { showEditButton && ( Date: Wed, 28 Jul 2021 11:35:30 +0200 Subject: [PATCH 13/17] Fix classname prop --- packages/block-library/src/embed/embed-controls.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js index 30234da263578e..0a5744be52b9ea 100644 --- a/packages/block-library/src/embed/embed-controls.js +++ b/packages/block-library/src/embed/embed-controls.js @@ -44,10 +44,12 @@ const EmbedControls = ( { { themeSupportsResponsive && blockSupportsResponsive && ( - + Date: Thu, 5 Aug 2021 20:01:12 +0200 Subject: [PATCH 14/17] Remove unused aria-describedby prop --- packages/components/src/toggle-control/index.native.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/toggle-control/index.native.js b/packages/components/src/toggle-control/index.native.js index d783c8ae918c6f..043ba2dd5d40f5 100644 --- a/packages/components/src/toggle-control/index.native.js +++ b/packages/components/src/toggle-control/index.native.js @@ -16,10 +16,7 @@ const ToggleControl = memo( ( { label, checked, help, instanceId, className, onChange, ...props } ) => { const id = `inspector-toggle-control-${ instanceId }`; - let helpLabel; - if ( help ) { - helpLabel = isFunction( help ) ? help( checked ) : help; - } + const helpLabel = help && isFunction( help ) ? help( checked ) : help; return ( ); From 14076e287190797cce3e888bd397df1b85decbb8 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Tue, 10 Aug 2021 15:16:25 +0200 Subject: [PATCH 15/17] Add class names --- .../block-library/src/embed/edit.native.js | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index bb58949c3762db..6604f7db71ad5c 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'; @@ -13,6 +14,11 @@ import EmbedPlaceholder from './embed-placeholder'; import EmbedPreview from './embed-preview'; import EmbedBottomSheet from './embed-bottom-sheet'; +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -128,9 +134,17 @@ const EmbedEdit = ( props ) => { }; const toggleResponsive = () => { - const { allowResponsive } = attributes; + const { allowResponsive, className } = attributes; + const { html } = preview; + const newAllowResponsive = ! allowResponsive; + setAttributes( { - allowResponsive: ! allowResponsive, + allowResponsive: newAllowResponsive, + className: getClassNames( + html, + className, + responsive && newAllowResponsive + ), } ); }; @@ -190,7 +204,11 @@ const EmbedEdit = ( props ) => { // 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 { allowResponsive } = getMergedAttributes(); + const { + allowResponsive, + className: classFromPreview, + } = getMergedAttributes(); + const className = classnames( classFromPreview, props.className ); return ( <> @@ -219,6 +237,7 @@ const EmbedEdit = ( props ) => { /> Date: Wed, 11 Aug 2021 18:00:11 +0200 Subject: [PATCH 16/17] Fix duplicate classname after merge --- packages/block-library/src/embed/edit.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index 492995cbc2c06d..623f08752e56da 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -192,8 +192,6 @@ const EmbedEdit = ( props ) => { } const showEmbedPlaceholder = ! preview || cannotEmbed; - const { type, className: classFromPreview } = getMergedAttributes(); - const className = classnames( classFromPreview, props.className ); // Even though we set attributes that get derived from the preview, // we don't access them directly because for the initial render, @@ -203,6 +201,7 @@ const EmbedEdit = ( props ) => { // clipping or scrollbars. The `getAttributesFromPreview` function // that `getMergedAttributes` uses is memoized so that we're not const { + type, allowResponsive, className: classFromPreview, } = getMergedAttributes(); From 3d1117ac77ad49beec02cf5e119e065d374b98e2 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 13 Aug 2021 17:23:49 +0200 Subject: [PATCH 17/17] Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index d19d9dcc40603f..5c841297e4410f 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -9,6 +9,9 @@ For each user feature we should also add a importance categorization label to i [*] → Minor enhancements and fixes that address annoyances — things our users can miss. --> +## 1.60.0 +- [**] Embed block: Add "Resize for smaller devices" setting. [#33654] + ## 1.59.0 - [*] [Android] Fix UBE's inaccessible "more" toolbar item. [#33740] - [*] Image block: Add a "featured" banner and ability to set or remove an image as featured. (iOS only) [#31345]