Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move "Convert to regular blocks" button to block toolbar. #24066

Merged
merged 1 commit into from
Jul 28, 2020
Merged

Move "Convert to regular blocks" button to block toolbar. #24066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 39 additions & 16 deletions packages/block-library/src/block/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,17 @@ import { partial } from 'lodash';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { Placeholder, Spinner, Disabled } from '@wordpress/components';
import {
Placeholder,
Spinner,
Disabled,
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
BlockControls,
BlockEditorProvider,
BlockList,
WritingFlow,
Expand Down Expand Up @@ -105,6 +112,7 @@ class ReusableBlockEdit extends Component {

render() {
const {
convertToStatic,
isSelected,
reusableBlock,
isFetching,
Expand Down Expand Up @@ -148,21 +156,32 @@ class ReusableBlockEdit extends Component {
}

return (
<div className="block-library-block__reusable-block-container">
{ ( isSelected || isEditing ) && (
<ReusableBlockEditPanel
isEditing={ isEditing }
title={ title !== null ? title : reusableBlock.title }
isSaving={ isSaving && ! reusableBlock.isTemporary }
isEditDisabled={ ! canUpdateBlock }
onEdit={ this.startEditing }
onChangeTitle={ this.setTitle }
onSave={ this.save }
onCancel={ this.stopEditing }
/>
) }
{ element }
</div>
<>
<BlockControls>
<ToolbarGroup>
<ToolbarButton onClick={ convertToStatic }>
{ __( 'Convert to regular blocks' ) }
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
<div className="block-library-block__reusable-block-container">
{ ( isSelected || isEditing ) && (
<ReusableBlockEditPanel
isEditing={ isEditing }
title={
title !== null ? title : reusableBlock.title
}
isSaving={ isSaving && ! reusableBlock.isTemporary }
isEditDisabled={ ! canUpdateBlock }
onEdit={ this.startEditing }
onChangeTitle={ this.setTitle }
onSave={ this.save }
onCancel={ this.stopEditing }
/>
) }
{ element }
</div>
</>
);
}
}
Expand Down Expand Up @@ -197,6 +216,7 @@ export default compose( [
} ),
withDispatch( ( dispatch, ownProps ) => {
const {
__experimentalConvertBlockToStatic: convertBlockToStatic,
__experimentalFetchReusableBlocks: fetchReusableBlocks,
__experimentalUpdateReusableBlock: updateReusableBlock,
__experimentalSaveReusableBlock: saveReusableBlock,
Expand All @@ -207,6 +227,9 @@ export default compose( [
fetchReusableBlock: partial( fetchReusableBlocks, ref ),
onChange: partial( updateReusableBlock, ref ),
onSave: partial( saveReusableBlock, ref ),
convertToStatic() {
convertBlockToStatic( ownProps.clientId );
},
};
} ),
] )( ReusableBlockEdit );
12 changes: 2 additions & 10 deletions packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,11 +225,7 @@ describe( 'Reusable blocks', () => {
await insertReusableBlock( 'Surprised greeting block' );

// Convert block to a regular block
await clickBlockToolbarButton( 'More options' );
const convertButton = await page.waitForXPath(
'//button[text()="Convert to Regular Block"]'
);
await convertButton.click();
await clickBlockToolbarButton( 'Convert to regular blocks', 'content' );

// Check that we have a paragraph block on the page
const block = await page.$(
Expand Down Expand Up @@ -331,11 +327,7 @@ describe( 'Reusable blocks', () => {
await insertReusableBlock( 'Multi-selection reusable block' );

// Convert block to a regular block
await clickBlockToolbarButton( 'More options' );
const convertButton = await page.waitForXPath(
'//button[text()="Convert to Regular Block"]'
);
await convertButton.click();
await clickBlockToolbarButton( 'Convert to regular blocks', 'content' );

// Check that we have two paragraph blocks on the page
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down
78 changes: 30 additions & 48 deletions packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
* Menu controls to convert block(s) to reusable block or vice-versa.
* Menu control to convert block(s) to reusable block.
*
* @param {Object} props Component props.
* @param {string[]} props.clientIds Client ids of selected blocks.
*
* @return {import('@wordpress/element').WPComponent} The menu controls or null.
* @return {import('@wordpress/element').WPComponent} The menu control or null.
*/
export default function ReusableBlockConvertButton( { clientIds } ) {
const { isReusable, isVisible } = useSelect(
const canConvert = useSelect(
( select ) => {
const { canUser } = select( 'core' );
const { getBlocksByClientId, canInsertBlockType } = select(
Expand All @@ -28,71 +28,53 @@ export default function ReusableBlockConvertButton( { clientIds } ) {

const blocks = getBlocksByClientId( clientIds ) ?? [];

const _isReusable =
const isReusable =
blocks.length === 1 &&
blocks[ 0 ] &&
isReusableBlock( blocks[ 0 ] ) &&
!! getReusableBlock( blocks[ 0 ].attributes.ref );

// Show 'Convert to Regular Block' when selected block is a reusable block.
const _isVisible =
_isReusable ||
// Hide 'Add to Reusable blocks' when reusable blocks are disabled.
( canInsertBlockType( 'core/block' ) &&
blocks.every(
( block ) =>
// Guard against the case where a regular block has *just* been converted.
!! block &&
// Hide 'Add to Reusable blocks' on invalid blocks.
block.isValid &&
// Hide 'Add to Reusable blocks' when block doesn't support being made reusable.
hasBlockSupport( block.name, 'reusable', true )
) &&
// Hide 'Add to Reusable blocks' when current doesn't have permission to do that.
!! canUser( 'create', 'blocks' ) );
const _canConvert =
// Hide when this is already a reusable block.
! isReusable &&
// Hide when reusable blocks are disabled.
canInsertBlockType( 'core/block' ) &&
blocks.every(
( block ) =>
// Guard against the case where a regular block has *just* been converted.
!! block &&
// Hide on invalid blocks.
block.isValid &&
// Hide when block doesn't support being made reusable.
hasBlockSupport( block.name, 'reusable', true )
) &&
// Hide when current doesn't have permission to do that.
!! canUser( 'create', 'blocks' );

return {
isReusable: _isReusable,
isVisible: _isVisible,
};
return _canConvert;
},
[ clientIds ]
);

const {
__experimentalConvertBlockToReusable: convertBlockToReusable,
__experimentalConvertBlockToStatic: convertBlockToStatic,
} = useDispatch( 'core/editor' );

if ( ! isVisible ) {
if ( ! canConvert ) {
return null;
}

return (
<BlockSettingsMenuControls>
{ ( { onClose } ) => (
<>
{ ! isReusable && (
<MenuItem
onClick={ () => {
convertBlockToReusable( clientIds );
onClose();
} }
>
{ __( 'Add to Reusable blocks' ) }
</MenuItem>
) }
{ isReusable && (
<MenuItem
onClick={ () => {
convertBlockToStatic( clientIds[ 0 ] );
onClose();
} }
>
{ __( 'Convert to Regular Block' ) }
</MenuItem>
) }
</>
<MenuItem
onClick={ () => {
convertBlockToReusable( clientIds );
onClose();
} }
>
{ __( 'Add to Reusable blocks' ) }
</MenuItem>
) }
</BlockSettingsMenuControls>
);
Expand Down