Enables Block Grouping/UnGrouping using core/group #14908

getdave · 2019-04-10T15:19:41Z

~~This is an experiment for one direction we might take for the ability~~ Provides the ability to group other Blocks within the core/group Block as per suggestion here.

Closes #14601

Screenshots

📺 Here is a screencast of this in action.

Todos

Allow transforms to/from all Block types - currently limited to manually supplied Block types in the transforms definitions. Probably start here
UnGroup functionality
Ensure transform functionality is disabled if core/group is not available
Ensure options menu items are hidden and disabled if core/group is not available
Ensure align widths of Blocks being grouped are respected and the appropriate width alignment set on the core/group so that layout is preserved when grouping.
Write e2e tests to cover all functionality

packages/editor/src/components/provider/index.js

packages/editor/src/components/convert-to-group-buttons/convert-button.js

getdave · 2019-04-11T08:07:40Z

@kjellr Might I trouble you for suitable icons for

Group
Ungroup

jasmussen · 2019-04-11T10:54:45Z

I really dig this. Impressive work for what you call "rudimentary".

My very first instinct was: this should be in the switcher. The action is the same as when you create a quote — select multiple blocks, use switcher, choose quote. Group should be there.

At the same time, I would love to see a ⌘G shortcut for grouping blocks together, and this would be more discoverable if it sits in the More menu with a shortcut tip on the right.

To echo Matías, I could support having this work in both places, just for that reason. But I would also suggest that if we can only have one, or if we need to start small, I would put this in the block switcher first.

kjellr · 2019-04-11T16:49:16Z

@kjellr Might I trouble you for suitable icons for

Group
Ungroup

Some light research suggests a fairly standard representation of "grouped" and "ungrouped" elements is the common representation of this idea. Here's Keynote and Sketch:

Oddly enough, Material doesn't have icons like these. ¯_(ツ)_/¯

The "layers" icons seem to be the closest:

We could also do something custom, along the lines of:

If you want to plug something in while we think about it, here are the svgs for the bottom option:

https://cloudup.com/cpOhjnDEqBf

As provided here #14908 (comment)

getdave · 2019-04-12T10:12:44Z

Update

I have updated this PR to include support for grouping via

Block transforms
"Group" button (under dropdown)
Cmd + Option + g keyboard shortcut

Important note: as it stands the transform on core/group only works on core/paragraph Blocks. As a result the functionality described above will only work when grouping core/paragraph. I'm not sure how to make it apply to all Block types. Advice appreciated.

The keyboard shortcut follows the convention from Google Docs

@kjellr I've added the Group icon as provided.

We're also missing "UnGroup" but this isn't currently possible as the to transform callback doesn't provide access to innerBlocks on the core/group.

📺 Screencast

You can watch a screencast here.

Feedback Required

I'm looking for guidance on how we could implement wildcard block transforms via transforms from and to. We need to be able to:

allow all/any Blocks to be transformed - currently, you have to specify particular Block types but we need a wildcard option
have access to the full Block data within the transforms callback in order that we can access the name of the Block and innerBlocks of the Block (both required for UnGroup)

getdave · 2019-04-12T15:11:09Z

Another update 🙈

This commit has modified the logic around Block transformations logic to enable wildcard Block transforms. The following is a high level summary:

Pass Block names into transform callback functions - this enables dynamic Block creation in wildcard transforms (see core/group). Previously only had access to attributes and innerBlocks (question why didn't we just pass the entire Block in here?).
Add edge cases to Block transformation logic to account for specifying * (all) Block types as valid for a transformation
Remove unwanted test that checks all Blocks are of the same type before allowing a transform on a Multi Block selection. This is probably the first transform that would ever have required different types of Blocks to be transformed together.

The last item, in particular, will need some experienced 👀 on it. I suspect we may need to restore the test but with extra logic to account for wildcard.

Also, this entire commit may be better being pulled into its own separate PR (although that could make manual testing quite tricky).

Screenshots

You can now Group multiple different Block types together via:

Transforms
Group dropdown button
Keyboard shortcut

📺 https://cld.wthms.co/lNNWAy

mtias · 2019-04-12T16:22:24Z

Good progress.

Remove unwanted test that checks all Blocks are of the same type before allowing a transform on a Multi Block selection. This is probably the first transform that would ever have required different types of Blocks to be transformed together.

Yes, this is something that we would like to do. This is the first transform that is applicable regardless of the block types involved.

Resolves #14908 (comment)

Addresses #14908 (comment)

getdave · 2019-06-05T10:24:46Z

@aduth Thanks for the approving review! 🎉

Since there seems to be a number of these follow-on tasks, can we make sure to summarize them somewhere, ideally in individual issues?

I've created follow-on tasks as issues and noted these in your comments.

I go back and forth on whether I like the name convert. If there's opposition raised between now and Monday's RC, we can always revise it without too much trouble.

I will add this to the Core Editor meeting notes. I may not be able to attend due to family commitments. In which case it would be great if you could bring this up.

Accidentally got lost during renaming of “UnGroup” to “Ungroup”!

Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related #14908

jwold · 2019-06-06T15:07:27Z

Can't wait to see this live. So excited about it! I've started working with groups in the past few days, and something like this will be amazing.

ktmn · 2019-06-13T03:25:38Z

This is a cool feature, thank you.

Some thoughts: Perhaps core/group shouldn't necessarily be singled out. I have many blocks that act as a group/container and sometimes I would like to wrap already existing block(s) with them as an afterthought. Current workflow is to create the container and then drag and drop which is fiddly or switch to text mode and wrap it manually.

I like the option to group under "More options" button on the block toolbar, but Transform to -> Group seems odd because intuitively transform should change the current block to something else.

Ideally, instead of More options -> Group there could be More options -> Wrap that then allows to choose from any blocks whose InnerBlocks allow all currently selected blocks, core/group included.

Less ideally, I can register transforms for the core/group to manually turn them into any other container block after grouping, so theres that :)

