Skip to content

[Gutenberg] Unsupported block fallback#13967

Merged
etoledom merged 43 commits intodevelopfrom
gutenberg/unsupported-block-fallback
Jun 9, 2020
Merged

[Gutenberg] Unsupported block fallback#13967
etoledom merged 43 commits intodevelopfrom
gutenberg/unsupported-block-fallback

Conversation

@etoledom
Copy link
Copy Markdown
Contributor

@etoledom etoledom commented Apr 22, 2020

Proof of concept Unsupported block fallback on native side.
This opens a web view with a new-post editor, and insert the required block via "User Content Javascript" (JS code inserted to the web view).

We extract the final block content in the same way.

To clean up the canvas from unwanted UI elements we inject CSS that hides those elements.

gutenberg-mobile side PR: wordpress-mobile/gutenberg-mobile#2063

To test:

PR submission checklist:

  • I have considered adding unit tests where possible.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@etoledom etoledom added the Gutenberg Editing and display of Gutenberg blocks. label Apr 22, 2020
@etoledom etoledom self-assigned this Apr 22, 2020
@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Apr 22, 2020

You can trigger an installable build for these changes by visiting CircleCI here.

@etoledom etoledom force-pushed the gutenberg/unsupported-block-fallback branch from 57f3b03 to 78954b5 Compare April 22, 2020 13:50
@peril-wordpress-mobile
Copy link
Copy Markdown

peril-wordpress-mobile bot commented Apr 22, 2020

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

etoledom added 20 commits April 27, 2020 20:34
We can inject the block to edit in a new post and retreive it using the redux store directly.
But we can only do this loading wp-admin, since on Calypso, gutenberg loads inside an iframe.
We need WPBars (hide WP admin bar) early to avoid them to appear an disappear.
We need Gutenberg CSS later to avoid it from being overriden after the editor loads.
- Avoid dismiss by dragging of modal presentation
@iamthomasbishop
Copy link
Copy Markdown

I would say that what we provide now is best described as the ability to edit block settings for unsupported blocks.

@guarani I don’t think this is only block settings, is it? From what I can tell, we aren’t placing special restrictions (other than hiding a few menu items) on what the user can edit on the canvas, so I don’t see a reason to frame it in that way.

For example, let’s say there is some sort of third-party text-based block that we don’t yet support out-of-the-box on mobile. If they use this function to open the block in the web view, they should be able to edit almost any aspect of that blocks contents, correct? Perhaps I am missing something?

@guarani
Copy link
Copy Markdown
Contributor

guarani commented May 5, 2020

@guarani I don’t think this is only block settings, is it? From what I can tell, we aren’t placing special restrictions (other than hiding a few menu items) on what the user can edit on the canvas, so I don’t see a reason to frame it in that way.

For example, let’s say there is some sort of third-party text-based block that we don’t yet support out-of-the-box on mobile. If they use this function to open the block in the web view, they should be able to edit almost any aspect of that blocks contents, correct? Perhaps I am missing something?

You're right, it's more than just block settings – I wasn't thinking past blocks similar to the video block which just have settings and no text content.

@iamthomasbishop
Copy link
Copy Markdown

Ah ok, no worries — just wanted to make sure I wasn't missing something 😆

@etoledom
Copy link
Copy Markdown
Contributor Author

@iamthomasbishop - @guarani

Do we have access to the "spinner" that the web often uses (this one)? If not, we can do something like @etoledom mentioned and use the progress indicator we use on Preview.

I have implemented the Preview's loading indicator, since this is a native component we don't have easy access to it.

@etoledom etoledom added Gutenberg Editing and display of Gutenberg blocks. and removed Gutenberg Editing and display of Gutenberg blocks. labels May 15, 2020
@loremattei loremattei modified the milestones: 14.9 ❄️, 15.0 May 18, 2020
@loremattei
Copy link
Copy Markdown
Contributor

Hey! I'm moving this to 15.0 because 14.9 has been cut. If you want this to make it to 14.9, please feel free to ping me.

@guarani guarani modified the milestones: 15.0, 15.1 May 29, 2020
@guarani
Copy link
Copy Markdown
Contributor

guarani commented May 29, 2020

@etoledom I took the liberty of updating the milestone to 15.1 since 15.0 is about to be cut.

@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Jun 8, 2020

Updated this branch with current develop and gutenberg pointing to gutenberg-mobile:develop.

@guarani - would you mind doing a last smoke test?

  • With metro running on gutenberg-mobile:develop:
    • Unsupported block feature should work as expected.
  • Running Gutenberg from bundle (no metro running):
    • No option to open the web view on unsupported blocks should be visible.
    • Check that there are no errors or red screens.

Thanks!

@guarani
Copy link
Copy Markdown
Contributor

guarani commented Jun 8, 2020

@etoledom – I got this working, but at first I was getting the login screen on a .com site on the simulator. On my phone I got a blank screen and noticed this error in the Xcode console:

Please update the following components: withAnimatable(Component)
Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=TypeError: undefined is not a function (near '...window.insertBlock...'), WKJavaScriptExceptionColumnNumber=19, WKJavaScriptExceptionSourceURL=undefined, NSLocalizedDescription=A JavaScript exception occurred}

I reinstalled and it started working on the same device, but the error was still shown on the console. This error didn't seem to stop changes from being made to the unsupported block.

@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Jun 9, 2020

Please update the following components: withAnimatable(Component)

This seems to be related to the bottom sheet in general, not to this feature in particular.

Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=TypeError: undefined is not a function (near '...window.insertBlock...'), WKJavaScriptExceptionColumnNumber=19, WKJavaScriptExceptionSourceURL=undefined, NSLocalizedDescription=A JavaScript exception occurred}

This happens usually on .com, since there's an attempt to insert the block on page load, but the editor is not ready yet. There's a second attempt later on that will succeed.

@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Jun 9, 2020

Merging to bring the gutenberg bridge changes to WPiOS.
The new feature still is under dev-flag on gutenberg-mobile side.

@etoledom etoledom merged commit b090ca1 into develop Jun 9, 2020
@jkmassel jkmassel deleted the gutenberg/unsupported-block-fallback branch July 26, 2024 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Gutenberg Editing and display of Gutenberg blocks.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants