Storybook: Try to integrate the playground into Storybook #18191

gziolo · 2019-10-30T16:46:44Z

Description

Part of #17973.

This PR explores how likely it is that the playground could work inside Storybook.

So far, I'm positive, I have found two issues but I guess they are both solvable. I need to play a bit more with the version that is controlled by Parcel as I see that some core blocks explode after they get inserter, e.g. Heading. This is more concerning. - all issues discovered are resolved now and the one about broken blocks isn't related to this PR.

Updated docs:
https://github.com/WordPress/gutenberg/blob/1c440e1805f354ecc5d7d8e2deaf977013473755/docs/contributors/getting-started.md#storybook

How has this been tested?

npm run storybook:dev

npm run storybook:build

Screenshots

Known issues

All of them are resolved now 🎉

Fonts are missing
Playground specific styles are missing because of issues with importing SASS files
~~Many blocks explode just after they get inserted, it needs to be further investigated~~ see Storybook: Try to integrate the playground into Storybook #18191 (comment), this isn't related to Storybook at all
It doesn't integrate with Netlify because of the changed output directory
parcel needs to be removed as it becomes obsolete with all these efforts

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

.storybook/playground/index.js

ItsJonQ · 2019-10-30T17:17:59Z

@gziolo Thank you for getting this started 😍 .
I can give the CSS and font stuff a try if that's okay with you

gziolo · 2019-10-30T17:19:12Z

@gziolo Thank you for getting this started 😍 .
I can give the CSS and font stuff a try if that's okay with you

Feel free to push as many commits as necessary to make it shine :)

gziolo · 2019-10-30T17:23:50Z

By the way, I have just confirmed that exploding blocks aren't specific to Storybook integration:

ItsJonQ · 2019-10-30T17:39:21Z

@gziolo It works! 😍

gziolo · 2019-10-31T12:48:05Z

This should be ready for review.

I updated docs in 1c440e1 to replace occurrences of the playground with Storybook. See:

https://github.com/WordPress/gutenberg/blob/1c440e1805f354ecc5d7d8e2deaf977013473755/docs/contributors/getting-started.md#storybook

I also decided to keep the old output folder and npm script aliases for the playground as it integrates with Netlify. @epiqueras, what is necessary to adjust it on Netlify side? We can do it at the very end or in a follow-up PR. Whatever you prefer.

.storybook/webpack.config.js

.travis.yml

gziolo · 2019-10-31T14:01:56Z

Link to Netlify:
https://deploy-preview-18191--gutenberg-playground.netlify.com/

gziolo · 2019-10-31T15:05:39Z

It's possible to see the source with 37aee14:

epiqueras · 2019-10-31T18:48:21Z

@gziolo We can add a netlify.toml so that this can be changed with code instead of having to ping me to log in to the dashboard.

gziolo · 2019-10-31T20:29:09Z

@gziolo We can add a netlify.toml so that this can be changed with code instead of having to ping me to log in to the dashboard.

It would be great 👍 It isn't a blocker for this PR but definitely nice to have as a quick follow-up.

gziolo · 2019-11-04T12:19:28Z

@mkaz, I moved and updated README file added to the storybook folder in #18245 with 2a40755.

gziolo · 2019-11-05T22:40:12Z

@ItsJonQ - do you think it’s fine to move forward with this proposal? Did I miss anything?

ItsJonQ · 2019-11-07T14:13:24Z

do you think it’s fine to move forward with this proposal

@gziolo Yes! I think this is fantastic ! Thank you so much for doing this 🙏

gziolo · 2019-11-08T06:04:04Z

@youknowriad do you have any concerns? I plan to merge it on Monday.

youknowriad

I love this, I think we can probably get rid of the "Gutenberg Playground" header and consolidate all components under the "Components" section (Modal, FontSizePicker)

youknowriad · 2019-11-12T09:45:14Z

storybook/webpack.config.js

