From f6f9014930efbd717f377c684738800d8d1de0b0 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 May 2021 19:43:15 +0200 Subject: [PATCH 1/7] Add reusableBlock capability in the RN bridge --- .../java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt | 3 +++ packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift | 1 + .../android/app/src/main/java/com/gutenberg/MainActivity.java | 1 + 3 files changed, 5 insertions(+) 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 5e1e712cb414ab..98395897742e95 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, @@ -44,6 +45,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) } companion object { @@ -72,5 +74,6 @@ 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" } } diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift index 5e96b4e4217954..1f76314f98142a 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 } /// Wrapper for single block data 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 1946c46b517d57..a23212a36b2e66 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, true); bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities); return bundle; } From 5c190b78bcc55bc45ca936b47df595bbd8d83ca2 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 May 2021 19:44:00 +0200 Subject: [PATCH 2/7] Unregister reusable block by its capability --- packages/react-native-editor/src/index.js | 6 ++++++ 1 file changed, 6 insertions(+) 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' ); + } } ); From 1803eba58f8f6718a39f0a9742f9d16def8f7453 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 May 2021 19:47:55 +0200 Subject: [PATCH 3/7] Add capabilities to the settings props of editor provider --- .../src/components/provider/index.native.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) 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 } ); From 68434fcda2a3d9693b411ff8b2e68dbd254233bc Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 11 May 2021 19:51:25 +0200 Subject: [PATCH 4/7] Add use-block-editor-settings native version --- .../provider/use-block-editor-settings.js | 17 ++++---- .../use-block-editor-settings.native.js | 42 +++++++++++++++++++ 2 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 packages/editor/src/components/provider/use-block-editor-settings.native.js 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 412cd30fc0ac3b..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: 10 } ) } - ), + 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; From 0b920ae671cabbf50a7db9d69eee56d79b85dcdb Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 12 May 2021 12:32:54 +0200 Subject: [PATCH 5/7] Update react-native-editor changelog --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 7b5750249ed779..9d84466d8946a4 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label to i - [*] Bottom-sheet: Add custom header [#30291] - [*] Fixes color picker rendering bug when scrolling [#30994] - [*] Add enableCaching param to fetch request on Android [#31186] +- [*] Enable reusable block only in WP.com sites [#31744] ## 1.52.1 From d9fe8f99cfab7266f136b3783de3b033795067ed Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 12 May 2021 12:59:59 +0200 Subject: [PATCH 6/7] Remove devOnly for reusable block --- packages/block-library/src/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 0dffcb66269c1e..413d2b6cd1d86d 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -251,7 +251,7 @@ export const registerCoreBlocks = () => { pullquote, file, audio, - devOnly( reusableBlock ), + reusableBlock, search, devOnly( embed ), ].forEach( registerBlock ); From 1f4ad23b12b1567357788b2a8d2dd1e54d2b379a Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 21 May 2021 11:56:48 +0200 Subject: [PATCH 7/7] Disable reusable block capability in demo project --- .../android/app/src/main/java/com/gutenberg/MainActivity.java | 2 +- .../ios/GutenbergDemo/GutenbergViewController.swift | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) 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 6e3a5abeabdb93..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,7 +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, 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 ] }