#4710 do not merge #5287
Closed
#4710 do not merge #5287
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit is towards rendering a front end preview for shortcode blocks. The shortcode block now implements a tabbed preview option, similar to HTML blocks. The user can edit their shortcodes, and previewing again will re-render the edited shortcode. Works for embed shortcodes too. Known issues - (1) playlist shortcode doesn't work (2) the iframe height/width in the preview tab needs to wrap content size. For example, the iframe is too big when previewing an audio player using audio shortcode (3) gallery shortcode preview stacks the images vertically instead of horizontally (4) video shortcode doesn't work for URLs supported by oembed
Previously, the post ID was fetched by processing the post's URL and parsing the post ID GET parameter. Now, a better approach is taken by reading the post ID value from the redux store.
In this revision, custom css and js files are injected as props to the iframe sandbox. Custom css and js is needed in certain cases, for example, [gallery] shortcode needs the parent theme style.css.
Shortcode content type (if it's a video or otherwise), and the shortcode's custom css and js (if any) are fetched and returned as parameters to the front end. In the case of [gallery] and [caption], for example, the theme's style.css is needed, else the shortcode preview will not render properly. [playlist] needs mediaelement JS to be able to render the playlist components.
1) Certain shortcodes, such as [gallery], [caption] and [playlist] need styles and JS inside of the sandbox iframe to be able to render content appropriately. The sandbox component didn't support injection of custom links for external stylesheets and scripts, so this revision attempts to fix that 2) [audio] shortcode fails to render since bounding client width is 0 (weird, I know). So, in this revision, I add a null check and set a minimum width if bounding client width or height is zero.
[playlist] shortcode was previously not rendering in the preview due to some missing scripts. This commit fixes this issue. Try using [playlist] in the shortcode block and enjoy the preview.
The jest tests failed since I was using a connected component in Shortcode, which caused the tests to act up. Followed the recommended fix and updated the snapshot to reflect the new UI for the shortcode block.
The shortcode preview result is cached using Transients, for quicker render times and avoiding processing overheads
Empty results are possible if the shortcode is given invalid attributes. In this case, we needn't unnecessarily store the empty string shortcode in transients, so I've added a check to take care of this scenario.
If shortcode output is empty, I've added a flow wherein we exit from the API immediately, and avoid some extra processing which won't apply to empty shortcode output data.
Added a couple of messages in cases when null values are sent as args to the API.
Refactored code to move Shortcode block code to a separate file. Also, preview code is rendered as a separate component called "ShortcodePreview", which capitalizes on the usage of withAPIData for making REST API requests to the shortcode preview API.
Concatenated html, js and css to a single prop
- Preview tab is disabled if text in shortcode block is empty - Rearranged code a bit for better readability
…d issue which is no longer replicable
…an remain unchanged
Signed-off-by: Lewis Cowles <lewiscowles@me.com>
Signed-off-by: Lewis Cowles <lewiscowles@me.com>
|
Just needed to see if the third task would pass. It doesn't on my own travis (and I'm unsure why) |
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
gutenberg.zip
Description
Please don't merge this or close before Travis is done running. It's a test & feedback see #4710
How Has This Been Tested?
composer run lintnpm run lintnpm run cinpm run package-plugin[embed]shortcode)Screenshots (jpeg or gifs if applicable):
Types of changes
Shortcode block to have previews
Checklist:
Not meant for merge