Skip to content

Commit

Permalink
feat add ungrouping (#17575)
Browse files Browse the repository at this point in the history
  • Loading branch information
jbinda authored and Tug committed Oct 3, 2019
1 parent 24aee66 commit 3f0d82a
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ import { withSelect } from '@wordpress/data';
import BlockControls from '../block-controls';
import BlockFormatControls from '../block-format-controls';

/**
* Internal dependencies
*/
import UngroupButton from '../ungroup-button';

export const BlockToolbar = ( { blockClientIds, isValid, mode } ) => {
if ( blockClientIds.length === 0 ) {
return null;
Expand All @@ -18,6 +23,7 @@ export const BlockToolbar = ( { blockClientIds, isValid, mode } ) => {
<>
{ mode === 'visual' && isValid && (
<>
<UngroupButton />
<BlockControls.Slot />
<BlockFormatControls.Slot />
</>
Expand Down
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/ungroup-button/icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* WordPress dependencies
*/
import { Icon, SVG, Path } from '@wordpress/components';

const UngroupSVG = <SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M9 2H15C16.1 2 17 2.9 17 4V7C17 8.1 16.1 9 15 9H9C7.9 9 7 8.1 7 7V4C7 2.9 7.9 2 9 2ZM9 7H15V4H9V7Z" /><Path fillRule="evenodd" clipRule="evenodd" d="M5 11H11C12.1 11 13 11.9 13 13V16C13 17.1 12.1 18 11 18H5C3.9 18 3 17.1 3 16V13C3 11.9 3.9 11 5 11ZM5 16H11V13H5V16Z" /></SVG>;

export const Ungroup = <Icon icon={ UngroupSVG } />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/**
* External dependencies
*/
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import {
Toolbar,
ToolbarButton,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { UngroupIcon } from './icon';

export function UngroupButton( {
onConvertFromGroup,
isUngroupable = false,
} ) {
if ( ! isUngroupable ) {
return null;
}
return (
<Toolbar>
<ToolbarButton
title={ __( 'Ungroup' ) }
icon={ UngroupIcon }
onClick={ onConvertFromGroup }
/>
</Toolbar>
);
}

export default compose( [
withSelect( ( select ) => {
const {
getSelectedBlockClientId,
getBlock,
} = select( 'core/block-editor' );

const selectedId = getSelectedBlockClientId();
const selectedBlock = getBlock( selectedId );

const isUngroupable = selectedBlock && selectedBlock.innerBlocks && !! selectedBlock.innerBlocks.length;
const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];

return {
isUngroupable,
clientId: selectedId,
innerBlocks,
};
} ),
withDispatch( ( dispatch, { clientId, innerBlocks, onToggle = noop } ) => {
const {
replaceBlocks,
} = dispatch( 'core/block-editor' );

return {
onConvertFromGroup() {
if ( ! innerBlocks.length ) {
return;
}

replaceBlocks(
clientId,
innerBlocks
);

onToggle();
},
};
} ),
] )( UngroupButton );

0 comments on commit 3f0d82a

Please sign in to comment.