feat: add iframe block #859

kariae · 2021-09-07T08:59:48Z

add an iframe block that will let publishers to embed an iframe either by its URL or by uploading
the iframe archive

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Add an iframe block to let publishers embed iframes by adding the iframes URL or by uploading the iframes content.

How to test the changes in this Pull Request:

Pull the branch related to this PR.
Add a new post.
In the new post add the iframe block.
Add the iframe source URL and click on the embed button.
Observe the iframe embed in the post.
If set to full-screen mode in the sidebar, preview the post and observe that the iframe is filling all the page.
On another post add again an iframe block, and this time upload a zip archive that contains the iframe files (HTML, CSS, images, ...).
Observe the embed iframe in the post.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

adekbadek

Apart from the individual comments, I'm wondering whether the block name is not too technical, but I don't have any counter-propositions.

src/blocks/iframe/edit.js

src/blocks/iframe/view.php

src/blocks/iframe/class-wp-rest-newspack-iframe-controller.php

src/blocks/iframe/edit.js

src/blocks/iframe/view.php

thomasguillot · 2021-09-20T11:24:08Z

@kariae I've pushed some simple visual changes. But I'd like to see a few more.

I'm not a fan of the Embed Block placeholder style and I think it looks messy having a URL input and a Button on 2 different row. I much prefer the Image Block placeholder style.

For the Height/Width settings, can we use something similar to the Cover Block regarding the unit? At the moment it's hard-coded in the input.

I'm not sure we need to have the "Preview" state when the block is unfocused. The editor "jumps" when I click on the block. Plus, there's already a button in the toolbar to show the preview.

kariae · 2021-09-20T12:43:16Z

@thomasguillot thank you for the feedback.

I'm not a fan of the Embed Block placeholder style and I think it looks messy having a URL input and a Button on 2 different row. I much prefer the Image Block placeholder style.

If we do go with the Image Block placeholder style, I'll add an insert from URL button, when we do click on it do I need to show an input + button on the bottom or I'll open a popup with the URL input and a confirmation button?

For the Height/Width settings, can we use something similar to the Cover Block regarding the unit? At the moment it's hard-coded in the input.

I like this one, I'll add it.

I'm not sure we need to have the "Preview" state when the block is unfocused. The editor "jumps" when I click on the block. Plus, there's already a button in the toolbar to show the preview.

After using the block on some posts I can confirm that. I'll remove it :)

thomasguillot · 2021-09-20T12:46:11Z

If we do go with the Image Block placeholder style, I'll add an insert from URL button, when we do click on it do I need to show an input+button on the bottom or I'll open a popup with the URL input and a confirmation button?

Popup, just like the Image Block placeholder.

adekbadek · 2021-10-08T15:35:27Z

What's the status here? I was waiting for an approval from @thomasguillot as a sign that design-wise the work is done.

kariae · 2021-10-08T16:04:28Z

@adekbadek all good from my side, if @thomasguillot 👍 I fix the conflicts and this should be good to go.

kariae · 2021-10-08T17:54:17Z

Both JS and SCSS staged linter failed after the merge:

Error: Could not find "@wordpress/stylelint-config/scss". Do you need a configBasedir?

And:

wp-content/plugins/newspack-blocks/src/blocks/author-profile/edit.js
  19:2  error  Definition for rule '@wordpress/no-unsafe-wp-apis' was not found  @wordpress/no-unsafe-wp-apis

A first guess would be because the npm run lint:js:staged command is running on staged files only, though missing the configs, I'm not sure.

thomasguillot · 2021-10-11T09:21:02Z

All good 👍
Made a few more changes in 247a9a3

includes/class-newspack-blocks.php

src/blocks/iframe/iframe-placeholder.js

src/blocks/iframe/edit.js

src/blocks/iframe/class-wp-rest-newspack-iframe-controller.php

src/blocks/iframe/edit.js

src/blocks/iframe/view.php

add an iframe block that will let publishers to embed an iframe either by its URL or by uploading the iframe archive

change label text form from a question to normal text

when adding a fullscreen iframe to a post we'll show a notice saying that the iframe will take over on the content on the post page (we don't want to preview this behavior as it will not let the user user the editor)

set the UI as the Image Upload Block UI and enable getting archive assets from media library

change Upload to Embed since we do embed a URL not upload it

Toggle preview display only the first time when we upload an archive zip or embed a URL

handle only errors with a valid `message` key, else fallback on a generic error message

delete method should be set as Delete not as a Post/Put/Patch

the iframe will take over the popup prompt so we don't need to render it

adekbadek

I've ran into this issue:

Insert the block
Choose "Embed from URL"
Input the first letter
-- the block changes mode to preview and the URL insertions is impossible

src/blocks/iframe/edit.js

src/blocks/iframe/block.json

A bug was introduced in 76f9021 where when we type the first letter in the URL field it's submitted, moved the field state to the right place.

kariae · 2021-10-14T17:36:16Z

I've ran into this issue:

Insert the block

Choose "Embed from URL"

Input the first letter

-- the block changes mode to preview and the URL insertions is impossible

Nice Catch 👌

adekbadek

🙌

# [1.41.0-alpha.1](v1.40.0...v1.41.0-alpha.1) (2021-10-19) ### Features * add iframe block ([#859](#859)) ([08a2712](08a2712)) * **homepage-posts:** add a filter to enable duplicating posts ([#886](#886)) ([4daf27d](4daf27d))

matticbot · 2021-10-19T14:28:13Z

