From 3252c277b62496909ade87c945d149abaca208c8 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 11 Jun 2021 11:54:14 +0200 Subject: [PATCH 1/2] Improve unsupported block message for reusable block The unsupported block message has been updated and the convert to regular blocks button has been also included. --- .../block-library/src/block/edit.native.js | 61 +++++++++++++++++-- .../src/block/editor.native.scss | 18 ++++++ 2 files changed, 73 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index 074dc9ee704c8..8dae7accc546a 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -12,23 +12,30 @@ import { /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; import { useEntityBlockEditor, useEntityProp, store as coreStore, } from '@wordpress/core-data'; -import { BottomSheet, Icon, Disabled } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { + BottomSheet, + Icon, + Disabled, + TextControl, +} from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __, sprintf } from '@wordpress/i18n'; import { __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, InnerBlocks, Warning, + store as blockEditorStore, } from '@wordpress/block-editor'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { help } from '@wordpress/icons'; import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -58,6 +65,14 @@ export default function ReusableBlockEdit( { styles.infoSheetIcon, styles.infoSheetIconDark ); + const infoDescriptionStyle = usePreferredColorSchemeStyle( + styles.infoDescription, + styles.infoDescriptionDark + ); + const actionButtonStyle = usePreferredColorSchemeStyle( + styles.actionButton, + styles.actionButtonDark + ); const spinnerStyle = usePreferredColorSchemeStyle( styles.spinner, styles.spinnerDark @@ -88,6 +103,12 @@ export default function ReusableBlockEdit( { [ ref, clientId ] ); + const { createSuccessNotice } = useDispatch( noticesStore ); + const { + __experimentalConvertBlockToStatic: convertBlockToStatic, + } = useDispatch( reusableBlocksStore ); + const { clearSelectedBlock } = useDispatch( blockEditorStore ); + const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'wp_block', @@ -104,13 +125,30 @@ export default function ReusableBlockEdit( { setShowHelp( false ); } + const onConvertToRegularBlocks = useCallback( () => { + createSuccessNotice( + sprintf( + /* translators: %s: name of the reusable block */ + __( '%s converted to regular blocks' ), + title + ) + ); + + clearSelectedBlock(); + // Convert action is executed at the end of the current JavaScript execution block + // to prevent issues related to undo/redo actions. + setImmediate( () => convertBlockToStatic( clientId ) ); + }, [ title, clientId ] ); + function renderSheet() { const infoTitle = Platform.OS === 'android' ? __( - "Reusable blocks aren't editable on WordPress for Android" + 'Editing reusable blocks is not yet supported on WordPress for Android' ) - : __( "Reusable blocks aren't editable on WordPress for iOS" ); + : __( + 'Editing reusable blocks is not yet supported on WordPress for iOS' + ); return ( { infoTitle } + + { __( + 'Alternatively, you can select "Convert to regular blocks" if you wish to make any changes to the block on this page or post only.' + ) } + + ); diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss index d69d9ee78162f..3aa23e0ddd20e 100644 --- a/packages/block-library/src/block/editor.native.scss +++ b/packages/block-library/src/block/editor.native.scss @@ -94,6 +94,24 @@ color: $white; } +.infoDescription { + padding-bottom: 24; + font-size: 16; + color: $gray-darken-20; +} + +.infoDescriptionDark { + color: $gray-20; +} + +.actionButton { + color: $blue-50; +} + +.actionButtonDark { + color: $blue-30; +} + .spinner { height: $grid-unit-60; border-width: $border-width; From caf5cfced189306229e2de7b7c197114e232833d Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 16 Jun 2021 10:09:25 +0200 Subject: [PATCH 2/2] Update unsupported block message of reusable block --- packages/block-library/src/block/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index 8dae7accc546a..14e8cb5efbb48 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -167,7 +167,7 @@ export default function ReusableBlockEdit( { { __( - 'Alternatively, you can select "Convert to regular blocks" if you wish to make any changes to the block on this page or post only.' + 'Alternatively, you can detach and edit these blocks separately by tapping "Convert to regular blocks".' ) }