Edit: Also More options -> Unwrap would be something that can't be easily done right now.

…uping" interactions (#15774) * Adds grouping interaction to state Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related #14908 * Registers grouping block * Auto updated README * Adds test for get/set Grouping block * Update documentation with clearer descriptions * Adds reducer and selector tests * Updates “Blog” for correct “Block” in docs

getdave · 2019-06-25T08:40:11Z

This is a cool feature, thank you.

@ktmn You are welcome. Glad you like it. 😄

Perhaps core/group shouldn't necessarily be singled out.

Agreed, which is why I've added the ability to register your own Block as the Block to be used for "Grouping" #15774

This doesn't completely cover the use-case you outline. However, it will (once this PR is completed #16278) allow you to define (in code) which Block is actually used for the act of "Grouping". In theory, you'll then be able to register your own Block with InnerBlocks support and a supporting transform and everything will work as expected. At least that's the theory.

Also, I'd advise that if you have a feature request you raise an Issue in this repo. This will ensure it is given visibility, as it was only by chance that I came across your comment on this PR.

* Experiment with rudity mentory mechanic to allow Block Grouping Tried a few approaches via `insertBlock/removeBlocks` and even `replaceBlocks` but nothing preserved the undo history apart from this rather brute force method. * Migrate to `core/group` due to renaming of container Block from `core/section` * Adds conditionals to hide Group btn if selection is only a single `core/group` Block * Adds transform and updates Group button implementation to mirror Adds a `from` transform to the `core/group` Block. Currently this only works for `core/paragraph` but will need to work for all Block types. Updates the convert button to utilise `switchToBlockType` which invokes the same functionality as used in Block transform thereby unifiying the two methods of grouping. * Adds and applies Group icon As provided here WordPress#14908 (comment) * Adds editor shortcut for Grouping Blocks * Add test to check for blocks before attempting replace * Adds wildcard Block transforms A major update to the transforms logic to enable wildcard Block transforms. * Pass Block names into transform callback function - enables dynamic Block creation in wildcard transforms (see `core/group`) * Add edge cases to Block transformation logic to account for specifying `*` (all) Block types as valid for a transformation * Remove unwanted test that checks all Blocks are of the same type before allowing a transform on a Multi Block selection * Reinstate missing createBlock dep after rebase * Fix to avoid allowing single Group Block to be Grouped * Update to use more appropriate logical negation operator for comparison Addresses WordPress#14908 (comment) * Extracts key transform test logic into dedicated methods Previously hard coded values and difficult to follow logic were making the `switchToBlockType` overly complex. Extracted to well name methods to improve readability and allow to further refactoring. * Extract method to test for wildcard block transforms DRYs up code by extracting a function to test for the presence of a wildcard block transform * Moves logic to allow for wildcard transform into central transform checking method Previously test to allow wildcard transform to be valid were manually added as edge cases in conditions in predicate functions. This update centralises all logic to test whether a given transform is possible but including the logic that allows wildcard transforms within the main method `isPossibleTransformForSource` which determines whether a given transform is possible. * Adds UnGrouping mechanic * Adds UnGroup Icon * Adds e2e test to cover basic grouping for single and multiple blocks * Fix edge case with test to detect a single group container Block * Adds UnGroup keyboard shortcut * Adds more e2e test coverage Includes testing grouping via transforms, options menu and keyboard shortcuts * Adds check for group block availability before displaying grouping UI Also adds e2e tests to cover this. * Updates misnamned components Addresses WordPress#14908 (comment) * Updates to preserve widest width alignment of child block on group container Previously if one of the child blocks being grouped had a width alignment (eg: wide or full) then the group block did not respect this. This meant that layouts weren’t preserved when grouping. Adds functionality and tests to ensure that when a group is created the widest alignment setting of the child blocks is set on the group block. * Updates to DRY out tests * Updates to simplify test setup Previously API calls were cleaning up blocks. This can be removed because all posts are auto removed before each test is run. Addresses WordPress#14908 (comment) * Updates to simplify test assertion Addresses WordPress#14908 (comment) * Combines test cases to simplify and reduce number of test required Addresses WordPress#14908 (comment) * Updates to combine test for grouping and ungrouping via options menu Addresses WordPress#14908 (comment) * Adds keyboard shortcut to global keyboard shortcuts modal * Ensure correct case for group shortcut (ie: lower) * Add shortcut to Block settings menu dropdown items * Adds translation context to Group actions in menus Addresses WordPress#14908 (comment) * Update Block Transforms fixtures to show all Blocks can transform to Group Block * Updates Keyboard Shortcut test snapshot to include Group/UnGroup * Fix to ensure Group block accounted for * Fix Block deletion test failure via keyboard workaround Due to the addition of the “Group” item into the Block Options toolbar the “Remove Block” item had been removed outside the viewable portion of the Popover (not the popover has a restricted height and allows scrolling to see the additional items if there is insufficient space to display them all). Pupeteer isn’t able to click on items that are not visible. The simplest work around is to us the keyboard to select the “Remove Block” menu item rather. Trying to scroll a div within Pupeteer is fraught with problems and inconsistencies. * Fixes Remove Block button helper to be more resilient to change Previously we relied on the number of tab stops to locate the correct button in the menu. This change uses the actual text of the button to identify it and uses an assertion to ensure that the correct button is explicitly required. * Rename function to better convey intent Addresses WordPress#14908 (comment) * Fixes to catch transforms which are invalid for blocks of different types A check was accidentally removed in `b2af0f2611e2a2bc66c62959dbf483abcbe103a9` which allowed multiple blocks of different types to be considered valid even if they were not. Adds conditional to ensure that unless the transform is a wildcard then we test that all the blocks are of the same type as the first block’s type before considering the transform to be valid. * Removes redundant snapshots * Fixes Transforms test to not over-test Group transforms Previously we tested every block transforming into the Group Block. This was unwanted overhead. Fixed to only test 1 single Block transforming into Group. Removed redundant snapshots as a result of removing it. * Fixes e2e test by reinstating helper lost during rebase * Fix to make Group transform snapshot tests more resilient to change Now explicity selects paragraph and image blocks to test the Group transform rather than simply testing the first block that transform into a Group. This ensures that if the order of transforms changes in the fixtures the test won’t be accidentally invalidated. Resolves: WordPress#14908 * Updates to DRY out test and reduce test redundancy and performance Through use of smarter filtering we can get away with a single `it.each()` block which improves perf and removes redundant tests. Addresses WordPress#14908 (comment) * Adds unit tests to cover new conditionals added for wildcard blocks transforms * Fixes capitalisation of UnGroup to Ungroup Resolves WordPress#14908 (comment) * Updates doc block to reflect possible nullable return type Addresses WordPress#14908 (comment) * Updates Readme with doc update * Updates to remove unwanted comments * Updates capitalisatoin of “wildcard” Addresses WordPress#14908 (comment) * Update comment with more context for future maintainers Addresses WordPress#14908 (comment) * Updates to remove unwanted level of context on the translation Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Adds tests to cover isWildcardBlockTransform * Adds tests for isContainerGroupBlock function Note these test will need updating when we land WordPress#15774 * Fixes logic around multi blocks of same type and adds tests Prevously we had 1 function attempting to test for multiple block selection and checking that the selection was all of the same block type. This caused bugs within `switchToBlockType` because the logic was confusing. For example, if a selection isn’t a multi block then we don’t need to test that all the blocks are the same. Separated the two functions and updated conditions in switchToBlockType to reflect this. Added unit tests to cover two new functions. * Adds new generator based API signature to Block transforms Previously the transforms function was pased two arguments 1. attributes 2. innerblocks This wasn’t extensible and more advanced transformations require more information about the block (eg: name). To avoid bloating the signature, a progressive enhancement approach is applied whereby if a generator function is passed as the transform then we pass the entire block object to the generator. This is opt-in only and is backwards compatible with all existing transform functions. * Adds new apply option method to transform API Previously we were modifying the existing transform function to conform to the requirements of a new API (ie: receiving the entire block object rather than the individual arguments). It was decided that introducing a new `apply` option and soft deprecating the old transform option would be preferable. The apply option if provided now takes precedence over the transform option. This is fully backwards compatible. See https://wordpress.slack.com/archives/C02QB2JS7/p1559567845087000 * Updates Block Reg docs to cover wildcard transforms * Updates changelog to document wildcards and transform apply option * Fix linting error introduce in rebase * Fixes test util to avoid infinite loops Previously if the button wasn’t found then the loop would continue forever looking for the button. This would have caused timeouts. Limits the loop to the number of buttons in the document. Also bails out immediately having found the button. Resolves WordPress#14908 (comment) * Renames apply to convert to avoid confusion with Func.apply To avoid potential confusion and overlap with Function.apply, rename to `convert`. Slack discussion: https://wordpress.slack.com/archives/C02QB2JS7/p1559593099150300?thread_ts=1559571243.134500&cid=C02QB2JS7 MDN Function apply docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply Resolves: WordPress#14908 (comment) * Fixes unecessary additional var introduced during debugging * Fix convert API to match established patterns for consistency Previously `convert` always passed an array of block objects even if there was only a single block. This is inconsistent with the implementation of the existing `transform` method which passes only a block’s attributes/innerBlocks pair when it is not a multi block. To retain consistency with the existing `isMultiBlock` paradiagm this updates the API of `convert` to pass a single block object when not in multiblock mode. * Fixes error in docs Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes doc blocks to match coding style Resolves WordPress#14908 (comment) * Fixes icon size and color in dropdown for Group/Ungroup * Updates to remove keyboard shortcuts Following a discussion it was not possible to achieve a consensus on which shortcuts was most suitable (or indeed whether keyboard shortcuts for this were even a good idea). As a result this has been descoped from this PR and will be addressed elsewhere. Once merged I will push a new placeholder PR with the foundation for shortcuts in place and others can then amend it. * Updates snapshot to account for removing keyboard shortcuts * Removes e2e tests covering keyboard shortcuts * Fixes unwanted check introduced during debugging Test for existence of transform is not required and was introduced during debugging. Can be removed. * Updates to collapse spaces in doc blocks Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes isWildcardBlockTransform to test for Array-ness Resolves WordPress#14908 (comment) * Fixes incorrect capitalisation of “UnGroup” to “Ungroup” Addresses WordPress#14908 (comment) * Updates to remove redundant isMultiBlockSelection util function Addresses WordPress#14908 (comment) * Reinstate missing Ungroup icon Accidentally got lost during renaming of “UnGroup” to “Ungroup”!

…uping" interactions (WordPress#15774) * Adds grouping interaction to state Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related WordPress#14908 * Registers grouping block * Auto updated README * Adds test for get/set Grouping block * Update documentation with clearer descriptions * Adds reducer and selector tests * Updates “Blog” for correct “Block” in docs

* Experiment with rudity mentory mechanic to allow Block Grouping Tried a few approaches via `insertBlock/removeBlocks` and even `replaceBlocks` but nothing preserved the undo history apart from this rather brute force method. * Migrate to `core/group` due to renaming of container Block from `core/section` * Adds conditionals to hide Group btn if selection is only a single `core/group` Block * Adds transform and updates Group button implementation to mirror Adds a `from` transform to the `core/group` Block. Currently this only works for `core/paragraph` but will need to work for all Block types. Updates the convert button to utilise `switchToBlockType` which invokes the same functionality as used in Block transform thereby unifiying the two methods of grouping. * Adds and applies Group icon As provided here WordPress#14908 (comment) * Adds editor shortcut for Grouping Blocks * Add test to check for blocks before attempting replace * Adds wildcard Block transforms A major update to the transforms logic to enable wildcard Block transforms. * Pass Block names into transform callback function - enables dynamic Block creation in wildcard transforms (see `core/group`) * Add edge cases to Block transformation logic to account for specifying `*` (all) Block types as valid for a transformation * Remove unwanted test that checks all Blocks are of the same type before allowing a transform on a Multi Block selection * Reinstate missing createBlock dep after rebase * Fix to avoid allowing single Group Block to be Grouped * Update to use more appropriate logical negation operator for comparison Addresses WordPress#14908 (comment) * Extracts key transform test logic into dedicated methods Previously hard coded values and difficult to follow logic were making the `switchToBlockType` overly complex. Extracted to well name methods to improve readability and allow to further refactoring. * Extract method to test for wildcard block transforms DRYs up code by extracting a function to test for the presence of a wildcard block transform * Moves logic to allow for wildcard transform into central transform checking method Previously test to allow wildcard transform to be valid were manually added as edge cases in conditions in predicate functions. This update centralises all logic to test whether a given transform is possible but including the logic that allows wildcard transforms within the main method `isPossibleTransformForSource` which determines whether a given transform is possible. * Adds UnGrouping mechanic * Adds UnGroup Icon * Adds e2e test to cover basic grouping for single and multiple blocks * Fix edge case with test to detect a single group container Block * Adds UnGroup keyboard shortcut * Adds more e2e test coverage Includes testing grouping via transforms, options menu and keyboard shortcuts * Adds check for group block availability before displaying grouping UI Also adds e2e tests to cover this. * Updates misnamned components Addresses WordPress#14908 (comment) * Updates to preserve widest width alignment of child block on group container Previously if one of the child blocks being grouped had a width alignment (eg: wide or full) then the group block did not respect this. This meant that layouts weren’t preserved when grouping. Adds functionality and tests to ensure that when a group is created the widest alignment setting of the child blocks is set on the group block. * Updates to DRY out tests * Updates to simplify test setup Previously API calls were cleaning up blocks. This can be removed because all posts are auto removed before each test is run. Addresses WordPress#14908 (comment) * Updates to simplify test assertion Addresses WordPress#14908 (comment) * Combines test cases to simplify and reduce number of test required Addresses WordPress#14908 (comment) * Updates to combine test for grouping and ungrouping via options menu Addresses WordPress#14908 (comment) * Adds keyboard shortcut to global keyboard shortcuts modal * Ensure correct case for group shortcut (ie: lower) * Add shortcut to Block settings menu dropdown items * Adds translation context to Group actions in menus Addresses WordPress#14908 (comment) * Update Block Transforms fixtures to show all Blocks can transform to Group Block * Updates Keyboard Shortcut test snapshot to include Group/UnGroup * Fix to ensure Group block accounted for * Fix Block deletion test failure via keyboard workaround Due to the addition of the “Group” item into the Block Options toolbar the “Remove Block” item had been removed outside the viewable portion of the Popover (not the popover has a restricted height and allows scrolling to see the additional items if there is insufficient space to display them all). Pupeteer isn’t able to click on items that are not visible. The simplest work around is to us the keyboard to select the “Remove Block” menu item rather. Trying to scroll a div within Pupeteer is fraught with problems and inconsistencies. * Fixes Remove Block button helper to be more resilient to change Previously we relied on the number of tab stops to locate the correct button in the menu. This change uses the actual text of the button to identify it and uses an assertion to ensure that the correct button is explicitly required. * Rename function to better convey intent Addresses WordPress#14908 (comment) * Fixes to catch transforms which are invalid for blocks of different types A check was accidentally removed in `b2af0f2611e2a2bc66c62959dbf483abcbe103a9` which allowed multiple blocks of different types to be considered valid even if they were not. Adds conditional to ensure that unless the transform is a wildcard then we test that all the blocks are of the same type as the first block’s type before considering the transform to be valid. * Removes redundant snapshots * Fixes Transforms test to not over-test Group transforms Previously we tested every block transforming into the Group Block. This was unwanted overhead. Fixed to only test 1 single Block transforming into Group. Removed redundant snapshots as a result of removing it. * Fixes e2e test by reinstating helper lost during rebase * Fix to make Group transform snapshot tests more resilient to change Now explicity selects paragraph and image blocks to test the Group transform rather than simply testing the first block that transform into a Group. This ensures that if the order of transforms changes in the fixtures the test won’t be accidentally invalidated. Resolves: WordPress#14908 * Updates to DRY out test and reduce test redundancy and performance Through use of smarter filtering we can get away with a single `it.each()` block which improves perf and removes redundant tests. Addresses WordPress#14908 (comment) * Adds unit tests to cover new conditionals added for wildcard blocks transforms * Fixes capitalisation of UnGroup to Ungroup Resolves WordPress#14908 (comment) * Updates doc block to reflect possible nullable return type Addresses WordPress#14908 (comment) * Updates Readme with doc update * Updates to remove unwanted comments * Updates capitalisatoin of “wildcard” Addresses WordPress#14908 (comment) * Update comment with more context for future maintainers Addresses WordPress#14908 (comment) * Updates to remove unwanted level of context on the translation Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Adds tests to cover isWildcardBlockTransform * Adds tests for isContainerGroupBlock function Note these test will need updating when we land WordPress#15774 * Fixes logic around multi blocks of same type and adds tests Prevously we had 1 function attempting to test for multiple block selection and checking that the selection was all of the same block type. This caused bugs within `switchToBlockType` because the logic was confusing. For example, if a selection isn’t a multi block then we don’t need to test that all the blocks are the same. Separated the two functions and updated conditions in switchToBlockType to reflect this. Added unit tests to cover two new functions. * Adds new generator based API signature to Block transforms Previously the transforms function was pased two arguments 1. attributes 2. innerblocks This wasn’t extensible and more advanced transformations require more information about the block (eg: name). To avoid bloating the signature, a progressive enhancement approach is applied whereby if a generator function is passed as the transform then we pass the entire block object to the generator. This is opt-in only and is backwards compatible with all existing transform functions. * Adds new apply option method to transform API Previously we were modifying the existing transform function to conform to the requirements of a new API (ie: receiving the entire block object rather than the individual arguments). It was decided that introducing a new `apply` option and soft deprecating the old transform option would be preferable. The apply option if provided now takes precedence over the transform option. This is fully backwards compatible. See https://wordpress.slack.com/archives/C02QB2JS7/p1559567845087000 * Updates Block Reg docs to cover wildcard transforms * Updates changelog to document wildcards and transform apply option * Fix linting error introduce in rebase * Fixes test util to avoid infinite loops Previously if the button wasn’t found then the loop would continue forever looking for the button. This would have caused timeouts. Limits the loop to the number of buttons in the document. Also bails out immediately having found the button. Resolves WordPress#14908 (comment) * Renames apply to convert to avoid confusion with Func.apply To avoid potential confusion and overlap with Function.apply, rename to `convert`. Slack discussion: https://wordpress.slack.com/archives/C02QB2JS7/p1559593099150300?thread_ts=1559571243.134500&cid=C02QB2JS7 MDN Function apply docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply Resolves: WordPress#14908 (comment) * Fixes unecessary additional var introduced during debugging * Fix convert API to match established patterns for consistency Previously `convert` always passed an array of block objects even if there was only a single block. This is inconsistent with the implementation of the existing `transform` method which passes only a block’s attributes/innerBlocks pair when it is not a multi block. To retain consistency with the existing `isMultiBlock` paradiagm this updates the API of `convert` to pass a single block object when not in multiblock mode. * Fixes error in docs Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes doc blocks to match coding style Resolves WordPress#14908 (comment) * Fixes icon size and color in dropdown for Group/Ungroup * Updates to remove keyboard shortcuts Following a discussion it was not possible to achieve a consensus on which shortcuts was most suitable (or indeed whether keyboard shortcuts for this were even a good idea). As a result this has been descoped from this PR and will be addressed elsewhere. Once merged I will push a new placeholder PR with the foundation for shortcuts in place and others can then amend it. * Updates snapshot to account for removing keyboard shortcuts * Removes e2e tests covering keyboard shortcuts * Fixes unwanted check introduced during debugging Test for existence of transform is not required and was introduced during debugging. Can be removed. * Updates to collapse spaces in doc blocks Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes isWildcardBlockTransform to test for Array-ness Resolves WordPress#14908 (comment) * Fixes incorrect capitalisation of “UnGroup” to “Ungroup” Addresses WordPress#14908 (comment) * Updates to remove redundant isMultiBlockSelection util function Addresses WordPress#14908 (comment) * Reinstate missing Ungroup icon Accidentally got lost during renaming of “UnGroup” to “Ungroup”!

…uping" interactions (WordPress#15774) * Adds grouping interaction to state Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related WordPress#14908 * Registers grouping block * Auto updated README * Adds test for get/set Grouping block * Update documentation with clearer descriptions * Adds reducer and selector tests * Updates “Blog” for correct “Block” in docs

* Experiment with rudity mentory mechanic to allow Block Grouping Tried a few approaches via `insertBlock/removeBlocks` and even `replaceBlocks` but nothing preserved the undo history apart from this rather brute force method. * Migrate to `core/group` due to renaming of container Block from `core/section` * Adds conditionals to hide Group btn if selection is only a single `core/group` Block * Adds transform and updates Group button implementation to mirror Adds a `from` transform to the `core/group` Block. Currently this only works for `core/paragraph` but will need to work for all Block types. Updates the convert button to utilise `switchToBlockType` which invokes the same functionality as used in Block transform thereby unifiying the two methods of grouping. * Adds and applies Group icon As provided here WordPress#14908 (comment) * Adds editor shortcut for Grouping Blocks * Add test to check for blocks before attempting replace * Adds wildcard Block transforms A major update to the transforms logic to enable wildcard Block transforms. * Pass Block names into transform callback function - enables dynamic Block creation in wildcard transforms (see `core/group`) * Add edge cases to Block transformation logic to account for specifying `*` (all) Block types as valid for a transformation * Remove unwanted test that checks all Blocks are of the same type before allowing a transform on a Multi Block selection * Reinstate missing createBlock dep after rebase * Fix to avoid allowing single Group Block to be Grouped * Update to use more appropriate logical negation operator for comparison Addresses WordPress#14908 (comment) * Extracts key transform test logic into dedicated methods Previously hard coded values and difficult to follow logic were making the `switchToBlockType` overly complex. Extracted to well name methods to improve readability and allow to further refactoring. * Extract method to test for wildcard block transforms DRYs up code by extracting a function to test for the presence of a wildcard block transform * Moves logic to allow for wildcard transform into central transform checking method Previously test to allow wildcard transform to be valid were manually added as edge cases in conditions in predicate functions. This update centralises all logic to test whether a given transform is possible but including the logic that allows wildcard transforms within the main method `isPossibleTransformForSource` which determines whether a given transform is possible. * Adds UnGrouping mechanic * Adds UnGroup Icon * Adds e2e test to cover basic grouping for single and multiple blocks * Fix edge case with test to detect a single group container Block * Adds UnGroup keyboard shortcut * Adds more e2e test coverage Includes testing grouping via transforms, options menu and keyboard shortcuts * Adds check for group block availability before displaying grouping UI Also adds e2e tests to cover this. * Updates misnamned components Addresses WordPress#14908 (comment) * Updates to preserve widest width alignment of child block on group container Previously if one of the child blocks being grouped had a width alignment (eg: wide or full) then the group block did not respect this. This meant that layouts weren’t preserved when grouping. Adds functionality and tests to ensure that when a group is created the widest alignment setting of the child blocks is set on the group block. * Updates to DRY out tests * Updates to simplify test setup Previously API calls were cleaning up blocks. This can be removed because all posts are auto removed before each test is run. Addresses WordPress#14908 (comment) * Updates to simplify test assertion Addresses WordPress#14908 (comment) * Combines test cases to simplify and reduce number of test required Addresses WordPress#14908 (comment) * Updates to combine test for grouping and ungrouping via options menu Addresses WordPress#14908 (comment) * Adds keyboard shortcut to global keyboard shortcuts modal * Ensure correct case for group shortcut (ie: lower) * Add shortcut to Block settings menu dropdown items * Adds translation context to Group actions in menus Addresses WordPress#14908 (comment) * Update Block Transforms fixtures to show all Blocks can transform to Group Block * Updates Keyboard Shortcut test snapshot to include Group/UnGroup * Fix to ensure Group block accounted for * Fix Block deletion test failure via keyboard workaround Due to the addition of the “Group” item into the Block Options toolbar the “Remove Block” item had been removed outside the viewable portion of the Popover (not the popover has a restricted height and allows scrolling to see the additional items if there is insufficient space to display them all). Pupeteer isn’t able to click on items that are not visible. The simplest work around is to us the keyboard to select the “Remove Block” menu item rather. Trying to scroll a div within Pupeteer is fraught with problems and inconsistencies. * Fixes Remove Block button helper to be more resilient to change Previously we relied on the number of tab stops to locate the correct button in the menu. This change uses the actual text of the button to identify it and uses an assertion to ensure that the correct button is explicitly required. * Rename function to better convey intent Addresses WordPress#14908 (comment) * Fixes to catch transforms which are invalid for blocks of different types A check was accidentally removed in `b2af0f2611e2a2bc66c62959dbf483abcbe103a9` which allowed multiple blocks of different types to be considered valid even if they were not. Adds conditional to ensure that unless the transform is a wildcard then we test that all the blocks are of the same type as the first block’s type before considering the transform to be valid. * Removes redundant snapshots * Fixes Transforms test to not over-test Group transforms Previously we tested every block transforming into the Group Block. This was unwanted overhead. Fixed to only test 1 single Block transforming into Group. Removed redundant snapshots as a result of removing it. * Fixes e2e test by reinstating helper lost during rebase * Fix to make Group transform snapshot tests more resilient to change Now explicity selects paragraph and image blocks to test the Group transform rather than simply testing the first block that transform into a Group. This ensures that if the order of transforms changes in the fixtures the test won’t be accidentally invalidated. Resolves: WordPress#14908 * Updates to DRY out test and reduce test redundancy and performance Through use of smarter filtering we can get away with a single `it.each()` block which improves perf and removes redundant tests. Addresses WordPress#14908 (comment) * Adds unit tests to cover new conditionals added for wildcard blocks transforms * Fixes capitalisation of UnGroup to Ungroup Resolves WordPress#14908 (comment) * Updates doc block to reflect possible nullable return type Addresses WordPress#14908 (comment) * Updates Readme with doc update * Updates to remove unwanted comments * Updates capitalisatoin of “wildcard” Addresses WordPress#14908 (comment) * Update comment with more context for future maintainers Addresses WordPress#14908 (comment) * Updates to remove unwanted level of context on the translation Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Adds tests to cover isWildcardBlockTransform * Adds tests for isContainerGroupBlock function Note these test will need updating when we land WordPress#15774 * Fixes logic around multi blocks of same type and adds tests Prevously we had 1 function attempting to test for multiple block selection and checking that the selection was all of the same block type. This caused bugs within `switchToBlockType` because the logic was confusing. For example, if a selection isn’t a multi block then we don’t need to test that all the blocks are the same. Separated the two functions and updated conditions in switchToBlockType to reflect this. Added unit tests to cover two new functions. * Adds new generator based API signature to Block transforms Previously the transforms function was pased two arguments 1. attributes 2. innerblocks This wasn’t extensible and more advanced transformations require more information about the block (eg: name). To avoid bloating the signature, a progressive enhancement approach is applied whereby if a generator function is passed as the transform then we pass the entire block object to the generator. This is opt-in only and is backwards compatible with all existing transform functions. * Adds new apply option method to transform API Previously we were modifying the existing transform function to conform to the requirements of a new API (ie: receiving the entire block object rather than the individual arguments). It was decided that introducing a new `apply` option and soft deprecating the old transform option would be preferable. The apply option if provided now takes precedence over the transform option. This is fully backwards compatible. See https://wordpress.slack.com/archives/C02QB2JS7/p1559567845087000 * Updates Block Reg docs to cover wildcard transforms * Updates changelog to document wildcards and transform apply option * Fix linting error introduce in rebase * Fixes test util to avoid infinite loops Previously if the button wasn’t found then the loop would continue forever looking for the button. This would have caused timeouts. Limits the loop to the number of buttons in the document. Also bails out immediately having found the button. Resolves WordPress#14908 (comment) * Renames apply to convert to avoid confusion with Func.apply To avoid potential confusion and overlap with Function.apply, rename to `convert`. Slack discussion: https://wordpress.slack.com/archives/C02QB2JS7/p1559593099150300?thread_ts=1559571243.134500&cid=C02QB2JS7 MDN Function apply docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply Resolves: WordPress#14908 (comment) * Fixes unecessary additional var introduced during debugging * Fix convert API to match established patterns for consistency Previously `convert` always passed an array of block objects even if there was only a single block. This is inconsistent with the implementation of the existing `transform` method which passes only a block’s attributes/innerBlocks pair when it is not a multi block. To retain consistency with the existing `isMultiBlock` paradiagm this updates the API of `convert` to pass a single block object when not in multiblock mode. * Fixes error in docs Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes doc blocks to match coding style Resolves WordPress#14908 (comment) * Fixes icon size and color in dropdown for Group/Ungroup * Updates to remove keyboard shortcuts Following a discussion it was not possible to achieve a consensus on which shortcuts was most suitable (or indeed whether keyboard shortcuts for this were even a good idea). As a result this has been descoped from this PR and will be addressed elsewhere. Once merged I will push a new placeholder PR with the foundation for shortcuts in place and others can then amend it. * Updates snapshot to account for removing keyboard shortcuts * Removes e2e tests covering keyboard shortcuts * Fixes unwanted check introduced during debugging Test for existence of transform is not required and was introduced during debugging. Can be removed. * Updates to collapse spaces in doc blocks Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * Fixes isWildcardBlockTransform to test for Array-ness Resolves WordPress#14908 (comment) * Fixes incorrect capitalisation of “UnGroup” to “Ungroup” Addresses WordPress#14908 (comment) * Updates to remove redundant isMultiBlockSelection util function Addresses WordPress#14908 (comment) * Reinstate missing Ungroup icon Accidentally got lost during renaming of “UnGroup” to “Ungroup”!