🎉 This PR is included in version 1.41.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [1.41.0](v1.40.0...v1.41.0) (2021-10-19) ### Features * add iframe block ([#859](#859)) ([08a2712](08a2712)) * **homepage-posts:** add a filter to enable duplicating posts ([#886](#886)) ([4daf27d](4daf27d))

matticbot · 2021-10-19T19:58:52Z

🎉 This PR is included in version 1.41.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

kariae requested a review from a team September 13, 2021 15:22

kariae added the [Status] Needs Review label Sep 13, 2021

adekbadek requested changes Sep 15, 2021

View reviewed changes

adekbadek requested changes Oct 11, 2021

View reviewed changes

kariae and others added 19 commits October 11, 2021 19:11

feat: add iframe block

39429be

add an iframe block that will let publishers to embed an iframe either by its URL or by uploading the iframe archive

chore(iframe block): minor UI changes

f2485c5

style(iframe): fix label text

d4debe3

change label text form from a question to normal text

refactor(iframe): show iframe fullscreen notice on editor

1704a5b

when adding a fullscreen iframe to a post we'll show a notice saying that the iframe will take over on the content on the post page (we don't want to preview this behavior as it will not let the user user the editor)

fix: rebase onto master

8ac95bd

refactor(iframe): change archive folder name to be Newspack related

7c2aef8

refactor(iframe): improve iframe archive folder name readability

91cbbce

refactor(iframe): improve editor iframe title

b47d256

refactor(iframe): edit functions docblock

7ab94e5

feat: update sidebar controls

d435a5e

feat: move support link to block description

edaf282

feat: update preview icon and title

23c8846

feat(iframe-block): switch UI to follow image Upload block UI

c31fbef

set the UI as the Image Upload Block UI and enable getting archive assets from media library

refactor(iframe-block): disable preview by default

2323203

feat(iframe-block): enable setting iframe size unit

517d380

feat(iframe): display preview button only when src is available

e10edf6

feat: move unit-controls to same row

a6b5e40

refactor(iframe-block): add newspack- prefix to class name

99ea7e4

style(iframe): wording change

38fab04

change Upload to Embed since we do embed a URL not upload it

kariae added 9 commits October 12, 2021 12:34

fix(iframe): fix preview toggle

d08545f

Toggle preview display only the first time when we upload an archive zip or embed a URL

fix(iframe): fix error handling on form submit

4098696

handle only errors with a valid `message` key, else fallback on a generic error message

fix(iframe): better error message when we can't unzip the assets archive

2068056

fix(iframe): fix endpoint method

f218440

delete method should be set as Delete not as a Post/Put/Patch

refactor(iframe): remove unnecessary functions from useEffect deps list

16390e7

fix(iframe): fix deleting archive folder when needed

b40fcf1

fix(iframe): do no render popups when the iframe is fullscreen

34403cb

the iframe will take over the popup prompt so we don't need to render it

refactor(iframe): clean edit from unnecessary states

76f9021

refactor(iframe): manage block attributes from shared json file

d485551

kariae force-pushed the add/iframe_block branch from 247a9a3 to d485551 Compare October 12, 2021 13:47

fix(iframe): fix filter callback

082615c

kariae requested a review from adekbadek October 14, 2021 09:37

adekbadek requested changes Oct 14, 2021

View reviewed changes

src/blocks/iframe/edit.js Outdated Show resolved Hide resolved

src/blocks/iframe/block.json Show resolved Hide resolved

adekbadek added Needs Changes or Feedback and removed [Status] Needs Review labels Oct 14, 2021

kariae added 3 commits October 14, 2021 20:19

style(iframe): remove commented code

e0e60ab

fix(iframe): fix typing Iframe URL issue

c2638d3

A bug was introduced in 76f9021 where when we type the first letter in the URL field it's submitted, moved the field state to the right place.

style(iframe): format json file for readability

a8778ab

kariae requested a review from adekbadek October 14, 2021 17:36

adekbadek approved these changes Oct 15, 2021

View reviewed changes

github-actions bot added the [Status] Approved label Oct 15, 2021

kariae merged commit 08a2712 into master Oct 19, 2021

kariae deleted the add/iframe_block branch October 19, 2021 14:18

matticbot added the released on @alpha label Oct 19, 2021

matticbot added the released label Oct 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add iframe block #859

feat: add iframe block #859

kariae commented Sep 7, 2021

adekbadek left a comment

thomasguillot commented Sep 20, 2021

kariae commented Sep 20, 2021 •

edited

Loading

thomasguillot commented Sep 20, 2021

adekbadek commented Oct 8, 2021

kariae commented Oct 8, 2021

kariae commented Oct 8, 2021

thomasguillot commented Oct 11, 2021

adekbadek left a comment

kariae commented Oct 14, 2021

adekbadek left a comment

matticbot commented Oct 19, 2021

matticbot commented Oct 19, 2021

feat: add iframe block #859

feat: add iframe block #859

Conversation

kariae commented Sep 7, 2021

All Submissions:

How to test the changes in this Pull Request:

Other information:

adekbadek left a comment

Choose a reason for hiding this comment

thomasguillot commented Sep 20, 2021

kariae commented Sep 20, 2021 • edited Loading

thomasguillot commented Sep 20, 2021

adekbadek commented Oct 8, 2021

kariae commented Oct 8, 2021

kariae commented Oct 8, 2021

thomasguillot commented Oct 11, 2021

adekbadek left a comment

Choose a reason for hiding this comment

kariae commented Oct 14, 2021

adekbadek left a comment

Choose a reason for hiding this comment

matticbot commented Oct 19, 2021

matticbot commented Oct 19, 2021

kariae commented Sep 20, 2021 •

edited

Loading