Blocks: Add a new Google Calendar block #13999

pento · 2019-11-08T06:10:13Z

This is the first step towards replacing the [googleapps] shortcode with blocks.

This PR is currently a work in progress, so please don't be surprised when things don't work. 🙂

Things that aren't working yet:

Converting from a shortcode block containing the [googleapps] shortcode (Re-evaluate shortcode blocks for more specific shortcode transforms WordPress/gutenberg#8569 - no progress yet ).
Converting a pasted <iframe> if user doesn't have UnfilteredHTML permissions (Block API: pasteHandler() removes iframes too early. WordPress/gutenberg#18389 - draft PR Defer removal of iFrames on paste until transform stage, and only rem… WordPress/gutenberg#19998, ~~Block API: pasteHandler() incorrectly treats single-line pastes as inline content. WordPress/gutenberg#18390~~ fixed).

Changes proposed in this Pull Request:

Add a new block, jetpack/google-calendar.
Add a block version gating arg to jetpack_register_block

Is this a new feature or does it add/remove features to an existing part of Jetpack?

This is an existing feature being ported to the block editor.

Testing instructions:

This is currently marked as a beta block, you will need to add define( 'JETPACK_BETA_BLOCKS', true ); to your wp-config.php file.

This block also introduces version gating, and you will need wp > 5.3 or gutenberg plugin >= 7.2 to see the block.

Open the Block Editor.
Try pasting Google Calendar embed URLs or iframe as an admin user: https://calendar.google.com/calendar/embed?src=jb4bu80jirp0u11a6niie21pp4%40group.calendar.google.com&ctz=America/New_York
or
<iframe src="https://calendar.google.com/calendar/embed?src=jb4bu80jirp0u11a6niie21pp4%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Try editing the embed to a different URL.
Try converting Classic posts with the Google Calendar <iframe> in them.
Try converting Classic posts with a Google Apps short code in them: [googleapps domain="calendar" dir="calendar/embed" query="src=jb4bu80jirp0u11a6niie21pp4%40group.calendar.google.com&ctz=America/New_York" width="800" height="600" /]
Try accessing the block on WP < 5.4 or gutenberg plugin < 7.2 - it shouldn't be available in versions less than these

Proposed changelog entry for your changes:

Blocks: Add a new Google Calendar block.

jetpackbot · 2019-11-08T06:12:13Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: March 3, 2020.
Scheduled code freeze: February 25, 2020

Generated by 🚫 dangerJS against fa55f5e

jeherve · 2019-11-08T09:28:44Z

replacing the [googleapps] shortcode
Add a new block, jetpack/google-calendar.

I may be missing something obvious, but should the block be called differently if it aims to embeds different kinds of Google Content and not just calendars? Could it be "Google Content", "Google Embed", "Google services" instead?

In any case, it may be useful to consider the AMP plugin if we develop any kind of Google-related block. Googlers have been contributing quite a bit of enhancements to Jetpack in the past few months to help make each one of our features compatible with AMP views. I think it would be nice if this new block supported that as well.

Here is a recent example with the Slideshow block: #13009

pento · 2019-11-12T05:53:03Z

On the topic of a single "Google Suite" block, vs individual blocks for different Google services, @davemart-in has mentioned a preference for individual blocks. I suspect that there'll be room for different options on each block depending on which service is being embedded.

👍🏻 on adding AMP support.

While investigating transforms, I've run into WordPress/gutenberg#10674, which will prevent transforming from the [googleapps] shortcode, since it needs to determine which kind of Google service the shortcode is transforming from. WordPress/gutenberg#8569 is also kind of a problem, for that matter, we have to manually provide a transformation for [googleapps] shortcodes that have been previously transformed into the core/shortcode block.

pento · 2019-11-12T07:07:26Z

Given the issues in Gutenberg I've run into here, and with Jetpack supporting the current and previous versions of WordPress, I'm wondering if it's worth exploring version gating this block. If the Gutenberg issues are fixed, we can say the block is only available if you're running Gutenberg x.y+, or WordPress 5.4+.

Does Jetpack have any examples of calls to action encouraging people to upgrade their WordPress version (or install another plugin) to get full functionality?

jeherve · 2019-11-12T16:17:44Z

If the Gutenberg issues are fixed, we can say the block is only available if you're running Gutenberg x.y+, or WordPress 5.4+.

We have had pieces of code that were previously only available for specific WordPress versions (the Jetpack tests inside the new Tools > Site Health screen come to mind: https://github.com/Automattic/jetpack/blob/7.8/_inc/lib/debugger/0-load.php#L19 )

Similarly, some of the things we offer require a specific plugin. The whole 3rd-party directory relies on specific plugins, and does that by hooking into specific filters, checking for classes, or checking for functions. In some cases, we check for specific functions to catch a specific plugin version:

jetpack/3rd-party/woocommerce.php

Line 18 in b245765

* Wrap in function exists check since this requires WooCommerce 3.3+.

I think we could do the same when we register that block, that should be fine. That will impact the number of sites where the feature is available, but you will be okay with Atomic sites though.

Does Jetpack have any examples of calls to action encouraging people to upgrade their WordPress version (or install another plugin) to get full functionality?

We don't really have that in Jetpack today. You could, however, create a JITM that would be displayed to a specific subset of users to invite them to install Gutenberg for example.

kraftbj · 2019-11-12T16:22:47Z

With a conditional, please do add an inline todo comment explaining when the check can be removed ( like https://github.com/Automattic/jetpack/pull/13980/files#diff-dd77455a3e202f94f73c1963586b01e3L232 that was just removed). Sometimes it is obvious (a function_exists check for a new 5.4 WP function), but just to be safe so future us are confident that we're okay to remove older stuff.

pento · 2019-11-18T23:07:58Z

As this is going to require a bit more foundational work, I'm moving it out of the 8.0 milestone for now.

pento · 2020-02-03T05:57:24Z

I've just been reviewing where things are at in the blockers for this PR.

Completed

Transforms: "isMatch" does not work for shortcode transformation WordPress/gutenberg#10674
Block API: pasteHandler() incorrectly treats single-line pastes as inline content. WordPress/gutenberg#18390

In Progress

Block API: pasteHandler() removes iframes too early. WordPress/gutenberg#18389 - My previous attempt at addressing this stalled, @glendaviesnz is trying a new approach, linked in the issue.

Stalled/Not Started

Re-evaluate shortcode blocks for more specific shortcode transforms WordPress/gutenberg#8569 hasn't been started.
Expose embed block creation function WordPress/gutenberg#13490 got a little bit of feedback, but stalled. The alternative (building an embed block wrapper within Jetpack) hasn't been touched, to my knowledge.
Block version gating hasn't been started, but it really needs to be done in concert with a block that needs it, so I don't think it's a blocker to continuing work on this PR.

…handling

…cular

matticbot · 2020-02-16T20:32:46Z

pento, Your synced wpcom patch D38733-code has been updated.

davemart-in · 2020-02-18T12:50:49Z

@davemart-in, are you happy with the block preview instructions moved to an
which is more semantically correct, and will make the translation simpler, but doesn't have the Step) wording from the designs as below:

@glendaviesnz yes that is fine. I like that approach even better. Nice adjustment! Thanks.

jeherve · 2020-02-18T18:30:35Z

extensions/blocks/google-calendar/edit.js

+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Calendar Settings', 'jetpack' ) } initialOpen={ false }>
+						{ this.getEditForm( `${ className }-embed-form-sidebar`, editedEmbed ) }


This is causing issues when you use the custom css class field in the editor:

This is a problem a few lines down as well.

Related: #14623

Added a fix for this, and let @pablinos know re #14623, will see if he thinks there is a better way to fix this or not.

extensions/blocks/google-calendar/index.js

…sses affecting sub class names

extensions/blocks/google-calendar/edit.js

matticbot · 2020-02-19T20:24:18Z

pento, Your synced wpcom patch D38733-code has been updated.

glendaviesnz · 2020-02-19T20:33:34Z

@jeherve - I think all the latest feedback has been covered off, so it may be good to go.

jeherve

This looks good to me. 👍

matticbot · 2020-02-20T19:49:55Z

pento, Your synced wpcom patch D38733-code has been updated.

scruffian · 2020-02-24T14:23:14Z

r203268-wpcom

* 8.3 release: changelog * Changelog: add #14516 * Changelog: add #14574 * Bring in changes from 8.2.1 and 8.2.2 * Update stable version * Bring in 8.2.3 changes * Changelog: add #14714 * Changelog: add #14639 * Changelog: add #14678 * Changelog: add #14673 * Changelog: add #14687 * Changelog: add #14704 * Changelog: add #14702 * Changelog: add #14541 * Changelog: add #14657 * Changelog: add #14622 * Changelog: add #14582 * Changelog: add #14638 * Changelog: add #14633 * Changelog: add #14571 * Changelog: add #14592 * Changelog: add #14539 * Changelog: add #14514 * Changelog: add #14643 * Changelog: add #14494 * Changelog: add #13739 * Changelog: add #14707 * Changelog: add #14736 * Changelog: add #14706 * Changelog: add #14730 * Changelog: add #14685 * Changelog: add #14727 * Changelog: add #14711 * Changelog: add #14742 * Changelog: add #14746 * Changelog: add #14725 * Changelog: add #13999 * Changelog: add #14740 * Changelog: add #14759 * Changelog: add #14703 * Changelog: add #14753 * Changelog: add #14754 * Changelog: add #14645 * Cahngelog: add #14599

matticbot · 2021-04-01T01:16:53Z

Caution: This PR has changes that must be merged to WordPress.com
Hello pento! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D59607-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

jeherve · 2021-04-01T09:59:04Z

^ The above seems to have been created by mistake. Abandoning.

pento added [Status] In Progress [Type] Feature Request [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Nov 8, 2019

pento added this to the 8.0 milestone Nov 8, 2019

pento requested a review from a team as a code owner November 8, 2019 06:10

pento self-assigned this Nov 8, 2019

matticbot added the Touches WP.com Files label Nov 8, 2019

pento mentioned this pull request Nov 8, 2019

Block API: pasteHandler() incorrectly treats single-line pastes as inline content. WordPress/gutenberg#18390

Closed

pento removed this from the 8.0 milestone Nov 18, 2019

pento mentioned this pull request Dec 12, 2019

Block API: Allow block transforms to handle iframes for non-admin users. WordPress/gutenberg#19086

Closed

6 tasks

Glen Davies and others added 6 commits February 5, 2020 11:26

Add beta google calendar block

d04dd05

Replace some of the scaffolding with gcal things.

4bb4a06

Show a preview in the editor.

356fcc1

Tweak the preview height on mobile.

d5033d7

Make this thing partially work.

57c6d55

Add AMP support.

53e9df9

glendaviesnz force-pushed the add/google-calendar-block branch from af8f379 to 53e9df9 Compare February 4, 2020 22:28

glendaviesnz self-assigned this Feb 4, 2020

Glen Davies added 4 commits February 5, 2020 16:50

Plumb through the iframe handling, add prompts to UI, and also error …

d6a89a9

…handling

Add googleapps shortcode transformation

52fc6ab

Add unit test for attribute extraction and make dependencies less cir…

ab54967

…cular

Add block version gating

778175e

pablinos mentioned this pull request Feb 17, 2020

Block version gating #14703

Merged

jeherve requested changes Feb 18, 2020

View reviewed changes

Glen Davies added 3 commits February 19, 2020 10:09

Get primary class name from className prop to fix bug with custom cla…

2478f20

…sses affecting sub class names

make the parsing of primary classname a little more defensive

66998f5

Enable wide alignment option

026095b

pablinos reviewed Feb 19, 2020

View reviewed changes

extensions/blocks/google-calendar/edit.js Outdated Show resolved Hide resolved

Switch to less hacky version of getting the default class name

fa55f5e

jeherve approved these changes Feb 20, 2020

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Feb 20, 2020

glendaviesnz merged commit 926bdd1 into master Feb 20, 2020

glendaviesnz deleted the add/google-calendar-block branch February 20, 2020 21:57

matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Feb 20, 2020

jeherve added [Block] Google Calendar [Status] Needs Changelog and removed [Status] Needs Changelog labels Feb 24, 2020

jeherve added [Status] Has Changelog and removed [Status] Needs Changelog labels Feb 25, 2020

jeherve added a commit that referenced this pull request Feb 25, 2020

Changelog: add #13999

b984aec

davemart-in mentioned this pull request Mar 3, 2020

Google Calendar block: Fix full width support #14835

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: Add a new Google Calendar block #13999

Blocks: Add a new Google Calendar block #13999

pento commented Nov 8, 2019 •

edited by glendaviesnz

Loading

jetpackbot commented Nov 8, 2019 •

edited

Loading

jeherve commented Nov 8, 2019 •

edited

Loading

pento commented Nov 12, 2019

pento commented Nov 12, 2019

jeherve commented Nov 12, 2019

kraftbj commented Nov 12, 2019

pento commented Nov 18, 2019

pento commented Feb 3, 2020 •

edited

Loading

matticbot commented Feb 16, 2020

davemart-in commented Feb 18, 2020

jeherve Feb 18, 2020

glendaviesnz Feb 18, 2020

matticbot commented Feb 19, 2020

glendaviesnz commented Feb 19, 2020

jeherve left a comment

matticbot commented Feb 20, 2020

scruffian commented Feb 24, 2020

matticbot commented Apr 1, 2021

jeherve commented Apr 1, 2021

Blocks: Add a new Google Calendar block #13999

Blocks: Add a new Google Calendar block #13999

Conversation

pento commented Nov 8, 2019 • edited by glendaviesnz Loading

Changes proposed in this Pull Request:

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented Nov 8, 2019 • edited Loading

jeherve commented Nov 8, 2019 • edited Loading

pento commented Nov 12, 2019

pento commented Nov 12, 2019

jeherve commented Nov 12, 2019

kraftbj commented Nov 12, 2019

pento commented Nov 18, 2019

pento commented Feb 3, 2020 • edited Loading

matticbot commented Feb 16, 2020

davemart-in commented Feb 18, 2020

jeherve Feb 18, 2020

Choose a reason for hiding this comment

glendaviesnz Feb 18, 2020

Choose a reason for hiding this comment

matticbot commented Feb 19, 2020

glendaviesnz commented Feb 19, 2020

jeherve left a comment

Choose a reason for hiding this comment

matticbot commented Feb 20, 2020

scruffian commented Feb 24, 2020

matticbot commented Apr 1, 2021

jeherve commented Apr 1, 2021

pento commented Nov 8, 2019 •

edited by glendaviesnz

Loading

jetpackbot commented Nov 8, 2019 •

edited

Loading

jeherve commented Nov 8, 2019 •

edited

Loading

pento commented Feb 3, 2020 •

edited

Loading