…uping" interactions (WordPress#15774) * Adds grouping interaction to state Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related WordPress#14908 * Registers grouping block * Auto updated README * Adds test for get/set Grouping block * Update documentation with clearer descriptions * Adds reducer and selector tests * Updates “Blog” for correct “Block” in docs

getdave added the [Block] Group Affects the Group Block label Apr 10, 2019

getdave self-assigned this Apr 10, 2019

getdave requested review from youknowriad, mtias, frontdevde and marekhrabe April 10, 2019 15:19

mtias reviewed Apr 10, 2019

View reviewed changes

packages/editor/src/components/provider/index.js Show resolved Hide resolved

mtias reviewed Apr 10, 2019

View reviewed changes

packages/editor/src/components/convert-to-group-buttons/convert-button.js Outdated Show resolved Hide resolved

getdave added the Needs Design Needs design efforts. label Apr 11, 2019

getdave mentioned this pull request Apr 11, 2019

Rename section block to group #14920

Merged

5 tasks

getdave force-pushed the try/block-grouping-into-container branch from c17e571 to 2b6f334 Compare April 12, 2019 09:19

getdave added a commit that referenced this pull request Apr 12, 2019

Adds and applies Group icon

f861f73

As provided here #14908 (comment)

mtias removed the Needs Design Needs design efforts. label Apr 12, 2019

