diff --git a/components/autocomplete/test/index.js b/components/autocomplete/test/index.js index 8cab1f66b8403..a693dacfb1dd1 100644 --- a/components/autocomplete/test/index.js +++ b/components/autocomplete/test/index.js @@ -2,12 +2,12 @@ * External dependencies */ import { mount } from 'enzyme'; -import { Component } from '../../../element'; import { noop } from 'lodash'; /** * WordPress dependencies */ +import { Component } from '@wordpress/element'; import { keycodes } from '@wordpress/utils'; /** diff --git a/components/higher-order/with-focus-return/test/index.js b/components/higher-order/with-focus-return/test/index.js index 3226dc65e676c..de5e9df0f4047 100644 --- a/components/higher-order/with-focus-return/test/index.js +++ b/components/higher-order/with-focus-return/test/index.js @@ -2,7 +2,11 @@ * External dependencies */ import { shallow, mount } from 'enzyme'; -import { Component } from '../../../../element'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; /** * Internal dependencies diff --git a/data/README.md b/data/README.md index d1b44f20fc050..d568aa53b425e 100644 --- a/data/README.md +++ b/data/README.md @@ -174,7 +174,7 @@ registerStore( 'my-shop', { ### Higher-Order Components -A higher-order component is a function which accepts a [component](https://github.com/WordPress/gutenberg/tree/master/element) and returns a new, enhanced component. A stateful user interface should respond to changes in the underlying state and updates its displayed element accordingly. WordPress uses higher-order components both as a means to separate the purely visual aspects of an interface from its data backing, and to ensure that the data is kept in-sync with the stores. +A higher-order component is a function which accepts a [component](https://github.com/WordPress/gutenberg/tree/master/packages/element) and returns a new, enhanced component. A stateful user interface should respond to changes in the underlying state and updates its displayed element accordingly. WordPress uses higher-order components both as a means to separate the purely visual aspects of an interface from its data backing, and to ensure that the data is kept in-sync with the stores. #### `withSelect( mapSelectToProps: Function ): Function` @@ -239,7 +239,7 @@ const SaleButton = withDispatch( ( dispatch, ownProps ) => { The data module shares many of the same [core principles](https://redux.js.org/introduction/three-principles) and [API method naming](https://redux.js.org/api-reference) of [Redux](https://redux.js.org/). In fact, it is implemented atop Redux. Where it differs is in establishing a modularization pattern for creating separate but interdependent stores, and in codifying conventions such as selector functions as the primary entry point for data access. -The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/master/element#compose)). +The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/master/packages/element#compose)). Specific implementation differences from Redux and React Redux: diff --git a/docs/block-api/block-edit-save.md b/docs/block-api/block-edit-save.md index cb3c3780c2b41..3c7d74a49ac87 100644 --- a/docs/block-api/block-edit-save.md +++ b/docs/block-api/block-edit-save.md @@ -101,7 +101,7 @@ save() { ``` {% end %} -For most blocks, the return value of `save` should be an [instance of WordPress Element](https://github.com/WordPress/gutenberg/blob/master/element/README.md) representing how the block is to appear on the front of the site. +For most blocks, the return value of `save` should be an [instance of WordPress Element](https://github.com/WordPress/gutenberg/blob/master/packages/element/README.md) representing how the block is to appear on the front of the site. _Note:_ While it is possible to return a string value from `save`, it _will be escaped_. If the string includes HTML markup, the markup will be shown on the front of the site verbatim, not as the equivalent HTML node content. If you must return raw HTML from `save`, use `wp.element.RawHTML`. As the name implies, this is prone to [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) and therefore is discouraged in favor of a WordPress Element hierarchy whenever possible. diff --git a/docs/blocks/generate-blocks-with-wp-cli.md b/docs/blocks/generate-blocks-with-wp-cli.md index ec74f38098e19..4c2860baae8c1 100644 --- a/docs/blocks/generate-blocks-with-wp-cli.md +++ b/docs/blocks/generate-blocks-with-wp-cli.md @@ -118,7 +118,7 @@ add_action( 'init', 'movie_block_init' ); var registerBlockType = wp.blocks.registerBlockType; /** * Returns a new element of given type. Element is an abstraction layer atop React. - * @see https://github.com/WordPress/gutenberg/tree/master/element#element + * @see https://github.com/WordPress/gutenberg/tree/master/packages/element#element */ var el = wp.element.createElement; /** diff --git a/docs/blocks/writing-your-first-block-type.md b/docs/blocks/writing-your-first-block-type.md index 33d83eea0ab79..7fd12f26b23c2 100644 --- a/docs/blocks/writing-your-first-block-type.md +++ b/docs/blocks/writing-your-first-block-type.md @@ -28,7 +28,7 @@ add_action( 'init', 'gutenberg_boilerplate_block' ); Note the two script dependencies: - __`wp-blocks`__ includes block type registration and related functions -- __`wp-element`__ includes the [WordPress Element abstraction](https://github.com/WordPress/gutenberg/tree/master/element) for describing the structure of your blocks +- __`wp-element`__ includes the [WordPress Element abstraction](https://github.com/WordPress/gutenberg/tree/master/packages/element) for describing the structure of your blocks ## Registering the Block @@ -80,7 +80,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-01', { ``` {% end %} -Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide your own by assigning the value of `icon` as a [WordPress Element](https://github.com/WordPress/gutenberg/tree/master/element) element or component. +Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide your own by assigning the value of `icon` as a [WordPress Element](https://github.com/WordPress/gutenberg/tree/master/packages/element) element or component. A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name. diff --git a/package-lock.json b/package-lock.json index 6130fa6d9d087..d143d63a1eb1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -352,9 +352,9 @@ } }, "@wordpress/is-shallow-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.0.1.tgz", - "integrity": "sha512-HRvGJHTA5SGONxHfnK4xm66PXnDE7qp/J9eu/WA1cyNauCtRzdS1BTELXn3ONnh73xF2CV/ukLakIlIk6eFA1Q==" + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.0.2.tgz", + "integrity": "sha512-xDw008Z8oILY/a0zwysEH9oknO6FCfMRVQYFqud5BiUGugxB78kE47KcOVqLkC5cm9wbvbYgly5w7DMwFLv5uw==" }, "@wordpress/jest-console": { "version": "1.0.5", diff --git a/package.json b/package.json index 11f98e15beb31..815b5b74cf127 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@wordpress/dom-ready": "1.0.4", "@wordpress/hooks": "1.1.6", "@wordpress/i18n": "1.1.0", - "@wordpress/is-shallow-equal": "1.0.1", + "@wordpress/is-shallow-equal": "1.0.2", "@wordpress/url": "1.1.0", "@wordpress/wordcount": "1.0.2", "classnames": "2.2.5", diff --git a/element/README.md b/packages/element/README.md similarity index 94% rename from element/README.md rename to packages/element/README.md index bb58dd6b291d5..98069cb194b12 100644 --- a/element/README.md +++ b/packages/element/README.md @@ -1,5 +1,4 @@ -Element -======= +# @wordpress/element Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/). @@ -14,7 +13,15 @@ On the `wp.element` global object, you will find the following, ordered roughly - [`createElement`](https://reactjs.org/docs/react-api.html#createelement) - [`render`](https://reactjs.org/docs/react-dom.html#render) -## Example +## Installation + +Install the module + +```bash +npm install @wordpress/element@next --save +``` + +## Usage Let's render a customized greeting into an empty element: @@ -62,3 +69,5 @@ If you've configured [Babel](http://babeljs.io/) for your project, you can opt i ] } ``` + +

Code is Poetry.

diff --git a/packages/element/package.json b/packages/element/package.json new file mode 100644 index 0000000000000..297f9646365e5 --- /dev/null +++ b/packages/element/package.json @@ -0,0 +1,30 @@ +{ + "name": "@wordpress/element", + "version": "0.0.1", + "description": "Element React module for WordPress", + "author": "WordPress", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "element", + "react" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/element/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "main": "src/index.js", + "dependencies": { + "@wordpress/is-shallow-equal": "1.0.2", + "lodash": "4.17.5", + "react": "16.3.2", + "react-dom": "16.3.2" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/element/index.js b/packages/element/src/index.js similarity index 100% rename from element/index.js rename to packages/element/src/index.js diff --git a/element/index.native.js b/packages/element/src/index.native.js similarity index 100% rename from element/index.native.js rename to packages/element/src/index.native.js diff --git a/element/serialize.js b/packages/element/src/serialize.js similarity index 100% rename from element/serialize.js rename to packages/element/src/serialize.js diff --git a/element/test/index.js b/packages/element/src/test/index.js similarity index 100% rename from element/test/index.js rename to packages/element/src/test/index.js diff --git a/element/test/serialize.js b/packages/element/src/test/serialize.js similarity index 100% rename from element/test/serialize.js rename to packages/element/src/test/serialize.js diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json index 80af926e9903a..a615b0a2b37af 100644 --- a/test/unit/jest.config.json +++ b/test/unit/jest.config.json @@ -1,12 +1,12 @@ { "rootDir": "../../", "collectCoverageFrom": [ - "(blocks|components|editor|element|data|utils|edit-post|viewport|plugins|core-data|core-blocks)/**/*.js", + "(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)/**/*.js", "packages/**/*.js" ], "moduleNameMapper": { - "@wordpress\\/(blocks|components|editor|element|data|utils|edit-post|viewport|plugins|core-data|core-blocks)": "$1", - "@wordpress\\/(date)": "packages/$1/src" + "@wordpress\\/(blocks|components|editor|data|utils|edit-post|viewport|plugins|core-data|core-blocks)": "$1", + "@wordpress\\/(date|element)": "packages/$1/src" }, "preset": "@wordpress/jest-preset-default", "setupFiles": [ diff --git a/test/unit/setup-wp-aliases.js b/test/unit/setup-wp-aliases.js index cfbe913e57eed..31f22e1f5cb8d 100644 --- a/test/unit/setup-wp-aliases.js +++ b/test/unit/setup-wp-aliases.js @@ -6,11 +6,9 @@ global.wp = { }, }; -[ - 'element', - 'blocks', -].forEach( ( entryPointName ) => { - Object.defineProperty( global.wp, entryPointName, { - get: () => require( entryPointName ), - } ); +Object.defineProperty( global.wp, 'element', { + get: () => require( 'packages/element' ), +} ); +Object.defineProperty( global.wp, 'blocks', { + get: () => require( 'blocks' ), } ); diff --git a/webpack.config.js b/webpack.config.js index 67eef1d52c54a..7670b9981a109 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -116,7 +116,6 @@ const entryPointNames = [ 'blocks', 'components', 'editor', - 'element', 'utils', 'data', 'viewport', @@ -128,6 +127,7 @@ const entryPointNames = [ const gutenbergPackages = [ 'date', + 'element', ]; const wordPressPackages = [