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 the block example API and use it for inserter and switcher previews #17124

Merged
merged 5 commits into from Aug 23, 2019

Conversation

@youknowriad
Copy link
Contributor

commented Aug 21, 2019

close #17124 refs #16979

This adds the Block Example API. It uses it to allow blocks to be previewed even before inserting them into the post. In this PR, the paragraph block contains an example.

We also use the example API in the block styles previews if available.

A follow-up to this PR will include the "tips" API.

Capture d’écran 2019-08-21 à 11 50 08 AM

It looks like the BlockPreview is not precisely centered vertically. Something to fix separately though as it's unrelated with the changes here cc @marekhrabe @retrofox

@@ -22,6 +22,12 @@ export const settings = {
description: __( 'Start with the building block of all narrative.' ),
icon,
keywords: [ __( 'text' ) ],
example: {
attributes: {
align: 'center',

This comment has been minimized.

Copy link
@mtias

mtias Aug 21, 2019

Contributor

left? :)

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 21, 2019

Author Contributor

🤷‍♂️

This comment has been minimized.

Copy link
@jasmussen

jasmussen Aug 21, 2019

Contributor

No alignment does what? Remember there's also rtl languages.

@mtias

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2019

I think we could try removing the "Preview" text.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2019

Pushed a couple small updates:

  • Removed the "Preview" title.
  • Adjusted the spacing so the the preview area grows to take up the available space.

New screenshot:

Screen Shot 2019-08-21 at 9 12 44 AM

@retrofox

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2019

Although handling the theme styles feels to be out of scope, I think it worths trying to do it as much as possible.

I've switched to a dark theme, and this is how it looks:

image

Not completely aware if we already have something like a guide to applying styles to the core-editor from a theme, but is so we could use this to apply them to the preview.

One thing to do is moving the editor-styles-wrapper class higher, maybe create a new element wrapper. In fact, just adding the class makes the preview a little bit better.

export function BlockPreview( { blocks, viewportWidth = 700, settings } ) {
	// ...
	return (
		<div class="editor-styles-wrapper">
			<BlockEditorProvider
			// ...

image

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 21, 2019

@retrofox can we just move the editor-styles-wrapper to the block-editor-block-preview__container node, it has the same effect I think.

@youknowriad youknowriad force-pushed the try/example-api branch from cd560d9 to fb47636 Aug 22, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 22, 2019

So how do we move forward here? Should we merge the PR as is and try to add examples to all of our blocks separately?

@mtias

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2019

So how do we move forward here? Should we merge the PR as is and try to add examples to all of our blocks separately?

Probably, yes. Examples with images are going to be interesting (Cover, Media and Text, etc). Is there any image from wp-admin or the about pages that could be used? Should we add some for this?

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 23, 2019

Is there any image from wp-admin or the about pages that could be used? Should we add some for this?

That's a good point. I'm not sure that there's an image from WP-Admin that we use — WP doesn't bundle too many images. I wonder if we can pull in some sort of lightweight SVG graphic as an image?

@mcsf
mcsf approved these changes Aug 23, 2019
Copy link
Contributor

left a comment

This looks good enough to merge and iterate on!

@youknowriad youknowriad merged commit bd2604f into master Aug 23, 2019

2 checks passed

pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details

@youknowriad youknowriad deleted the try/example-api branch Aug 23, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 23, 2019

Another possibility for the images is to use an URL from wp.org

@senadir senadir added this to the Gutenberg 6.4 milestone Aug 25, 2019

@@ -22,6 +22,11 @@ export const settings = {
description: __( 'Start with the building block of all narrative.' ),
icon,
keywords: [ __( 'text' ) ],
example: {

This comment has been minimized.

Copy link
@gziolo

gziolo Aug 26, 2019

Member

I applied Needs Dev Note label as this is block API related and introduces a completely new field. It should also get properly documented in tutorials and related docs.

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.