getdave mentioned this pull request Apr 12, 2019

Create group block by 'group' interaction #14601

Closed

getdave added [Status] In Progress Tracking issues with work in progress Needs Technical Feedback Needs testing from a developer perspective. labels Apr 12, 2019

getdave marked this pull request as ready for review April 15, 2019 09:04

getdave requested review from aduth, ajitbohra, ellatrix, gziolo, jorgefilipecosta, noisysocks and notnownikki as code owners April 15, 2019 09:04

getdave added 3 commits June 5, 2019 09:37

Fixes isWildcardBlockTransform to test for Array-ness

efa7ac6

Resolves #14908 (comment)

Fixes incorrect capitalisation of “UnGroup” to “Ungroup”

c6ee214

Addresses #14908 (comment)

Updates to remove redundant isMultiBlockSelection util function

f9fd251

Addresses #14908 (comment)

getdave mentioned this pull request Jun 5, 2019

Block transforms: single Blocks shouldn't allow transforms to the same Block. Avoid block-specific behaviours #15996

Closed

Reinstate missing Ungroup icon

1a938ad

Accidentally got lost during renaming of “UnGroup” to “Ungroup”!

getdave merged commit a488920 into master Jun 5, 2019

aduth deleted the try/block-grouping-into-container branch June 5, 2019 12:35

