diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 538b1027fdd919..542f2385a0245a 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -250,7 +250,7 @@ export const registerCoreBlocks = () => { pullquote, file, audio, - devOnly( reusableBlock ), + reusableBlock, search, devOnly( embed ), ].forEach( registerBlock ); diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 93f589bc7d9f47..df425e279fc05c 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -1,6 +1,8 @@ /** * External dependencies */ +import memize from 'memize'; + /** * WordPress dependencies */ @@ -70,6 +72,15 @@ class NativeEditorProvider extends Component { this.post.type, this.post ); + this.getEditorSettings = memize( + ( settings, capabilities ) => ( { + ...settings, + capabilities, + } ), + { + maxSize: 1, + } + ); } componentDidMount() { @@ -267,11 +278,18 @@ class NativeEditorProvider extends Component { const { children, post, // eslint-disable-line no-unused-vars + capabilities, + settings, ...props } = this.props; + const editorSettings = this.getEditorSettings( settings, capabilities ); return ( - + { children } ); diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 0e7fd0209dde3c..592da3aaf026b7 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -38,19 +38,18 @@ function useBlockEditorSettings( settings, hasTemplate ) { const { canUserUseUnfilteredHTML, isPostTitleSelected } = select( editorStore ); + const isWeb = Platform.OS === 'web'; const { canUser } = select( coreStore ); return { canUseUnfilteredHTML: canUserUseUnfilteredHTML(), - reusableBlocks: select( coreStore ).getEntityRecords( - 'postType', - 'wp_block', - /** - * Unbounded queries are not supported on native so as a workaround, we set per_page with the maximum value that native version can handle. - * Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661 - */ - { per_page: Platform.select( { web: -1, native: 100 } ) } - ), + reusableBlocks: isWeb + ? select( coreStore ).getEntityRecords( + 'postType', + 'wp_block', + { per_page: -1 } + ) + : [], // Reusable blocks are fetched in the native version of this hook. hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true diff --git a/packages/editor/src/components/provider/use-block-editor-settings.native.js b/packages/editor/src/components/provider/use-block-editor-settings.native.js new file mode 100644 index 00000000000000..57bfaf6fd3c08c --- /dev/null +++ b/packages/editor/src/components/provider/use-block-editor-settings.native.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import useBlockEditorSettings from './use-block-editor-settings.js'; + +function useNativeBlockEditorSettings( settings, hasTemplate ) { + const capabilities = settings.capabilities ?? {}; + const editorSettings = useBlockEditorSettings( settings, hasTemplate ); + + const supportReusableBlock = capabilities.reusableBlock === true; + const { reusableBlocks } = useSelect( + ( select ) => ( { + reusableBlocks: supportReusableBlock + ? select( coreStore ).getEntityRecords( + 'postType', + 'wp_block', + // Unbounded queries are not supported on native so as a workaround, we set per_page with the maximum value that native version can handle. + // Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661 + { per_page: 100 } + ) + : [], + } ), + [ supportReusableBlock ] + ); + + return useMemo( + () => ( { + ...editorSettings, + __experimentalReusableBlocks: reusableBlocks, + } ), + [ reusableBlocks ] + ); +} + +export default useNativeBlockEditorSettings; diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt index 187b0a361b367a..a12fbfd9520cae 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt @@ -10,6 +10,7 @@ data class GutenbergProps @JvmOverloads constructor( val enableUnsupportedBlockEditor: Boolean, val canEnableUnsupportedBlockEditor: Boolean, val enableAudioBlock: Boolean, + val enableReusableBlock: Boolean, val localeSlug: String, val postType: String, val featuredImageId: Int, @@ -45,6 +46,7 @@ data class GutenbergProps @JvmOverloads constructor( putBoolean(PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, enableUnsupportedBlockEditor) putBoolean(PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR, canEnableUnsupportedBlockEditor) putBoolean(PROP_CAPABILITIES_AUDIO_BLOCK, enableAudioBlock) + putBoolean(PROP_CAPABILITIES_REUSABLE_BLOCK, enableReusableBlock) putBoolean(PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING, canViewEditorOnboarding) } @@ -74,6 +76,7 @@ data class GutenbergProps @JvmOverloads constructor( const val PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR = "unsupportedBlockEditor" const val PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR = "canEnableUnsupportedBlockEditor" const val PROP_CAPABILITIES_AUDIO_BLOCK = "audioBlock" + const val PROP_CAPABILITIES_REUSABLE_BLOCK = "reusableBlock" const val PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING = "canViewEditorOnboarding" } } diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift index 406c19ce36eb64..879af5ebd62422 100644 --- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift +++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift @@ -23,6 +23,7 @@ public enum Capabilities: String { case unsupportedBlockEditor case canEnableUnsupportedBlockEditor case audioBlock + case reusableBlock case canViewEditorOnboarding } diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 4260583a49d478..c8b38a6a532bd8 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,9 +10,12 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased -- [***] Slash inserter +- [***] Slash inserter [#29772] - [*] Audio block: Add Insert from URL functionality. [#27817] +- [*] Fix missing title for some unsupported blocks [#31743] +- [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885] +- [***] Enable reusable block only in WP.com sites [#31744] ## 1.53.0 @@ -20,18 +23,6 @@ For each user feature we should also add a importance categorization label to i - [*] Fixes color picker rendering bug when scrolling [#30994] - [*] Add enableCaching param to fetch request on Android [#31186] - [***] Add reusable blocks to the inserter menu. [#28495] -- [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885] - -## 1.52.2 - -- [*] Disabled featured image banner on iOS. [#31681] -- [*] Fix missing title for some unsupported blocks [#31743] - -## 1.52.1 - -- [*] Fixes for the generated localized strings files. - -## 1.52.0 ## 1.52.2 diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java index 23b461807a111d..e4a0f9d7af2cc0 100644 --- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java +++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java @@ -32,6 +32,7 @@ protected Bundle getLaunchOptions() { capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_XPOSTS, true); capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, true); capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_AUDIO_BLOCK, true); + capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_REUSABLE_BLOCK, false); capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING, false); bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities); return bundle; diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 5f228e4e62a943..1e0880c98487e4 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -287,6 +287,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource { .canEnableUnsupportedBlockEditor: unsupportedBlockCanBeActivated, .mediaFilesCollectionBlock: true, .audioBlock: true, + .reusableBlock: false, .canViewEditorOnboarding: false ] } diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js index 81abf5bd7eb9c7..6198c043a3ab83 100644 --- a/packages/react-native-editor/src/index.js +++ b/packages/react-native-editor/src/index.js @@ -19,6 +19,7 @@ import { validateThemeGradients, } from '@wordpress/block-editor'; import { dispatch } from '@wordpress/data'; +import { unregisterBlockType } from '@wordpress/blocks'; const reactNativeSetup = () => { // Disable warnings as they disrupt the user experience in dev mode @@ -56,6 +57,11 @@ const setupInitHooks = () => { 'core/react-native-editor', ( props ) => { setupLocale( props.locale, props.translations ); + + const capabilities = props.capabilities ?? {}; + if ( capabilities.reusableBlock !== true ) { + unregisterBlockType( 'core/block' ); + } } );