Editor: offer the option to convert to HTML on invalid blocks #2807

youknowriad · 2017-09-27T09:09:51Z

This PR adds a way to convert to a simple HTML block on invalid blocks.
This also fixes the invalid warning buttons (it was not possible for me to click the buttons)

This will help move forward with #2794

Screenshots

Testing instructions

Edit a block in the text mode and make it invalid
Get back to the visual mode
Click the "convert to HTML"
The broken HTML should be kept and the block converted to an HTML block

codecov · 2017-09-27T09:09:54Z

Codecov Report

Merging #2807 into master will decrease coverage by 0.01%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##           master   #2807      +/-   ##
=========================================
- Coverage   33.81%   33.8%   -0.02%     
=========================================
  Files         190     190              
  Lines        5678    5680       +2     
  Branches      992     992              
=========================================
  Hits         1920    1920              
- Misses       3181    3183       +2     
  Partials      577     577

Impacted Files	Coverage Δ
...ditor/modes/visual-editor/invalid-block-warning.js	`0% <0%> (ø)`	⬆️

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 5a949b7...765428a. Read the comment docs.

youknowriad · 2017-09-27T09:11:46Z

editor/modes/visual-editor/style.scss

@@ -59,7 +59,6 @@
 	&.has-warning .editor-visual-editor__block-edit {
 		position: relative;
 		min-height: 250px;
-		pointer-events: none;


I had to remove this to fix clicking on the buttons. Any reason for this @aduth?

I think the original reason was to prevent people from interacting with the preview behind the overlay.

This regressed in #2618 with moving the warning into the invalid block.

https://github.com/WordPress/gutenberg/pull/2618/files#diff-5cb891cd3125ad3b221777433a61a524

The style should only apply to the preview, not the warning.

This change can be omitted during rebase given #2811.

youknowriad · 2017-09-27T09:12:40Z

editor/modes/visual-editor/invalid-block-warning.js

@@ -24,17 +24,20 @@ import {
 */
 import { replaceBlock } from '../../actions';

-function InvalidBlockWarning( { ignoreInvalid, switchToDefaultType } ) {
+function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
+	const htmlBlockName = 'core/html'; // hard-coded by maybe replace by an API similar to getUnknownTypeHandlerName


Should we add another getHtmlBlockName API? or maybe we don't mind hardcoding this special case

I don't think I mind doing core/html.

Could we remove the comment or convert it to having a TODO prefix with whatever we decide here? I would probably be fine with explicitly setting core/html as well, particularly because we're still testing that the desired block type is registered before presenting it as an option.

jasmussen · 2017-09-27T09:21:14Z

Works stellarly 👍 👍

I think @mtias had some thoughts on how this dialog could be slightly redesigned. In such a redesign it would be good to explore making those buttons smaller. Perhaps "Convert" becomes a dropdown or something.

mtias · 2017-09-27T12:56:20Z

Yes, I was thinking we could move the dialog/warning to the top of the block (where the toolbar lives) instead of over the block. That way you could see the actual content better to make a more informed decision. And it might allow us to show you a before/after too in the future.

mtias · 2017-09-27T12:56:58Z

One suggestion for the button label: "Edit as HTML block".

aduth · 2017-09-28T00:49:12Z

editor/modes/visual-editor/invalid-block-warning.js

+						isLarge
+					>
+						{
+							sprintf( __( 'Convert to %s' ), htmlBlockType.title )


We might want to check the output of npm run gettext-strings to see if this is treated as a separate string from the one above, or if we need to explicitly copy the translators: comment here to ensure that they're merged.

The comment was being removed (probably it takes the last translation into account), so I just added the comment on both. I don't know if it's worth an issue or not?

Update: I ended up dropping the duplicated translation. I updated the text with Matìas's suggestion.

I don't know if it's worth an issue or not?

I'm not sure what the expected behavior is, honestly. I think it may be that duplicating is expected, though perhaps if duplication doesn't occur at least including both (not just latest). For core documentation of actions, there's "hints" which allow developers to avoid the duplication, but I don't believe this exists for i18n:

/** This action is documented in wp-admin/admin.php */

aduth · 2017-09-28T00:54:03Z

editor/modes/visual-editor/invalid-block-warning.js

@@ -24,17 +24,20 @@ import {
 */
 import { replaceBlock } from '../../actions';

-function InvalidBlockWarning( { ignoreInvalid, switchToDefaultType } ) {
+function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
+	const htmlBlockName = 'core/html'; // hard-coded by maybe replace by an API similar to getUnknownTypeHandlerName


Could we remove the comment or convert it to having a TODO prefix with whatever we decide here? I would probably be fine with explicitly setting core/html as well, particularly because we're still testing that the desired block type is registered before presenting it as an option.

aduth · 2017-09-28T00:55:27Z

editor/modes/visual-editor/style.scss

@@ -59,7 +59,6 @@
 	&.has-warning .editor-visual-editor__block-edit {
 		position: relative;
 		min-height: 250px;
-		pointer-events: none;


This change can be omitted during rebase given #2811.

youknowriad added [Type] Bug An existing feature does not function as intended [Type] Enhancement A suggestion for improvement. labels Sep 27, 2017

youknowriad self-assigned this Sep 27, 2017

youknowriad requested review from mtias, jasmussen and aduth September 27, 2017 09:09

youknowriad commented Sep 27, 2017

View reviewed changes

mtias approved these changes Sep 27, 2017

View reviewed changes

aduth mentioned this pull request Sep 27, 2017

Validation: Fix pointer events for invalid block warning #2811

Merged

aduth modified the milestone: Beta 1.3 Sep 27, 2017

aduth reviewed Sep 28, 2017

View reviewed changes

youknowriad force-pushed the update/invalid-block-warning branch from 4f4bc7c to 97687ae Compare September 28, 2017 08:08

Editor: offer the option to convert to HTML on invalid blockss

765428a

youknowriad force-pushed the update/invalid-block-warning branch from 97687ae to 765428a Compare September 28, 2017 08:12

youknowriad merged commit eb5f014 into master Sep 28, 2017

youknowriad deleted the update/invalid-block-warning branch September 28, 2017 08:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor: offer the option to convert to HTML on invalid blocks #2807

Editor: offer the option to convert to HTML on invalid blocks #2807

youknowriad commented Sep 27, 2017 •

edited

Loading

codecov bot commented Sep 27, 2017 •

edited

Loading

youknowriad Sep 27, 2017

aduth Sep 27, 2017

aduth Sep 27, 2017

aduth Sep 28, 2017

youknowriad Sep 27, 2017

mtias Sep 27, 2017

aduth Sep 28, 2017

jasmussen commented Sep 27, 2017

mtias commented Sep 27, 2017

mtias commented Sep 27, 2017

aduth Sep 28, 2017

youknowriad Sep 28, 2017

youknowriad Sep 28, 2017

aduth Sep 29, 2017

aduth Sep 28, 2017

aduth Sep 28, 2017

Editor: offer the option to convert to HTML on invalid blocks #2807

Editor: offer the option to convert to HTML on invalid blocks #2807

Conversation

youknowriad commented Sep 27, 2017 • edited Loading

Screenshots

Testing instructions

codecov bot commented Sep 27, 2017 • edited Loading

Codecov Report

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

jasmussen commented Sep 27, 2017

mtias commented Sep 27, 2017

mtias commented Sep 27, 2017

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

youknowriad commented Sep 27, 2017 •

edited

Loading

codecov bot commented Sep 27, 2017 •

edited

Loading