diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js index 8f0c0015fa35cf..753b16f94a7557 100644 --- a/packages/block-editor/src/components/block-list/block-outline.native.js +++ b/packages/block-editor/src/components/block-list/block-outline.native.js @@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; */ import styles from './block.scss'; -const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ]; +const BLOCKS_WITH_OUTLINE = [ 'core/social-link', 'core/missing' ]; function BlockOutline( { blockCategory, @@ -22,7 +22,7 @@ function BlockOutline( { isSelected, name, } ) { - const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name ); + const textBlockWithOutline = BLOCKS_WITH_OUTLINE.includes( name ); const hasBlockTextCategory = blockCategory === 'text' && ! textBlockWithOutline; const hasBlockMediaCategory = diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index bc3d2e47db9619..856c6aa704a4e6 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -119,6 +119,7 @@ const SocialLinkEdit = ( { toValue: 1, duration: ANIMATION_DURATION, easing: Easing.circle, + useNativeDriver: false, } ), ] ).start( () => setHasUrl( true ) ); } @@ -157,7 +158,7 @@ const SocialLinkEdit = ( { ); return ( - + { isSelected && ( <> diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss index be0919d2c33fb6..f54d3aa4847755 100644 --- a/packages/block-library/src/social-link/editor.native.scss +++ b/packages/block-library/src/social-link/editor.native.scss @@ -1,5 +1,9 @@ @import "./socials-with-bg.scss"; +.container { + margin: $block-selected-margin; +} + .linkSettingsPanel { padding-left: 0; padding-right: 0; diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js index 9a3b1bdc8694ba..8236eef0814775 100644 --- a/packages/block-library/src/social-links/edit.native.js +++ b/packages/block-library/src/social-links/edit.native.js @@ -57,7 +57,7 @@ function SocialLinksEdit( { }, [ shouldRenderFooterAppender ] ); const renderFooterAppender = useRef( () => ( - + ) ); diff --git a/packages/block-library/src/social-links/editor.native.scss b/packages/block-library/src/social-links/editor.native.scss index cfba35769c7190..23030419f8891d 100644 --- a/packages/block-library/src/social-links/editor.native.scss +++ b/packages/block-library/src/social-links/editor.native.scss @@ -19,3 +19,7 @@ flex-direction: row; flex-wrap: wrap; } + +.footerAppenderContainer { + margin: $block-selected-margin 0; +} diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 0b483873048dfe..366c4250256462 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Display custom color value in mobile Cover Block color picker [#51414] +- [**] Display outline around selected Social Link block [#51414] ## 1.101.0 - [*] Remove visual gap in mobile toolbar when a Gallery block is selected [#52966]