Skip to content
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

Fix VR Gutenberg block #9935

Merged
merged 4 commits into from
Oct 17, 2018
Merged

Fix VR Gutenberg block #9935

merged 4 commits into from
Oct 17, 2018

Conversation

simison
Copy link
Member

@simison simison commented Jul 19, 2018

Current VR block is incompatible with latest Gutenberg 3.2.0:

block rendering error

The block was originally implemented in #9560

Changes proposed in this Pull Request:

  • Most importantly; replaces deprecated UrlInput with TextControl
  • Keep "type" field disabled to force users to fill "url" input first. Previously, if they would choose a value from dropdown first and start typing any text to URL input, the block would immediately render the embed with invalid URL. The solution is not ideal but helps a bit. Adding additional "embed" button would be best and make the block behave similarly with other Gutenberg embed blocks. I'll leave that for another PR.
  • Add block description
  • Make two inputs behave nicer on small screens

Testing instructions:

  • Use latest Gutenberg
  • Make sure you have Jetpack build done yarn build (or use un-minified version by setting define ( 'SCRIPT_DEBUG', true );)
  • Add a VR block to a post or page (you can find it under "embeds")
  • The block should work in different screen sizes
  • Adding a valid URL and type will render the embed. Here's a test URL you can use together with "360" setting: https://en-blog.files.wordpress.com/2016/12/regents_park.jpg

screen shot 2018-07-19 at 11 19 03
screen shot 2018-07-19 at 11 19 12
screen shot 2018-07-19 at 11 21 15
screen shot 2018-07-19 at 11 19 27
screen shot 2018-07-19 at 11 21 21

@simison simison added [Type] Bug When a feature is broken and / or not performing as intended [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Jul 19, 2018
@simison simison requested review from gravityrail and oskosk July 19, 2018 08:32
@simison simison requested a review from a team as a code owner July 19, 2018 08:32
@simison simison requested a review from dereksmart July 19, 2018 08:34
@simison simison added the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Jul 19, 2018
@simison simison requested a review from tyxla July 20, 2018 14:30
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tests well! 👍 I haven't seen any errors, and couldn't break it in my various way of testing.

I've left several small notes, nothing critical - the main thing i see is that we need to make sure fields are aligned and sized properly in any width.

@@ -6,11 +6,15 @@
overflow: hidden;
}

.wp-block-jetpack-vr .components-placeholder__fieldset {
justify-content: space-around;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this isn't enough - on mobile devices (>320 && <782), sizing and alignment of the fields looks a little odd:

icon="format-image"
label={ __( 'VR Image', 'jetpack' ) }
className={ props.className }
>
<UrlInput
<TextControl
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any good reason to use TextControl here? Is it because of the style prop?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would be the alternative? As @simison noted in the PR desc, UrlInput is deprecated...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that might make sense.

<UrlInput
<TextControl
type="url"
style={ { flex: '1 1 auto' } }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this flex: '1 1 auto' is really necessary here - could you expand on why we need it? On a quick test, when I remove it I don't see a difference.

@simison simison added [Status] In Progress and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Jul 23, 2018
@jeherve jeherve added this to the 6.7 milestone Oct 9, 2018
@jeherve jeherve mentioned this pull request Oct 15, 2018
22 tasks
Found out that `.min.js` does get generated, I was just building things the wrong way. :-)
@simison simison requested a review from a team October 16, 2018 12:04
@jetpackbot
Copy link

Warnings
⚠️

"Proposed changelog entry" is missing for this PR. Please include any meaningful changes

This is automated check which relies on PULL_REQUEST_TEMPLATE.We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS

Copy link
Contributor

@ockham ockham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can confirm that this fixes the block -- it works again, according to testing instructions.

The block is obviously still in a rather raw state, but my vote is to merge this PR since I'd like to proceed to move it out of JP (#10331) and into Calypso (Automattic/wp-calypso#27873).

@simison simison requested a review from jeherve October 16, 2018 19:18
@simison simison added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] In Progress labels Oct 16, 2018
@simison
Copy link
Member Author

simison commented Oct 16, 2018

@jeherve so our plan here would be to:

  1. Merge this
  2. Right after, remove the block from Jetpack
  3. Move it to Calypso codebase, thus re-introducing it back in Jetpack via @automattic/jetpack-blocks
  4. Remove gutenpack build script from gulp

@jeherve jeherve added the [Status] Ready to Merge Go ahead, you can push that green button! label Oct 16, 2018
@jeherve jeherve removed the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Oct 16, 2018
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to work well on my end. No more errors, the photos render well in the editor and on the frontend now.

I have not tested adding a block with an old version of Gutenberg and then updating Gutenberg and Jetpack though.

@kraftbj kraftbj merged commit ff22972 into master Oct 17, 2018
@ghost ghost removed the [Status] Ready to Merge Go ahead, you can push that green button! label Oct 17, 2018
@kraftbj kraftbj deleted the fix/block-vr branch October 17, 2018 01:38
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing it 👍 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Shortcodes / Embeds [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Type] Bug When a feature is broken and / or not performing as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants