-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Validate and protect corrupted block content #1929
Conversation
Great point, and a challenging problem to solve if we want to keep the edit render visible in the background (a nice effect I think). A few possibilities that come to mind:
Other ideas welcome. |
<div className="editor-visual-editor__invalid-block-warning"> | ||
<Dashicon icon="warning" size={ 40 } /> | ||
<p>{ __( | ||
'Uh oh! This block is corrupt and has been locked to protect ' + |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"This block has been modified externally and has been locked to protect against content loss." cc @jasmussen
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, that sounds good!
We should consider adding these buttons:
|
I dig that. Though it beckons yet another name than "Classic Text" for the fallback block. I mean, I do like the "Classic Text" name, I think it's good for when you mean to insert it via the Inserter, and it's more descriptive than "Freeform", but in this context it's obvious that it can contain more than just "text". Should we simply call it "Classic Editor"? |
Yes, any name works for me. Maybe "convert to generic block"? Also we could offer the option to handle as HTML block. |
This looks like a great start to me. @nylen what do you think of measuring performance impact with and without validation on a long-ish post? We may consider making this something you can disable via config or filter. |
eeb0450
to
f452481
Compare
Rebased to resolve conflicts and update warning text. I tried a couple ideas relating to disabling keyboard focus for the preview. Both of which are not particularly ideal from a performance point-of-view. Each implements an
|
@aduth I'm thinking it'd be cool to be able to switch between "old" and "new" renders to visually diff. It could be two tabs next to the warning message. |
Should we do this in a follow-up pull request? |
Yes, just wondered if it could help with the keyboard issues, because we could try not rendering the default view. |
The issue is that if preview uses Alternatively, we could render the |
Yes, I was thinking of rendering |
f452481
to
5328e23
Compare
5328e23 shows the |
If it's a contact form, it is likely the save method is |
Sure, it's a rare case that the save representation have focusable fields, but still technically possible and not very well handled here. |
I took the liberty of pushing a little visual polish: Matías points about some action buttons seems really worth addressing, though okay to do it in a separate PR. In the mean time, the message feels like it should be rephrased to be less "this is what's up" and more like "this is what it means". I'm not entirely sure how to phrase this without being overly verbose, as it's a rather complex thing to explain. Perhaps this begs general help text in some way, or like linking to external documentation. A simple "What does this mean?" link at the end could address it. |
5132df5
to
feb105e
Compare
Since this touches many different files, I don't want to let this linger pending finer details. I assume we'll need to do some revisions in subsequent pull requests, notably of course fixing the "corrupt" demo Cover Image block. In the meantime, I've rebased and force-pushed with intent to merge. One additional change I made is allow the root node block list item to be focused so that it can be "selected", but only for arrangement / deletion (no toolbar shown). See feb105e. |
Actually, I did find one remaining item that should probably be addressed here: If the user tries to edit an invalid block in Text mode, those user edits will not be respected on save. |
I believe the behavior described in #1929 (comment) is actually working correctly, and the issue I'm seeing is caused by the wrong URL being assigned when saving a post from the Demo. Should be: ...Resulting in demo content being shown after a refresh, not the saved post's. Likely a regression introduced in #1967, where |
I've verified that editing an invalid block in Text mode works as expected: Changes will be respected, but switching back to Visual will still show the block as invalid so long as its reserialization doesn't match. See also #2032 for demo content save fix. |
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<div class=\"wp-block-gallery\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<figure class=\"wp-block-image\"><img src=\"https://cldup.com/YLYhpou2oq.jpg\" class=\"aligncenter\"/><figcaption>Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<pre class=\"wp-block-preformatted\">Some <em>preformatted</em> text...<br>And more!</pre>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<blockquote class=\"wp-block-pullquote\">\n<p>Testing pullquote block...</p><footer>...with a caption</footer>\n</blockquote>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
} | ||
}, | ||
"isValid": false, | ||
"originalContent": "<pre class=\"wp-block-verse\">A <em>verse</em>…<br>And more!</pre>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be fixed.
There are now several examples of block fixtures with |
See #2038 for updated Cover Image implementation to resolve lingering warning on Demo content screen. |
Closes #1735
Closes #1736
Related: #391
This pull request seeks to validate blocks parsed from post content. It does so by regenerating the expected save output upon the initial parse and comparing it against the actual content. If there is a mismatch, the block is flagged as invalid and the user is barred from editing the block (aside from moving or deleting) with a visual indicator of the invalid state:
Implementation notes:
Testing instructions:
I've left the initial Cover Image block in Demo content as invalid, because I'd like to revisit whether we really want nested
section
tags in the serialized output. Verify that the first block in post content is flagged as invalid and cannot be edited.