Convert a Classic Block into Multiple Blocks #3179

ellatrix · 2017-10-26T14:17:26Z

Description

See #3149.

This PR adds a button to the right side dropdown for freeform blocks to convert it into separate blocks.

How Has This Been Tested?

Create a Freeform block.
Click the right menu, then 'Convert to blocks'.
The content of the block should now be parsed into normal blocks.

Thoughts:

We might want to rename the handler to something more general, like 'rawHandler' or 'convertStringToBlocks', or maybe a separate function that can be used by pasteHandler too.

ellatrix · 2017-10-26T14:21:15Z

editor/block-settings-menu/unknown-converter.js

+	return (
+		<IconButton
+			className="editor-block-settings-menu__control"
+			onClick={ () => convertToBlocks( block ) }


Not entirely sure what the best way is here to avoid passing arguments.

What's the desire to avoid passing the argument? If you mean so that the component doesn't need to be aware of a block prop, the only way would probably be overriding react-redux connect's third argument mergeProps for the dispatch to be aware of the block from state, but... probably more work than is really worthwhile.

Can you make the component not know about the block? Don't you have to return null if the block isn't defined (or has an invalid name)?

ellatrix · 2017-10-26T14:57:12Z

editor/block-settings-menu/unknown-converter.js

+	( dispatch, { uid } ) => ( {
+		convertToBlocks( block ) {
+			dispatch( replaceBlocks( [ uid ], rawHandler( {
+				HTML: block.attributes.content,


Although we also set it directly in the paste module, we might want to register this as well with the API. See

gutenberg/blocks/api/paste/index.js

Lines 109 to 111 in 1b444cb

return createBlock( getUnknownTypeHandlerName(), {

content: node.outerHTML,

} );

Atm we require the attribute to be content implicitly.

Could we call serializeBlock here instead?

Good point. I guess we could. :)

youknowriad · 2017-10-27T09:36:49Z

editor/block-settings-menu/index.js

@@ -50,6 +51,7 @@ function BlockSettingsMenu( { uids, onSelect } ) {
 				<div className="editor-block-settings-menu__content">
 					<BlockInspectorButton onClick={ onClose } />
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
+					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }


Does it make sense to include this in BlockToolbar (for mobile controls)?

I'm not entirely sure what you mean.

The block settings menu is hidden on mobile and these controls are shown in the block toolbar instead here lob/master/editor/block-toolbar/index.js#L143 Thinking we could do the same with this control.

youknowriad · 2017-10-27T09:37:03Z

blocks/api/index.js

@@ -6,7 +6,7 @@ import * as source from './source';
 export { source };
 export { createBlock, switchToBlockType } from './factory';
 export { default as parse, getSourcedAttributes } from './parser';
-export { default as pasteHandler } from './paste';
+export { default as rawHandler } from './paste';


Should we rename the directory as well?

Ah, of course.

mtias · 2017-10-27T13:40:04Z

editor/block-settings-menu/unknown-converter.js

+import { getBlock } from '../selectors';
+import { replaceBlocks } from '../actions';
+
+export function UnknownConverter( { block, convertToBlocks } ) {


I don't have any bright ideas, but I think we should call this differently :)

Maybe LegacyConverter or ClassicConverter.

I've named it this way because we're checking getUnknownTypeHandlerName. :)

I mean, this is an API thing, not a block thing. The component shouldn't depend on what block handles unknown pieces right?

mtias · 2017-10-27T13:46:51Z

This is working well for me, nice to see that the pasting strategy is proving very worthwhile. Also, when undo works properly it feels very effortless to convert and switch back if you didn't like the result.

One other thing that might be nice to add is to trigger a success notice with some text like "Converted to 12 blocks" or something like that, which would convey the more significant nature of the operation.

ellatrix · 2017-10-29T13:47:31Z

One other thing that might be nice to add is to trigger a success notice with some text like "Converted to 12 blocks" or something like that, which would convey the more significant nature of the operation.

Where should this notification pop up? Not really sure if it's any use to the user though? I like showing as little as possible, it just works. :)

ellatrix · 2017-10-29T13:48:08Z

We could also select the converted blocks... (Which kind of indicates something just happened with those blocks.)

jasmussen · 2017-10-30T08:10:36Z

I love this so much. ❤️

gziolo · 2017-10-31T13:15:47Z

blocks/api/raw-handling/test/index.js

@@ -77,6 +77,15 @@ describe( 'paste', () => {

 		equal( filtered, '<em>test</em>' );
 	} );
+
+	it( 'should always return blocks', () => {
+		const blocks = paste( {


Should it be renamed to rawHandler, too?

gziolo · 2017-10-31T13:19:48Z

editor/block-settings-menu/unknown-converter.js

+	( state, { uid } ) => ( {
+		block: getBlock( state, uid ),
+	} ),
+	( dispatch, { uid } ) => ( {


You have block already exposed in props. The following should work:

( dispatch, { block, uid } ) => ( { convertToBlocks() { dispatch( replaceBlocks( uid, rawHandler( { HTML: serialize( block ), inline: false, } ) ) ); }, } )

Although @aduth might be correct that you would have to use 3rd param mergeProps here.

Yes, 2nd param is ownProps ...

Another funky way to do the same is to wrap this with HOC withBlock :P

const withBlock = component => connect( ( state, { uid } ) => ( { block: getBlock( state, uid ), } ) )( component ); export default connect( null, ( dispatch, { block, uid } ) => ( { convertToBlocks() { dispatch( replaceBlocks( uid, rawHandler( { HTML: serialize( block ), inline: false, } ) ) ); }, } ) )( withBlock( UnknownConverter ) );

I'm fine with keeping as is :)

gziolo · 2017-10-31T13:59:13Z

editor/block-toolbar/index.js

@@ -78,6 +79,7 @@ class BlockToolbar extends Component {
 							<BlockInspectorButton small />
 							<BlockModeToggle uid={ block.uid } small />
 							<BlockDeleteButton uids={ [ block.uid ] } small />
+							<UnknownConverter uid={ uid } small />


It seems like block.uid should be passed as a prop instead.

Eslint agrees with me:

/Users/gziolo/PhpstormProjects/vagrant-local/www/wordpress-default/public_html/wp-content/plugins/editor/block-toolbar/index.js
82:32 error 'uid' is not defined no-undef

codecov · 2017-10-31T14:27:40Z

Codecov Report

Merging #3179 into master will increase coverage by 0.36%.
The diff coverage is 23.52%.

@@            Coverage Diff             @@
##           master    #3179      +/-   ##
==========================================
+ Coverage   31.11%   31.47%   +0.36%     
==========================================
  Files         230      231       +1     
  Lines        6448     6544      +96     
  Branches     1150     1181      +31     
==========================================
+ Hits         2006     2060      +54     
- Misses       3726     3750      +24     
- Partials      716      734      +18

Impacted Files	Coverage Δ
blocks/api/raw-handling/ms-list-converter.js	`97.43% <ø> (ø)`
blocks/api/raw-handling/table-normaliser.js	`100% <ø> (ø)`
blocks/api/raw-handling/comment-remover.js	`100% <ø> (ø)`
blocks/api/raw-handling/normalise-blocks.js	`96.87% <ø> (ø)`
blocks/api/raw-handling/create-unwrapper.js	`100% <ø> (ø)`
blocks/api/raw-handling/utils.js	`98.07% <ø> (ø)`
blocks/api/raw-handling/image-corrector.js	`100% <ø> (ø)`
blocks/api/raw-handling/is-inline-content.js	`100% <ø> (ø)`
blocks/api/raw-handling/list-merger.js	`100% <ø> (ø)`
blocks/api/raw-handling/formatting-transformer.js	`100% <ø> (ø)`
... and 13 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update aee3546...fecc4b3. Read the comment docs.

gziolo · 2017-10-31T14:31:09Z

editor/block-toolbar/index.js

@@ -78,6 +79,7 @@ class BlockToolbar extends Component {
 							<BlockInspectorButton small />
 							<BlockModeToggle uid={ block.uid } small />
 							<BlockDeleteButton uids={ [ block.uid ] } small />
+							<UnknownConverter uid={ block.uid } small />


Can we put it before Delete button? This is how it looks at the moment:

@jasmussen @karmatosed, what would be the best place to put it?

Sorry, yeah, should be the same as normal drop down. :)

gziolo · 2017-10-31T14:49:24Z

I tested it with the following HTML code from the post created with the classic editor:

https://pastebin.com/pkCSmk8f

It works perfectly fine with some exceptions: embed urls are converted into paragraphs (2 urls that were into their own lines were combined into one paragraph). I know it's out of scope here, but is there plan to improve that in the future?

ellatrix · 2017-10-31T14:56:52Z

@gziolo Yeah, that's correct, URLs currently go through the text patterns... We should change this in another PR.

gziolo

This works perfectly fine using the same API as we offer with paste functionality. Great job integrating this. Thanks for addressing all issues I raised when looking at this code 🙇

I left a comment about my existing post that would benefit from future improvements applied to rawHandler, but it's rather nice to have.

gziolo · 2017-10-31T15:03:02Z

I noticed some issues with Travis but I don't think it has anything with the changes introduced here. It would be nice to confirm before merging this PR.

ellatrix commented Oct 26, 2017

View reviewed changes

ellatrix force-pushed the try/unknown-converter branch 2 times, most recently from ba9ad2b to eb371f2 Compare October 26, 2017 14:56

ellatrix commented Oct 26, 2017

View reviewed changes

youknowriad reviewed Oct 27, 2017

View reviewed changes

aduth mentioned this pull request Oct 27, 2017

Parser: Apply raw transforms to fallback content #2617

Closed

mtias reviewed Oct 27, 2017

View reviewed changes

mtias added [Feature] Blocks Overall functionality of blocks Design Framework Issues related to broader framework topics, especially as it relates to javascript labels Oct 27, 2017

ellatrix force-pushed the try/unknown-converter branch 3 times, most recently from 0c67b4c to 2743b51 Compare October 29, 2017 13:45

mtias added this to the Beta 1.6 milestone Oct 31, 2017

gziolo reviewed Oct 31, 2017

View reviewed changes

ellatrix force-pushed the try/unknown-converter branch from 2743b51 to eaefd8a Compare October 31, 2017 13:50

gziolo reviewed Oct 31, 2017

View reviewed changes

ellatrix force-pushed the try/unknown-converter branch 2 times, most recently from 8c666d6 to 79f6c6a Compare October 31, 2017 14:27

gziolo reviewed Oct 31, 2017

View reviewed changes

Add convert button to unknown block type

fecc4b3

ellatrix force-pushed the try/unknown-converter branch from 79f6c6a to fecc4b3 Compare October 31, 2017 14:38

gziolo approved these changes Oct 31, 2017

View reviewed changes

ellatrix merged commit 95d6c39 into master Oct 31, 2017

ellatrix deleted the try/unknown-converter branch October 31, 2017 15:19

This was referenced Nov 20, 2017

Convert a Classic Block into Multiple Blocks #3149

Closed

Idea: Apply raw transforms on unidentified content before creating fallback block #2454

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert a Classic Block into Multiple Blocks #3179

Convert a Classic Block into Multiple Blocks #3179

ellatrix commented Oct 26, 2017

ellatrix Oct 26, 2017

aduth Oct 26, 2017

ephox-mogran Oct 26, 2017

ellatrix Oct 26, 2017

aduth Oct 26, 2017

ellatrix Oct 27, 2017

youknowriad Oct 27, 2017

ellatrix Oct 27, 2017

youknowriad Oct 27, 2017

youknowriad Oct 27, 2017

ellatrix Oct 27, 2017

mtias Oct 27, 2017

mtias Oct 27, 2017

ellatrix Oct 29, 2017

ellatrix Oct 29, 2017

mtias commented Oct 27, 2017

ellatrix commented Oct 29, 2017

ellatrix commented Oct 29, 2017 •

edited

Loading

jasmussen commented Oct 30, 2017

gziolo Oct 31, 2017

gziolo Oct 31, 2017 •

edited

Loading

gziolo Oct 31, 2017 •

edited

Loading

ellatrix Oct 31, 2017

gziolo Oct 31, 2017

gziolo Oct 31, 2017

gziolo Oct 31, 2017

ellatrix Oct 31, 2017

codecov bot commented Oct 31, 2017 •

edited

Loading

gziolo Oct 31, 2017

ellatrix Oct 31, 2017

gziolo commented Oct 31, 2017 •

edited

Loading

ellatrix commented Oct 31, 2017

gziolo left a comment

gziolo commented Oct 31, 2017 •

edited

Loading

	return createBlock( getUnknownTypeHandlerName(), {
	content: node.outerHTML,
	} );

Convert a Classic Block into Multiple Blocks #3179

Convert a Classic Block into Multiple Blocks #3179

Conversation

ellatrix commented Oct 26, 2017

Description

How Has This Been Tested?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Oct 27, 2017

ellatrix commented Oct 29, 2017

ellatrix commented Oct 29, 2017 • edited Loading

jasmussen commented Oct 30, 2017

Choose a reason for hiding this comment

gziolo Oct 31, 2017 • edited Loading

Choose a reason for hiding this comment

gziolo Oct 31, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Oct 31, 2017 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Oct 31, 2017 • edited Loading

ellatrix commented Oct 31, 2017

gziolo left a comment

Choose a reason for hiding this comment

gziolo commented Oct 31, 2017 • edited Loading

ellatrix commented Oct 29, 2017 •

edited

Loading

gziolo Oct 31, 2017 •

edited

Loading

gziolo Oct 31, 2017 •

edited

Loading

codecov bot commented Oct 31, 2017 •

edited

Loading

gziolo commented Oct 31, 2017 •

edited

Loading

gziolo commented Oct 31, 2017 •

edited

Loading