kjellr mentioned this pull request Jun 5, 2019

Add improved "Group" and "Ungroup" icons #16001

Merged

getdave added a commit that referenced this pull request Jun 5, 2019

Adds grouping interaction to state

0cefdb2

Enables the ability register a given block as the block which handles “grouping” interactions within the editor. Related #14908

youknowriad removed the [Status] In Progress Tracking issues with work in progress label Jun 7, 2019

youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

aduth mentioned this pull request Jun 7, 2019

Block API: Downgrade convert API to experimental #16047

Merged

swissspidy mentioned this pull request Jun 12, 2019

Grouping blocks ampproject/amp-wp#2216

Closed

gziolo mentioned this pull request Jun 18, 2019

Block API: Extend the block registration API technical proposal #16209

Closed

14 tasks

getdave mentioned this pull request Jun 25, 2019

Update to allow alternative Blocks to handle Grouping interactions #16278

Merged

7 tasks

bfintal mentioned this pull request Aug 30, 2019

Create "group" & "ungroup" buttons for Container Block gambitph/Stackable#226

Closed

aduth mentioned this pull request Jan 3, 2020

Block API: Deprecate block transform function in favor of convert #19401

Closed

aduth mentioned this pull request May 25, 2020

Try: removing the multi-block type check to make __experimentalConvert more useful #22577

