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

Add descriptive text and a link to embed documentation in embed blocks #16101

Merged
merged 4 commits into from Jun 12, 2019

Conversation

@melchoyce
Copy link
Contributor

commented Jun 12, 2019

Description

The lack of help text in the embed blocks has confused people. This PR adds some additional help text and a link to the embed docs in HelpHub.

Screenshots

Before:
image

After:
image

Fixes #8976.

import { BlockIcon } from '@wordpress/block-editor';

const EmbedPlaceholder = ( props ) => {
const { icon, label, value, onSubmit, onChange, cannotEmbed, fallback, tryAgain } = props;
return (
<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label } className="wp-block-embed">
<div className="components-placeholder__instructions">
{ __( 'Paste a link to the content you want to display on your site.' ) }

This comment has been minimized.

Copy link
@talldan

talldan Jun 12, 2019

Contributor

I think you should be able to pass this text straight into the Placeholder component as a prop instead of creating a separate div:

{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }

Something like this would work:

<Placeholder
    icon={ <BlockIcon icon={ icon } showColors /> } 
    label={ label } 
    className="wp-block-embed"
    instructions={ __( 'Paste a link to the content you want to display on your site.' ) }
>

This comment has been minimized.

Copy link
@melchoyce

melchoyce Jun 12, 2019

Author Contributor

Updated!

Copy link
Contributor

left a comment

This looks good! Nice improvement.

There's a unit test failing at the moment, it's a snapshot test that checks that the html of the Embed block is correct—it'll need to be updated to reflect the changes.

Not sure if that's something you've done before @melchoyce, happy to guide you through the process if needed (it's pretty easy) or I can push a commit myself that updates the tests.

Edit: I'll just leave some info :)

There's a guide here to updating snapshot tests:
https://developer.wordpress.org/block-editor/contributors/develop/testing-overview/#tldr-broken-snapshots

It says to run npm run test-unit -- --updateSnapshot --testPathPattern path/to/tests in the terminal.

I personally do it differently (more steps but in my opinion it's a better feedback loop, and it will notify you of failed tests as you're developing):

  1. Run npm run test-unit:watch in the terminal
  2. Make changes to the file and save the changes, e.g. as described in this comment #16101 (comment)
  3. The changes to the file should trigger a re-run of the tests.
  4. When they've finished running there will be a prompt like 1 snapshot failed from 1 test suite. Inspect your code changes or press 'u' to update them.. If the changes look correct, press the 'u' key as it describes, and the snapshot will be updated.
  5. Stage and commit the changed files (including the snapshot file).
melchoyce added 2 commits Jun 12, 2019
@melchoyce

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2019

Okay... I think that worked?

@notnownikki

This comment has been minimized.

Copy link
Member

commented Jun 12, 2019

Thank you, adding links to help is something we should be doing a lot more! Will review this more tomorrow if no one else has got to it before then, but it's looking great!

@melchoyce

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2019

Thanks Nikki!! Let me know if there's any other blocks offhand you think need some links 😄

@kjellr
kjellr approved these changes Jun 12, 2019
Copy link
Contributor

left a comment

This looks excellent, thanks for the change, Mel. The tests are passing, so it looks like the snapshots are all set. 👍

Screen Shot 2019-06-12 at 3 16 07 PM

I shared on super-minor comment about the learn more margin. Once that's updated, this should be good to merge.

packages/block-library/src/embed/editor.scss Outdated Show resolved Hide resolved
@kjellr kjellr merged commit c6a62d6 into master Jun 12, 2019
1 of 2 checks passed
1 of 2 checks passed
Filter merged Filter merged
Details
Travis CI - Pull Request Build Passed
Details
@kjellr kjellr deleted the update/embeds/copy branch Jun 12, 2019
@gziolo gziolo added this to the Gutenberg 6.0 milestone Jun 13, 2019
daniloercoli added a commit that referenced this pull request Jun 14, 2019
…rnmobile/open-video-by-browser-for-android

* 'master' of https://github.com/WordPress/gutenberg: (34 commits)
  [RNMobile] Native mobile release v1.7.0 (#16156)
  Scripts: Document and simplify changing file entry and output of build scripts (#15982)
  Block library: Refactor Heading block to use class names for text align (#16035)
  Make calendar block resilient against editor module not being present (#16161)
  Bump plugin version to 5.9.1
  Editor: Fix the issue where statics for deprecated components were not hoisted (#16152)
  Build Tooling: Use "full" `npm install` for Build Artifacts Travis task (#16166)
  Scripts: Fix naming conventions for function containing CLI keyword (#16091)
  Add native support for Inserter (Ported from gutenberg-mobile) (#16114)
  docs(components/higher-order/with-spoken-messages): fix issue in example code (#16144)
  docs(components/with-focus-return): fix typo in README.md (#16143)
  docs(block-editor/components/inspector-controls): fix image path in README.md (#16145)
  Add mention of on Figma to CONTRIBUTING.md (#16140)
  Bring greater consistency to placeholder text for media blocks. (#16135)
  Add descriptive text and a link to embed documentation in embed blocks (#16101)
  Update toolbar-text.png (#16102)
  Updating changelogs for the Gutenberg 5.9 packages release
  chore(release): publish
  [RNMobile] Fix pasting text on Post Title (#16116)
  Bump plugin version to 5.9.0
  ...

# Conflicts:
#	packages/block-library/src/video/video-player.android.js
nicolad added a commit to nicolad/gutenberg that referenced this pull request Jun 15, 2019
WordPress#16101)

* Add descriptive text and a link to embed documentation in embed blocks

* Restructure placeholder to add instructions

* Update tests

* Standardize margin sizing
jg314 added a commit to jg314/gutenberg that referenced this pull request Jul 19, 2019
WordPress#16101)

* Add descriptive text and a link to embed documentation in embed blocks

* Restructure placeholder to add instructions

* Update tests

* Standardize margin sizing
sbardian added a commit to sbardian/gutenberg that referenced this pull request Jul 29, 2019
WordPress#16101)

* Add descriptive text and a link to embed documentation in embed blocks

* Restructure placeholder to add instructions

* Update tests

* Standardize margin sizing
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
WordPress#16101)

* Add descriptive text and a link to embed documentation in embed blocks

* Restructure placeholder to add instructions

* Update tests

* Standardize margin sizing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.