From c77cf7440b1291bdfbb1b6a7572050a0f4e792b5 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 20 Nov 2018 16:05:48 -0500 Subject: [PATCH 01/49] Reorganise documentation (#11817) * Initial reworking; props @0aveRyan * Fixes for the manifest/generators * A few missed items and small formatting tweaks * Simplify/flatten the directory structure * Cheat my way around a merge conflict pt1 * fight the git powers * JSON version of TOC instead of YML * Ensure all files have good titles * Add a generator script and re-generate the root-manifest * Update docs/designers-developers/designers/block-design.md Co-Authored-By: chrisvanpatten * Update docs/designers-developers/key-concepts.md Co-Authored-By: chrisvanpatten * Get a handful of internal link references fixed * Another batch of internal links * Update docs/tool/manifest.js Co-Authored-By: chrisvanpatten * Additional broken internal link fixes * A few more links * Revert use of lt/gt symbols in link * Fix more broken internal links * Remove docs generator * Broken manifest.json --- .../coding-guidelines.md | 0 .../{reference => contributors}/copy-guide.md | 0 docs/{ => contributors}/design.md | 0 docs/{ => contributors}/grammar.md | 0 docs/{reference => contributors}/history.md | 0 docs/{ => contributors}/outreach.md | 0 docs/{ => contributors}/outreach/articles.md | 0 docs/{ => contributors}/outreach/meetups.md | 0 docs/{ => contributors}/outreach/resources.md | 0 docs/{ => contributors}/outreach/talks.md | 0 docs/{ => contributors}/principles.md | 0 .../principles/the-block.md | 0 docs/contributors/readme.md | 0 docs/{ => contributors}/reference.md | 8 +- .../release-screenshot.png | Bin docs/{reference => contributors}/release.md | 0 .../repository-management.md | 0 docs/{reference => contributors}/scripts.md | 0 .../testing-overview.md | 0 docs/data/README.md | 10 - docs/designers-developers/designers/README.md | 3 + .../assets}/advanced-settings-do.png | Bin .../designers/assets}/block-controls-do.png | Bin .../designers/assets}/block-controls-dont.png | Bin .../assets}/block-descriptions-do.png | Bin .../assets}/block-descriptions-dont.png | Bin .../designers/assets}/blocks-do.png | Bin .../designers/assets}/blocks-dont.png | Bin .../designers/assets}/placeholder-do.png | Bin .../designers/assets}/placeholder-dont.png | Bin .../designers}/block-design.md | 22 +- .../designers}/design-patterns.md | 0 .../designers}/design-resources.md | 0 .../designers-developers/developers/README.md | 45 ++ .../backwards-compatibility/README.md | 1 + .../backwards-compatibility/deprecations.md} | 2 + .../backwards-compatibility}/meta-box.md | 0 .../developers/block-api/README.md | 11 + .../block-api/block-annotations.md} | 0 .../developers/block-api/block-attributes.md} | 0 .../block-api/block-deprecation.md} | 6 +- .../developers}/block-api/block-edit-save.md | 6 +- .../block-api/block-registration.md} | 12 +- .../developers/block-api/block-templates.md} | 0 .../developers/data/README.md | 10 + .../developers}/data/data-core-annotations.md | 0 .../developers}/data/data-core-blocks.md | 0 .../developers}/data/data-core-edit-post.md | 0 .../developers}/data/data-core-editor.md | 0 .../developers}/data/data-core-notices.md | 0 .../developers}/data/data-core-nux.md | 0 .../developers}/data/data-core-viewport.md | 0 .../developers}/data/data-core.md | 0 .../developers/filters/README.md | 7 + .../filters/autocomplete-filters.md} | 5 +- .../developers/filters/block-filters.md} | 9 +- .../developers/filters/editor-filters.md | 18 + .../developers/filters/parser-filters.md} | 2 +- .../developers/internationalization.md | 33 ++ .../developers}/packages.md | 4 +- .../developers/themes/README.md | 5 + .../developers/themes}/theme-support.md | 25 +- .../applying-styles-with-stylesheets.md | 0 .../block-controls-toolbars-and-inspector.md | 0 .../creating-dynamic-blocks.md | 0 .../generate-blocks-with-wp-cli.md | 0 .../tutorials/block-tutorial}/inspector.png | Bin .../tutorials/block-tutorial/intro.md} | 0 ...roducing-attributes-and-editable-fields.md | 2 +- .../writing-your-first-block-type.md | 0 .../faq.md | 16 +- .../glossary.md | 32 +- .../key-concepts.md} | 94 ++-- docs/designers-developers/readme.md | 11 + docs/extensibility.md | 82 ---- docs/extensibility/extending-editor.md | 21 - docs/manifest.json | 308 +++++-------- docs/readme.md | 22 +- docs/root-manifest.json | 428 +++++++----------- docs/toc.json | 38 ++ docs/tool/config.js | 2 +- docs/tool/generator.js | 2 +- docs/tool/manifest.js | 6 +- docs/users/readme.md | 0 84 files changed, 634 insertions(+), 674 deletions(-) rename docs/{reference => contributors}/coding-guidelines.md (100%) rename docs/{reference => contributors}/copy-guide.md (100%) rename docs/{ => contributors}/design.md (100%) rename docs/{ => contributors}/grammar.md (100%) rename docs/{reference => contributors}/history.md (100%) rename docs/{ => contributors}/outreach.md (100%) rename docs/{ => contributors}/outreach/articles.md (100%) rename docs/{ => contributors}/outreach/meetups.md (100%) rename docs/{ => contributors}/outreach/resources.md (100%) rename docs/{ => contributors}/outreach/talks.md (100%) rename docs/{ => contributors}/principles.md (100%) rename docs/{ => contributors}/principles/the-block.md (100%) create mode 100644 docs/contributors/readme.md rename docs/{ => contributors}/reference.md (67%) rename docs/{reference => contributors}/release-screenshot.png (100%) rename docs/{reference => contributors}/release.md (100%) rename docs/{reference => contributors}/repository-management.md (100%) rename docs/{reference => contributors}/scripts.md (100%) rename docs/{reference => contributors}/testing-overview.md (100%) delete mode 100644 docs/data/README.md create mode 100644 docs/designers-developers/designers/README.md rename docs/{design => designers-developers/designers/assets}/advanced-settings-do.png (100%) rename docs/{design => designers-developers/designers/assets}/block-controls-do.png (100%) rename docs/{design => designers-developers/designers/assets}/block-controls-dont.png (100%) rename docs/{design => designers-developers/designers/assets}/block-descriptions-do.png (100%) rename docs/{design => designers-developers/designers/assets}/block-descriptions-dont.png (100%) rename docs/{design => designers-developers/designers/assets}/blocks-do.png (100%) rename docs/{design => designers-developers/designers/assets}/blocks-dont.png (100%) rename docs/{design => designers-developers/designers/assets}/placeholder-do.png (100%) rename docs/{design => designers-developers/designers/assets}/placeholder-dont.png (100%) rename docs/{design => designers-developers/designers}/block-design.md (91%) rename docs/{design => designers-developers/designers}/design-patterns.md (100%) rename docs/{design => designers-developers/designers}/design-resources.md (100%) create mode 100644 docs/designers-developers/developers/README.md create mode 100644 docs/designers-developers/developers/backwards-compatibility/README.md rename docs/{reference/deprecated.md => designers-developers/developers/backwards-compatibility/deprecations.md} (99%) rename docs/{extensibility => designers-developers/developers/backwards-compatibility}/meta-box.md (100%) create mode 100644 docs/designers-developers/developers/block-api/README.md rename docs/{extensibility/annotations.md => designers-developers/developers/block-api/block-annotations.md} (100%) rename docs/{block-api/attributes.md => designers-developers/developers/block-api/block-attributes.md} (100%) rename docs/{block-api/deprecated-blocks.md => designers-developers/developers/block-api/block-deprecation.md} (92%) rename docs/{ => designers-developers/developers}/block-api/block-edit-save.md (87%) rename docs/{block-api.md => designers-developers/developers/block-api/block-registration.md} (96%) rename docs/{templates.md => designers-developers/developers/block-api/block-templates.md} (100%) create mode 100644 docs/designers-developers/developers/data/README.md rename docs/{ => designers-developers/developers}/data/data-core-annotations.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-blocks.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-edit-post.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-editor.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-notices.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-nux.md (100%) rename docs/{ => designers-developers/developers}/data/data-core-viewport.md (100%) rename docs/{ => designers-developers/developers}/data/data-core.md (100%) create mode 100644 docs/designers-developers/developers/filters/README.md rename docs/{extensibility/autocomplete.md => designers-developers/developers/filters/autocomplete-filters.md} (93%) rename docs/{extensibility/extending-blocks.md => designers-developers/developers/filters/block-filters.md} (88%) create mode 100644 docs/designers-developers/developers/filters/editor-filters.md rename docs/{extensibility/parser.md => designers-developers/developers/filters/parser-filters.md} (98%) create mode 100644 docs/designers-developers/developers/internationalization.md rename docs/{ => designers-developers/developers}/packages.md (73%) create mode 100644 docs/designers-developers/developers/themes/README.md rename docs/{extensibility => designers-developers/developers/themes}/theme-support.md (88%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/applying-styles-with-stylesheets.md (100%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/block-controls-toolbars-and-inspector.md (100%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/creating-dynamic-blocks.md (100%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/generate-blocks-with-wp-cli.md (100%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/inspector.png (100%) rename docs/{blocks.md => designers-developers/developers/tutorials/block-tutorial/intro.md} (100%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/introducing-attributes-and-editable-fields.md (96%) rename docs/{blocks => designers-developers/developers/tutorials/block-tutorial}/writing-your-first-block-type.md (100%) rename docs/{reference => designers-developers}/faq.md (97%) rename docs/{reference => designers-developers}/glossary.md (65%) rename docs/{language.md => designers-developers/key-concepts.md} (75%) create mode 100644 docs/designers-developers/readme.md delete mode 100644 docs/extensibility.md delete mode 100644 docs/extensibility/extending-editor.md create mode 100644 docs/toc.json create mode 100644 docs/users/readme.md diff --git a/docs/reference/coding-guidelines.md b/docs/contributors/coding-guidelines.md similarity index 100% rename from docs/reference/coding-guidelines.md rename to docs/contributors/coding-guidelines.md diff --git a/docs/reference/copy-guide.md b/docs/contributors/copy-guide.md similarity index 100% rename from docs/reference/copy-guide.md rename to docs/contributors/copy-guide.md diff --git a/docs/design.md b/docs/contributors/design.md similarity index 100% rename from docs/design.md rename to docs/contributors/design.md diff --git a/docs/grammar.md b/docs/contributors/grammar.md similarity index 100% rename from docs/grammar.md rename to docs/contributors/grammar.md diff --git a/docs/reference/history.md b/docs/contributors/history.md similarity index 100% rename from docs/reference/history.md rename to docs/contributors/history.md diff --git a/docs/outreach.md b/docs/contributors/outreach.md similarity index 100% rename from docs/outreach.md rename to docs/contributors/outreach.md diff --git a/docs/outreach/articles.md b/docs/contributors/outreach/articles.md similarity index 100% rename from docs/outreach/articles.md rename to docs/contributors/outreach/articles.md diff --git a/docs/outreach/meetups.md b/docs/contributors/outreach/meetups.md similarity index 100% rename from docs/outreach/meetups.md rename to docs/contributors/outreach/meetups.md diff --git a/docs/outreach/resources.md b/docs/contributors/outreach/resources.md similarity index 100% rename from docs/outreach/resources.md rename to docs/contributors/outreach/resources.md diff --git a/docs/outreach/talks.md b/docs/contributors/outreach/talks.md similarity index 100% rename from docs/outreach/talks.md rename to docs/contributors/outreach/talks.md diff --git a/docs/principles.md b/docs/contributors/principles.md similarity index 100% rename from docs/principles.md rename to docs/contributors/principles.md diff --git a/docs/principles/the-block.md b/docs/contributors/principles/the-block.md similarity index 100% rename from docs/principles/the-block.md rename to docs/contributors/principles/the-block.md diff --git a/docs/contributors/readme.md b/docs/contributors/readme.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/docs/reference.md b/docs/contributors/reference.md similarity index 67% rename from docs/reference.md rename to docs/contributors/reference.md index 78ba03435973b2..2a4714d5e75a23 100644 --- a/docs/reference.md +++ b/docs/contributors/reference.md @@ -1,9 +1,9 @@ # Reference -- [Glossary](../docs/reference/glossary.md) -- [Coding Guidelines](../docs/reference/coding-guidelines.md) -- [Testing Overview](../docs/reference/testing-overview.md) -- [Frequently Asked Questions](../docs/reference/faq.md) +- [Glossary](../../docs/designers-developers/glossary.md) +- [Coding Guidelines](../../docs/contributors/coding-guidelines.md) +- [Testing Overview](../../docs/contributors/testing-overview.md) +- [Frequently Asked Questions](../../docs/designers-developers/faq.md) ## Logo Gutenberg Logo diff --git a/docs/reference/release-screenshot.png b/docs/contributors/release-screenshot.png similarity index 100% rename from docs/reference/release-screenshot.png rename to docs/contributors/release-screenshot.png diff --git a/docs/reference/release.md b/docs/contributors/release.md similarity index 100% rename from docs/reference/release.md rename to docs/contributors/release.md diff --git a/docs/reference/repository-management.md b/docs/contributors/repository-management.md similarity index 100% rename from docs/reference/repository-management.md rename to docs/contributors/repository-management.md diff --git a/docs/reference/scripts.md b/docs/contributors/scripts.md similarity index 100% rename from docs/reference/scripts.md rename to docs/contributors/scripts.md diff --git a/docs/reference/testing-overview.md b/docs/contributors/testing-overview.md similarity index 100% rename from docs/reference/testing-overview.md rename to docs/contributors/testing-overview.md diff --git a/docs/data/README.md b/docs/data/README.md deleted file mode 100644 index ac44230651976e..00000000000000 --- a/docs/data/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# Data Module Reference - - - [**core**: WordPress Core Data](../../docs/data/data-core.md) - - [**core/annotations**: Annotations](../../docs/data/data-core-annotations.md) - - [**core/blocks**: Block Types Data](../../docs/data/data-core-blocks.md) - - [**core/editor**: The Editor’s Data](../../docs/data/data-core-editor.md) - - [**core/edit-post**: The Editor’s UI Data](../../docs/data/data-core-edit-post.md) - - [**core/notices**: Notices Data](../../docs/data/data-core-notices.md) - - [**core/nux**: The NUX (New User Experience) Data](../../docs/data/data-core-nux.md) - - [**core/viewport**: The Viewport Data](../../docs/data/data-core-viewport.md) \ No newline at end of file diff --git a/docs/designers-developers/designers/README.md b/docs/designers-developers/designers/README.md new file mode 100644 index 00000000000000..362cf794885f20 --- /dev/null +++ b/docs/designers-developers/designers/README.md @@ -0,0 +1,3 @@ +# Designer Documentation + +For those designing blocks and other Block Editor integrations, this documentation will provide resources for creating beautiful and intuitive layouts. diff --git a/docs/design/advanced-settings-do.png b/docs/designers-developers/designers/assets/advanced-settings-do.png similarity index 100% rename from docs/design/advanced-settings-do.png rename to docs/designers-developers/designers/assets/advanced-settings-do.png diff --git a/docs/design/block-controls-do.png b/docs/designers-developers/designers/assets/block-controls-do.png similarity index 100% rename from docs/design/block-controls-do.png rename to docs/designers-developers/designers/assets/block-controls-do.png diff --git a/docs/design/block-controls-dont.png b/docs/designers-developers/designers/assets/block-controls-dont.png similarity index 100% rename from docs/design/block-controls-dont.png rename to docs/designers-developers/designers/assets/block-controls-dont.png diff --git a/docs/design/block-descriptions-do.png b/docs/designers-developers/designers/assets/block-descriptions-do.png similarity index 100% rename from docs/design/block-descriptions-do.png rename to docs/designers-developers/designers/assets/block-descriptions-do.png diff --git a/docs/design/block-descriptions-dont.png b/docs/designers-developers/designers/assets/block-descriptions-dont.png similarity index 100% rename from docs/design/block-descriptions-dont.png rename to docs/designers-developers/designers/assets/block-descriptions-dont.png diff --git a/docs/design/blocks-do.png b/docs/designers-developers/designers/assets/blocks-do.png similarity index 100% rename from docs/design/blocks-do.png rename to docs/designers-developers/designers/assets/blocks-do.png diff --git a/docs/design/blocks-dont.png b/docs/designers-developers/designers/assets/blocks-dont.png similarity index 100% rename from docs/design/blocks-dont.png rename to docs/designers-developers/designers/assets/blocks-dont.png diff --git a/docs/design/placeholder-do.png b/docs/designers-developers/designers/assets/placeholder-do.png similarity index 100% rename from docs/design/placeholder-do.png rename to docs/designers-developers/designers/assets/placeholder-do.png diff --git a/docs/design/placeholder-dont.png b/docs/designers-developers/designers/assets/placeholder-dont.png similarity index 100% rename from docs/design/placeholder-dont.png rename to docs/designers-developers/designers/assets/placeholder-dont.png diff --git a/docs/design/block-design.md b/docs/designers-developers/designers/block-design.md similarity index 91% rename from docs/design/block-design.md rename to docs/designers-developers/designers/block-design.md index f73b61a72498e8..ae6abaf4c8a37f 100644 --- a/docs/design/block-design.md +++ b/docs/designers-developers/designers/block-design.md @@ -27,13 +27,11 @@ A block should have a straightforward, short name so users can easily find it in Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://material.io/tools/icons/). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration. -![A screenshot of the Block Library with concise block names](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/blocks-do.png) - +![A screenshot of the Block Library with concise block names](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/blocks-do.png) **Do:** Use concise block names. -![A screenshot of the Block Library with long, multi-line block names](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/blocks-dont.png) - +![A screenshot of the Block Library with long, multi-line block names](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/blocks-dont.png) **Don't:** Avoid long, multi-line block names. @@ -41,13 +39,11 @@ Avoid long, multi-line block names. Every block should include a description in the “Block” tab of the Settings sidebar. This description should explain your block's function clearly. Keep it to a single sentence. -![A screenshot of a short block description](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/block-descriptions-do.png) - +![A screenshot of a short block description](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/block-descriptions-do.png) **Do:** Use a short, simple, block description. -![A screenshot of a long block description that includes branding](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/block-descriptions-dont.png) - +![A screenshot of a long block description that includes branding](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/block-descriptions-dont.png) **Don't:** Avoid long descriptions and branding. @@ -55,11 +51,11 @@ Avoid long descriptions and branding. If your block requires a user to configure some options before you can display it, you should provide an instructive placeholder state. -![A screenshot of the Gallery block's placeholder](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/placeholder-do.png) +![A screenshot of the Gallery block's placeholder](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/placeholder-do.png) **Do:** Provide an instructive placeholder state. -![An example Gallery block placeholder but with intense, distracting colors and no instructions](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/placeholder-dont.png) +![An example Gallery block placeholder but with intense, distracting colors and no instructions](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/placeholder-dont.png) **Don't:** Avoid branding and relying on the title alone to convey instructions. @@ -69,11 +65,11 @@ When unselected, your block should preview its content as closely to the front-e When selected, your block may surface additional options like input fields or buttons to configure the block directly, especially when they are necessary for basic operation. -![A Google Maps block with inline, always-accessible controls required for the block to function](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/block-controls-do.png) +![A Google Maps block with inline, always-accessible controls required for the block to function](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/block-controls-do.png) **Do:** For controls that are essential the the operation of the block, provide them directly in inside the block edit view. -![A Google Maps block with essential controls moved to the sidebar where they can be contextually hidden](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/block-controls-dont.png) +![A Google Maps block with essential controls moved to the sidebar where they can be contextually hidden](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/block-controls-dont.png) **Don't:** Do not put controls that are essential to the block in the sidebar, or the block will appear non-functional to mobile users, or desktop users who have dismissed the sidebar. @@ -81,7 +77,7 @@ Do not put controls that are essential to the block in the sidebar, or the block The “Block” tab of the Settings Sidebar can contain additional block options and configuration. Keep in mind that a user can dismiss the sidebar and never use it. You should not put critical options in the Sidebar. -![A screenshot of the paragraph block's advanced settings in the sidebar](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/advanced-settings-do.png) +![A screenshot of the paragraph block's advanced settings in the sidebar](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/assets/advanced-settings-do.png) **Do:** Because the Drop Cap feature is not necessary for the basic operation of the block, you can put it ub the Block tab as optional configuration. diff --git a/docs/design/design-patterns.md b/docs/designers-developers/designers/design-patterns.md similarity index 100% rename from docs/design/design-patterns.md rename to docs/designers-developers/designers/design-patterns.md diff --git a/docs/design/design-resources.md b/docs/designers-developers/designers/design-resources.md similarity index 100% rename from docs/design/design-resources.md rename to docs/designers-developers/designers/design-resources.md diff --git a/docs/designers-developers/developers/README.md b/docs/designers-developers/developers/README.md new file mode 100644 index 00000000000000..e88dd2cd6b2ea1 --- /dev/null +++ b/docs/designers-developers/developers/README.md @@ -0,0 +1,45 @@ +# Developer Documentation + +Gutenberg is highly flexible, like most of WordPress. You can build custom blocks, modify the editor's appearance, add special plugins, and much more. + +## Creating Blocks + +Gutenberg is about blocks, and the main extensibility API of Gutenberg is the Block API. It allows you to create your own static blocks, dynamic blocks rendered on the server and also blocks capable of saving data to Post Meta for more structured content. + +If you want to learn more about block creation, the [Blocks Tutorial](../../../docs/designers-developers/developers/tutorials/block-tutorial/intro.md) is the best place to start. + +## Extending Blocks + +It is also possible to modify the behavior of existing blocks or even remove them completely using filters. + +Learn more in the [Block Filters](../../../docs/designers-developers/developers/reference/hooks/block-filters.md) section. + +## Extending the Editor UI + +Extending the editor UI can be accomplished with the `registerPlugin` API, allowing you to define all your plugin's UI elements in one place. + +Refer to the [Plugins](https://github.com/WordPress/gutenberg/blob/master/packages/plugins/README.md) and [Edit Post](https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/README.md) section for more information. + +You can also filter certain aspects of the editor; this is documented on the [Editor Filters](../../../docs/designers-developers/developers/reference/hooks/editor-filters.md) page. + +## Meta Boxes + +**Porting PHP meta boxes to blocks and Gutenberg plugins is highly encouraged!** + +Discover how [Meta Box](../../../docs/designers-developers/developers/backwards-compatibility/meta-box.md) support works in Gutenberg. + +## Theme Support + +By default, blocks provide their styles to enable basic support for blocks in themes without any change. Themes can add/override these styles, or rely on defaults. + +There are some advanced block features which require opt-in support in the theme. See [theme support](../../../docs/designers-developers/developers/themes/theme-support.md). + +## Autocomplete + +Autocompleters within blocks may be extended and overridden. Learn more about the [autocomplete](../../../docs/designers-developers/developers/filters/autocomplete-filters.md) filters. + +## Block Parsing and Serialization + +Posts in the editor move through a couple of different stages between being stored in `post_content` and appearing in the editor. Since the blocks themselves are data structures that live in memory it takes a parsing and serialization step to transform out from and into the stored format in the database. + +Customizing the parser is an advanced topic that you can learn more about in the [Extending the Parser](../../../docs/designers-developers/developers/filters/parser-filters.md) section. diff --git a/docs/designers-developers/developers/backwards-compatibility/README.md b/docs/designers-developers/developers/backwards-compatibility/README.md new file mode 100644 index 00000000000000..bd453cba0e56a4 --- /dev/null +++ b/docs/designers-developers/developers/backwards-compatibility/README.md @@ -0,0 +1 @@ +# Backwards Compatibility diff --git a/docs/reference/deprecated.md b/docs/designers-developers/developers/backwards-compatibility/deprecations.md similarity index 99% rename from docs/reference/deprecated.md rename to docs/designers-developers/developers/backwards-compatibility/deprecations.md index 13efe9f8940bdf..804f55c0a2c19a 100644 --- a/docs/reference/deprecated.md +++ b/docs/designers-developers/developers/backwards-compatibility/deprecations.md @@ -1,3 +1,5 @@ +# Deprecations + Gutenberg's deprecation policy is intended to support backwards-compatibility for releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version. ## 4.5.0 diff --git a/docs/extensibility/meta-box.md b/docs/designers-developers/developers/backwards-compatibility/meta-box.md similarity index 100% rename from docs/extensibility/meta-box.md rename to docs/designers-developers/developers/backwards-compatibility/meta-box.md diff --git a/docs/designers-developers/developers/block-api/README.md b/docs/designers-developers/developers/block-api/README.md new file mode 100644 index 00000000000000..1301449ecdf2c1 --- /dev/null +++ b/docs/designers-developers/developers/block-api/README.md @@ -0,0 +1,11 @@ +# Block API Reference + +Blocks are the fundamental element of the Gutenberg editor. They are the primary way in which plugins and themes can register their own functionality and extend the capabilities of the editor. + +## Registering a block + +All blocks must be registered before they can be used in the editor. You can learn about block registration, and the available options, in the [block registration](block-api/block-registration.md) documentation. + +## Block `edit` and `save` + +The `edit` and `save` functions define the editor interface with which a user would interact, and the markup to be serialized back when a post is saved. They are the heart of how a block operates, so they are [covered separately](block-api/block-edit-save.md). diff --git a/docs/extensibility/annotations.md b/docs/designers-developers/developers/block-api/block-annotations.md similarity index 100% rename from docs/extensibility/annotations.md rename to docs/designers-developers/developers/block-api/block-annotations.md diff --git a/docs/block-api/attributes.md b/docs/designers-developers/developers/block-api/block-attributes.md similarity index 100% rename from docs/block-api/attributes.md rename to docs/designers-developers/developers/block-api/block-attributes.md diff --git a/docs/block-api/deprecated-blocks.md b/docs/designers-developers/developers/block-api/block-deprecation.md similarity index 92% rename from docs/block-api/deprecated-blocks.md rename to docs/designers-developers/developers/block-api/block-deprecation.md index 9f1e368aed6826..3fd500c1645417 100644 --- a/docs/block-api/deprecated-blocks.md +++ b/docs/designers-developers/developers/block-api/block-deprecation.md @@ -9,9 +9,9 @@ A block can have several deprecated versions. A deprecation will be tried if a p Deprecations are defined on a block type as its `deprecated` property, an array of deprecation objects where each object takes the form: -- `attributes` (Object): The [attributes definition](../docs/block-api/attributes.md) of the deprecated form of the block. -- `support` (Object): The [supports definition](../docs/block-api.md) of the deprecated form of the block. -- `save` (Function): The [save implementation](../docs/block-api/block-edit-save.md) of the deprecated form of the block. +- `attributes` (Object): The [attributes definition](../../../../docs/designers-developers/developers/block-api/block-attributes.md) of the deprecated form of the block. +- `support` (Object): The [supports definition](../../../../docs/designers-developers/developers/block-api/block-registration.md) of the deprecated form of the block. +- `save` (Function): The [save implementation](../../../../docs/designers-developers/developers/block-api/block-edit-save.md) of the deprecated form of the block. - `migrate` (Function, Optional): A function which, given the attributes and inner blocks of the parsed block, is expected to return either the attributes compatible with the deprecated block, or a tuple array of `[ attributes, innerBlocks ]`. - `isEligible` (Function, Optional): A function which, given the attributes and inner blocks of the parsed block, returns true if the deprecation can handle the block migration. This is particularly useful in cases where a block is technically valid even once deprecated, and requires updates to its attributes or inner blocks. diff --git a/docs/block-api/block-edit-save.md b/docs/designers-developers/developers/block-api/block-edit-save.md similarity index 87% rename from docs/block-api/block-edit-save.md rename to docs/designers-developers/developers/block-api/block-edit-save.md index 4d4ee948e3ba4e..c6f4d603cc3085 100644 --- a/docs/block-api/block-edit-save.md +++ b/docs/designers-developers/developers/block-api/block-edit-save.md @@ -103,7 +103,7 @@ For most blocks, the return value of `save` should be an [instance of WordPress _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. -For [dynamic blocks](../../docs/blocks/creating-dynamic-blocks.md), the return value of `save` could either represent a cached copy of the block's content to be shown only in case the plugin implementing the block is ever disabled. Alternatively, return a `null` (empty) value to save no markup in post content for the dynamic block, instead deferring this to always be calculated when the block is shown on the front of the site. +For [dynamic blocks](../../../../docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md), the return value of `save` could either represent a cached copy of the block's content to be shown only in case the plugin implementing the block is ever disabled. Alternatively, return a `null` (empty) value to save no markup in post content for the dynamic block, instead deferring this to always be calculated when the block is shown on the front of the site. ### attributes @@ -153,10 +153,10 @@ The two most common sources of block invalidations are: Before starting to debug, be sure to familiarize yourself with the validation step described above documenting the process for detecting whether a block is invalid. A block is invalid if its regenerated markup does not match what is saved in post content, so often this can be caused by the attributes of a block being parsed incorrectly from the saved content. -If you're using [attribute sources](../../docs/block-api/attributes.md), be sure that attributes sourced from markup are saved exactly as you expect, and in the correct type (usually a `'string'` or `'number'`). +If you're using [attribute sources](../../../../docs/designers-developers/developers/block-api/block-attributes.md), be sure that attributes sourced from markup are saved exactly as you expect, and in the correct type (usually a `'string'` or `'number'`). When a block is detected as invalid, a warning will be logged into your browser's developer tools console. The warning will include specific details about the exact point at which a difference in markup occurred. Be sure to look closely at any differences in the expected and actual markups to see where problems are occurring. **I've changed my block's `save` behavior and old content now includes invalid blocks. How can I fix this?** -Refer to the guide on [Deprecated Blocks](../../docs/block-api/deprecated-blocks.md) to learn more about how to accommodate legacy content in intentional markup changes. +Refer to the guide on [Deprecated Blocks](../../../../docs/designers-developers/developers/block-api/block-deprecations.md) to learn more about how to accommodate legacy content in intentional markup changes. diff --git a/docs/block-api.md b/docs/designers-developers/developers/block-api/block-registration.md similarity index 96% rename from docs/block-api.md rename to docs/designers-developers/developers/block-api/block-registration.md index 155bd417d21a27..9738ac482353b7 100644 --- a/docs/block-api.md +++ b/docs/designers-developers/developers/block-api/block-registration.md @@ -1,8 +1,6 @@ -# Block API +# Block Registration -Blocks are the fundamental element of the Gutenberg editor. They are the primary way in which plugins and themes can register their own functionality and extend the capabilities of the editor. This document covers the main properties of block registration. - -## Register Block Type +## `register_block_type` * **Type:** `Function` @@ -466,6 +464,8 @@ parent: [ 'core/columns' ], #### supports (optional) +*Some [block supports](#supports-optional) — for example, `anchor` or `className` — apply their attributes by adding additional props on the element returned by `save`. This will work automatically for default HTML tag elements (`div`, etc). However, if the return value of your `save` is a custom component element, you will need to ensure that your custom component handles these props in order for the attributes to be persisted.* + * **Type:** `Object` Optional block extended support features. The following options are supported: @@ -548,8 +548,4 @@ By default all blocks can be converted to a reusable block. If supports reusable // Don't allow the block to be converted into a reusable block. reusable: false, ``` -## Edit and Save -The `edit` and `save` functions define the editor interface with which a user would interact, and the markup to be serialized back when a post is saved. They are the heart of how a block operates, so they are [covered separately](../docs/block-api/block-edit-save.md). - -*Some [block supports](#supports-optional) — for example, `anchor` or `className` — apply their attributes by adding additional props on the element returned by `save`. This will work automatically for default HTML tag elements (`div`, etc). However, if the return value of your `save` is a custom component element, you will need to ensure that your custom component handles these props in order for the attributes to be persisted.* diff --git a/docs/templates.md b/docs/designers-developers/developers/block-api/block-templates.md similarity index 100% rename from docs/templates.md rename to docs/designers-developers/developers/block-api/block-templates.md diff --git a/docs/designers-developers/developers/data/README.md b/docs/designers-developers/developers/data/README.md new file mode 100644 index 00000000000000..5233753c1445e5 --- /dev/null +++ b/docs/designers-developers/developers/data/README.md @@ -0,0 +1,10 @@ +# Data Module Reference + + - [**core**: WordPress Core Data](../../docs/designers-developers/developers/data/data-core.md) + - [**core/annotations**: Annotations](../../docs/designers-developers/developers/data/data-core-annotations.md) + - [**core/blocks**: Block Types Data](../../docs/designers-developers/developers/data/data-core-blocks.md) + - [**core/editor**: The Editor’s Data](../../docs/designers-developers/developers/data/data-core-editor.md) + - [**core/edit-post**: The Editor’s UI Data](../../docs/designers-developers/developers/data/data-core-edit-post.md) + - [**core/notices**: Notices Data](../../docs/designers-developers/developers/data/data-core-notices.md) + - [**core/nux**: The NUX (New User Experience) Data](../../docs/designers-developers/developers/data/data-core-nux.md) + - [**core/viewport**: The Viewport Data](../../docs/designers-developers/developers/data/data-core-viewport.md) \ No newline at end of file diff --git a/docs/data/data-core-annotations.md b/docs/designers-developers/developers/data/data-core-annotations.md similarity index 100% rename from docs/data/data-core-annotations.md rename to docs/designers-developers/developers/data/data-core-annotations.md diff --git a/docs/data/data-core-blocks.md b/docs/designers-developers/developers/data/data-core-blocks.md similarity index 100% rename from docs/data/data-core-blocks.md rename to docs/designers-developers/developers/data/data-core-blocks.md diff --git a/docs/data/data-core-edit-post.md b/docs/designers-developers/developers/data/data-core-edit-post.md similarity index 100% rename from docs/data/data-core-edit-post.md rename to docs/designers-developers/developers/data/data-core-edit-post.md diff --git a/docs/data/data-core-editor.md b/docs/designers-developers/developers/data/data-core-editor.md similarity index 100% rename from docs/data/data-core-editor.md rename to docs/designers-developers/developers/data/data-core-editor.md diff --git a/docs/data/data-core-notices.md b/docs/designers-developers/developers/data/data-core-notices.md similarity index 100% rename from docs/data/data-core-notices.md rename to docs/designers-developers/developers/data/data-core-notices.md diff --git a/docs/data/data-core-nux.md b/docs/designers-developers/developers/data/data-core-nux.md similarity index 100% rename from docs/data/data-core-nux.md rename to docs/designers-developers/developers/data/data-core-nux.md diff --git a/docs/data/data-core-viewport.md b/docs/designers-developers/developers/data/data-core-viewport.md similarity index 100% rename from docs/data/data-core-viewport.md rename to docs/designers-developers/developers/data/data-core-viewport.md diff --git a/docs/data/data-core.md b/docs/designers-developers/developers/data/data-core.md similarity index 100% rename from docs/data/data-core.md rename to docs/designers-developers/developers/data/data-core.md diff --git a/docs/designers-developers/developers/filters/README.md b/docs/designers-developers/developers/filters/README.md new file mode 100644 index 00000000000000..9715e15885935c --- /dev/null +++ b/docs/designers-developers/developers/filters/README.md @@ -0,0 +1,7 @@ +# Filter Reference + +[Hooks](https://developer.wordpress.org/plugins/hooks/) are a way for one piece of code to interact/modify another piece of code. They provide one way for plugins and themes interact with Gutenberg, but they’re also used extensively by WordPress Core itself. + +There are two types of hooks: [Actions](https://developer.wordpress.org/plugins/hooks/actions/) and [Filters](https://developer.wordpress.org/plugins/hooks/filters/). In addition to PHP actions and filters, Gutenberg also provides a mechanism for registering and executing hooks in JavaScript. This functionality is also available on npm as the [@wordpress/hooks](https://www.npmjs.com/package/@wordpress/hooks) package, for general purpose use. + +You can also learn more about both APIs: [PHP](https://codex.wordpress.org/Plugin_API/) and [JavaScript](https://github.com/WordPress/packages/tree/master/packages/hooks). diff --git a/docs/extensibility/autocomplete.md b/docs/designers-developers/developers/filters/autocomplete-filters.md similarity index 93% rename from docs/extensibility/autocomplete.md rename to docs/designers-developers/developers/filters/autocomplete-filters.md index ee1f2bc945852e..2b9d60476de80a 100644 --- a/docs/extensibility/autocomplete.md +++ b/docs/designers-developers/developers/filters/autocomplete-filters.md @@ -1,7 +1,6 @@ -Autocomplete -============ +# Autocomplete -Gutenberg provides a `editor.Autocomplete.completers` filter for extending and overriding the list of autocompleters used by blocks. +Gutenberg provides an `editor.Autocomplete.completers` filter for extending and overriding the list of autocompleters used by blocks. The `Autocomplete` component found in `@wordpress/editor` applies this filter. The `@wordpress/components` package provides the foundational `Autocomplete` component that does not apply such a filter, but blocks should generally use the component provided by `@wordpress/editor`. diff --git a/docs/extensibility/extending-blocks.md b/docs/designers-developers/developers/filters/block-filters.md similarity index 88% rename from docs/extensibility/extending-blocks.md rename to docs/designers-developers/developers/filters/block-filters.md index d00282e6b4665a..378241356578a0 100644 --- a/docs/extensibility/extending-blocks.md +++ b/docs/designers-developers/developers/filters/block-filters.md @@ -1,8 +1,4 @@ -# Extending Blocks (Experimental) - -[Hooks](https://developer.wordpress.org/plugins/hooks/) are a way for one piece of code to interact/modify another piece of code. They make up the foundation for how plugins and themes interact with Gutenberg, but they’re also used extensively by WordPress Core itself. There are two types of hooks: [Actions](https://developer.wordpress.org/plugins/hooks/actions/) and [Filters](https://developer.wordpress.org/plugins/hooks/filters/). They were initially implemented in PHP, but for the purpose of Gutenberg they were ported to JavaScript and published to npm as [@wordpress/hooks](https://www.npmjs.com/package/@wordpress/hooks) package for general purpose use. You can also learn more about both APIs: [PHP](https://codex.wordpress.org/Plugin_API/) and [JavaScript](https://github.com/WordPress/packages/tree/master/packages/hooks). - -## Modifying Blocks +# Block Filters To modify the behavior of existing blocks, Gutenberg exposes several APIs: @@ -93,7 +89,7 @@ wp.hooks.addFilter( ); ``` -_Note:_ This filter must always be run on every page load, and not in your browser's developer tools console. Otherwise, a [block validation](../../docs/block-api/block-edit-save.md#validation) error will occur the next time the post is edited. This is due to the fact that block validation occurs by verifying that the saved output matches what is stored in the post's content during editor initialization. So, if this filter does not exist when the editor loads, the block will be marked as invalid. +_Note:_ This filter must always be run on every page load, and not in your browser's developer tools console. Otherwise, a [block validation](../../../../docs/designers-developers/developers/block-api/block-edit-save.md#validation) error will occur the next time the post is edited. This is due to the fact that block validation occurs by verifying that the saved output matches what is stored in the post's content during editor initialization. So, if this filter does not exist when the editor loads, the block will be marked as invalid. #### `blocks.getBlockDefaultClassName` @@ -342,4 +338,3 @@ add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 ); ``` You can also display an icon with your block category by setting an `icon` attribute. The value can be the slug of a [WordPress Dashicon](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element. - diff --git a/docs/designers-developers/developers/filters/editor-filters.md b/docs/designers-developers/developers/filters/editor-filters.md new file mode 100644 index 00000000000000..1289b8241936ba --- /dev/null +++ b/docs/designers-developers/developers/filters/editor-filters.md @@ -0,0 +1,18 @@ +# Editor Filters (Experimental) + +To modify the behavior of the editor experience, Gutenberg exposes the following Filters: + +### `editor.PostFeaturedImage.imageSize` + +Used to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'`, and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the Classic Editor. + +_Example:_ + +```js +var withImageSize = function( size, mediaId, postId ) { + return 'large'; +}; + +wp.hooks.addFilter( 'editor.PostFeaturedImage.imageSize', 'my-plugin/with-image-size', withImageSize ); +``` + diff --git a/docs/extensibility/parser.md b/docs/designers-developers/developers/filters/parser-filters.md similarity index 98% rename from docs/extensibility/parser.md rename to docs/designers-developers/developers/filters/parser-filters.md index 7c1e5bc1be7c21..3acfb2489182db 100644 --- a/docs/extensibility/parser.md +++ b/docs/designers-developers/developers/filters/parser-filters.md @@ -1,4 +1,4 @@ -# Extending the Parser +# Parser Filters When the editor is interacting with blocks, these are stored in memory as data structures comprising a few basic properties and attributes. Upon saving a working post we serialize these data structures into a specific HTML structure and save the resultant string into the `post_content` property of the post in the WordPress database. When we load that post back into the editor we have to make the reverse transformation to build those data structures from the serialized format in HTML. diff --git a/docs/designers-developers/developers/internationalization.md b/docs/designers-developers/developers/internationalization.md new file mode 100644 index 00000000000000..602b7494880855 --- /dev/null +++ b/docs/designers-developers/developers/internationalization.md @@ -0,0 +1,33 @@ +# Internationalization + +## PHP + +WordPress has long offered a number of ways to create translatable strings in PHP. + +### Common methods + +- `__( $string_to_translate, $text_domain )` - translatable string wrapper, denoting translation namespace +- `_e( $string_to_translate, $text_domain )` - transltable string wrapper, with echo to print. +- `esc_html__( $string_to_translate, $text_domain )` - escapes and returns translation +- `esc_html_e( $string_to_translate, $text_domain )` - escapes, translates, and prints +- `_n( $singular, $plural, $number, $text_domain )` - Translatable singular/plural string, using %d to inject changing number digit. + +### More Resources + +- i18n for Developers - Covers numbers in translatable strings, best practices. +- WP-CLI can be used to generate translation files. + +## JavaScript + +Historically, `wp_localize_script()` has been used to put server-side PHP data into a properly-escaped native JavaScript object. + +The new editor introduces a new approach to translating strings for the editor through a new package called `@wordpress/i18n` and a build tool for Babel called `@wordpress/babel-plugin-makepot` to create the necessary translation file (requires use of babel to compile code to extract the i18n methods). + +The new script package is registered with WordPress as `wp-i18n` and should be declared as a dependency during `wp_register_script()` and imported as a global off the Window object as `wp.i18n`. + +### Common methods in wp.i18n (may look similar) + +- `setLocaleData( data: Object, domain: string )` - Create new Jed instance providing translation data for a domain (probably writing this to the DOM in escaped in PHP function). +- `__( stringToTranslate, textDomain )` - translatable string wrapper, denoting translation namespace +- `_n( singular, plural, number, textDomain )` - Translatable singular/plural string, using %d to inject changing number digit. +- `_x( singular, plural, number, textDomain )` - gettext equivalent for translation diff --git a/docs/packages.md b/docs/designers-developers/developers/packages.md similarity index 73% rename from docs/packages.md rename to docs/designers-developers/developers/packages.md index ac767e389d18c9..cde5bf98553aeb 100644 --- a/docs/packages.md +++ b/docs/designers-developers/developers/packages.md @@ -1,4 +1,4 @@ -# packages +# Packages Gutenberg exposes a list of JavaScript packages and tools for WordPress development. @@ -7,5 +7,3 @@ Gutenberg exposes a list of JavaScript packages and tools for WordPress developm JavaScript packages are available as a registered script in WordPress and can be accessed using the `wp` global variable. All the packages are also available on [npm](https://www.npmjs.com/org/wordpress) if you want to bundle them in your code. - -

Code is Poetry.

\ No newline at end of file diff --git a/docs/designers-developers/developers/themes/README.md b/docs/designers-developers/developers/themes/README.md new file mode 100644 index 00000000000000..e2bc67c0599eaa --- /dev/null +++ b/docs/designers-developers/developers/themes/README.md @@ -0,0 +1,5 @@ +# Theming for Gutenberg + +The new editor provides a number of options for theme designers and developers, including theme-defined color settings, font size control, and much more. + +In this section, you'll learn about the ways that themes can customise the editor. diff --git a/docs/extensibility/theme-support.md b/docs/designers-developers/developers/themes/theme-support.md similarity index 88% rename from docs/extensibility/theme-support.md rename to docs/designers-developers/developers/themes/theme-support.md index db0b129608eca2..9c9a5cc63539c5 100644 --- a/docs/extensibility/theme-support.md +++ b/docs/designers-developers/developers/themes/theme-support.md @@ -1,5 +1,15 @@ # Theme Support +The new Blocks include baseline support in all themes, enhancements to opt-in to and the ability to extend and customize. + +There are a few new concepts to consider when building themes: + +- **Editor Color Palette** - A default set of colors is provided, but themes and register their own and optionally lock users into picking from the defined palette. +- **Editor Text Size Palette** - A default set of sizes is provided, but themes and register their own and optionally lock users into picking from preselected sizes. +- **Responsive Embeds** - Themes must opt-in to responsive embeds. +- **Frontend & Editor Styles** - To get the most out of blocks, theme authors will want to make sure Core styles look good and opt-in, or write their own styles to best fit their theme. +- **Dark Mode** - If a Theme is a Dark Theme with a dark background containing light text, the theme author can opt-in to the Dark Mode. + By default, blocks provide their styles to enable basic support for blocks in themes without any change. Themes can add/override these styles, or they can provide no styles at all, and rely fully on what the blocks provide. Some advanced block features require opt-in support in the theme itself as it's difficult for the block to provide these styles, they may require some architecting of the theme itself, in order to work well. @@ -57,7 +67,7 @@ Here's the markup for an `Image` with a caption: ```html
- +
Short image caption.
``` @@ -67,7 +77,7 @@ Here's the markup for a left-floated image: ```html
- +
Short image caption.
@@ -118,13 +128,12 @@ Themes are responsible for creating the classes that apply the colors in differe } ``` -The class name is built appending 'has-', followed by the class name *using* kebab case and ending with the context name. +The class name is built appending 'has-', followed by the class name _using_ kebab case and ending with the context name. ### Block Font Sizes: Blocks may allow the user to configure the font sizes they use, e.g., the paragraph block. Gutenberg provides a default set of font sizes, but a theme can overwrite it and provide its own: - ```php add_theme_support( 'editor-font-sizes', array( array( @@ -157,13 +166,13 @@ add_theme_support( 'editor-font-sizes', array( The font sizes are rendered on the font size picker in the order themes provide them. Themes are responsible for creating the classes that apply the correct font size styles. -The class name is built appending 'has-', followed by the font size name *using* kebab case and ending with `-font-size`. +The class name is built appending 'has-', followed by the font size name _using_ kebab case and ending with `-font-size`. As an example for the regular font size, a theme may provide the following class. ```css .has-regular-font-size { - font-size: 16px; + font-size: 16px; } ``` @@ -262,9 +271,7 @@ add_theme_support( 'wp-block-styles' ); The embed blocks automatically apply styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame. A block styled with the aspect ratio responsive styles would look like: ```html -
- ... -
+
...
``` To make the content resize and keep its aspect ratio, the `` element needs the `wp-embed-responsive` class. This is not set by default, and requires the theme to opt in to the `responsive-embeds` feature: diff --git a/docs/blocks/applying-styles-with-stylesheets.md b/docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md similarity index 100% rename from docs/blocks/applying-styles-with-stylesheets.md rename to docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md diff --git a/docs/blocks/block-controls-toolbars-and-inspector.md b/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector.md similarity index 100% rename from docs/blocks/block-controls-toolbars-and-inspector.md rename to docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector.md diff --git a/docs/blocks/creating-dynamic-blocks.md b/docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md similarity index 100% rename from docs/blocks/creating-dynamic-blocks.md rename to docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md diff --git a/docs/blocks/generate-blocks-with-wp-cli.md b/docs/designers-developers/developers/tutorials/block-tutorial/generate-blocks-with-wp-cli.md similarity index 100% rename from docs/blocks/generate-blocks-with-wp-cli.md rename to docs/designers-developers/developers/tutorials/block-tutorial/generate-blocks-with-wp-cli.md diff --git a/docs/blocks/inspector.png b/docs/designers-developers/developers/tutorials/block-tutorial/inspector.png similarity index 100% rename from docs/blocks/inspector.png rename to docs/designers-developers/developers/tutorials/block-tutorial/inspector.png diff --git a/docs/blocks.md b/docs/designers-developers/developers/tutorials/block-tutorial/intro.md similarity index 100% rename from docs/blocks.md rename to docs/designers-developers/developers/tutorials/block-tutorial/intro.md diff --git a/docs/blocks/introducing-attributes-and-editable-fields.md b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md similarity index 96% rename from docs/blocks/introducing-attributes-and-editable-fields.md rename to docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md index 7f96bd78986798..3a993ce1c2b71a 100644 --- a/docs/blocks/introducing-attributes-and-editable-fields.md +++ b/docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md @@ -110,7 +110,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', { ``` {% end %} -When registering a new block type, the `attributes` property describes the shape of the attributes object you'd like to receive in the `edit` and `save` functions. Each value is a [source function](../../docs/block-api/attributes.md) to find the desired value from the markup of the block. +When registering a new block type, the `attributes` property describes the shape of the attributes object you'd like to receive in the `edit` and `save` functions. Each value is a [source function](../../../../../docs/designers-developers/developers/block-api/block-attributes.md) to find the desired value from the markup of the block. In the code snippet above, when loading the editor, we will extract the `content` value as the HTML of the paragraph element in the saved post's markup. diff --git a/docs/blocks/writing-your-first-block-type.md b/docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md similarity index 100% rename from docs/blocks/writing-your-first-block-type.md rename to docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md diff --git a/docs/reference/faq.md b/docs/designers-developers/faq.md similarity index 97% rename from docs/reference/faq.md rename to docs/designers-developers/faq.md index 740c641f7914e5..547395acb1eb23 100644 --- a/docs/reference/faq.md +++ b/docs/designers-developers/faq.md @@ -251,7 +251,7 @@ Our [list of supported browsers can be found in the Make WordPress handbook](htt ## How do I make my own block? -The API for creating blocks is a crucial aspect of the project. We are working on improved documentation and tutorials. Check out the [Creating Block Types](../../docs/blocks.md) section to get started. +The API for creating blocks is a crucial aspect of the project. We are working on improved documentation and tutorials. Check out the [Creating Block Types](../../docs/designers-developers/developers/tutorials/block-tutorial/intro.md) section to get started. ## Does Gutenberg involve editing posts/pages in the front-end? @@ -297,7 +297,7 @@ Blocks will be able to provide base structural CSS styles, and themes can add st Other features, like the new _wide_ and _full-wide_ alignment options, will simply be CSS classes applied to blocks that offer this alignment. We are looking at how a theme can opt in to this feature, for example using `add_theme_support`. -*See:* [Theme Support](../../docs/extensibility/theme-support.md) +*See:* [Theme Support](../../docs/designers-developers/developers/themes/theme-support.md) ## How will editor styles work? @@ -310,7 +310,7 @@ function gutenbergtheme_editor_styles() { add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' ); ``` -*Details:* [Editor Styles](../../docs/extensibility/theme-support.md#editor-styles) +*See:* [Editor Styles](../../docs/designers-developers/developers/themes/theme-support.md#editor-styles) ## Should I be concerned that Gutenberg will make my plugin obsolete? @@ -333,11 +333,13 @@ Custom TinyMCE buttons will still work in the “Classic” block, which is a bl (Gutenberg comes with a new universal inserter tool, which gives you access to every block available, searchable, sorted by recency and categories. This inserter tool levels the playing field for every plugin that adds content to the editor, and provides a single interface to learn how to use.) ## How will shortcodes work in Gutenberg? + Shortcodes will continue to work as they do now. However we see the block as an evolution of the `[shortcode]`. Instead of having to type out code, you can use the universal inserter tray to pick a block and get a richer interface for both configuring the block and previewing it. We would recommend people eventually upgrade their shortcodes to be blocks. ## Should I move shortcodes to content blocks? + We think so. Blocks are designed to be visually representative of the final look, and they will likely become the expected way in which users will discover and insert content in WordPress. ## Will Gutenberg be made properly accessible? @@ -346,19 +348,13 @@ Accessibility is not an afterthought. Not every aspect of Gutenberg is accessibl If you would like to contribute to the accessibility of Gutenberg, we can always use more people to test and contribute. -## Are there any design resources for Gutenberg? - -Yes, primarily in [design principles](../../docs/reference/design-principles.md) - -We are still adding more documentation. - ## How is data stored? I've seen HTML comments, what is their purpose? Our approach—as outlined in [the technical overview introduction](https://make.wordpress.org/core/2017/01/17/editor-technical-overview/)—is to augment the existing data format in a way that doesn’t break the decade-and-a-half-fabric of content WordPress provides. In other terms, this optimizes for a format that prioritizes human readability (the HTML document of the web) and easy-to-render-anywhere over a machine convenient file (JSON in post-meta) that benefits the editing context primarily. This also [gives us the flexibility](https://github.com/WordPress/gutenberg/issues/1516) to store those blocks that are inherently separate from the content stream (reusable pieces like widgets or small post type elements) elsewhere, and just keep token references for their placement. -We suggest you look at the [language of Gutenberg](../../docs/language.md) to learn more about how this aspect of the project works. +We suggest you look at the [Gutenberg key concepts](../../docs/designers-developers/key-concepts.md) to learn more about how this aspect of the project works. ## How can I parse the post content back out into blocks in PHP or JS? In JS: diff --git a/docs/reference/glossary.md b/docs/designers-developers/glossary.md similarity index 65% rename from docs/reference/glossary.md rename to docs/designers-developers/glossary.md index f7818d9a785c23..afa574179db276 100644 --- a/docs/reference/glossary.md +++ b/docs/designers-developers/glossary.md @@ -1,15 +1,21 @@ # Glossary -- __Attribute sources__: An object describing the attributes shape of a block. The keys can be named as most appropriate to describe the state of a block type. The value for each key is a function which describes the strategy by which the attribute value should be extracted from the content of a saved post's content. When processed, a new object is created, taking the form of the keys defined in the attribute sources, where each value is the result of the attribute source function. -- __Attributes__: The object representation of the current state of a block in post content. When loading a saved post, this is determined by the attribute sources for the block type. These values can change over time during an editing session when the user modifies a block, and are used when determining how to serialize the block. -- __Block__: The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. -- __Block name__: A unique identifier for a block type, consisting of a plugin-specific namespace and a short label describing the block's intent. e.g. `core/image` -- __Block type__: In contrast with the blocks composing a particular post, a block type describes the blueprint by which any block of that type should behave. So while there may be many images within a post, each behaves consistent with a unified image block type definition. -- __Dynamic block__: A type of block where the content of which may change and cannot be determined at the time of saving a post, instead calculated any time the post is shown on the front of a site. These blocks may save fallback content or no content at all in their JavaScript implementation, instead deferring to a PHP block implementation for runtime rendering. -- __RichText__: A common component enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library. -- __Inspector__: A block settings region shown in place of the post settings when a block is selected. Fields may be shown here to allow the user to customize the selected block. -- __Post settings__: A sidebar region containing metadata fields for the post, including scheduling, visibility, terms, and featured image. -- __Serialization__: The process of converting a block's attributes object into HTML markup, typically occurring when saving the post. -- __Static block__: A type of block where the content of which is known at the time of saving a post. A static block will be saved with HTML markup directly in post content. -- __TinyMCE__: [TinyMCE](https://www.tinymce.com/) is a web-based JavaScript WYSIWYG (What You See Is What You Get) editor. -- __Toolbar__: A set of button controls. In the context of a block, usually referring to the toolbar of block controls shown above the selected block. +- **Attribute sources**: An object describing the attributes shape of a block. The keys can be named as most appropriate to describe the state of a block type. The value for each key is a function which describes the strategy by which the attribute value should be extracted from the content of a saved post's content. When processed, a new object is created, taking the form of the keys defined in the attribute sources, where each value is the result of the attribute source function. +- **Attributes**: The object representation of the current state of a block in post content. When loading a saved post, this is determined by the attribute sources for the block type. These values can change over time during an editing session when the user modifies a block, and are used when determining how to serialize the block. +- **Block**: The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. +- **Block Categories**: These are not a WordPress taxonomy, but instead used internally to sort blocks in the Block Inserter. +- **Block Inserter**: Primary interface for selecting from the available blocks, triggered by plus icon buttons on Blocks or in the top-left of the editor interface. +- **Block name**: A unique identifier for a block type, consisting of a plugin-specific namespace and a short label describing the block's intent. e.g. `core/image` +- **Block type**: In contrast with the blocks composing a particular post, a block type describes the blueprint by which any block of that type should behave. So while there may be many images within a post, each behaves consistent with a unified image block type definition. +- **Classic block**: +- **Dynamic block**: A type of block where the content of which may change and cannot be determined at the time of saving a post, instead calculated any time the post is shown on the front of a site. These blocks may save fallback content or no content at all in their JavaScript implementation, instead deferring to a PHP block implementation for runtime rendering. +- **RichText**: A common component enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library. +- **Inspector**: A block settings region shown in place of the post settings when a block is selected. Fields may be shown here to allow the user to customize the selected block. +- **Post settings**: A sidebar region containing metadata fields for the post, including scheduling, visibility, terms, and featured image. +- **Reusable block**: +- **Sidebar**: +- **Serialization**: The process of converting a block's attributes object into HTML markup, typically occurring when saving the post. +- **Static block**: A type of block where the content of which is known at the time of saving a post. A static block will be saved with HTML markup directly in post content. +- **TinyMCE**: [TinyMCE](https://www.tinymce.com/) is a web-based JavaScript WYSIWYG (What You See Is What You Get) editor. +- **Toolbar**: A set of button controls. In the context of a block, usually referring to the toolbar of block controls shown above the selected block. +- **Template**: diff --git a/docs/language.md b/docs/designers-developers/key-concepts.md similarity index 75% rename from docs/language.md rename to docs/designers-developers/key-concepts.md index 8a71e707619fbc..ce270c0d2ee816 100644 --- a/docs/language.md +++ b/docs/designers-developers/key-concepts.md @@ -1,4 +1,52 @@ -# The Language of Gutenberg +# Key Concepts + +## Blocks + +Blocks are an abstract unit for organizing and composing content, strung together to create content for a webpage. + +Blocks are hiearchical, in that a block can be a child or parent to another block. One example is a two-column Columns block can be the parent block to multiple child blocks in each column. + +If it helps, you can think of blocks as a more graceful shortcode, with rich formatting tools for users to compose content. To this point, there is a new Block Grammar. Distilled, the block grammar is an HTML comment, either a self-closing tag or with a begining tag and ending tag. In the main tag, depending on the block type and user customizations, there can be a JSON object. This raw form of the block is referred to as serialized. + +```html + +

Welcome to the world of blocks.

+ +``` + +Blocks can be static or dynamic. Static blocks contain rendered content and an object of Attributes used to re-render based on changes. Dynamic blocks require server-side data and rendering while the post content is being generated (rendering). + +Each block contains Attributes or configuration settings, which can be sourced from raw HTML in the content, via meta or other customizible origins. + +The Paragraph is the default Block. Instead of a new line upon typing return on a keyboard, try to think of it as an empty paragraph block (type / to trigger an autocompleting Slash Inserter -- /image will pull up Images as well as Instagram embeds). + +Users insert new blocks by clicking the plus button for the Block Inserter, typing / for the Slash Inserter or typing return for a blank Paragraph block. + +Blocks can be duplicated within content using the menu from the block's toolbar or via keyboard shortcut. + +Blocks can be made repeatable, shared across posts and post types and used multiple times in the same post. Changes in one place reflect everywhere that reusable block is used. + +Blocks can be limited or locked-in-place by Templates and custom code. + +#### More on Blocks + +- **Block API** +- **Block Styles** +- **Tutorial: Building A Custom Block** + +## Block Categories + +In the Block Inserter, the accordion-sorted, popup modal that shows a site's available blocks to users, each accordion title is a Block Category, which are either the defaults or customized by developers through Plugins or code. + +## Reusable Blocks + +Reusable Blocks are a way to share a block (or multiple blocks) as a reusable, repeatable piece of content. + +Any edits to a reusable block are made to every usage of a repeatable block. + +Reusable Blocks are stored as a hidden post type, and are dynamic blocks that "ref" or reference the post_id and return the post_content for that wp_block. + +## Templates At the core of Gutenberg lies the concept of the block. From a technical point of view, blocks both raise the level of abstraction from a single document to a collection of meaningful elements, and they replace ambiguity—inherent in HTML—with explicit structure. A post in Gutenberg is then a _collection of blocks_. @@ -8,7 +56,7 @@ This is true for content blocks. They are the way in which the user creates thei Content in WordPress is stored as HTML-like text in `post_content`. HTML is a robust document markup format and has been used to describe content as simple as unformatted paragraphs of text and as complex as entire application interfaces. Understanding HTML is not trivial; a significant number of existing documents and tools deal with technically invalid or ambiguous code. This code, even when valid, can be incredibly tricky and complicated to parse – and to understand. -The main point is to let the machines work at what they are good at, and optimize for the user and the document. The analogy with the printing press can be taken further in that what matters is the printed page, not the arrangement of metal type that originated it. As a matter of fact, the arrangement of type is a pretty inconvenient storage mechanism. The page is both the result _and_ the proper way to store the data. The metal type is just an instrument for publication and editing, but more ephemeral in nature. Exactly as our use of an object tree (e.g. JSON) in the editor. We have the ability to rebuild this structure from the printed page, as if we printed notations in the margins that allows a machine to know which [sorts](https://en.wikipedia.org/wiki/Sort_(typesetting)) (metal type) to assemble to recreate the page. +The main point is to let the machines work at what they are good at, and optimize for the user and the document. The analogy with the printing press can be taken further in that what matters is the printed page, not the arrangement of metal type that originated it. As a matter of fact, the arrangement of type is a pretty inconvenient storage mechanism. The page is both the result _and_ the proper way to store the data. The metal type is just an instrument for publication and editing, but more ephemeral in nature. Exactly as our use of an object tree (e.g. JSON) in the editor. We have the ability to rebuild this structure from the printed page, as if we printed notations in the margins that allows a machine to know which [sorts]() (metal type) to assemble to recreate the page. ## Blocks are higher-level than HTML @@ -20,7 +68,7 @@ Additionally, how do we even know this came from our editor? Maybe someone snuck ## The post dichotomy -A Gutenberg post is the proper block-aware representation of a post, a collection of semantically consistent descriptions of what each block is and what its essential data is. This representation only ever exists in memory. It is the [chase](https://en.wikipedia.org/wiki/Chase_(printing)) in the typesetter's workshop, ever-shifting as sorts are attached and repositioned. +A Gutenberg post is the proper block-aware representation of a post, a collection of semantically consistent descriptions of what each block is and what its essential data is. This representation only ever exists in memory. It is the [chase]() in the typesetter's workshop, ever-shifting as sorts are attached and repositioned. A Gutenberg post is not the artifact it produces, namely the `post_content`. The latter is the printed page, optimized for the reader, but retaining its invisible markings for later editing. @@ -34,25 +82,21 @@ The tree of objects describes the list of blocks that compose a post. ```js [ - { - type: 'core/cover-image', - attributes: { - url: 'my-hero.jpg', - align: 'full', - hasParallax: false, - hasBackgroundDim: true - }, - children: [ - "Gutenberg posts aren't HTML" - ] - }, - { - type: 'core/paragraph', - children: [ - "Lately I've been hearing plen…" - ] - } -] + { + type: "core/cover-image", + attributes: { + url: "my-hero.jpg", + align: "full", + hasParallax: false, + hasBackgroundDim: true + }, + children: ["Gutenberg posts aren't HTML"] + }, + { + type: "core/paragraph", + children: ["Lately I've been hearing plen…"] + } +]; ``` ## Serialization and the Purpose of HTML Comments @@ -79,7 +123,7 @@ After running this through the parser we're left with a simple object we can man This has dramatic implications for how simple and performant we can make our parser. These explicit boundaries also protect damage in a single block from bleeding into other blocks or tarnishing the entire document. It also allows the system to identify unrecognized blocks before rendering them. -_N.B.:_ The defining aspect of blocks are their semantics and the isolation mechanism they provide; in other words, their identity. On the other hand, where their data is stored is a more liberal aspect. Blocks support more than just static local data (via JSON literals inside the HTML comment or within the block's HTML), and more mechanisms (_e.g._, global blocks or otherwise resorting to storage in complementary `WP_Post` objects) are expected. See [attributes](../docs/block-api/attributes.md) for details. +_N.B.:_ The defining aspect of blocks are their semantics and the isolation mechanism they provide; in other words, their identity. On the other hand, where their data is stored is a more liberal aspect. Blocks support more than just static local data (via JSON literals inside the HTML comment or within the block's HTML), and more mechanisms (_e.g._, global blocks or otherwise resorting to storage in complementary `WP_Post` objects) are expected. See [attributes](../../docs/designers-developers/developers/block-api/block-attributes.md) for details. ## The Anatomy of a Serialized Block @@ -87,9 +131,7 @@ When blocks are saved to the content, after the editing session, its attributes ```html -
- -
+
``` diff --git a/docs/designers-developers/readme.md b/docs/designers-developers/readme.md new file mode 100644 index 00000000000000..5e54798a3c7873 --- /dev/null +++ b/docs/designers-developers/readme.md @@ -0,0 +1,11 @@ +# Designer & Developer Handbook + +Gutenberg is a transformation of the WordPress editor for working with content. + +![Gutenberg Demo](https://cldup.com/kZXGDcGPMU.gif) + +Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created in the unit of blocks instead of freeform text with inserted media, embeds and Shortcodes (there's a Shortcode block though). + +Blocks treat Paragraphs, Headings, Media, Embeds all as components that strung together make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embeded media and shortcodes. The new editor is designed with progressive enhancement, meaning it is back-compatible with all legacy content, offers a process to try to convert and split a Classic block into block equivalents using client-side parsing and finally the blocks offer enhanced editing and format controls. + +The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins. diff --git a/docs/extensibility.md b/docs/extensibility.md deleted file mode 100644 index ab6f8c8db6361b..00000000000000 --- a/docs/extensibility.md +++ /dev/null @@ -1,82 +0,0 @@ -# Extensibility - -Extensibility is key for WordPress and, like the rest of WordPress components, Gutenberg is highly extensible. - - -## Creating Blocks - -Gutenberg is about blocks, and the main extensibility API of Gutenberg is the Block API. It allows you to create your own static blocks, dynamic blocks rendered on the server and also blocks capable of saving data to Post Meta for more structured content. - -Here is a small example of a static custom block type (you can try it in your browser's console): - -{% codetabs %} -{% ES5 %} -```js -var el = wp.element.createElement; - -wp.blocks.registerBlockType( 'mytheme/red-block', { - title: 'Red Block', - icon: 'universal-access-alt', - category: 'layout', - edit: function() { - return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'I am a red block.' ); - }, - save: function() { - return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'I am a red block.' ); - } -} ); -``` -{% ESNext %} -```js -const { registerBlockType } = wp.blocks; -const blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' }; - -registerBlockType( 'mytheme/red-block', { - title: 'Red Block', - icon: 'universal-access-alt', - category: 'layout', - edit: function() { - return
I am a red block
- }, - save: function() { - return
I am a red block
- } -} ); -``` -{% end %} - -If you want to learn more about block creation, the [Blocks Tutorial](../docs/blocks.md) is the best place to start. - -## Extending Blocks - -It is also possible to modify the behavior of existing blocks or even remove them completely using filters. - -Learn more in the [Extending Blocks](../docs/extensibility/extending-blocks.md) section. - -## Extending the Editor UI - -Extending the editor UI can be accomplished with the `registerPlugin` API, allowing you to define all your plugin's UI elements in one place. - -Refer to the [Plugins](https://github.com/WordPress/gutenberg/blob/master/packages/plugins/README.md) and [Edit Post](https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/README.md) section for more information. - -## Meta Boxes - -**Porting PHP meta boxes to blocks is highly encouraged!** - -Discover how [Meta Box](../docs/extensibility/meta-box.md) support works in Gutenberg. - -## Theme Support - -By default, blocks provide their styles to enable basic support for blocks in themes without any change. Themes can add/override these styles, or rely on defaults. - -There are some advanced block features which require opt-in support in the theme. See [theme support](../docs/extensibility/theme-support.md). - -## Autocomplete - -Autocompleters within blocks may be extended and overridden. See [autocomplete](../docs/extensibility/autocomplete.md). - -## Block Parsing and Serialization - -Posts in the editor move through a couple of different stages between being stored in `post_content` and appearing in the editor. Since the blocks themselves are data structures that live in memory it takes a parsing and serialization step to transform out from and into the stored format in the database. - -Customizing the parser is an advanced topic that you can learn more about in the [Extending the Parser](../docs/extensibility/parser.md) section. diff --git a/docs/extensibility/extending-editor.md b/docs/extensibility/extending-editor.md deleted file mode 100644 index ddb874682ab168..00000000000000 --- a/docs/extensibility/extending-editor.md +++ /dev/null @@ -1,21 +0,0 @@ -# Extending Editor (Experimental) - -[Hooks](https://developer.wordpress.org/plugins/hooks/) are a way for one piece of code to interact/modify another piece of code. They make up the foundation for how plugins and themes interact with Gutenberg, but they’re also used extensively by WordPress Core itself. There are two types of hooks: [Actions](https://developer.wordpress.org/plugins/hooks/actions/) and [Filters](https://developer.wordpress.org/plugins/hooks/filters/). They were initially implemented in PHP, but for the purpose of Gutenberg they were ported to JavaScript and published to npm as [@wordpress/hooks](https://www.npmjs.com/package/@wordpress/hooks) package for general purpose use. You can also learn more about both APIs: [PHP](https://codex.wordpress.org/Plugin_API/) and [JavaScript](https://github.com/WordPress/packages/tree/master/packages/hooks). - -## Modifying Editor - -To modify the behavior of the editor experience, Gutenberg exposes the following Filters: - -### `editor.PostFeaturedImage.imageSize` - -Used to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'`, and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the Classic Editor. - -_Example:_ - -```js -var withImageSize = function( size, mediaId, postId ) { - return 'large'; -}; - -wp.hooks.addFilter( 'editor.PostFeaturedImage.imageSize', 'my-plugin/with-image-size', withImageSize ); -``` diff --git a/docs/manifest.json b/docs/manifest.json index 21c5a5c12d6592..c461c5d3b9a361 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1,260 +1,182 @@ [ { - "title": "Introduction", - "slug": "handbook", + "title": "Gutenberg Handbook", + "slug": "readme", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/readme.md", "parent": null }, { - "title": "The Language of Gutenberg", - "slug": "language", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/language.md", + "title": "Designer & Developer Handbook", + "slug": "designers-developers", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/README.md", "parent": null }, { - "title": "The Gutenberg block grammar", - "slug": "grammar", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/grammar.md", - "parent": "language" + "title": "Key Concepts", + "slug": "key-concepts", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/key-concepts.md", + "parent": "designers-developers" }, { - "title": "Block API", + "title": "Developer Documentation", + "slug": "developers", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/README.md", + "parent": "designers-developers" + }, + { + "title": "Block API Reference", "slug": "block-api", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/block-api.md", - "parent": null + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/README.md", + "parent": "designers-developers/developers" }, { - "title": "Attributes", - "slug": "attributes", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/block-api/attributes.md", - "parent": "block-api" + "title": "Block Registration ", + "slug": "block-registration", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-registration.md", + "parent": "designers-developers/developers/block-api" }, { "title": "Edit and Save", "slug": "block-edit-save", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/block-api/block-edit-save.md", - "parent": "block-api" + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-edit-save.md", + "parent": "designers-developers/developers/block-api" }, { - "title": "RichText API", - "slug": "rich-text-api", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/editor/src/components/rich-text/README.md", - "parent": "block-api" + "title": "Attributes", + "slug": "block-attributes", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-attributes.md", + "parent": "designers-developers/developers/block-api" }, { "title": "Deprecated Blocks", - "slug": "deprecated-blocks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/block-api/deprecated-blocks.md", - "parent": "block-api" + "slug": "block-deprecation", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-deprecation.md", + "parent": "designers-developers/developers/block-api" }, { "title": "Templates", - "slug": "templates", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/templates.md", - "parent": null + "slug": "block-templates", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-templates.md", + "parent": "designers-developers/developers/block-api" }, { - "title": "Extensibility", - "slug": "extensibility", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility.md", - "parent": null + "title": "Annotations", + "slug": "block-annotations", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/block-api/block-annotations.md", + "parent": "designers-developers/developers/block-api" }, { - "title": "Extending Blocks", - "slug": "extending-blocks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/extending-blocks.md", - "parent": "extensibility" + "title": "Filter Reference", + "slug": "filters", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/filters/README.md", + "parent": "designers-developers/developers" }, { - "title": "Extending Editor", - "slug": "extending-editor", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/extending-editor.md", - "parent": "extensibility" + "title": "Block Filters", + "slug": "block-filters", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/filters/block-filters.md", + "parent": "designers-developers/developers/filters" }, { - "title": "Meta Boxes", - "slug": "meta-box", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/meta-box.md", - "parent": "extensibility" + "title": "Editor Filters (Experimental)", + "slug": "editor-filters", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/filters/editor-filters.md", + "parent": "designers-developers/developers/filters" }, { - "title": "Theme Support", - "slug": "theme-support", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/theme-support.md", - "parent": "extensibility" + "title": "Parser Filters", + "slug": "parser-filters", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/filters/parser-filters.md", + "parent": "designers-developers/developers/filters" }, { "title": "Autocomplete", - "slug": "autocomplete", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/autocomplete.md", - "parent": "extensibility" + "slug": "autocomplete-filters", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/filters/autocomplete-filters.md", + "parent": "designers-developers/developers/filters" }, { - "title": "Annotations", - "slug": "annotations", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/extensibility/annotations.md", - "parent": "extensibility" - }, - { - "title": "Design", - "slug": "design", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design.md", - "parent": null - }, - { - "title": "Patterns", - "slug": "design-patterns", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/design-patterns.md", - "parent": "design" + "title": "Data Module Reference", + "slug": "data", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/README.md", + "parent": "designers-developers/developers" }, { - "title": "Block Design", - "slug": "block-design", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/block-design.md", - "parent": "design" + "title": "Packages", + "slug": "packages", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/packages.md", + "parent": "designers-developers/developers" }, { - "title": "Resources", - "slug": "design-resources", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/design/design-resources.md", - "parent": "design" + "title": "Theming for Gutenberg", + "slug": "themes", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/themes/README.md", + "parent": "designers-developers/developers" }, { - "title": "Creating Block Types", - "slug": "blocks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks.md", - "parent": null + "title": "Theme Support", + "slug": "theme-support", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/themes/theme-support.md", + "parent": "designers-developers/developers/themes" }, { - "title": "Writing Your First Block Type", - "slug": "writing-your-first-block-type", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/writing-your-first-block-type.md", - "parent": "blocks" + "title": "Backwards Compatibility", + "slug": "backwards-compatibility", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/backwards-compatibility/README.md", + "parent": "designers-developers/developers" }, { - "title": "Applying Styles With Stylesheets", - "slug": "applying-styles-with-stylesheets", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/applying-styles-with-stylesheets.md", - "parent": "blocks" + "title": "Deprecations", + "slug": "deprecations", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/backwards-compatibility/deprecations.md", + "parent": "designers-developers/developers/backwards-compatibility" }, { - "title": "Introducing Attributes and Editable Fields", - "slug": "introducing-attributes-and-editable-fields", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/introducing-attributes-and-editable-fields.md", - "parent": "blocks" + "title": "Meta Boxes", + "slug": "meta-box", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/backwards-compatibility/meta-box.md", + "parent": "designers-developers/developers/backwards-compatibility" }, { - "title": "Block Controls: Toolbars and Inspector", - "slug": "block-controls-toolbars-and-inspector", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/block-controls-toolbars-and-inspector.md", - "parent": "blocks" + "title": "Designer Documentation", + "slug": "designers", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/README.md", + "parent": "designers-developers" }, { - "title": "Creating dynamic blocks", - "slug": "creating-dynamic-blocks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/creating-dynamic-blocks.md", - "parent": "blocks" + "title": "Block Design", + "slug": "block-design", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/block-design.md", + "parent": "designers-developers/designers" }, { - "title": "Generate Blocks with WP-CLI", - "slug": "generate-blocks-with-wp-cli", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/blocks/generate-blocks-with-wp-cli.md", - "parent": "blocks" + "title": "Patterns", + "slug": "design-patterns", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/design-patterns.md", + "parent": "designers-developers/designers" }, { - "title": "Reference", - "slug": "reference", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference.md", - "parent": null + "title": "Resources", + "slug": "design-resources", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/designers/design-resources.md", + "parent": "designers-developers/designers" }, { "title": "Glossary", "slug": "glossary", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/glossary.md", - "parent": "reference" - }, - { - "title": "History", - "slug": "history", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/history.md", - "parent": "reference" - }, - { - "title": "Coding Guidelines", - "slug": "coding-guidelines", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/coding-guidelines.md", - "parent": "reference" - }, - { - "title": "Testing Overview", - "slug": "testing-overview", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/testing-overview.md", - "parent": "reference" + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/glossary.md", + "parent": "designers-developers" }, { "title": "Frequently Asked Questions", "slug": "faq", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/faq.md", - "parent": "reference" - }, - { - "title": "Release Process", - "slug": "release", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/release.md", - "parent": "reference" - }, - { - "title": "Scripts", - "slug": "scripts", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/scripts.md", - "parent": "reference" - }, - { - "title": "Deprecated Features", - "slug": "deprecated", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/deprecated.md", - "parent": "reference" - }, - { - "title": "Repository Management", - "slug": "repository-management", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/repository-management.md", - "parent": "reference" - }, - { - "title": "Outreach", - "slug": "outreach", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/outreach.md", - "parent": null - }, - { - "title": "Articles", - "slug": "articles", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/outreach/docs/articles.md", - "parent": "outreach" - }, - { - "title": "Meetups", - "slug": "meetups", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/outreach/meetups.md", - "parent": "outreach" - }, - { - "title": "Talks", - "slug": "talks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/outreach/talks.md", - "parent": "outreach" - }, - { - "title": "Resources", - "slug": "resources", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/outreach/resources.md", - "parent": "outreach" + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/faq.md", + "parent": "designers-developers" }, { "title": "Packages", "slug": "packages", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/packages.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/packages.md", "parent": null }, { @@ -938,55 +860,55 @@ { "title": "Data Package Reference", "slug": "data", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/README.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/README.md", "parent": null }, { "title": "WordPress Core Data", "slug": "data-core", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core.md", "parent": "data" }, { "title": "Annotations", "slug": "data-core-annotations", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-annotations.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-annotations.md", "parent": "data" }, { "title": "Block Types Data", "slug": "data-core-blocks", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-blocks.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-blocks.md", "parent": "data" }, { "title": "The Editor’s Data", "slug": "data-core-editor", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-editor.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-editor.md", "parent": "data" }, { "title": "The Editor’s UI Data", "slug": "data-core-edit-post", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-edit-post.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-edit-post.md", "parent": "data" }, { "title": "Notices Data", "slug": "data-core-notices", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-notices.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-notices.md", "parent": "data" }, { "title": "The NUX (New User Experience) Data", "slug": "data-core-nux", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-nux.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-nux.md", "parent": "data" }, { "title": "The Viewport Data", "slug": "data-core-viewport", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/data/data-core-viewport.md", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/data/data-core-viewport.md", "parent": "data" } ] \ No newline at end of file diff --git a/docs/readme.md b/docs/readme.md index 4d1c74172ec236..93b58f0b17cda7 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -1,11 +1,21 @@ -# Introduction +# Gutenberg Handbook -Gutenberg began as a transformation of the WordPress editor — a new interface for adding, editing, and manipulating content. It seeks to make it easy for anyone to create rich, flexible content layouts with a block-based UI. All types of page components are represented as modular blocks, which means they can be accessed from a unified block menu, dropped anywhere on a page, and directly edited to create the custom presentation the user wants. +The Gutenberg project provides three sources of documentation: -It is a fundamental modernization and transformation of how the WordPress experience works, creating new opportunities for both users and developers. Gutenberg introduces new frameworks, interaction patterns, functionality, and user experiences for WordPress. And similar to a new macOS version, we will talk about “Gutenberg”, and all the new possibilities it enables, until eventually the idea of Gutenberg as a separate entity will fade and it will simply be WordPress. +## Designer & Developer Handbook -![Gutenberg Demo](https://cldup.com/kZXGDcGPMU.gif) +Learn how to build blocks and extend the editor, best practices for designing block interfaces, and how to create themes that make the most of the new features Gutenberg provides. -Gutenberg brings many changes to WordPress, but the biggest impact comes from the way it can enable a much clearer product architecture — one which enables modularity, consistency, and interoperability — and the positive impact that can have on the end user experience of WordPress. This handbook will describe the scope of those architectural and user experience (UX) changes, including the central “block as the interface” principle — the most crucial conceptual change to understand about Gutenberg. +[Visit the Designer & Developer Handbook](../docs/designers-developers/readme.md) -Here you can also find design guidelines, API documentation, and tutorials about getting started with Gutenberg development. +## User Handbook + +Discover the new features Gutenberg offers, learn how your site will be affected by the new editor and how to keep using the old interface, and tips for creating beautiful posts and pages. + +[Visit the User Handbook](../docs/users/readme.md) + +## Contributor Handbook + +Help make Gutenberg better by contributing ideas, code, testing, and more. + +[Visit the Contributor Handbook](../docs/contributors/readme.md) diff --git a/docs/root-manifest.json b/docs/root-manifest.json index 1202ab14eacb4a..784008dd17bb50 100644 --- a/docs/root-manifest.json +++ b/docs/root-manifest.json @@ -1,254 +1,176 @@ [ - { - "title": "Introduction", - "slug": "handbook", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/readme.md", - "parent": null - }, - { - "title": "The Language of Gutenberg", - "slug": "language", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/language.md", - "parent": null - }, - { - "title": "The Gutenberg block grammar", - "slug": "grammar", - "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/grammar.md", - "parent": "language" - }, - { - "title": "Block API", - "slug": "block-api", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/block-api.md", - "parent": null - }, - { - "title": "Attributes", - "slug": "attributes", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/block-api\/attributes.md", - "parent": "block-api" - }, - { - "title": "Edit and Save", - "slug": "block-edit-save", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/block-api\/block-edit-save.md", - "parent": "block-api" - }, - { - "title": "RichText API", - "slug": "rich-text-api", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/packages\/editor\/src\/components\/rich-text\/README.md", - "parent": "block-api" - }, - { - "title": "Deprecated Blocks", - "slug": "deprecated-blocks", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/block-api\/deprecated-blocks.md", - "parent": "block-api" - }, - { - "title": "Templates", - "slug": "templates", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/templates.md", - "parent": null - }, - { - "title": "Extensibility", - "slug": "extensibility", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility.md", - "parent": null - }, - { - "title": "Extending Blocks", - "slug": "extending-blocks", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/extending-blocks.md", - "parent": "extensibility" - }, - { - "title": "Extending Editor", - "slug": "extending-editor", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/extending-editor.md", - "parent": "extensibility" - }, - { - "title": "Meta Boxes", - "slug": "meta-box", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/meta-box.md", - "parent": "extensibility" - }, - { - "title": "Theme Support", - "slug": "theme-support", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/theme-support.md", - "parent": "extensibility" - }, - { - "title": "Autocomplete", - "slug": "autocomplete", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/autocomplete.md", - "parent": "extensibility" - }, - { - "title": "Annotations", - "slug": "annotations", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/extensibility/annotations.md", - "parent": "extensibility" - }, - { - "title": "Design", - "slug": "design", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/design.md", - "parent": null - }, - { - "title": "Patterns", - "slug": "design-patterns", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/design\/design-patterns.md", - "parent": "design" - }, - { - "title": "Block Design", - "slug": "block-design", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/design\/block-design.md", - "parent": "design" - }, - { - "title": "Resources", - "slug": "design-resources", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/design\/design-resources.md", - "parent": "design" - }, - { - "title": "Creating Block Types", - "slug": "blocks", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks.md", - "parent": null - }, - { - "title": "Writing Your First Block Type", - "slug": "writing-your-first-block-type", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/writing-your-first-block-type.md", - "parent": "blocks" - }, - { - "title": "Applying Styles With Stylesheets", - "slug": "applying-styles-with-stylesheets", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/applying-styles-with-stylesheets.md", - "parent": "blocks" - }, - { - "title": "Introducing Attributes and Editable Fields", - "slug": "introducing-attributes-and-editable-fields", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/introducing-attributes-and-editable-fields.md", - "parent": "blocks" - }, - { - "title": "Block Controls: Toolbars and Inspector", - "slug": "block-controls-toolbars-and-inspector", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/block-controls-toolbars-and-inspector.md", - "parent": "blocks" - }, - { - "title": "Creating dynamic blocks", - "slug": "creating-dynamic-blocks", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/creating-dynamic-blocks.md", - "parent": "blocks" - }, - { - "title": "Generate Blocks with WP-CLI", - "slug": "generate-blocks-with-wp-cli", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/blocks\/generate-blocks-with-wp-cli.md", - "parent": "blocks" - }, - { - "title": "Reference", - "slug": "reference", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference.md", - "parent": null - }, - { - "title": "Glossary", - "slug": "glossary", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/glossary.md", - "parent": "reference" - }, - { - "title": "History", - "slug": "history", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/history.md", - "parent": "reference" - }, - { - "title": "Coding Guidelines", - "slug": "coding-guidelines", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/coding-guidelines.md", - "parent": "reference" - }, - { - "title": "Testing Overview", - "slug": "testing-overview", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/testing-overview.md", - "parent": "reference" - }, - { - "title": "Frequently Asked Questions", - "slug": "faq", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/faq.md", - "parent": "reference" - }, - { - "title": "Release Process", - "slug": "release", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/release.md", - "parent": "reference" - }, - { - "title": "Scripts", - "slug": "scripts", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/scripts.md", - "parent": "reference" - }, - { - "title": "Deprecated Features", - "slug": "deprecated", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/deprecated.md", - "parent": "reference" - }, - { - "title": "Repository Management", - "slug": "repository-management", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/reference\/repository-management.md", - "parent": "reference" - }, - { - "title": "Outreach", - "slug": "outreach", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/outreach.md", - "parent": null - }, - { - "title": "Articles", - "slug": "articles", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/outreach\/docs\/articles.md", - "parent": "outreach" - }, - { - "title": "Meetups", - "slug": "meetups", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/outreach\/meetups.md", - "parent": "outreach" - }, - { - "title": "Talks", - "slug": "talks", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/outreach\/talks.md", - "parent": "outreach" - }, - { - "title": "Resources", - "slug": "resources", - "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/outreach\/resources.md", - "parent": "outreach" - } -] + { + "title": "Gutenberg Handbook", + "slug": "readme", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/readme.md", + "parent": null + }, + { + "title": "Designer & Developer Handbook", + "slug": "designers-developers", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/README.md", + "parent": null + }, + { + "title": "Key Concepts", + "slug": "key-concepts", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/key-concepts.md", + "parent": "designers-developers" + }, + { + "title": "Developer Documentation", + "slug": "developers", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/README.md", + "parent": "designers-developers" + }, + { + "title": "Block API Reference", + "slug": "block-api", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/README.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Block Registration ", + "slug": "block-registration", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-registration.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Edit and Save", + "slug": "block-edit-save", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-edit-save.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Attributes", + "slug": "block-attributes", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-attributes.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Deprecated Blocks", + "slug": "block-deprecation", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-deprecation.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Templates", + "slug": "block-templates", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-templates.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Annotations", + "slug": "block-annotations", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/block-api\/block-annotations.md", + "parent": "designers-developers\/developers\/block-api" + }, + { + "title": "Filter Reference", + "slug": "filters", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/filters\/README.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Block Filters", + "slug": "block-filters", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/filters\/block-filters.md", + "parent": "designers-developers\/developers\/filters" + }, + { + "title": "Editor Filters (Experimental)", + "slug": "editor-filters", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/filters\/editor-filters.md", + "parent": "designers-developers\/developers\/filters" + }, + { + "title": "Parser Filters", + "slug": "parser-filters", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/filters\/parser-filters.md", + "parent": "designers-developers\/developers\/filters" + }, + { + "title": "Autocomplete", + "slug": "autocomplete-filters", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/filters\/autocomplete-filters.md", + "parent": "designers-developers\/developers\/filters" + }, + { + "title": "Data Module Reference", + "slug": "data", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/data\/README.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Packages", + "slug": "packages", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/packages.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Theming for Gutenberg", + "slug": "themes", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/themes\/README.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Theme Support", + "slug": "theme-support", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/themes\/theme-support.md", + "parent": "designers-developers\/developers\/themes" + }, + { + "title": "Backwards Compatibility", + "slug": "backwards-compatibility", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/backwards-compatibility\/README.md", + "parent": "designers-developers\/developers" + }, + { + "title": "Deprecations", + "slug": "deprecations", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/backwards-compatibility\/deprecations.md", + "parent": "designers-developers\/developers\/backwards-compatibility" + }, + { + "title": "Meta Boxes", + "slug": "meta-box", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/developers\/backwards-compatibility\/meta-box.md", + "parent": "designers-developers\/developers\/backwards-compatibility" + }, + { + "title": "Designer Documentation", + "slug": "designers", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/designers\/README.md", + "parent": "designers-developers" + }, + { + "title": "Block Design", + "slug": "block-design", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/designers\/block-design.md", + "parent": "designers-developers\/designers" + }, + { + "title": "Patterns", + "slug": "design-patterns", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/designers\/design-patterns.md", + "parent": "designers-developers\/designers" + }, + { + "title": "Resources", + "slug": "design-resources", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/designers\/design-resources.md", + "parent": "designers-developers\/designers" + }, + { + "title": "Glossary", + "slug": "glossary", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/glossary.md", + "parent": "designers-developers" + }, + { + "title": "Frequently Asked Questions", + "slug": "faq", + "markdown_source": "https:\/\/raw.githubusercontent.com\/WordPress\/gutenberg\/master\/docs\/designers-developers\/faq.md", + "parent": "designers-developers" + } +] \ No newline at end of file diff --git a/docs/toc.json b/docs/toc.json new file mode 100644 index 00000000000000..d519837b89a8a8 --- /dev/null +++ b/docs/toc.json @@ -0,0 +1,38 @@ +[ + {"docs/readme.md": []}, + {"docs/designers-developers/README.md": [ + {"docs/designers-developers/key-concepts.md": []}, + {"docs/designers-developers/developers/README.md": [ + {"docs/designers-developers/developers/block-api/README.md": [ + {"docs/designers-developers/developers/block-api/block-registration.md": []}, + {"docs/designers-developers/developers/block-api/block-edit-save.md": []}, + {"docs/designers-developers/developers/block-api/block-attributes.md": []}, + {"docs/designers-developers/developers/block-api/block-deprecation.md": []}, + {"docs/designers-developers/developers/block-api/block-templates.md": []}, + {"docs/designers-developers/developers/block-api/block-annotations.md": []} + ]}, + {"docs/designers-developers/developers/filters/README.md": [ + {"docs/designers-developers/developers/filters/block-filters.md": []}, + {"docs/designers-developers/developers/filters/editor-filters.md": []}, + {"docs/designers-developers/developers/filters/parser-filters.md": []}, + {"docs/designers-developers/developers/filters/autocomplete-filters.md": []} + ]}, + {"docs/designers-developers/developers/data/README.md": "{{data}}"}, + {"docs/designers-developers/developers/packages.md": "{{packages}}"}, + {"docs/designers-developers/developers/themes/README.md": [ + {"docs/designers-developers/developers/themes/theme-support.md": []} + ]}, + {"docs/designers-developers/developers/backwards-compatibility/README.md": [ + {"docs/designers-developers/developers/backwards-compatibility/deprecations.md": []}, + {"docs/designers-developers/developers/backwards-compatibility/meta-box.md": []} + ]} + ]}, + {"docs/designers-developers/designers/README.md": [ + {"docs/designers-developers/designers/block-design.md": []}, + {"docs/designers-developers/designers/design-patterns.md": []}, + {"docs/designers-developers/designers/design-resources.md": []} + ]}, + {"docs/designers-developers/glossary.md": []}, + {"docs/designers-developers/faq.md": []} + ]} +] diff --git a/docs/tool/config.js b/docs/tool/config.js index 6758ac592a72f7..1a3e69450c9a8e 100644 --- a/docs/tool/config.js +++ b/docs/tool/config.js @@ -51,7 +51,7 @@ module.exports = { actions: [ path.resolve( root, 'packages/viewport/src/store/actions.js' ) ], }, }, - dataDocsOutput: path.resolve( __dirname, '../data' ), + dataDocsOutput: path.resolve( __dirname, '../designers-developers/developers/data' ), packageFileNames: glob( 'packages/*/package.json' ) .map( ( fileName ) => fileName.split( '/' )[ 1 ] ), diff --git a/docs/tool/generator.js b/docs/tool/generator.js index 401ea43f33fa0f..1f7a0744dbf3e3 100644 --- a/docs/tool/generator.js +++ b/docs/tool/generator.js @@ -17,7 +17,7 @@ function generateTableOfContent( parsedNamespaces ) { '# Data Module Reference', '', Object.values( parsedNamespaces ).map( ( parsedNamespace ) => { - return ` - [**${ parsedNamespace.name }**: ${ parsedNamespace.title }](../../docs/data/data-${ kebabCase( parsedNamespace.name ) }.md)`; + return ` - [**${ parsedNamespace.name }**: ${ parsedNamespace.title }](../../docs/designers-developers/developers/data/data-${ kebabCase( parsedNamespace.name ) }.md)`; } ).join( '\n' ), ].join( '\n' ); } diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js index 5b5a4bd5ea4021..22d98734278161 100644 --- a/docs/tool/manifest.js +++ b/docs/tool/manifest.js @@ -17,7 +17,7 @@ function getPackageManifest( packageFolderNames ) { { title: 'Packages', slug: 'packages', - markdown_source: `${ baseRepoUrl }/docs/packages.md`, + markdown_source: `${ baseRepoUrl }/docs/designers-developers/developers/packages.md`, parent: null, }, ].concat( @@ -72,7 +72,7 @@ function getDataManifest( parsedNamespaces ) { return [ { title: 'Data Package Reference', slug: 'data', - markdown_source: `${ baseRepoUrl }/docs/data/README.md`, + markdown_source: `${ baseRepoUrl }/docs/designers-developers/developers/data/README.md`, parent: null, } ].concat( Object.values( parsedNamespaces ).map( ( parsedNamespace ) => { @@ -80,7 +80,7 @@ function getDataManifest( parsedNamespaces ) { return { title: parsedNamespace.title, slug, - markdown_source: `${ baseRepoUrl }/docs/data/${ slug }.md`, + markdown_source: `${ baseRepoUrl }/docs/designers-developers/developers/data/${ slug }.md`, parent: 'data', }; } ) diff --git a/docs/users/readme.md b/docs/users/readme.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 From 6a8da2da64e8b94b0db303e4e83593310f098703 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Tue, 20 Nov 2018 18:55:33 -0300 Subject: [PATCH 02/49] Update plugin to version 4.5.0. (#12078) --- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index 4c99e466cc6b6a..d2a073b74968dc 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -3,7 +3,7 @@ * Plugin Name: Gutenberg * Plugin URI: https://github.com/WordPress/gutenberg * Description: Printing since 1440. This is the development plugin for the new block editor in core. - * Version: 4.4.0 + * Version: 4.5.0 * Author: Gutenberg Team * * @package gutenberg diff --git a/package-lock.json b/package-lock.json index b98a21aac33c39..e5d3df1c2322bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "4.4.0", + "version": "4.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 19548299b7e193..65928bc9ee5e96 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "4.4.0", + "version": "4.5.0", "private": true, "description": "A new WordPress editor experience", "repository": "git+https://github.com/WordPress/gutenberg.git", From a1a350839cc7f6e6fb07d03e0b54dd7e9a9bc6cf Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 20 Nov 2018 23:07:34 +0100 Subject: [PATCH 03/49] chore(release): publish - @wordpress/annotations@1.0.2 - @wordpress/api-fetch@2.2.5 - @wordpress/block-library@2.2.5 - @wordpress/blocks@6.0.1 - @wordpress/components@7.0.0 - @wordpress/core-data@2.0.14 - @wordpress/data@4.0.1 - @wordpress/dom@2.0.7 - @wordpress/edit-post@3.1.0 - @wordpress/editor@9.0.0 - @wordpress/format-library@1.2.3 - @wordpress/jest-console@2.0.7 - @wordpress/jest-preset-default@3.0.3 - @wordpress/keycodes@2.0.4 - @wordpress/list-reusable-blocks@1.1.13 - @wordpress/notices@1.1.0 - @wordpress/nux@3.0.1 - @wordpress/rich-text@3.0.1 - @wordpress/scripts@2.4.4 - @wordpress/token-list@1.1.0 - @wordpress/url@2.3.1 - @wordpress/viewport@2.0.12 --- packages/annotations/package.json | 2 +- packages/api-fetch/package.json | 2 +- packages/block-library/package.json | 2 +- packages/blocks/package.json | 2 +- packages/components/package.json | 2 +- packages/core-data/package.json | 2 +- packages/data/package.json | 2 +- packages/dom/package.json | 2 +- packages/edit-post/package.json | 2 +- packages/editor/package.json | 2 +- packages/format-library/package.json | 2 +- packages/jest-console/package.json | 2 +- packages/jest-preset-default/package.json | 2 +- packages/keycodes/package.json | 2 +- packages/list-reusable-blocks/package.json | 2 +- packages/notices/package.json | 2 +- packages/nux/package.json | 2 +- packages/rich-text/package.json | 2 +- packages/scripts/package.json | 2 +- packages/token-list/package.json | 2 +- packages/url/package.json | 2 +- packages/viewport/package.json | 2 +- 22 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/annotations/package.json b/packages/annotations/package.json index 89eb55c53d0a67..ec6f312c18f1de 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/annotations", - "version": "1.0.1", + "version": "1.0.2", "description": "Annotate content in the Gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json index fc9d2ac3295902..3cb6fb3c22979d 100644 --- a/packages/api-fetch/package.json +++ b/packages/api-fetch/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/api-fetch", - "version": "2.2.4", + "version": "2.2.5", "description": "Utility to make WordPress REST API requests.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index b2d15a2e64cef5..064177c097fcee 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "2.2.4", + "version": "2.2.5", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 176def63903a7c..d03529c48731a5 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/blocks", - "version": "6.0.0", + "version": "6.0.1", "description": "Block API for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/components/package.json b/packages/components/package.json index 24ad3e68fbd39d..4e0cfe2929f10e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/components", - "version": "6.0.2", + "version": "7.0.0", "description": "UI components for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/core-data/package.json b/packages/core-data/package.json index 0ae20c85125e77..ad9917d785bad3 100644 --- a/packages/core-data/package.json +++ b/packages/core-data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/core-data", - "version": "2.0.13", + "version": "2.0.14", "description": "Access to and manipulation of core WordPress entities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/data/package.json b/packages/data/package.json index c0bd206f435136..493c9af3bd7be5 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/data", - "version": "4.0.0", + "version": "4.0.1", "description": "Data module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/dom/package.json b/packages/dom/package.json index 896a7bbf21a3eb..4da707b746bfe7 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/dom", - "version": "2.0.6", + "version": "2.0.7", "description": "DOM utilities module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 05132ff4e3974a..a6e719bc603b99 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-post", - "version": "3.0.2", + "version": "3.1.0", "description": "Edit Post module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/editor/package.json b/packages/editor/package.json index 71b536aa1ba38b..aa24d3bd941aec 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/editor", - "version": "8.0.0", + "version": "9.0.0", "description": "Building blocks for WordPress editors.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/format-library/package.json b/packages/format-library/package.json index ada7e7d088d2b3..0047fff85984ed 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/format-library", - "version": "1.2.2", + "version": "1.2.3", "description": "Format library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json index a962af91ec62ff..f2b63d889ac04e 100644 --- a/packages/jest-console/package.json +++ b/packages/jest-console/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/jest-console", - "version": "2.0.6", + "version": "2.0.7", "description": "Custom Jest matchers for the Console object.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json index 29402dfb79ec8c..29eb38c9cb8239 100644 --- a/packages/jest-preset-default/package.json +++ b/packages/jest-preset-default/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/jest-preset-default", - "version": "3.0.2", + "version": "3.0.3", "description": "Default Jest preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index 331f0f40a03233..399cdf6bc96918 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keycodes", - "version": "2.0.3", + "version": "2.0.4", "description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json index 41a0a9031e5a6a..6407589f85a68b 100644 --- a/packages/list-reusable-blocks/package.json +++ b/packages/list-reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/list-reusable-blocks", - "version": "1.1.12", + "version": "1.1.13", "description": "Adding Export/Import support to the reusable blocks listing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/notices/package.json b/packages/notices/package.json index 5a600a1b5c5552..03ca94a9c9bb6c 100644 --- a/packages/notices/package.json +++ b/packages/notices/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/notices", - "version": "1.0.5", + "version": "1.1.0", "description": "State management for notices.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/nux/package.json b/packages/nux/package.json index d4e338cb4662dd..6f6a4ac3d3a06e 100644 --- a/packages/nux/package.json +++ b/packages/nux/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/nux", - "version": "3.0.0", + "version": "3.0.1", "description": "NUX (New User eXperience) module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index e14fcf4f8f5145..de834f6c7451e2 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/rich-text", - "version": "3.0.0", + "version": "3.0.1", "description": "Rich text value and manipulation API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 9656fa50392b1e..fbbbff832e7360 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/scripts", - "version": "2.4.3", + "version": "2.4.4", "description": "Collection of JS scripts for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/token-list/package.json b/packages/token-list/package.json index 10d61bc732a78a..96543d049246f5 100644 --- a/packages/token-list/package.json +++ b/packages/token-list/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/token-list", - "version": "1.0.2", + "version": "1.1.0", "description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/url/package.json b/packages/url/package.json index ddf20dd9cde912..197f2726a64136 100644 --- a/packages/url/package.json +++ b/packages/url/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/url", - "version": "2.3.0", + "version": "2.3.1", "description": "WordPress URL utilities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/viewport/package.json b/packages/viewport/package.json index cca7198e6588b7..11da1c485c9d70 100644 --- a/packages/viewport/package.json +++ b/packages/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/viewport", - "version": "2.0.11", + "version": "2.0.12", "description": "Viewport module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 6a8ee534f19588dc7d08c4b783dc941b66e68680 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 20 Nov 2018 23:42:18 +0100 Subject: [PATCH 04/49] Update published packages changelogs (#12137) --- packages/annotations/CHANGELOG.md | 2 ++ packages/api-fetch/CHANGELOG.md | 4 +++- packages/block-library/CHANGELOG.md | 2 ++ packages/blocks/CHANGELOG.md | 10 ++++++---- packages/components/CHANGELOG.md | 2 +- packages/core-data/CHANGELOG.md | 4 +++- packages/data/CHANGELOG.md | 6 ++++-- packages/dom/CHANGELOG.md | 4 +++- packages/edit-post/CHANGELOG.md | 2 +- packages/editor/CHANGELOG.md | 2 +- packages/format-library/CHANGELOG.md | 3 ++- packages/jest-console/CHANGELOG.md | 4 +++- packages/jest-preset-default/CHANGELOG.md | 8 +++++--- packages/keycodes/CHANGELOG.md | 4 +++- packages/list-reusable-blocks/CHANGELOG.md | 2 ++ packages/notices/CHANGELOG.md | 2 +- packages/nux/CHANGELOG.md | 2 ++ packages/rich-text/CHANGELOG.md | 2 ++ packages/scripts/CHANGELOG.md | 2 ++ packages/token-list/CHANGELOG.md | 2 +- packages/url/CHANGELOG.md | 5 +++-- packages/viewport/CHANGELOG.md | 4 +++- 22 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md index f8bd3d08f2c7bc..16735d5488527c 100644 --- a/packages/annotations/CHANGELOG.md +++ b/packages/annotations/CHANGELOG.md @@ -1,3 +1,5 @@ +## 1.0.2 (2018-11-20) + ## 1.0.1 (2018-11-15) ## 1.0.0 (2018-11-12) diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md index 733d979bc8ce89..912d833f3b909e 100644 --- a/packages/api-fetch/CHANGELOG.md +++ b/packages/api-fetch/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.2.5 (2018-11-20) + ## 2.2.4 (2018-11-15) ## 2.2.3 (2018-11-12) @@ -22,4 +24,4 @@ ### Breaking Change -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 9dc4bfe833a91b..742b16f21091b5 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.2.5 (2018-11-20) + ## 2.2.4 (2018-11-15) ## 2.2.3 (2018-11-12) diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index 05a69fef416970..dfc293e7cd1267 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -1,3 +1,5 @@ +## 6.0.1 (2018-11-20) + ## 6.0.0 (2018-11-15) ### Breaking Changes @@ -19,9 +21,9 @@ ## 5.2.0 (2018-11-09) -- Paste: Google Docs: fix nested formatting, sub, sup and del. -- Expose @wordpress/editor to Gutenberg mobile. -- Separate Paste Handler. +- Paste: Google Docs: fix nested formatting, sub, sup and del. +- Expose @wordpress/editor to Gutenberg mobile. +- Separate Paste Handler. ## 5.1.2 (2018-11-03) @@ -64,7 +66,7 @@ ### Breaking Changes - The `isSharedBlock` function is removed. Use `isReusableBlock` instead. -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. ### Deprecations diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 81726381c57f13..7829968a373b2b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,4 +1,4 @@ -## 7.0.0 (Unreleased) +## 7.0.0 (2018-11-20) ### Breaking Change diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md index aebc238e5fe4aa..98ed42a5473f08 100644 --- a/packages/core-data/CHANGELOG.md +++ b/packages/core-data/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.0.14 (2018-11-20) + ## 2.0.13 (2018-11-15) ## 2.0.12 (2018-11-12) @@ -26,4 +28,4 @@ - `select("core").getCategories` has been deprecated. Please use `select("core").getEntityRecords` instead. - `wp.data.select("core").isRequestingCategories` has been deprecated. Please use `wp.data.select("core/data").isResolving` instead. - `select("core").isRequestingTerms` has been deprecated. Please use `select("core").isResolving` instead. -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md index 24d44618c11ffd..18139501460cc3 100644 --- a/packages/data/CHANGELOG.md +++ b/packages/data/CHANGELOG.md @@ -1,3 +1,5 @@ +## 4.0.1 (2018-11-20) + ## 4.0.0 (2018-11-15) ### Breaking Changes @@ -68,5 +70,5 @@ - The `withRehdyration` function is removed. Use the persistence plugin instead. - The `loadAndPersist` function is removed. Use the persistence plugin instead. -- `restrictPersistence`, `setPersistenceStorage` and `setupPersistence` functions have been removed. Please use the data persistence plugin instead. -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- `restrictPersistence`, `setPersistenceStorage` and `setupPersistence` functions have been removed. Please use the data persistence plugin instead. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md index a14324346a986b..9e07c5fa5ef3ce 100644 --- a/packages/dom/CHANGELOG.md +++ b/packages/dom/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.0.7 (2018-11-20) + ## 2.0.6 (2018-11-09) ## 2.0.5 (2018-11-09) @@ -10,4 +12,4 @@ ### Breaking Change -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index 4eeda8d66d7502..0b741baabd375c 100644 --- a/packages/edit-post/CHANGELOG.md +++ b/packages/edit-post/CHANGELOG.md @@ -1,4 +1,4 @@ -## 3.1.0 (Unreleased) +## 3.1.0 (2018-11-20) ### New Feature diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 65eb76bccf8f7b..45eb7c15d2418e 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -1,4 +1,4 @@ -## 9.0.0 (Unreleased) +## 9.0.0 (2018-11-20) ### Breaking Changes diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index eb34600a9949e1..58bd7408389532 100644 --- a/packages/format-library/CHANGELOG.md +++ b/packages/format-library/CHANGELOG.md @@ -1,6 +1,7 @@ -## 1.2.3 (Unreleased) +## 1.2.3 (2018-11-20) ### Bug fixes + - Link URL validation now works correctly when a URL includes a fragment. Previously any URL containing a fragment failed validation. - Link URL validation catches an incorrect number of forward slashes following a url using the http protocol. diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md index ac2322f83c5641..040d1ce478d1fe 100644 --- a/packages/jest-console/CHANGELOG.md +++ b/packages/jest-console/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.0.7 (2018-11-20) + ## 2.0.5 (2018-09-30) ### Bug Fixes @@ -19,7 +21,7 @@ ### Polish -- Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119)) +- Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119)) ## 1.0.6 (2018-02-28) diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md index 3d88696419728b..d8e7f824556493 100644 --- a/packages/jest-preset-default/CHANGELOG.md +++ b/packages/jest-preset-default/CHANGELOG.md @@ -1,3 +1,5 @@ +## 3.0.3 (2018-11-20) + ## 3.0.2 (2018-11-09) ## 3.0.1 (2018-11-09) @@ -22,11 +24,11 @@ ### Polish -- Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119)) +- Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119)) ## 1.0.5 (2018-03-22) ### Polish -- Docs: Wrap filename in backticks ([#89](https://github.com/WordPress/packages/pull/89)) -- Add `jest-preset` keyword to `jest-preset-default` package ([#92](https://github.com/WordPress/packages/pull/92)) +- Docs: Wrap filename in backticks ([#89](https://github.com/WordPress/packages/pull/89)) +- Add `jest-preset` keyword to `jest-preset-default` package ([#92](https://github.com/WordPress/packages/pull/92)) diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md index 9c0e0dcaa72dce..ab84c2c4dc075a 100644 --- a/packages/keycodes/CHANGELOG.md +++ b/packages/keycodes/CHANGELOG.md @@ -1,7 +1,9 @@ +## 2.0.4 (2018-11-20) + ## 2.0.3 (2018-10-30) ## 2.0.0 (2018-09-05) ### Breaking Change -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md index 0712d0cf932867..26020674f2a31e 100644 --- a/packages/list-reusable-blocks/CHANGELOG.md +++ b/packages/list-reusable-blocks/CHANGELOG.md @@ -1,3 +1,5 @@ +## 1.1.13 (2018-11-20) + ## 1.1.12 (2018-11-15) ## 1.1.11 (2018-11-12) diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md index 6a38ce167d73af..3699727ec708e7 100644 --- a/packages/notices/CHANGELOG.md +++ b/packages/notices/CHANGELOG.md @@ -1,4 +1,4 @@ -## 1.1.0 (Unreleased) +## 1.1.0 (2018-11-20) ### New Feature diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md index 1db9b6a1e2ae8f..5adb00aacdd307 100644 --- a/packages/nux/CHANGELOG.md +++ b/packages/nux/CHANGELOG.md @@ -1,3 +1,5 @@ +## 3.0.1 (2018-11-20) + ## 3.0.0 (2018-11-15) ### Breaking Changes diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md index d9c2664864efa9..4a2ad2d43f85fd 100644 --- a/packages/rich-text/CHANGELOG.md +++ b/packages/rich-text/CHANGELOG.md @@ -1,3 +1,5 @@ +## 3.0.1 (2018-11-20) + ## 3.0.0 (2018-11-15) ### Breaking Changes diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 89b2da214d8aba..c07fe9a2e6d566 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.4.4 (2018-11-20) + ## 2.4.3 (2018-11-09) ## 2.4.2 (2018-11-09) diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md index 8bf612a4669aa9..4f09e8ebd8395f 100644 --- a/packages/token-list/CHANGELOG.md +++ b/packages/token-list/CHANGELOG.md @@ -1,4 +1,4 @@ -## 1.1.0 (Unreleased) +## 1.1.0 (2018-11-20) ### Enhancements diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md index 0ec863c87def5a..984fb0428eb281 100644 --- a/packages/url/CHANGELOG.md +++ b/packages/url/CHANGELOG.md @@ -1,6 +1,7 @@ -## 2.3.1 (Unreleased) +## 2.3.1 (2018-11-20) ### Bug fixes + - The `isValidProtocol` function now correctly considers the protocol of the URL as only incoporating characters up to and including the colon (':'). - `getFragment` is now greedier and matches fragments from the first occurence of the '#' symbol instead of the last. @@ -43,4 +44,4 @@ ### Breaking Change -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md index 092b542e113d49..0dd9a1369466c0 100644 --- a/packages/viewport/CHANGELOG.md +++ b/packages/viewport/CHANGELOG.md @@ -1,3 +1,5 @@ +## 2.0.12 (2018-11-20) + ## 2.0.11 (2018-11-15) ## 2.0.10 (2018-11-09) @@ -16,4 +18,4 @@ ### Breaking Change -- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. +- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. From eccb423b37de112e5fc78078b5a0435d1fe0f713 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Wed, 21 Nov 2018 00:07:57 +0100 Subject: [PATCH 05/49] Add react-native module property to html-entities package.json (#12131) --- packages/html-entities/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index 1b74e5ebb8f89c..89754753841825 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -19,6 +19,7 @@ }, "main": "build/index.js", "module": "build-module/index.js", + "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.0.0" }, From 114c443fc6e6289c5acf8c1851037d5dbb1bf8c6 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 21 Nov 2018 15:11:13 +1100 Subject: [PATCH 06/49] Fix undefined index warnings in Latest Comments & Latest Posts (#12149) In 53c975b, `prepare_attributes_for_render` was changed so that the `$attributes` array that is passed to `render_callback` contains the same keys as what is passed to the block on the front-end. This caused some 'Undefined index' notices in the Latest Comments and Latest Posts blocks. We need to be using `isset()` when using attributes that do not have a default value defined. --- .../src/latest-comments/index.php | 2 +- .../block-library/src/latest-posts/index.php | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/latest-comments/index.php b/packages/block-library/src/latest-comments/index.php index 927157eb43481d..b06cccd6c0a789 100644 --- a/packages/block-library/src/latest-comments/index.php +++ b/packages/block-library/src/latest-comments/index.php @@ -119,7 +119,7 @@ function gutenberg_render_block_core_latest_comments( $attributes = array() ) { } $class = 'wp-block-latest-comments'; - if ( $attributes['align'] ) { + if ( isset( $attributes['align'] ) ) { $class .= " align{$attributes['align']}"; } if ( $attributes['displayAvatar'] ) { diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php index 850192a5492c3e..5a582957c6b7f8 100644 --- a/packages/block-library/src/latest-posts/index.php +++ b/packages/block-library/src/latest-posts/index.php @@ -13,16 +13,19 @@ * @return string Returns the post content with latest posts added. */ function render_block_core_latest_posts( $attributes ) { - $recent_posts = wp_get_recent_posts( - array( - 'numberposts' => $attributes['postsToShow'], - 'post_status' => 'publish', - 'order' => $attributes['order'], - 'orderby' => $attributes['orderBy'], - 'category' => $attributes['categories'], - ) + $args = array( + 'numberposts' => $attributes['postsToShow'], + 'post_status' => 'publish', + 'order' => $attributes['order'], + 'orderby' => $attributes['orderBy'], ); + if ( isset( $attributes['categories'] ) ) { + $args['categories'] = $attributes['categories']; + } + + $recent_posts = wp_get_recent_posts( $args ); + $list_items_markup = ''; foreach ( $recent_posts as $post ) { From ec1a4cbe126d860f0feb0dda8c0c8f8c1d38419b Mon Sep 17 00:00:00 2001 From: Kevin Killingsworth Date: Wed, 21 Nov 2018 01:21:38 -0600 Subject: [PATCH 07/49] Docs: Fix dead links in CONTRIBUTING.md (#12144) This fixes some now-dead links that fell victim to moving and renaming things. --- CONTRIBUTING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 37c7e602bb7085..4ccb59aa2df443 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -104,11 +104,11 @@ For example, `add/gallery-block` means you're working on adding a new gallery bl You can pick among all the tickets, or some of the ones labelled Good First Issue. -The workflow is documented in greater detail in the [repository management](./docs/reference/repository-management.md) document. +The workflow is documented in greater detail in the [repository management](./docs/contributors/repository-management.md) document. ## 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/reference/testing-overview.md). +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). ## Managing packages @@ -238,7 +238,7 @@ Choose the correct version based on `CHANGELOG.md` files, confirm your choices a ## How Designers Can Contribute -If you'd like to contribute to the design or front-end, feel free to contribute to tickets labelled Design. We could use your thoughtful replies, mockups, animatics, sketches, doodles. Proposed changes are best done as minimal and specific iterations on the work that precedes it so we can compare. If you use Sketch, you can grab the source file for the mockups (updated April 6th). +If you'd like to contribute to the design or front-end, feel free to contribute to tickets labelled [Needs Design](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A%22Needs+Design%22) or [Needs Design Feedback](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3A"Needs+Design+Feedback%22). We could use your thoughtful replies, mockups, animatics, sketches, doodles. Proposed changes are best done as minimal and specific iterations on the work that precedes it so we can compare. If you use Sketch, you can grab the source file for the mockups (updated April 6th). ## Contribute to the Documentation From 278b32204ddf63a3c7022ce42145137131a44e4b Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 21 Nov 2018 19:16:16 +1100 Subject: [PATCH 08/49] Revert "Honor the Disable Visual Editor setting (#12000)" (#12151) * Revert "Honor the Disable Visual Editor setting (#12000)" This reverts commit 095d18fe5f1b55ab243cdba947740542e5b0fe47. * Add support for RichEditing in Gutenberg * Typo --- gutenberg.php | 7 --- lib/client-assets.php | 8 ++++ .../components/header/header-toolbar/index.js | 6 +-- .../components/header/mode-switcher/index.js | 4 +- .../components/keyboard-shortcuts/index.js | 6 ++- .../edit-post/src/components/layout/index.js | 6 ++- .../src/components/text-editor/index.js | 46 +++++++++++-------- packages/editor/src/store/defaults.js | 20 ++++---- 8 files changed, 62 insertions(+), 41 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index d2a073b74968dc..89c0d0b151e67f 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -200,13 +200,6 @@ function gutenberg_pre_init() { add_filter( 'replace_editor', 'gutenberg_init', 10, 2 ); } -/** - * Enable Gutenberg based on user_can_richedit setting. - * Set gutenberg_can_edit_post based on user setting for disable visual editor. - */ -add_filter( 'gutenberg_can_edit_post_type', 'user_can_richedit', 5 ); -add_filter( 'gutenberg_can_edit_post', 'user_can_richedit', 5 ); - /** * Initialize Gutenberg. * diff --git a/lib/client-assets.php b/lib/client-assets.php index fd1553c3cfd87b..6d1522b57d3702 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -1055,6 +1055,13 @@ function gutenberg_editor_scripts_and_styles( $hook ) { 'after' ); + // Ignore Classic Editor's `rich_editing` user option, aka "Disable visual + // editor". Forcing this to be true guarantees that TinyMCE and its plugins + // are available in Gutenberg. Fixes + // https://github.com/WordPress/gutenberg/issues/5667. + $user_can_richedit = user_can_richedit(); + add_filter( 'user_can_richedit', '__return_true' ); + wp_enqueue_script( 'wp-edit-post' ); wp_enqueue_script( 'wp-format-library' ); wp_enqueue_style( 'wp-format-library' ); @@ -1294,6 +1301,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) { 'allowedMimeTypes' => get_allowed_mime_types(), 'styles' => $styles, 'imageSizes' => gutenberg_get_available_image_sizes(), + 'richEditingEnabled' => $user_can_richedit, // Ideally, we'd remove this and rely on a REST API endpoint. 'postLock' => $lock_details, diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index e5e92af1f2a645..ef56ca64b3ad77 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -21,7 +21,7 @@ import { */ import FullscreenModeClose from '../fullscreen-mode-close'; -function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) { +function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter } ) { const toolbarAriaLabel = hasFixedToolbar ? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */ __( 'Document and block tools' ) : @@ -35,7 +35,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) { >
- + { __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more!' ) } @@ -56,7 +56,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) { export default compose( [ withSelect( ( select ) => ( { hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), - mode: select( 'core/edit-post' ).getEditorMode(), + showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/editor' ).getEditorSettings().richEditingEnabled, } ) ), withViewportMatch( { isLargeViewport: 'medium' } ), ] )( HeaderToolbar ); diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 849284d8e73a75..52ca0b78cfc945 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { MenuItemsChoice, MenuGroup } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; +import { compose, ifCondition } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; /** @@ -49,8 +49,10 @@ function ModeSwitcher( { onSwitch, mode } ) { export default compose( [ withSelect( ( select ) => ( { + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, mode: select( 'core/edit-post' ).getEditorMode(), } ) ), + ifCondition( ( { isRichEditingEnabled } ) => isRichEditingEnabled ), withDispatch( ( dispatch, ownProps ) => ( { onSwitch( mode ) { dispatch( 'core/edit-post' ).switchEditorMode( mode ); diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index 625f29e99bccd2..30bd8d02a4d11a 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -20,7 +20,10 @@ class EditorModeKeyboardShortcuts extends Component { } toggleMode() { - const { mode, switchMode } = this.props; + const { mode, switchMode, isRichEditingEnabled } = this.props; + if ( ! isRichEditingEnabled ) { + return; + } switchMode( mode === 'visual' ? 'text' : 'visual' ); } @@ -52,6 +55,7 @@ class EditorModeKeyboardShortcuts extends Component { export default compose( [ withSelect( ( select ) => ( { + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, mode: select( 'core/edit-post' ).getEditorMode(), isEditorSidebarOpen: select( 'core/edit-post' ).isEditorSidebarOpened(), hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(), diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index ed5773e5182f5b..5a4018bc9dd1b6 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -50,6 +50,7 @@ function Layout( { hasActiveMetaboxes, isSaving, isMobileViewport, + isRichEditingEnabled, } ) { const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened; @@ -84,8 +85,8 @@ function Layout( { - { mode === 'text' && } - { mode === 'visual' && } + { ( mode === 'text' || ! isRichEditingEnabled ) && } + { isRichEditingEnabled && mode === 'visual' && }
@@ -137,6 +138,7 @@ export default compose( hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, } ) ), withDispatch( ( dispatch ) => { const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' ); diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js index 2f3e27e25fc455..019a19b2e518c8 100644 --- a/packages/edit-post/src/components/text-editor/index.js +++ b/packages/edit-post/src/components/text-editor/index.js @@ -3,23 +3,26 @@ */ import { PostTextEditor, PostTitle } from '@wordpress/editor'; import { IconButton } from '@wordpress/components'; -import { withDispatch } from '@wordpress/data'; +import { withDispatch, withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { displayShortcut } from '@wordpress/keycodes'; +import { compose } from '@wordpress/compose'; -function TextEditor( { onExit } ) { +function TextEditor( { onExit, isRichEditingEnabled } ) { return (
-
-

{ __( 'Editing Code' ) }

- - { __( 'Exit Code Editor' ) } - -
+ { isRichEditingEnabled && ( +
+

{ __( 'Editing Code' ) }

+ + { __( 'Exit Code Editor' ) } + +
+ ) }
@@ -28,10 +31,15 @@ function TextEditor( { onExit } ) { ); } -export default withDispatch( ( dispatch ) => { - return { - onExit() { - dispatch( 'core/edit-post' ).switchEditorMode( 'visual' ); - }, - }; -} )( TextEditor ); +export default compose( + withSelect( ( select ) => ( { + isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, + } ) ), + withDispatch( ( dispatch ) => { + return { + onExit() { + dispatch( 'core/edit-post' ).switchEditorMode( 'visual' ); + }, + }; + } ) +)( TextEditor ); diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js index 78a05a7a315bf3..dc4111ef641d40 100644 --- a/packages/editor/src/store/defaults.js +++ b/packages/editor/src/store/defaults.js @@ -11,14 +11,15 @@ export const PREFERENCES_DEFAULTS = { /** * The default editor settings * - * alignWide boolean Enable/Disable Wide/Full Alignments - * colors Array Palette colors - * fontSizes Array Available font sizes - * imageSizes Array Available image sizes - * maxWidth number Max width to constraint resizing - * blockTypes boolean|Array Allowed block types - * hasFixedToolbar boolean Whether or not the editor toolbar is fixed - * focusMode boolean Whether the focus mode is enabled or not + * alignWide boolean Enable/Disable Wide/Full Alignments + * colors Array Palette colors + * fontSizes Array Available font sizes + * imageSizes Array Available image sizes + * maxWidth number Max width to constraint resizing + * blockTypes boolean|Array Allowed block types + * hasFixedToolbar boolean Whether or not the editor toolbar is fixed + * focusMode boolean Whether the focus mode is enabled or not + * richEditingEnabled boolean Whether rich editing is enabled or not */ export const EDITOR_SETTINGS_DEFAULTS = { alignWide: false, @@ -126,6 +127,9 @@ export const EDITOR_SETTINGS_DEFAULTS = { // List of allowed mime types and file extensions. allowedMimeTypes: null, + + // Whether richs editing is enabled or not. + richEditingEnabled: true, }; /** From e05eb6d0d1219c7c0bdd977eeb5c04f3a3ffd373 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Nov 2018 09:19:09 +0100 Subject: [PATCH 09/49] Avoid showing draft revert message on autosaves (#12155) * Avoid showing draft revert message on autosaves * Fix unit tests --- packages/editor/src/store/effects/posts.js | 4 ++-- packages/editor/src/store/test/effects.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/store/effects/posts.js b/packages/editor/src/store/effects/posts.js index a1a24a1f6d3be6..ed5f596b167d42 100644 --- a/packages/editor/src/store/effects/posts.js +++ b/packages/editor/src/store/effects/posts.js @@ -170,10 +170,10 @@ export const requestPostUpdate = async ( action, store ) => { * @param {Object} store Redux Store. */ export const requestPostUpdateSuccess = ( action ) => { - const { previousPost, post, isAutosave, postType } = action; + const { previousPost, post, postType } = action; // Autosaves are neither shown a notice nor redirected. - if ( isAutosave ) { + if ( get( action.options, [ 'isAutosave' ] ) ) { return; } diff --git a/packages/editor/src/store/test/effects.js b/packages/editor/src/store/test/effects.js index 48985b9cacfbc5..a6ce470d86e541 100644 --- a/packages/editor/src/store/test/effects.js +++ b/packages/editor/src/store/test/effects.js @@ -320,7 +320,7 @@ describe( 'effects', () => { const previousPost = getPublishedPost(); const post = { ...getPublishedPost(), id: defaultPost.id + 1 }; - handler( { post, previousPost, isAutosave: true } ); + handler( { post, previousPost, options: { isAutosave: true } } ); expect( dataDispatch( 'core/notices' ).createSuccessNotice ).not.toHaveBeenCalled(); } ); From fd1b074c7767bfc82d960a0a7ad845c22a20d638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Wed, 21 Nov 2018 09:48:16 +0100 Subject: [PATCH 10/49] Raw Handling: fix consecutive lists with one item (#12156) --- packages/blocks/src/api/raw-handling/list-reducer.js | 6 +++++- packages/blocks/src/api/raw-handling/test/list-reducer.js | 6 ++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/blocks/src/api/raw-handling/list-reducer.js b/packages/blocks/src/api/raw-handling/list-reducer.js index 0025cc6cb5cb60..a5f079dcb24880 100644 --- a/packages/blocks/src/api/raw-handling/list-reducer.js +++ b/packages/blocks/src/api/raw-handling/list-reducer.js @@ -29,7 +29,11 @@ export default function( node ) { prevElement.nodeName === node.nodeName && list.children.length === 1 ) { - prevElement.appendChild( list.firstChild ); + // Move all child nodes, including any text nodes, if any. + while ( list.firstChild ) { + prevElement.appendChild( list.firstChild ); + } + list.parentNode.removeChild( list ); } diff --git a/packages/blocks/src/api/raw-handling/test/list-reducer.js b/packages/blocks/src/api/raw-handling/test/list-reducer.js index cb55a63181a385..9d1b053627295d 100644 --- a/packages/blocks/src/api/raw-handling/test/list-reducer.js +++ b/packages/blocks/src/api/raw-handling/test/list-reducer.js @@ -11,6 +11,12 @@ describe( 'listReducer', () => { expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output ); } ); + it( 'should merge lists with whitespace', () => { + const input = '
    \n
  • one
    • \n
\n
    \n
  • two
    • \n
'; + const output = '
    \n
  • one
    • \n\n
  • two
    • \n
\n'; + expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output ); + } ); + it( 'should not merge lists if it has more than one item', () => { const input = '
  • one
  • two
  • three
'; expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( input ); From e651069da2302499d1254c3c02442993547a9410 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Wed, 21 Nov 2018 10:05:48 +0100 Subject: [PATCH 11/49] RichText: List: Sync DOM after editor command (#12089) * Fix list dom sync * Add e2e test --- .../editor/src/components/rich-text/index.js | 1 + .../src/components/rich-text/list-edit.js | 34 +++++++++++++++---- .../blocks/__snapshots__/list.test.js.snap | 6 ++++ test/e2e/specs/blocks/list.test.js | 9 +++++ 4 files changed, 43 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index 43df39403e3bbd..2033ce14cb8f7d 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -861,6 +861,7 @@ export class RichText extends Component { editor={ this.editor } onTagNameChange={ onTagNameChange } tagName={ Tagname } + onSyncDOM={ () => this.onChange( this.createRecord() ) } /> ) } { isSelected && ! inlineToolbar && ( diff --git a/packages/editor/src/components/rich-text/list-edit.js b/packages/editor/src/components/rich-text/list-edit.js index 9d7e40f4b414cd..1e92d3d792eb49 100644 --- a/packages/editor/src/components/rich-text/list-edit.js +++ b/packages/editor/src/components/rich-text/list-edit.js @@ -35,27 +35,39 @@ function isActiveListType( editor, tagName, rootTagName ) { return list.nodeName.toLowerCase() === tagName; } -export const ListEdit = ( { editor, onTagNameChange, tagName } ) => ( +export const ListEdit = ( { editor, onTagNameChange, tagName, onSyncDOM } ) => ( editor.execCommand( 'Outdent' ) } + onUse={ () => { + editor.execCommand( 'Outdent' ); + onSyncDOM(); + } } /> editor.execCommand( 'Indent' ) } + onUse={ () => { + editor.execCommand( 'Indent' ); + onSyncDOM(); + } } /> editor.execCommand( 'Indent' ) } + onUse={ () => { + editor.execCommand( 'Indent' ); + onSyncDOM(); + } } /> editor.execCommand( 'Outdent' ) } + onUse={ () => { + editor.execCommand( 'Outdent' ); + onSyncDOM(); + } } /> ( onTagNameChange( 'ul' ); } else { editor.execCommand( 'InsertUnorderedList' ); + onSyncDOM(); } }, }, @@ -81,18 +94,25 @@ export const ListEdit = ( { editor, onTagNameChange, tagName } ) => ( onTagNameChange( 'ol' ); } else { editor.execCommand( 'InsertOrderedList' ); + onSyncDOM(); } }, }, { icon: 'editor-outdent', title: __( 'Outdent list item' ), - onClick: () => editor.execCommand( 'Outdent' ), + onClick() { + editor.execCommand( 'Outdent' ); + onSyncDOM(); + }, }, { icon: 'editor-indent', title: __( 'Indent list item' ), - onClick: () => editor.execCommand( 'Indent' ), + onClick() { + editor.execCommand( 'Indent' ); + onSyncDOM(); + }, }, ] } /> diff --git a/test/e2e/specs/blocks/__snapshots__/list.test.js.snap b/test/e2e/specs/blocks/__snapshots__/list.test.js.snap index a804ea84132d3d..19a5186156809e 100644 --- a/test/e2e/specs/blocks/__snapshots__/list.test.js.snap +++ b/test/e2e/specs/blocks/__snapshots__/list.test.js.snap @@ -80,6 +80,12 @@ exports[`List can undo asterisk transform 1`] = ` " `; +exports[`List should be immeadiately saved on indentation 1`] = ` +" +
  • one
+" +`; + exports[`List should create paragraph on split at end and merge back with content 1`] = ` "
  • one
diff --git a/test/e2e/specs/blocks/list.test.js b/test/e2e/specs/blocks/list.test.js index 3d416b998d1371..f4bd5b29d90943 100644 --- a/test/e2e/specs/blocks/list.test.js +++ b/test/e2e/specs/blocks/list.test.js @@ -194,4 +194,13 @@ describe( 'List', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should be immeadiately saved on indentation', async () => { + await insertBlock( 'List' ); + await page.keyboard.type( 'one' ); + await page.keyboard.press( 'Enter' ); + await pressWithModifier( 'primary', 'm' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); From 01be7ac89b97b76c490d57a15c16466657240770 Mon Sep 17 00:00:00 2001 From: Anton Timmermans Date: Wed, 21 Nov 2018 11:02:20 +0100 Subject: [PATCH 12/49] Fix RichText rerendering when it shouldn't (#12161) * Fix RichText rerendering when it shouldn't The prepareEditableTree and onChangeEditableValue function stacks would have a new reference on every render. This prevents that by memoized the stack based on the previous stack and the newly added function. * Rename emptyArray to EMPTY_ARRAY * Add memize as a dependency to annotations package --- package-lock.json | 1 + packages/annotations/package.json | 1 + packages/annotations/src/format/annotation.js | 55 ++++++++++++++----- packages/annotations/src/store/selectors.js | 17 +++++- .../rich-text/src/register-format-type.js | 35 +++++++++--- 5 files changed, 84 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index e5d3df1c2322bf..90395bff8c7c94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2283,6 +2283,7 @@ "@wordpress/i18n": "file:packages/i18n", "@wordpress/rich-text": "file:packages/rich-text", "lodash": "^4.17.10", + "memize": "^1.0.5", "rememo": "^3.0.0", "uuid": "^3.3.2" } diff --git a/packages/annotations/package.json b/packages/annotations/package.json index ec6f312c18f1de..6a177913bbc094 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -26,6 +26,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/rich-text": "file:../rich-text", "lodash": "^4.17.10", + "memize": "^1.0.5", "rememo": "^3.0.0", "uuid": "^3.3.2" }, diff --git a/packages/annotations/src/format/annotation.js b/packages/annotations/src/format/annotation.js index a2f6f2973c7268..e72786bad0e3bc 100644 --- a/packages/annotations/src/format/annotation.js +++ b/packages/annotations/src/format/annotation.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import memize from 'memize'; + /** * WordPress dependencies */ @@ -115,6 +120,40 @@ function updateAnnotationsWithPositions( annotations, positions, { removeAnnotat } ); } +/** + * Create prepareEditableTree memoized based on the annotation props. + * + * @param {Object} The props with annotations in them. + * + * @return {Function} The prepareEditableTree. + */ +const createPrepareEditableTree = memize( ( props ) => { + const { annotations } = props; + + return ( formats, text ) => { + if ( annotations.length === 0 ) { + return formats; + } + + let record = { formats, text }; + record = applyAnnotations( record, annotations ); + return record.formats; + }; +} ); + +/** + * Returns the annotations as a props object. Memoized to prevent re-renders. + * + * @param {Array} The annotations to put in the object. + * + * @return {Object} The annotations props object. + */ +const getAnnotationObject = memize( ( annotations ) => { + return { + annotations, + }; +} ); + export const annotation = { name: FORMAT_NAME, title: __( 'Annotation' ), @@ -128,21 +167,9 @@ export const annotation = { return null; }, __experimentalGetPropsForEditableTreePreparation( select, { richTextIdentifier, blockClientId } ) { - return { - annotations: select( STORE_KEY ).__experimentalGetAnnotationsForRichText( blockClientId, richTextIdentifier ), - }; - }, - __experimentalCreatePrepareEditableTree( { annotations } ) { - return ( formats, text ) => { - if ( annotations.length === 0 ) { - return formats; - } - - let record = { formats, text }; - record = applyAnnotations( record, annotations ); - return record.formats; - }; + return getAnnotationObject( select( STORE_KEY ).__experimentalGetAnnotationsForRichText( blockClientId, richTextIdentifier ) ); }, + __experimentalCreatePrepareEditableTree: createPrepareEditableTree, __experimentalGetPropsForEditableTreeChangeHandler( dispatch ) { return { removeAnnotation: dispatch( STORE_KEY ).__experimentalRemoveAnnotation, diff --git a/packages/annotations/src/store/selectors.js b/packages/annotations/src/store/selectors.js index ca6fcb64796d5f..a39a315c92f907 100644 --- a/packages/annotations/src/store/selectors.js +++ b/packages/annotations/src/store/selectors.js @@ -4,6 +4,17 @@ import createSelector from 'rememo'; import { get, flatMap } from 'lodash'; +/** + * Shared reference to an empty array for cases where it is important to avoid + * returning a new array reference on every invocation, as in a connected or + * other pure component which performs `shouldComponentUpdate` check on props. + * This should be used as a last resort, since the normalized data should be + * maintained by the reducer result in state. + * + * @type {Array} + */ +const EMPTY_ARRAY = []; + /** * Returns the annotations for a specific client ID. * @@ -19,12 +30,12 @@ export const __experimentalGetAnnotationsForBlock = createSelector( } ); }, ( state, blockClientId ) => [ - get( state, blockClientId, [] ), + get( state, blockClientId, EMPTY_ARRAY ), ] ); export const __experimentalGetAllAnnotationsForBlock = function( state, blockClientId ) { - return get( state, blockClientId, [] ); + return get( state, blockClientId, EMPTY_ARRAY ); }; /** @@ -54,7 +65,7 @@ export const __experimentalGetAnnotationsForRichText = createSelector( } ); }, ( state, blockClientId ) => [ - get( state, blockClientId, [] ), + get( state, blockClientId, EMPTY_ARRAY ), ] ); diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js index 8b61fc3a4308b1..262812a22b248f 100644 --- a/packages/rich-text/src/register-format-type.js +++ b/packages/rich-text/src/register-format-type.js @@ -2,6 +2,7 @@ * External dependencies */ import { mapKeys } from 'lodash'; +import memize from 'memize'; /** * WordPress dependencies @@ -10,6 +11,17 @@ import { select, dispatch, withSelect, withDispatch } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; import { compose } from '@wordpress/compose'; +/** + * Shared reference to an empty array for cases where it is important to avoid + * returning a new array reference on every invocation, as in a connected or + * other pure component which performs `shouldComponentUpdate` check on props. + * This should be used as a last resort, since the normalized data should be + * maintained by the reducer result in state. + * + * @type {Array} + */ +const EMPTY_ARRAY = []; + /** * Registers a new format provided a unique name and an object defining its * behavior. @@ -119,6 +131,13 @@ export function registerFormatType( name, settings ) { dispatch( 'core/rich-text' ).addFormatTypes( settings ); + const getFunctionStackMemoized = memize( ( previousStack = EMPTY_ARRAY, newFunction ) => { + return [ + ...previousStack, + newFunction, + ]; + } ); + if ( settings.__experimentalGetPropsForEditableTreePreparation ) { @@ -133,13 +152,13 @@ export function registerFormatType( name, settings ) { const additionalProps = {}; if ( settings.__experimentalCreatePrepareEditableTree ) { - additionalProps.prepareEditableTree = [ - ...( props.prepareEditableTree || [] ), + additionalProps.prepareEditableTree = getFunctionStackMemoized( + props.prepareEditableTree, settings.__experimentalCreatePrepareEditableTree( props[ `format_${ name }` ], { richTextIdentifier: props.identifier, blockClientId: props.clientId, - } ), - ]; + } ) + ); } if ( settings.__experimentalCreateOnChangeEditableValue ) { @@ -155,16 +174,16 @@ export function registerFormatType( name, settings ) { return accumulator; }, {} ); - additionalProps.onChangeEditableValue = [ - ...( props.onChangeEditableValue || [] ), + additionalProps.onChangeEditableValue = getFunctionStackMemoized( + props.onChangeEditableValue, settings.__experimentalCreateOnChangeEditableValue( { ...props[ `format_${ name }` ], ...dispatchProps, }, { richTextIdentifier: props.identifier, blockClientId: props.clientId, - } ), - ]; + } ) + ); } return Date: Wed, 21 Nov 2018 11:15:17 +0100 Subject: [PATCH 13/49] Fix keycodes package missing i18n dependency (#12164) --- lib/packages-dependencies.php | 1 + package-lock.json | 5 +++-- packages/keycodes/package.json | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index ee99db32c2005b..0e5bd808399b37 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -184,6 +184,7 @@ 'wp-is-shallow-equal' => array(), 'wp-keycodes' => array( 'lodash', + 'wp-i18n', ), 'wp-list-reusable-blocks' => array( 'lodash', diff --git a/package-lock.json b/package-lock.json index 90395bff8c7c94..80c04029c22c52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2660,6 +2660,7 @@ "version": "file:packages/keycodes", "requires": { "@babel/runtime": "^7.0.0", + "@wordpress/i18n": "file:packages/i18n", "lodash": "^4.17.10" } }, @@ -11403,7 +11404,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { @@ -12714,7 +12715,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index 399cdf6bc96918..d3f9ce99a7e165 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -21,6 +21,7 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.0.0", + "@wordpress/i18n": "file:../i18n", "lodash": "^4.17.10" }, "publishConfig": { From 66d901e641423d7259894d3d2664f9f8872e3d85 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Nov 2018 11:15:53 +0100 Subject: [PATCH 14/49] Bump plugin version to 4.5.1 (#12158) --- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index 89c0d0b151e67f..327a6dba8e76fc 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -3,7 +3,7 @@ * Plugin Name: Gutenberg * Plugin URI: https://github.com/WordPress/gutenberg * Description: Printing since 1440. This is the development plugin for the new block editor in core. - * Version: 4.5.0 + * Version: 4.5.1 * Author: Gutenberg Team * * @package gutenberg diff --git a/package-lock.json b/package-lock.json index 80c04029c22c52..c2e08b8f0d9031 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "4.5.0", + "version": "4.5.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 65928bc9ee5e96..41b226272d1bad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "4.5.0", + "version": "4.5.1", "private": true, "description": "A new WordPress editor experience", "repository": "git+https://github.com/WordPress/gutenberg.git", From 301b902d9c8ca6b1ed6a4deed3f3818d4000c67b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 21 Nov 2018 11:27:18 +0100 Subject: [PATCH 15/49] chore(release): publish - @wordpress/annotations@1.0.3 - @wordpress/block-library@2.2.6 - @wordpress/blocks@6.0.2 - @wordpress/components@7.0.1 - @wordpress/edit-post@3.1.1 - @wordpress/editor@9.0.1 - @wordpress/format-library@1.2.4 - @wordpress/html-entities@2.0.3 - @wordpress/keycodes@2.0.5 - @wordpress/list-reusable-blocks@1.1.14 - @wordpress/nux@3.0.2 - @wordpress/rich-text@3.0.2 --- packages/annotations/package.json | 2 +- packages/block-library/package.json | 2 +- packages/blocks/package.json | 2 +- packages/components/package.json | 2 +- packages/edit-post/package.json | 2 +- packages/editor/package.json | 2 +- packages/format-library/package.json | 2 +- packages/html-entities/package.json | 2 +- packages/keycodes/package.json | 2 +- packages/list-reusable-blocks/package.json | 2 +- packages/nux/package.json | 2 +- packages/rich-text/package.json | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/annotations/package.json b/packages/annotations/package.json index 6a177913bbc094..5a73fb5e31ae49 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/annotations", - "version": "1.0.2", + "version": "1.0.3", "description": "Annotate content in the Gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 064177c097fcee..33633f77deb614 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "2.2.5", + "version": "2.2.6", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blocks/package.json b/packages/blocks/package.json index d03529c48731a5..0235f2c45f3e78 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/blocks", - "version": "6.0.1", + "version": "6.0.2", "description": "Block API for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/components/package.json b/packages/components/package.json index 4e0cfe2929f10e..d0da7943e3255f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/components", - "version": "7.0.0", + "version": "7.0.1", "description": "UI components for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index a6e719bc603b99..502b6541493a82 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-post", - "version": "3.1.0", + "version": "3.1.1", "description": "Edit Post module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/editor/package.json b/packages/editor/package.json index aa24d3bd941aec..7d46585ca6aad6 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/editor", - "version": "9.0.0", + "version": "9.0.1", "description": "Building blocks for WordPress editors.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/format-library/package.json b/packages/format-library/package.json index 0047fff85984ed..6c607684652bd6 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/format-library", - "version": "1.2.3", + "version": "1.2.4", "description": "Format library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index 89754753841825..bd46481b93cf04 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/html-entities", - "version": "2.0.2", + "version": "2.0.3", "description": "HTML entity utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index d3f9ce99a7e165..69970f60f38906 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keycodes", - "version": "2.0.4", + "version": "2.0.5", "description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json index 6407589f85a68b..2e015ac6737d6c 100644 --- a/packages/list-reusable-blocks/package.json +++ b/packages/list-reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/list-reusable-blocks", - "version": "1.1.13", + "version": "1.1.14", "description": "Adding Export/Import support to the reusable blocks listing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/nux/package.json b/packages/nux/package.json index 6f6a4ac3d3a06e..820b6afa670267 100644 --- a/packages/nux/package.json +++ b/packages/nux/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/nux", - "version": "3.0.1", + "version": "3.0.2", "description": "NUX (New User eXperience) module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index de834f6c7451e2..aeb67dbfa3506a 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/rich-text", - "version": "3.0.1", + "version": "3.0.2", "description": "Rich text value and manipulation API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 51c3137007660158e48abc3a7167b415d48c3be4 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 21 Nov 2018 11:58:23 +0100 Subject: [PATCH 16/49] Fix issue with dragondrop in columns (#12159) The selector for enabling pointer events was a little too deep, which meant that dragondrop broke. This fixes it, but the columns block retains the simplicity of not allowing you to click/select columns still. --- packages/block-library/src/columns/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index db8b558c4a85a7..50b21f23523313 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -138,6 +138,6 @@ } // This selector re-enables clicking on any child of a column block. -:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-block-list__layout > * { +:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > * { pointer-events: all; } From 4ddb5aa2353aecf3b170ba5444b9605ce40ab352 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 21 Nov 2018 11:00:39 +0000 Subject: [PATCH 17/49] Fix: remove formats from document outline headings. (#12130) After #8204 was merged, we started using the heading content as the outline item. So if the heading contained custom formats, they were shown in the document outline. Showing the formats in the outline may break the design. This commit makes sure we show the plain text in the hading without any formats. --- .../src/components/document-outline/index.js | 12 ++++++---- .../test/__snapshots__/index.js.snap | 24 ++++--------------- 2 files changed, 11 insertions(+), 25 deletions(-) diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index ad2ca5c2b61816..258bb792e7e3fd 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -9,12 +9,15 @@ import { countBy, flatMap, get } from 'lodash'; import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; +import { + create, + getTextContent, +} from '@wordpress/rich-text'; /** * Internal dependencies */ import DocumentOutlineItem from './item'; -import RichText from './../rich-text'; /** * Module constants @@ -120,10 +123,9 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte > { item.isEmpty ? emptyHeadingContent : - + getTextContent( + create( { html: item.attributes.content } ) + ) } { isIncorrectLevel && incorrectLevelContent } { item.level === 1 && hasMultipleH1 && multipleH1Headings } diff --git a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap index a038d12930951e..89d0ebb04d6582 100644 --- a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap @@ -12,11 +12,7 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = ` onClick={[Function]} path={Array []} > - + Heading parent - + Heading child
@@ -47,11 +39,7 @@ exports[`DocumentOutline header blocks present should render warnings for multip onClick={[Function]} path={Array []} > - + Heading 1
@@ -68,11 +56,7 @@ exports[`DocumentOutline header blocks present should render warnings for multip onClick={[Function]} path={Array []} > - + Heading 1
From 0000e348c7561f3ab53014c4906362a2fd3738bb Mon Sep 17 00:00:00 2001 From: William Earnhardt Date: Wed, 21 Nov 2018 06:03:13 -0500 Subject: [PATCH 18/49] Remove .md only commit check in travis config (#12069) --- .travis.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 5dc3f1ee26230a..bd4b9a57fc707e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -19,11 +19,6 @@ cache: - $HOME/.npm before_install: - - | - git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)' || { - echo "Only docs were updated, stopping build process." - exit - } - nvm install && nvm use - npm install npm -g From 5d275d1c07358edf065b3a43684c669f0ed74a12 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Wed, 21 Nov 2018 04:36:55 -0800 Subject: [PATCH 19/49] Add e2e tests for the format API (#11948) * Add e2e tests for the format API * Fixes some whitespace issues * Update format-api.test.js * Add missing dependencies to the script registration * Add snapshot to test * Check for custom button, remove extra lines * Change modifier keys used From #11855 --- .../__snapshots__/format-api.test.js.snap | 7 ++++ test/e2e/specs/format-api.test.js | 41 +++++++++++++++++++ test/e2e/test-plugins/format-api.php | 23 +++++++++++ test/e2e/test-plugins/format-api/index.js | 33 +++++++++++++++ 4 files changed, 104 insertions(+) create mode 100644 test/e2e/specs/__snapshots__/format-api.test.js.snap create mode 100644 test/e2e/specs/format-api.test.js create mode 100644 test/e2e/test-plugins/format-api.php create mode 100644 test/e2e/test-plugins/format-api/index.js diff --git a/test/e2e/specs/__snapshots__/format-api.test.js.snap b/test/e2e/specs/__snapshots__/format-api.test.js.snap new file mode 100644 index 00000000000000..8dbbc915521be4 --- /dev/null +++ b/test/e2e/specs/__snapshots__/format-api.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Using Format API Clicking the control wraps the selected text properly with HTML code 1`] = ` +" +

First paragraph

+" +`; diff --git a/test/e2e/specs/format-api.test.js b/test/e2e/specs/format-api.test.js new file mode 100644 index 00000000000000..6a1361a854e133 --- /dev/null +++ b/test/e2e/specs/format-api.test.js @@ -0,0 +1,41 @@ +/** + * Internal dependencies + */ +import { + clickBlockAppender, + getEditedPostContent, + newPost, + pressWithModifier, +} from '../support/utils'; +import { activatePlugin, deactivatePlugin } from '../support/plugins'; + +describe( 'Using Format API', () => { + beforeAll( async () => { + await activatePlugin( 'gutenberg-test-format-api' ); + } ); + + afterAll( async () => { + await deactivatePlugin( 'gutenberg-test-format-api' ); + } ); + + beforeEach( async () => { + await newPost(); + } ); + + it( 'Format toolbar is present in a paragraph block', async () => { + await clickBlockAppender(); + await page.keyboard.type( 'First paragraph' ); + await page.mouse.move( 200, 300, { steps: 10 } ); + expect( await page.$( '[aria-label="Custom Link"]' ) ).not.toBeNull(); + } ); + + it( 'Clicking the control wraps the selected text properly with HTML code', async () => { + await clickBlockAppender(); + await page.keyboard.type( 'First paragraph' ); + await pressWithModifier( 'shiftAlt', 'ArrowLeft' ); + await pressWithModifier( 'primary', 'A' ); + await page.mouse.move( 200, 300, { steps: 10 } ); + await page.click( '[aria-label="Custom Link"]' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); +} ); diff --git a/test/e2e/test-plugins/format-api.php b/test/e2e/test-plugins/format-api.php new file mode 100644 index 00000000000000..dc33462affbc89 --- /dev/null +++ b/test/e2e/test-plugins/format-api.php @@ -0,0 +1,23 @@ + Date: Wed, 21 Nov 2018 14:31:52 +0100 Subject: [PATCH 20/49] Improve scoping of nested paragraph right-padding rule (#12106) * Improve scoping of nested paragraph right-padding rule This addresses feedback in https://github.com/WordPress/gutenberg/pull/11757#issuecomment-440269586. The initial issue was that in the default appender, and in empty paragraphs, the plus to add blocks overlaps the placeholder text. The right-padding fixed that. But it bled into other blocks with placeholders, such as the Button block. This PR scopes the rich text rule to only apply to empty paragraphs. The appender was already scoped. * Move paragraph styles to the right place. * Move to editor.scss --- packages/block-library/src/editor.scss | 1 + packages/block-library/src/paragraph/editor.scss | 6 ++++++ packages/editor/src/components/rich-text/style.scss | 6 ------ 3 files changed, 7 insertions(+), 6 deletions(-) create mode 100644 packages/block-library/src/paragraph/editor.scss diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 31c6eccaf829c1..eb2dea826189bd 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -18,6 +18,7 @@ @import "./list/editor.scss"; @import "./more/editor.scss"; @import "./nextpage/editor.scss"; +@import "./paragraph/editor.scss"; @import "./preformatted/editor.scss"; @import "./pullquote/editor.scss"; @import "./quote/editor.scss"; diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss new file mode 100644 index 00000000000000..98ea5e4e2b85a4 --- /dev/null +++ b/packages/block-library/src/paragraph/editor.scss @@ -0,0 +1,6 @@ +// Specific to the empty paragraph placeholder: +// when shown on mobile and in nested contexts, the plus to add blocks shows up on the right. +// This padding makes sure it doesn't overlap text. +.editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce.wp-block-paragraph { + padding-right: $icon-button-size; +} diff --git a/packages/editor/src/components/rich-text/style.scss b/packages/editor/src/components/rich-text/style.scss index b4ebf2b4b8c69f..731809331440cb 100644 --- a/packages/editor/src/components/rich-text/style.scss +++ b/packages/editor/src/components/rich-text/style.scss @@ -100,12 +100,6 @@ // Ensure that if placeholder wraps (mobile/nested contexts) the clickable area is full-height. height: 100%; - - // On mobile and in nested contexts, the plus to add blocks shows up on the right. - // This padding makes sure it doesn't overlap text. - & + .editor-rich-text__tinymce { - padding-right: $icon-button-size; - } } // Placeholder text. From 8bae9259cd621b2417e2e7b95d78825b3c2a5655 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Wed, 21 Nov 2018 14:33:03 +0100 Subject: [PATCH 21/49] RichText: remove onSplit from docs (#12174) --- packages/editor/src/components/rich-text/README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/editor/src/components/rich-text/README.md b/packages/editor/src/components/rich-text/README.md index b5449fbe4ec9e0..19ddd35bd26664 100644 --- a/packages/editor/src/components/rich-text/README.md +++ b/packages/editor/src/components/rich-text/README.md @@ -25,10 +25,6 @@ Render a rich [`contenteditable` input](https://developer.mozilla.org/en-US/docs *Optional.* By default, a line break will be inserted on Enter. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on Enter. -### `onSplit( before: Array|String, after: Array|String, ...blocks: Object ): Function` - -*Optional.* Called when the content can be split with `before` and `after`. There might be blocks present, which should be inserted in between. - ### `onReplace( blocks: Array ): Function` *Optional.* Called when the `RichText` instance is empty and it can be replaced with the given blocks. From 18316878470559a985c580ac4c210a9ca2a73654 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Wed, 21 Nov 2018 14:37:45 +0100 Subject: [PATCH 22/49] Fix TinyMCE list plugin registration (#12170) --- docs/contributors/scripts.md | 3 +-- lib/client-assets.php | 8 ++------ lib/packages-dependencies.php | 2 +- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/contributors/scripts.md b/docs/contributors/scripts.md index 0bd0cf98927921..dd7e1d295d528c 100644 --- a/docs/contributors/scripts.md +++ b/docs/contributors/scripts.md @@ -50,13 +50,12 @@ The editor also uses some popular third-party packages and scripts. Plugin devel | [React](https://reactjs.org) | react | React is a JavaScript library for building user interfaces | | [React Dom](https://reactjs.org/docs/react-dom.html) | react-dom | Serves as the entry point to the DOM and server renderers for React, intended to be paired with React | | [Moment](https://momentjs.com/) | moment| Parse, validate, manipulate, and display dates and times in JavaScript | -| [TinyMCE Lists](https://www.tiny.cloud/docs/plugins/lists/) | tinymce-latest-lists| The `lists` plugin allows you to add numbered and bulleted lists to TinyMCE | | [Lodash](https://lodash.com) | lodash| Lodash is a JavaScript library which provides utility functions for common programming tasks | ## Polyfill Scripts The editor also provides polyfills for certain features that may not be available in all modern browsers. -It is recommened to use the main `wp-polyfill` script handle which takes care of loading all the below mentioned polyfills. +It is recommened to use the main `wp-polyfill` script handle which takes care of loading all the below mentioned polyfills. | Script Name | Handle | Description | |-------------|--------|-------------| diff --git a/lib/client-assets.php b/lib/client-assets.php index 6d1522b57d3702..5dfb4c18c0a777 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -87,6 +87,8 @@ function register_tinymce_scripts() { gutenberg_override_script( 'wp-tinymce-root', includes_url( 'js/tinymce/' ) . "tinymce{$mce_suffix}.js", array(), $tinymce_version ); gutenberg_override_script( 'wp-tinymce', includes_url( 'js/tinymce/' ) . "plugins/compat3x/plugin{$suffix}.js", array( 'wp-tinymce-root' ), $tinymce_version ); } + + gutenberg_override_script( 'wp-tinymce-lists', includes_url( 'js/tinymce/' ) . "plugins/lists/plugin{$suffix}.js", array( 'wp-tinymce' ), $tinymce_version ); } } @@ -620,12 +622,6 @@ function gutenberg_register_vendor_scripts() { 'https://unpkg.com/moment@2.22.1/' . $moment_script, array() ); - $tinymce_version = '4.7.11'; - gutenberg_register_vendor_script( - 'tinymce-latest-lists', - 'https://unpkg.com/tinymce@' . $tinymce_version . '/plugins/lists/plugin' . $suffix . '.js', - array( 'wp-tinymce' ) - ); gutenberg_register_vendor_script( 'lodash', 'https://unpkg.com/lodash@4.17.5/lodash' . $suffix . '.js' diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index 0e5bd808399b37..f4f1695c966a31 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -134,7 +134,7 @@ 'wp-editor' => array( 'jquery', 'lodash', - 'tinymce-latest-lists', + 'wp-tinymce-lists', 'wp-a11y', 'wp-api-fetch', 'wp-blob', From 53e4c40bda48a9ca3df930cd4a437001272a257e Mon Sep 17 00:00:00 2001 From: Oliver Juhas Date: Wed, 21 Nov 2018 14:51:04 +0100 Subject: [PATCH 23/49] Fixing IE11 flexbox alignment when min-width is set (#9196) * Fixing IE11 flexbox alignment when min-width is set For more info on the fix please see https://github.com/philipwalton/flexbugs/issues/231 * Updating the IE11 alignment fix Updating the fix to use https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042 approach for cases with larger cover image text. * Documenting the code * chore: Tweak code style * Add display: block, remove Github ticket mention. * Ignore the IE11 cover image fix in browsers that support flex. * Add a better description of the IE fix. * Fix typo. --- packages/block-library/src/cover/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 806ed02fb2dc9b..a9223bfb30c2fe 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -96,6 +96,20 @@ width: 100%; } + // Using flexbox without an assigned height property breaks vertical center alignment in IE11. + // Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue. + &::after { + display: block; + content: ""; + font-size: 0; + min-height: inherit; + + // IE doesn't support flex so omit that. + @supports (position: sticky) { + content: none; + } + } + // Aligned cover blocks should not use our global alignment rules &.aligncenter, &.alignleft, From 4a44b55b9e66d7f3287850b520eaa461d01b0af9 Mon Sep 17 00:00:00 2001 From: Tim Wright Date: Wed, 21 Nov 2018 13:12:53 -0500 Subject: [PATCH 24/49] Tooltips: Consistency and contrast: Issue #11180 (#11307) * merge from upstream * adjusted editor header tooltip label positions for better contrast * removed gutenberg mobile * udpated snapshot --- packages/components/src/icon-button/index.js | 7 ++----- .../edit-post/src/components/header/more-menu/index.js | 1 + .../header/more-menu/test/__snapshots__/index.js.snap | 2 ++ packages/editor/src/components/inserter/index.js | 1 + packages/editor/src/components/table-of-contents/index.js | 1 + 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js index b90ee85d2b6080..bec3d38d548646 100644 --- a/packages/components/src/icon-button/index.js +++ b/packages/components/src/icon-button/index.js @@ -20,7 +20,7 @@ import Dashicon from '../dashicon'; // is common to apply a ref to the button element (only supported in class) class IconButton extends Component { render() { - const { icon, children, label, className, tooltip, shortcut, ...additionalProps } = this.props; + const { icon, children, label, className, tooltip, shortcut, labelPosition, ...additionalProps } = this.props; const classes = classnames( 'components-icon-button', className ); const tooltipText = tooltip || label; @@ -49,10 +49,7 @@ class IconButton extends Component { if ( showTooltip ) { element = ( - + { element } ); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index a65aa8c9b2fbc8..223c2c0f272612 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -26,6 +26,7 @@ const MoreMenu = () => ( diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap index 244a185376638c..4049a747b3fe0a 100644 --- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap @@ -16,9 +16,11 @@ exports[`MoreMenu should match snapshot 1`] = ` aria-expanded={false} icon="ellipsis" label="Show more tools & options" + labelPosition="bottom" onClick={[Function]} > - { cannotEmbed &&

{ __( 'Sorry, we could not embed that content.' ) }

} + { cannotEmbed && +

+ { __( 'Sorry, we could not embed that content.' ) }
+ +

+ } ); diff --git a/packages/block-library/src/embed/settings.js b/packages/block-library/src/embed/settings.js index a6d68ae80c9b20..d42a406b608ac9 100644 --- a/packages/block-library/src/embed/settings.js +++ b/packages/block-library/src/embed/settings.js @@ -14,7 +14,7 @@ import classnames from 'classnames/dedupe'; import { __, sprintf } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { RichText } from '@wordpress/editor'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; const embedAttributes = { url: { @@ -79,6 +79,16 @@ export function getEmbedBlockSettings( { title, description, icon, category = 'e themeSupportsResponsive: themeSupports[ 'responsive-embeds' ], cannotEmbed, }; + } ), + withDispatch( ( dispatch, ownProps ) => { + const { url } = ownProps.attributes; + const coreData = dispatch( 'core/data' ); + const tryAgain = () => { + coreData.invalidateResolution( 'core', 'getEmbedPreview', [ url ] ); + }; + return { + tryAgain, + }; } ) )( edit ), diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 58b07b0a627743..5352fce1fb58e6 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -163,3 +163,17 @@ export function getClassNames( html, existingClassNames = '', allowResponsive = return existingClassNames; } + +/** + * Fallback behaviour for unembeddable URLs. + * Creates a paragraph block containing a link to the URL, and calls `onReplace`. + * + * @param {string} url The URL that could not be embedded. + * @param {function} onReplace Function to call with the created fallback block. + */ +export function fallback( url, onReplace ) { + const link = { url }; + onReplace( + createBlock( 'core/paragraph', { content: renderToString( link ) } ) + ); +} diff --git a/test/e2e/specs/__snapshots__/embedding.test.js.snap b/test/e2e/specs/__snapshots__/embedding.test.js.snap new file mode 100644 index 00000000000000..9672627058066a --- /dev/null +++ b/test/e2e/specs/__snapshots__/embedding.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Embedding content should allow the user to convert unembeddable URLs to a paragraph with a link in it 1`] = ` +" +

https://twitter.com/wooyaygutenberg123454312

+" +`; diff --git a/test/e2e/specs/embedding.test.js b/test/e2e/specs/embedding.test.js index 79f7d27707b0bd..45b37006cecb83 100644 --- a/test/e2e/specs/embedding.test.js +++ b/test/e2e/specs/embedding.test.js @@ -1,7 +1,15 @@ /** * Internal dependencies */ -import { clickBlockAppender, newPost, isEmbedding, setUpResponseMocking, JSONResponse } from '../support/utils'; +import { + clickBlockAppender, + newPost, + isEmbedding, + setUpResponseMocking, + JSONResponse, + getEditedPostContent, + clickButton, +} from '../support/utils'; const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = { url: 'https://wordpress.org/gutenberg/handbook/block-api/attributes/', @@ -82,9 +90,7 @@ const MOCK_RESPONSES = [ }, ]; -const addEmbeds = async () => { - await newPost(); - +const addAllEmbeds = async () => { // Valid embed. await clickBlockAppender(); await page.keyboard.type( '/embed' ); @@ -135,15 +141,12 @@ const addEmbeds = async () => { await page.keyboard.press( 'Enter' ); }; -const setUp = async () => { - await setUpResponseMocking( MOCK_RESPONSES ); - await addEmbeds(); -}; - describe( 'Embedding content', () => { - beforeEach( setUp ); + beforeAll( async () => await setUpResponseMocking( MOCK_RESPONSES ) ); + beforeEach( newPost ); it( 'should render embeds in the correct state', async () => { + await addAllEmbeds(); // The successful embeds should be in a correctly classed figure element. // This tests that they have switched to the correct block. await page.waitForSelector( 'figure.wp-block-embed-twitter' ); @@ -157,4 +160,36 @@ describe( 'Embedding content', () => { await page.waitForSelector( 'input[value="https://twitter.com/thatbunty"]' ); await page.waitForSelector( 'input[value="https://wordpress.org/gutenberg/handbook/"]' ); } ); + + it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => { + // URL that can't be embedded. + await clickBlockAppender(); + await page.keyboard.type( '/embed' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'https://twitter.com/wooyaygutenberg123454312' ); + await page.keyboard.press( 'Enter' ); + + await clickButton( 'Convert to link' ); + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + + it( 'should allow the user to try embedding a failed URL again', async () => { + // URL that can't be embedded. + await clickBlockAppender(); + await page.keyboard.type( '/embed' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'https://twitter.com/wooyaygutenberg123454312' ); + await page.keyboard.press( 'Enter' ); + // Set up a different mock to make sure that try again actually does make the request again. + await setUpResponseMocking( + [ + { + match: isEmbedding( 'https://twitter.com/wooyaygutenberg123454312' ), + onRequestMatch: JSONResponse( MOCK_EMBED_RICH_SUCCESS_RESPONSE ), + }, + ] + ); + await clickButton( 'Try again' ); + await page.waitForSelector( 'figure.wp-block-embed-twitter' ); + } ); } ); diff --git a/test/e2e/support/utils/click-button.js b/test/e2e/support/utils/click-button.js new file mode 100644 index 00000000000000..9c406c22b24af1 --- /dev/null +++ b/test/e2e/support/utils/click-button.js @@ -0,0 +1,9 @@ +/** + * Clicks a button based on the text on the button. + * + * @param {string} buttonText The text that appears on the button to click. + */ +export async function clickButton( buttonText ) { + const button = await page.waitForXPath( `//button[contains(text(), '${ buttonText }')]` ); + await button.click(); +} diff --git a/test/e2e/support/utils/index.js b/test/e2e/support/utils/index.js index a3f52f91ad79d4..f374a226ecdc52 100644 --- a/test/e2e/support/utils/index.js +++ b/test/e2e/support/utils/index.js @@ -1,6 +1,7 @@ export { arePrePublishChecksEnabled } from './are-pre-publish-checks-enabled'; export { clearLocalStorage } from './clear-local-storage'; export { clickBlockAppender } from './click-block-appender'; +export { clickButton } from './click-button'; export { clickOnCloseModalButton } from './click-on-close-modal-button'; export { clickOnMoreMenuItem } from './click-on-more-menu-item'; export { convertBlock } from './convert-block'; diff --git a/test/e2e/support/utils/set-up-response-mocking.js b/test/e2e/support/utils/set-up-response-mocking.js index 4384d634953203..8316ba9046f676 100644 --- a/test/e2e/support/utils/set-up-response-mocking.js +++ b/test/e2e/support/utils/set-up-response-mocking.js @@ -1,3 +1,13 @@ +/** + * Track if we have already initialized the request interception. + */ +let interceptionInitialized = false; + +/** + * Array of mock responses. + */ +let requestMocks = []; + /** * Sets up mock checks and responses. Accepts a list of mock settings with the following properties: * - match: function to check if a request should be mocked. @@ -21,15 +31,23 @@ * @param {Array} mocks Array of mock settings. */ export async function setUpResponseMocking( mocks ) { - await page.setRequestInterception( true ); - page.on( 'request', async ( request ) => { - for ( let i = 0; i < mocks.length; i++ ) { - const mock = mocks[ i ]; - if ( mock.match( request ) ) { - await mock.onRequestMatch( request ); - return; + if ( ! interceptionInitialized ) { + // We only want to set up the request interception once, or else we get a crash + // when we try to process the same request twice. + interceptionInitialized = true; + await page.setRequestInterception( true ); + page.on( 'request', async ( request ) => { + for ( let i = 0; i < requestMocks.length; i++ ) { + const mock = requestMocks[ i ]; + if ( mock.match( request ) ) { + await mock.onRequestMatch( request ); + return; + } } - } - request.continue(); - } ); + request.continue(); + } ); + } + // Overwrite with the passed in mocks, so we can change the mocks mid-test to test + // recovery from scenarios where a request had failed, but is working again. + requestMocks = [ ...mocks ]; } From 9cc03c0652ecc6d4ccac210ba12664781d29003c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Thu, 22 Nov 2018 15:55:23 +0100 Subject: [PATCH 40/49] TinyMCE: fix IE11 lost focus after init (#12206) * TinyMCE: fix IE11 lost focus after init * Attempt 3 --- packages/editor/src/components/rich-text/tinymce.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js index 0085343bdbd27f..ca8d0ea70521ae 100644 --- a/packages/editor/src/components/rich-text/tinymce.js +++ b/packages/editor/src/components/rich-text/tinymce.js @@ -243,6 +243,15 @@ export default class TinyMCE extends Component { // Restore the original `setHTML` once initialized. editor.dom.setHTML = setHTML; + + // In IE11, focus is lost to parent after initialising + // TinyMCE, so we have to set it back. + if ( + document.activeElement !== this.editorNode && + document.activeElement.contains( this.editorNode ) + ) { + this.editorNode.focus(); + } } ); editor.on( 'keydown', this.onKeyDown, true ); From 6e8e1bc86097a4efea9427ba868e55191f9aa160 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 22 Nov 2018 16:26:38 +0100 Subject: [PATCH 41/49] Simplify sidebar tabs aria-labels. (#11618) --- .../components/sidebar/settings-header/index.js | 16 ++++++++-------- test/e2e/specs/preferences.test.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index 33a3bbc27e29ab..e2866c231a1c98 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -12,16 +12,16 @@ import SidebarHeader from '../sidebar-header'; const SettingsHeader = ( { openDocumentSettings, openBlockSettings, sidebarName } ) => { const blockLabel = __( 'Block' ); const [ documentAriaLabel, documentActiveClass ] = sidebarName === 'edit-post/document' ? - // translators: ARIA label for the Document Settings sidebar tab, selected. - [ __( 'Document settings (selected)' ), 'is-active' ] : - // translators: ARIA label for the Document Settings sidebar tab, not selected. - [ __( 'Document settings' ), '' ]; + // translators: ARIA label for the Document sidebar tab, selected. + [ __( 'Document (selected)' ), 'is-active' ] : + // translators: ARIA label for the Document sidebar tab, not selected. + [ __( 'Document' ), '' ]; const [ blockAriaLabel, blockActiveClass ] = sidebarName === 'edit-post/block' ? - // translators: ARIA label for the Block Settings sidebar tab, selected. - [ __( 'Block settings (selected)' ), 'is-active' ] : - // translators: ARIA label for the Block Settings sidebar tab, not selected. - [ __( 'Block settings' ), '' ]; + // translators: ARIA label for the Block sidebar tab, selected. + [ __( 'Block (selected)' ), 'is-active' ] : + // translators: ARIA label for the Block sidebar tab, not selected. + [ __( 'Block' ), '' ]; return ( { expect( await getActiveSidebarTabText() ).toBe( 'Document' ); // Change to "Block" tab. - await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block settings"]' ); + await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' ); expect( await getActiveSidebarTabText() ).toBe( 'Block' ); // Regression test: Reload resets to document tab. From 509fc16b209e31014c29282c1c47d369fa1041ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Thu, 22 Nov 2018 17:36:38 +0100 Subject: [PATCH 42/49] Link Format: Label with selected text, not full text (#12154) * Only label with selected text * Add e2e test --- packages/format-library/src/link/inline.js | 19 +++++++++++--- .../specs/__snapshots__/links.test.js.snap | 6 +++++ test/e2e/specs/links.test.js | 25 +++++++++++++++++++ 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 350c94386ed857..b007076e8c7f2f 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -21,6 +21,8 @@ import { insert, isCollapsed, applyFormat, + getTextContent, + slice, } from '@wordpress/rich-text'; import { URLInput, URLPopover } from '@wordpress/editor'; @@ -51,7 +53,7 @@ function createLinkFormat( { url, opensInNewWindow, text } ) { if ( opensInNewWindow ) { // translators: accessibility label for external links, where the argument is the link text - const label = sprintf( __( '%s (opens in a new tab)' ), text ).trim(); + const label = sprintf( __( '%s (opens in a new tab)' ), text ); format.attributes.target = '_blank'; format.attributes.rel = 'noreferrer noopener'; @@ -173,7 +175,13 @@ class InlineLinkUI extends Component { // Apply now if URL is not being edited. if ( ! isShowingInput( this.props, this.state ) ) { - onChange( applyFormat( value, createLinkFormat( { url, opensInNewWindow, text: value.text } ) ) ); + const selectedText = getTextContent( slice( value ) ); + + onChange( applyFormat( value, createLinkFormat( { + url, + opensInNewWindow, + text: selectedText, + } ) ) ); } } @@ -186,7 +194,12 @@ class InlineLinkUI extends Component { const { isActive, value, onChange, speak } = this.props; const { inputValue, opensInNewWindow } = this.state; const url = prependHTTP( inputValue ); - const format = createLinkFormat( { url, opensInNewWindow, text: value.text } ); + const selectedText = getTextContent( slice( value ) ); + const format = createLinkFormat( { + url, + opensInNewWindow, + text: selectedText, + } ); event.preventDefault(); diff --git a/test/e2e/specs/__snapshots__/links.test.js.snap b/test/e2e/specs/__snapshots__/links.test.js.snap index be47f91e158f99..6b0ab2795b7af3 100644 --- a/test/e2e/specs/__snapshots__/links.test.js.snap +++ b/test/e2e/specs/__snapshots__/links.test.js.snap @@ -41,3 +41,9 @@ exports[`Links can be removed 1`] = `

This is Gutenberg

" `; + +exports[`Links should contain a label when it should open in a new tab 1`] = ` +" +

This is WordPress

+" +`; diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js index a59041f4f78259..eaa159d1bc0a38 100644 --- a/test/e2e/specs/links.test.js +++ b/test/e2e/specs/links.test.js @@ -483,4 +483,29 @@ describe( 'Links', () => { const popover = await page.$$( '.editor-url-popover' ); expect( popover ).toHaveLength( 1 ); } ); + + it( 'should contain a label when it should open in a new tab', async () => { + await clickBlockAppender(); + await page.keyboard.type( 'This is WordPress' ); + // Select "WordPress". + await pressWithModifier( 'shiftAlt', 'ArrowLeft' ); + await pressWithModifier( 'primary', 'k' ); + await waitForAutoFocus(); + await page.keyboard.type( 'w.org' ); + // Navigate to the settings toggle. + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Tab' ); + // Open settings. + await page.keyboard.press( 'Space' ); + // Navigate to the "Open in New Tab" checkbox. + await page.keyboard.press( 'Tab' ); + // Check the checkbox. + await page.keyboard.press( 'Space' ); + // Navigate back to the input field. + await page.keyboard.press( 'Tab' ); + // Submit the form. + await page.keyboard.press( 'Enter' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); From 017f31bd092001be5e8f2afe282d8b34883d8cbd Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Thu, 22 Nov 2018 20:47:22 +0100 Subject: [PATCH 43/49] Rnmobile/native toolbar component ui (#11827) Implement toolbar ui --- .../block-library/src/image/edit.native.js | 4 +- .../components/src/button/index.native.js | 61 +++++++++++++++++-- .../components/src/dashicon/icon-class.js | 4 ++ .../src/dashicon/icon-class.native.js | 4 ++ packages/components/src/dashicon/index.js | 8 ++- packages/components/src/icon-button/index.js | 3 +- packages/components/src/index.native.js | 1 + .../src/primitives/svg/index.native.js | 24 ++++---- .../src/primitives/svg/style.native.scss | 14 +++++ .../components/src/toolbar/style.native.scss | 7 +++ .../src/toolbar/toolbar-container.native.js | 8 ++- packages/html-entities/package.json | 1 + 12 files changed, 113 insertions(+), 26 deletions(-) create mode 100644 packages/components/src/dashicon/icon-class.js create mode 100644 packages/components/src/dashicon/icon-class.native.js create mode 100644 packages/components/src/primitives/svg/style.native.scss create mode 100644 packages/components/src/toolbar/style.native.scss diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index fde82c5a717770..5b4132e19a2b24 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -8,7 +8,7 @@ import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge'; * Internal dependencies */ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor'; -import { Toolbar, IconButton } from '@wordpress/components'; +import { Toolbar, ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; export default function ImageEdit( props ) { @@ -40,7 +40,7 @@ export default function ImageEdit( props ) { const toolbarEditButton = ( - - - { children } - { subscript && ( { subscript } ) } + + + { children } + { subscript && ( { subscript } ) } + ); diff --git a/packages/components/src/dashicon/icon-class.js b/packages/components/src/dashicon/icon-class.js new file mode 100644 index 00000000000000..f82b6453ef68e9 --- /dev/null +++ b/packages/components/src/dashicon/icon-class.js @@ -0,0 +1,4 @@ +export const IconClass = ( props ) => { + const { icon, className } = props; + return [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' ); +}; diff --git a/packages/components/src/dashicon/icon-class.native.js b/packages/components/src/dashicon/icon-class.native.js new file mode 100644 index 00000000000000..09a798008ea1c0 --- /dev/null +++ b/packages/components/src/dashicon/icon-class.native.js @@ -0,0 +1,4 @@ +export const IconClass = ( props ) => { + const { icon, className, ariaPressed } = props; + return [ ariaPressed ? 'dashicon-active' : 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' ); +}; diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js index 8308c4a97384eb..b58f77bfe371a5 100644 --- a/packages/components/src/dashicon/index.js +++ b/packages/components/src/dashicon/index.js @@ -14,18 +14,20 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import { Path, SVG } from '../primitives'; +import { IconClass } from './icon-class'; export default class Dashicon extends Component { shouldComponentUpdate( nextProps ) { return ( this.props.icon !== nextProps.icon || this.props.size !== nextProps.size || - this.props.className !== nextProps.className + this.props.className !== nextProps.className || + this.props.ariaPressed !== nextProps.ariaPressed ); } render() { - const { icon, className, size = 20 } = this.props; + const { icon, size = 20 } = this.props; let path; switch ( icon ) { @@ -896,7 +898,7 @@ export default class Dashicon extends Component { return null; } - const iconClass = [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' ); + const iconClass = IconClass( this.props ); return ( - { isString( icon ) ? : icon } + { isString( icon ) ? : icon } { children } ); diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 47799cd872668a..3e44bdec61e509 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -2,6 +2,7 @@ export * from './primitives'; export { default as Dashicon } from './dashicon'; export { default as Toolbar } from './toolbar'; +export { default as ToolbarButton } from './toolbar-button'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; export { default as IconButton } from './icon-button'; export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill'; diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js index 9f6da4772c48ef..47c49b1bb61289 100644 --- a/packages/components/src/primitives/svg/index.native.js +++ b/packages/components/src/primitives/svg/index.native.js @@ -1,13 +1,12 @@ /** * External dependencies */ -import { omit } from 'lodash'; import { Svg } from 'react-native-svg'; /** * Internal dependencies */ -import styles from '../../dashicon/style.scss'; +import styles from './style.scss'; export { Circle, @@ -21,24 +20,23 @@ export const SVG = ( props ) => { // We're using the react-native-classname-to-style plugin, so when a `className` prop is passed it gets converted to `style` here. // Given it carries a string (as it was originally className) but an object is expected for `style`, // we need to check whether `style` exists and is a string, and convert it to an object - let styleKeys = new Array(); - const styleValues = new Array(); - if ( typeof props.style === 'string' || props.style instanceof String ) { - styleKeys = props.style.split( ' ' ); - styleKeys.forEach( ( element ) => { - const oneStyle = styles[ element ]; - if ( oneStyle !== undefined ) { - styleValues.push( oneStyle ); - } - } ); + + let styleValues = {}; + if ( typeof props.style === 'string' ) { + const oneStyle = props.style.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean ); + styleValues = Object.assign( styleValues, ...oneStyle ); } - const safeProps = styleValues.length === 0 ? { ...omit( props, [ 'style' ] ) } : { ...props, style: styleValues }; + const safeProps = { ...props, style: styleValues }; + return ( ); }; + diff --git a/packages/components/src/primitives/svg/style.native.scss b/packages/components/src/primitives/svg/style.native.scss new file mode 100644 index 00000000000000..a6017e488b9228 --- /dev/null +++ b/packages/components/src/primitives/svg/style.native.scss @@ -0,0 +1,14 @@ +.dashicon { + color: #7b9ab1; + fill: currentColor; +} + +.dashicon-active { + color: #fff; + fill: currentColor; +} + +.dashicons-insert { + color: #87a6bc; + fill: currentColor; +} diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss new file mode 100644 index 00000000000000..aca87d859b8bb6 --- /dev/null +++ b/packages/components/src/toolbar/style.native.scss @@ -0,0 +1,7 @@ +.container { + flex-direction: row; + border-right-width: 1px; + border-right-color: #e9eff3; + padding-left: 5px; + padding-right: 5px; +} diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index 08106a987f4089..dba6d5123c1ae7 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -3,8 +3,12 @@ */ import { View } from 'react-native'; -export default ( props ) => ( - +import styles from './style.scss'; + +const ToolbarContainer = ( props ) => ( + { props.children } ); + +export default ToolbarContainer; diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index bd46481b93cf04..db944aa08cffe5 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -4,6 +4,7 @@ "description": "HTML entity utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", + "react-native": "src/index", "keywords": [ "wordpress", "html", From 0823f242c7e93ad373f18b29ed54e24587b64676 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 23 Nov 2018 08:57:46 +0000 Subject: [PATCH 44/49] Fix: Classic Block: Gallery shortcode does not display images in a grid (#12228) ## Description Fixes: https://github.com/WordPress/gutenberg/issues/11940 This PR adds the necessary styles for the gallery shortcode correctly display as columns. Styles replicate what was done in /wp-includes/js/tinymce/skins/wordpress/wp-content.css. ## How has this been tested? Add a gallery shortcode inside the classic block and verify columns are correctly displayed. --- .../block-library/src/classic/editor.scss | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss index 0720c22d4a2c3d..1cda8777992fa7 100644 --- a/packages/block-library/src/classic/editor.scss +++ b/packages/block-library/src/classic/editor.scss @@ -116,6 +116,65 @@ cursor: default; border: 2px dashed rgb(186, 186, 186); } + + /** + * The following gallery styles were replicated + * from the styles applied in the tinymce skin, + * /wp-includes/js/tinymce/skins/wordpress/wp-content.css. + */ + .wpview-type-gallery::after { + content: ""; + display: table; + clear: both; + } + + .gallery img[data-mce-selected]:focus { + outline: none; + } + + .gallery a { + cursor: default; + } + + .gallery { + margin: auto -6px; + padding: 6px 0; + line-height: 1; + overflow-x: hidden; + } + + .gallery .gallery-item { + float: left; + margin: 0; + text-align: center; + padding: 6px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .gallery .gallery-caption, + .gallery .gallery-icon { + margin: 0; + } + + .gallery .gallery-caption { + font-size: 13px; + margin: 4px 0; + } + + @for $i from 1 through 9 { + .gallery-columns-#{ $i } .gallery-item { + width: #{ (100 / $i) + "%" }; + } + } + + .gallery img { + max-width: 100%; + height: auto; + border: none; + padding: 0; + } } .editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] { From 70b378b1e258b3b5d908cf23fb0d2b7d41577894 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 23 Nov 2018 09:58:13 +0100 Subject: [PATCH 45/49] Improve block preview. (#12212) Hopefully fixes #11997. It polishes the preview code a bit to be leaner and more readable. But mostly it adds a fwe CSS style overrides that it might inherit from the theme. --- .../editor/src/components/block-styles/style.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/block-styles/style.scss b/packages/editor/src/components/block-styles/style.scss index 53a609012f74e4..8816ea0b9c4f82 100644 --- a/packages/editor/src/components/block-styles/style.scss +++ b/packages/editor/src/components/block-styles/style.scss @@ -38,14 +38,17 @@ height: 60px; background: $white; - > * { + // Actual preview contents. + .editor-block-preview__content { transform: scale(0.7); transform-origin: center center; - font-family: $editor-font; - } - - .editor-block-preview__content { width: 100%; + + // Unset some of the styles that might be inherited from the editor style. + margin: 0; + padding: 0; + overflow: visible; + min-height: auto; } } From 1f57485def4ca42fb228b88d36e3143043c660d1 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 23 Nov 2018 10:00:34 +0100 Subject: [PATCH 46/49] Improve button block styles and wrap. (#12205) This PR fixes #7843, and also simplifies the styles a bit. It also fixes an overflow issue with long text in variations. Finally, it makes a single line button have a proper pillshape. --- packages/block-library/src/button/editor.scss | 15 ++++++--------- packages/block-library/src/button/style.scss | 8 +++----- .../src/components/block-switcher/style.scss | 3 ++- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index f20d565964dbcd..1330ff2cdf96f9 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -1,5 +1,3 @@ -$blocks-button__line-height: $big-font-size + 6px; - .editor-block-list__block[data-type="core/button"] { &[data-align="center"] { text-align: center; @@ -18,7 +16,6 @@ $blocks-button__line-height: $big-font-size + 6px; .editor-rich-text__tinymce.mce-content-body { cursor: text; - line-height: $blocks-button__line-height; } // Make placeholder text white unless custom colors or outline versions are chosen. @@ -31,15 +28,15 @@ $blocks-button__line-height: $big-font-size + 6px; opacity: 0.8; } - // Polish the empty placeholder text for the button in variation previews. - .editor-rich-text__tinymce[data-is-placeholder-visible="true"] { - height: auto; - } - // Don't let the placeholder text wrap in the variation preview. .editor-block-preview__content & { max-width: 100%; + // Polish the empty placeholder text for the button in variation previews. + .editor-rich-text__tinymce[data-is-placeholder-visible="true"] { + height: auto; + } + .wp-block-button__link { max-width: 100%; overflow: hidden; @@ -58,7 +55,7 @@ $blocks-button__line-height: $big-font-size + 6px; font-size: $default-font-size; line-height: $default-line-height; - // the width of input box plus padding plus two icon buttons. + // The width of input box plus padding plus two icon buttons. $blocks-button__link-input-width: 300px + 2px + 2 * $icon-button-size; width: $blocks-button__link-input-width; diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index fa72a8bc7835d5..2a45e2e574b38f 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -1,5 +1,4 @@ -$blocks-button__height: 46px; -$blocks-button__line-height: $big-font-size + 6px; +$blocks-button__height: 56px; .wp-block-button { color: $white; @@ -24,13 +23,12 @@ $blocks-button__line-height: $big-font-size + 6px; cursor: pointer; display: inline-block; font-size: $big-font-size; - line-height: $blocks-button__line-height; margin: 0; - padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px; + padding: 12px 24px; text-align: center; text-decoration: none; white-space: normal; - word-break: break-all; + overflow-wrap: break-word; &:hover, &:focus, diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index daebe5a47ea72f..a994ff75424044 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -74,7 +74,8 @@ } .components-popover:not(.is-mobile).editor-block-switcher__popover .components-popover__content { - min-width: 320px; + min-width: 300px; + max-width: 340px; } .editor-block-switcher__popover .components-popover__content { From 93f2269e02a1842b95df341c8d8f240a11c01df3 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 23 Nov 2018 10:30:03 +0000 Subject: [PATCH 47/49] Fix: Cover Block: Move some editor specific styles from style.scss to editor.scss (#12236) During the reviews of https://github.com/WordPress/gutenberg/pull/12187 we found out that the cover block contains some editor specific styles on the front end. This is a problem because we would be transferring bytes on the frontend of websites that are not used at all. This PR just moves this styles to editor.scss so they are loaded only in the editor. ## How has this been tested? I checked that there was no noticeable change on the cover block (and its placeholder). --- packages/block-library/src/cover/editor.scss | 17 +++++++++++++++++ packages/block-library/src/cover/style.scss | 12 ------------ 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 35eb31ab78c40c..dffeeca07dc3cd 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -23,4 +23,21 @@ &.has-right-content .editor-rich-text__inline-toolbar { justify-content: flex-end; } + + &.components-placeholder { + // use opacity to work in various editor styles + background: $dark-opacity-light-200; + min-height: 200px; + + .is-dark-theme & { + background: $light-opacity-light-200; + } + } + + // Apply max-width to floated items that have no intrinsic width + [data-align="left"] &, + [data-align="right"] & { + max-width: $content-width / 2; + width: 100%; + } } diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 6cbc5f1e3366c6..5e35c6d8ff809d 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -83,19 +83,7 @@ } } - &.components-placeholder { - // use opacity to work in various editor styles - background: $dark-opacity-light-200; - min-height: 200px; - - .is-dark-theme & { - background: $light-opacity-light-200; - } - } - // Apply max-width to floated items that have no intrinsic width - [data-align="left"] &, - [data-align="right"] &, &.alignleft, &.alignright { max-width: $content-width / 2; From f4fc47e7bc583bbd18b96065cbe32be420300b6c Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 23 Nov 2018 11:55:50 +0000 Subject: [PATCH 48/49] Fix: Pasting a tag that is part of a transform but non matched ignores the content. (#11244) If a tag is accepted because of a raw handler transform but unmatched, we do the same as if the tag was not supported so we don't lose the content. The cause of the bug was that even after the removal of the preformatted block the pre tag was still accepted by the code block, but was unmatched if the preformatted was standard none code content. --- packages/blocks/src/api/raw-handling/utils.js | 47 +++++++++++++++---- .../non-matched-tags-handling.spec.js | 37 +++++++++++++++ 2 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 test/integration/non-matched-tags-handling.spec.js diff --git a/packages/blocks/src/api/raw-handling/utils.js b/packages/blocks/src/api/raw-handling/utils.js index 1494c9b3e11a49..1859da6493a58f 100644 --- a/packages/blocks/src/api/raw-handling/utils.js +++ b/packages/blocks/src/api/raw-handling/utils.js @@ -27,7 +27,7 @@ const { ELEMENT_NODE, TEXT_NODE } = window.Node; * @return {Object} A complete block content schema. */ export function getBlockContentSchema( transforms ) { - const schemas = transforms.map( ( { blockName, schema } ) => { + const schemas = transforms.map( ( { isMatch, blockName, schema } ) => { // If the block supports the "anchor" functionality, it needs to keep its ID attribute. if ( hasBlockSupport( blockName, 'anchor' ) ) { for ( const tag in schema ) { @@ -37,18 +37,41 @@ export function getBlockContentSchema( transforms ) { schema[ tag ].attributes.push( 'id' ); } } + + // If an isMatch function exists add it to each schema tag that it applies to. + if ( isMatch ) { + for ( const tag in schema ) { + schema[ tag ].isMatch = isMatch; + } + } return schema; } ); return mergeWith( {}, ...schemas, ( objValue, srcValue, key ) => { - if ( key === 'children' ) { - if ( objValue === '*' || srcValue === '*' ) { - return '*'; - } + switch ( key ) { + case 'children': { + if ( objValue === '*' || srcValue === '*' ) { + return '*'; + } - return { ...objValue, ...srcValue }; - } else if ( key === 'attributes' || key === 'require' ) { - return [ ...( objValue || [] ), ...( srcValue || [] ) ]; + return { ...objValue, ...srcValue }; + } + case 'attributes': + case 'require': { + return [ ...( objValue || [] ), ...( srcValue || [] ) ]; + } + case 'isMatch': { + // If one of the values being merge is undefined (matches everything), + // the result of the merge will be undefined. + if ( ! objValue || ! srcValue ) { + return undefined; + } + // When merging two isMatch functions, the result is a new function + // that returns if one of the source functions returns true. + return ( ...args ) => { + return objValue( ...args ) || srcValue( ...args ); + }; + } } } ); } @@ -153,8 +176,12 @@ function cleanNodeList( nodeList, doc, schema, inline ) { Array.from( nodeList ).forEach( ( node ) => { const tag = node.nodeName.toLowerCase(); - // It's a valid child. - if ( schema.hasOwnProperty( tag ) ) { + // It's a valid child, if the tag exists in the schema without an isMatch + // function, or with an isMatch function that matches the node. + if ( + schema.hasOwnProperty( tag ) && + ( ! schema[ tag ].isMatch || schema[ tag ].isMatch( node ) ) + ) { if ( node.nodeType === ELEMENT_NODE ) { const { attributes = [], classes = [], children, require = [] } = schema[ tag ]; diff --git a/test/integration/non-matched-tags-handling.spec.js b/test/integration/non-matched-tags-handling.spec.js new file mode 100644 index 00000000000000..71ce3a13b6137c --- /dev/null +++ b/test/integration/non-matched-tags-handling.spec.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { + pasteHandler, + unregisterBlockType, +} from '@wordpress/blocks'; +import { registerCoreBlocks } from '@wordpress/block-library'; + +describe( 'Handling of non matched tags in block transforms', () => { + beforeAll( () => { + // Load all hooks that modify blocks + require( '../../packages/editor/src/hooks' ); + registerCoreBlocks(); + } ); + it( 'correctly pastes preformatted tag even if preformatted block is removed', () => { + unregisterBlockType( 'core/preformatted' ); + const simplePreformattedResult = pasteHandler( { + HTML: '
Pre
', + mode: 'AUTO', + } ); + + expect( simplePreformattedResult ).toHaveLength( 1 ); + expect( simplePreformattedResult[ 0 ].name ).toBe( 'core/paragraph' ); + expect( simplePreformattedResult[ 0 ].attributes.content ).toBe( 'Pre' ); + + const codeResult = pasteHandler( { + HTML: '
code
', + mode: 'AUTO', + } ); + + expect( codeResult ).toHaveLength( 1 ); + expect( codeResult[ 0 ].name ).toBe( 'core/code' ); + expect( codeResult[ 0 ].attributes.content ).toBe( 'code' ); + expect( console ).toHaveLogged(); + } ); +} ); From bd897f6cb78e7625ad264c7a487bfa950118c85c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= Date: Fri, 23 Nov 2018 13:59:52 +0100 Subject: [PATCH 49/49] Add IE check for IE fix (#12234) * Add IE check * typo --- .../src/components/rich-text/tinymce.js | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js index ca8d0ea70521ae..dc6f7f46b38314 100644 --- a/packages/editor/src/components/rich-text/tinymce.js +++ b/packages/editor/src/components/rich-text/tinymce.js @@ -23,6 +23,7 @@ import { diffAriaProps, pickAriaProps } from './aria'; const { getSelection } = window; const { TEXT_NODE } = window.Node; +const { userAgent } = window.navigator; /** * Zero-width space character used by TinyMCE as a caret landing point for @@ -34,23 +35,6 @@ const { TEXT_NODE } = window.Node; */ export const TINYMCE_ZWSP = '\uFEFF'; -/** - * Determines whether we need a fix to provide `input` events for contenteditable. - * - * @param {Element} editorNode The root editor node. - * - * @return {boolean} A boolean indicating whether the fix is needed. - */ -function needsInternetExplorerInputFix( editorNode ) { - return ( - // Rely on userAgent in the absence of a reasonable feature test for contenteditable `input` events. - /Trident/.test( window.navigator.userAgent ) && - // IE11 dispatches input events for `` and `