Merged

2 tasks

gziolo mentioned this pull request Apr 14, 2021

Extend the Block.json specification to be able to restrict blocks to particular templates #30679

Open

Enables Block Grouping/UnGrouping using core/group #14908

Enables Block Grouping/UnGrouping using core/group #14908

getdave commented Apr 10, 2019 •

edited

getdave commented Apr 11, 2019

jasmussen commented Apr 11, 2019

kjellr commented Apr 11, 2019

getdave commented Apr 12, 2019 •

edited

getdave commented Apr 12, 2019

mtias commented Apr 12, 2019

getdave commented Jun 5, 2019 •

edited

jwold commented Jun 6, 2019

ktmn commented Jun 13, 2019 •

edited

getdave commented Jun 25, 2019 •

edited

Enables Block Grouping/UnGrouping using core/group #14908

Enables Block Grouping/UnGrouping using core/group #14908

Conversation

getdave commented Apr 10, 2019 • edited

Screenshots

Todos

getdave commented Apr 11, 2019

jasmussen commented Apr 11, 2019

kjellr commented Apr 11, 2019

getdave commented Apr 12, 2019 • edited

Update

📺 Screencast

Feedback Required

getdave commented Apr 12, 2019

Another update 🙈

Screenshots

mtias commented Apr 12, 2019

getdave commented Jun 5, 2019 • edited

jwold commented Jun 6, 2019

ktmn commented Jun 13, 2019 • edited

getdave commented Jun 25, 2019 • edited

getdave commented Apr 10, 2019 •

edited

getdave commented Apr 12, 2019 •

edited

getdave commented Jun 5, 2019 •

edited

ktmn commented Jun 13, 2019 •

edited

getdave commented Jun 25, 2019 •

edited