+			enforce: 'pre',
+		},
+		{
+			test: /\.scss$/,


In theory we could avoid this by loading the produced CSS like we do for the components. I feel we should consolidate on one way of loading styles in Storybook.

@ItsJonQ - I guess this is a good follow-up to decide how we tackle CSS in Storybook.

youknowriad · 2019-11-12T09:46:13Z

storybook/stories/playground/index.js

+};
+
+export const _default = () => {
+	registerCoreBlocks();


I guess it's probably better to wrap in useEffect( , []) to only run on mount?

The fun part is that this exported function can't take hooks as it isn't a component but some special method that wraps stories. Anyway, we probably move it to App and define as an effect there, I will give it a spin 👍

gziolo · 2019-11-12T10:57:22Z

I have this locally, commit coming up soon:

I managed to address all comments 🎉

youknowriad · 2019-11-12T12:16:00Z

Thanks @gziolo

ktmn · 2019-11-14T09:37:30Z

Unrelated to this PR, but any chance anyone would know what dependencies I need for the Gutenberg editor in a different context?

I'm trying to display it on a custom admin page, rendering the sameish thing as this story:

<SlotFillProvider>
    <DropZoneProvider>
        <BlockEditorProvider>
            <WritingFlow>
                <ObserveTyping>
                    <BlockList />
                </ObserveTyping>
            </WritingFlow>
        </BlockEditorProvider>
    </DropZoneProvider>
</SlotFillProvider>

The editor works, but the Image block does not allow to upload media (even if I run wp_enqueue_media() before enqueing the editor script) and Classic editor block doesn't work because window.wpEditorL10n.tinymce and window.tinymce are undefined.
Which dependencies do I need to add for the editor to work fully?

strarsis · 2022-10-21T21:40:58Z

Same issue here with a FSE theme! Opening the site editor briefly shows the template parts, but then those template parts are replaced by blocks with error and this is logged:

Cannot read properties of undefined (reading 'tinymce')

Edit: This happens when the theme uses as block template or block part with HTML that has no block-specific comments. Then a TinyMCE block is used for this HTML, which currently fails to load in this specific case.

gziolo self-assigned this Oct 30, 2019

gziolo added Storybook Storybook and its stories for components [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Status] In Progress Tracking issues with work in progress labels Oct 30, 2019

gziolo force-pushed the udpdate/storybook-playground branch from 2650d14 to 426dfd1 Compare October 30, 2019 17:01

gziolo commented Oct 30, 2019

View reviewed changes

.storybook/playground/index.js Outdated Show resolved Hide resolved

gziolo commented Oct 30, 2019

View reviewed changes

.storybook/playground/index.js Outdated Show resolved Hide resolved

gziolo requested review from simison and ItsJonQ October 30, 2019 17:04

gziolo mentioned this pull request Oct 30, 2019

Storybook: Next steps for better experience when developing UI components #17973

Closed

8 tasks

gziolo force-pushed the udpdate/storybook-playground branch from ec71b63 to 1c440e1 Compare October 31, 2019 12:45

gziolo marked this pull request as ready for review October 31, 2019 12:46

gziolo requested review from ajitbohra, chrisvanpatten, jorgefilipecosta, talldan and youknowriad as code owners October 31, 2019 12:46

gziolo commented Oct 31, 2019

View reviewed changes

.storybook/webpack.config.js Outdated Show resolved Hide resolved

gziolo commented Oct 31, 2019

View reviewed changes

.travis.yml Outdated Show resolved Hide resolved

gziolo force-pushed the udpdate/storybook-playground branch from 8876623 to 7fae32c Compare October 31, 2019 13:18

gziolo mentioned this pull request Nov 2, 2019

Add a README file for storybook directory #18245

Merged

gziolo force-pushed the udpdate/storybook-playground branch from 37aee14 to 2a40755 Compare November 4, 2019 12:17

youknowriad approved these changes Nov 12, 2019

View reviewed changes

gziolo and others added 10 commits November 12, 2019 10:54

Storybook: Try to integrate the playground into Storybook

e9dcc34

Load Noto font in storybook via preview-head.html

6c3b742

Add scss support for Storybook!

185065c

Remove unused parcel-bundler

5187d04

Update mentions of the playground with Storybook

4437070

Fix issues found during self-review

c4466cd

Add back playground:* aliasing storybook:* for the time being

854d0fe

Add help info for old commands

73681d5

Ensure that source for the playground can be presented in Storybook

ab0d635

Move and update the README document added for Storybook

63b48a1

Resolve all issues raised in the review

74148c6

gziolo force-pushed the udpdate/storybook-playground branch from 2a40755 to 74148c6 Compare November 12, 2019 11:07

gziolo merged commit e137ea9 into master Nov 12, 2019

gziolo deleted the udpdate/storybook-playground branch November 12, 2019 11:58

epiqueras mentioned this pull request Nov 20, 2019

Playground: Implement Hot Module Replacement. #18420

Closed

6 tasks

youknowriad added this to the Gutenberg 7.0 milestone Nov 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook: Try to integrate the playground into Storybook #18191

Storybook: Try to integrate the playground into Storybook #18191

gziolo commented Oct 30, 2019 •

edited

Loading

ItsJonQ commented Oct 30, 2019

gziolo commented Oct 30, 2019

gziolo commented Oct 30, 2019 •

edited

Loading

ItsJonQ commented Oct 30, 2019

gziolo commented Oct 31, 2019 •

edited

Loading

gziolo commented Oct 31, 2019

gziolo commented Oct 31, 2019

epiqueras commented Oct 31, 2019

gziolo commented Oct 31, 2019

gziolo commented Nov 4, 2019

gziolo commented Nov 5, 2019

ItsJonQ commented Nov 7, 2019

gziolo commented Nov 8, 2019

youknowriad left a comment

youknowriad Nov 12, 2019

gziolo Nov 12, 2019

youknowriad Nov 12, 2019

gziolo Nov 12, 2019

gziolo commented Nov 12, 2019

youknowriad commented Nov 12, 2019

ktmn commented Nov 14, 2019

strarsis commented Oct 21, 2022 •

edited

Loading

Storybook: Try to integrate the playground into Storybook #18191

Storybook: Try to integrate the playground into Storybook #18191

Conversation

gziolo commented Oct 30, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Known issues

Checklist:

ItsJonQ commented Oct 30, 2019

gziolo commented Oct 30, 2019

gziolo commented Oct 30, 2019 • edited Loading

ItsJonQ commented Oct 30, 2019

gziolo commented Oct 31, 2019 • edited Loading

gziolo commented Oct 31, 2019

gziolo commented Oct 31, 2019

epiqueras commented Oct 31, 2019

gziolo commented Oct 31, 2019

gziolo commented Nov 4, 2019

gziolo commented Nov 5, 2019

ItsJonQ commented Nov 7, 2019

gziolo commented Nov 8, 2019

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad Nov 12, 2019

Choose a reason for hiding this comment

gziolo Nov 12, 2019

Choose a reason for hiding this comment

youknowriad Nov 12, 2019

Choose a reason for hiding this comment

gziolo Nov 12, 2019

Choose a reason for hiding this comment

gziolo commented Nov 12, 2019

youknowriad commented Nov 12, 2019

ktmn commented Nov 14, 2019

strarsis commented Oct 21, 2022 • edited Loading

gziolo commented Oct 30, 2019 •

edited

Loading

gziolo commented Oct 30, 2019 •

edited

Loading

gziolo commented Oct 31, 2019 •

edited

Loading

strarsis commented Oct 21, 2022 •

edited

Loading