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.

Sign up for GitHub

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

Try implementing a built-in Gutenberg playground #14497

Merged
merged 9 commits into from
Mar 25, 2019
Merged

Try implementing a built-in Gutenberg playground #14497

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c31b6fb
Try implementing a built-in Gutenberg playground
youknowriad Mar 18, 2019
609aba2
Fix basic editor styling
youknowriad Mar 19, 2019
59d079b
Add google font
youknowriad Mar 21, 2019
ecaaf8c
Fix babel config
youknowriad Mar 21, 2019
8d965d2
Use the reset mixin
youknowriad Mar 21, 2019
c42945c
Tweak the playground design
youknowriad Mar 21, 2019
696a229
Documenting the Playground on the Contributing docs
youknowriad Mar 21, 2019
2c16a8a
Fix typo
youknowriad Mar 25, 2019
2be9b5b
Move .babelrc to the playground folder
youknowriad Mar 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move this config inside playground folder and maybe remove babel.config.js which is something wp-scripts build/start will use in the same form regardless?

Copy link
Member

@gziolo gziolo Mar 25, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no plan of supporting babel.config.js with Parcel:
parcel-bundler/parcel#2110 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved :)

"presets": ["@wordpress/babel-preset-default"],
"plugins": [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured out why we need it in the first place:

https://github.com/parcel-bundler/parcel/blob/060db2e2c56f08e223e9a9075035f0998e249763/packages/core/parcel-bundler/src/transforms/babel/jsx.js#L40-L49

Parcel tries to be smart and overrides our configuration.

[ "@babel/plugin-transform-react-jsx", {
"pragma": "createElement"
} ]
]
}
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,6 @@ phpcs.xml
yarn.lock
docker-compose.override.yml
/wordpress

playground/dist
.cache
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be in .eslintignore ? Ignored tests (#14997) ? I worry its presence could add some significant folder-scan overhead for some common tasks.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a config for .eslintignore to automatically include .gitignore?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a config for .eslintignore to automatically include .gitignore?

Not that I'm aware of, though I do sympathize with the goal to try to consolidate how we consider these "ignored" files.

Related: eslint/eslint#5848

6 changes: 6 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,12 @@ You can pick among all the <a href="https://github.com/WordPress/gutenberg/issue

The workflow is documented in greater detail in the [repository management](/docs/contributors/repository-management.md) document.

## Playground

The Gutenberg repository also includes a static Gutenberg playground that allows testing and developing in a WordPress-agnostic context. This is very helpful for developing reusable components and trying generic JavaScript modules without any backend dependency.

You can launch the playground by running `npm run playground:start` locally. The playground should be available on [http://localhost:1234](http://localhost:1234).

## Testing

Gutenberg contains both PHP and JavaScript code and encourages testing and code style linting for both. It also incorporates end-to-end testing using [Google Puppeteer](https://developers.google.com/web/tools/puppeteer/). You can find out more details in [Testing Overview document](/docs/contributors/testing-overview.md).
Expand Down
Loading