From 50d9fdc9d137fe2ba9664a2e24bc6f0a7a3a4fe7 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Mon, 9 Mar 2020 18:19:52 +0200 Subject: [PATCH 001/448] [LatestPosts] Don't trim manual excerpts (#20432) * adds raw excerpt to the LatestPosts block and respects manual excerpts * removed the reset to raw excerpt --- .../block-library/src/latest-posts/edit.js | 38 ++++++++----------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 98e43940a9c8ba..8fa27ca78686cc 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -325,6 +325,21 @@ class LatestPostsEdit extends Component { [ `align${ featuredImageAlign }` ]: !! featuredImageAlign, } ); + const postExcerpt = + excerptLength < + excerpt.trim().split( ' ' ).length && + post.excerpt.raw === '' + ? excerpt + .trim() + .split( ' ', excerptLength ) + .join( ' ' ) + + ' ... ' + + __( 'Read more' ) + + '' + : excerpt; + return (
  • { displayFeaturedImage && ( @@ -370,28 +385,7 @@ class LatestPostsEdit extends Component { displayPostContentRadio === 'excerpt' && (
    - { excerptLength < - excerpt.trim().split( ' ' ) - .length - ? excerpt - .trim() - .split( - ' ', - excerptLength - ) - .join( ' ' ) + - ' ... ' + - __( 'Read more' ) + - '' - : excerpt - .trim() - .split( - ' ', - excerptLength - ) - .join( ' ' ) } + { postExcerpt }
    ) } From d2e0ecd1c2e14a486b28fc90154a7dff8906238b Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Mon, 9 Mar 2020 18:08:17 +0100 Subject: [PATCH 002/448] Docs/SlotFills: Small corrections + prettify code examples (#20727) * Docs/SlotFills: Small correction + prettify code examples * Tweak individual SlotFill readmes --- .../developers/slotfills/README.md | 64 +++++++++---------- .../plugin-block-settings-menu-item.md | 22 ++++--- .../plugin-document-setting-panel.md | 14 ++-- .../slotfills/plugin-post-publish-panel.md | 25 ++++---- .../slotfills/plugin-post-status-info.md | 19 +++--- .../slotfills/plugin-pre-publish-panel.md | 27 ++++---- .../plugin-sidebar-more-menu-item.md | 25 +++----- .../developers/slotfills/plugin-sidebar.md | 17 ++--- 8 files changed, 100 insertions(+), 113 deletions(-) diff --git a/docs/designers-developers/developers/slotfills/README.md b/docs/designers-developers/developers/slotfills/README.md index 1fde71f171f99b..9df1769c19ba09 100644 --- a/docs/designers-developers/developers/slotfills/README.md +++ b/docs/designers-developers/developers/slotfills/README.md @@ -17,18 +17,16 @@ In order to access the SlotFills, we need to do four things: Here is an example using the `PluginPostStatusInfo` slotFill: + ```js const { registerPlugin } = wp.plugins; const { PluginPostStatusInfo } = wp.editPost; - -const PluginPostStatusInfoTest = () => { - return( - -

    Post Status Info SlotFill

    -     - ) -} +const PluginPostStatusInfoTest = () => ( + +

    Post Status Info SlotFill

    +     +); registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } ); ``` @@ -62,7 +60,6 @@ const PluginPostStatusInfo = ( { children, className } ) => ( PluginPostStatusInfo.Slot = Slot; export default PluginPostStatusInfo; - ``` This new Slot is then exposed in the editor. The example below is from core and represents the Status & visibility panel. @@ -73,31 +70,34 @@ Any items that have been added via the SlotFill ( see the example above ), will See [core code](https://github.com/WordPress/gutenberg/tree/master/packages/edit-post/src/components/sidebar/post-status/index.js#L26). ```js -function PostStatus( { isOpened, onTogglePanel } ) { - return ( - - - { ( fills ) => ( - - - - - - - - { fills } - - - ) } - - - ); -} +const PostStatus = ( { isOpened, onTogglePanel } ) => ( + + + { ( fills ) => ( + + + + + + + + { fills } + + + ) } + + +); ``` ## Currently available SlotFills and examples -There are currently seven available SlotFills in the `edit-post` package. Please refer to the individual items below for usage and example details: +There are currently eight available SlotFills in the `edit-post` package. Please refer to the individual items below for usage and example details: * [PluginBlockSettingsMenuItem](/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md) * [PluginDocumentSettingPanel](/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md) @@ -107,7 +107,3 @@ There are currently seven available SlotFills in the `edit-post` package. Please * [PluginPrePublishPanel](/docs/designers-developers/developers/slotfills/plugin-pre-publish-panel.md) * [PluginSidebar](/docs/designers-developers/developers/slotfills/plugin-sidebar.md) * [PluginSidebarMoreMenuItem](/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md) - - - - diff --git a/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md index ce81b96f3e1824..666384c53af35d 100644 --- a/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md +++ b/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md @@ -1,9 +1,8 @@ # PluginBlockSettingsMenuItem -This slot allows for adding a new item into the More Options area. +This slot allows for adding a new item into the More Options area. This will either appear in the controls for each block or at the Top Toolbar depending on the users setting. - ## Example ```js @@ -12,13 +11,18 @@ const { PluginBlockSettingsMenuItem } = wp.editPost; const PluginBlockSettingsMenuGroupTest = () => ( { alert( 'clicked' )} } /> -) - -registerPlugin( 'block-settings-menu-group-test', { render: PluginBlockSettingsMenuGroupTest } ); + allowedBlocks={ [ 'core/paragraph' ] } + icon="smiley" + label="Menu item text" + onClick={ () => { + alert( 'clicked' ); + } } + /> +); + +registerPlugin( 'block-settings-menu-group-test', { + render: PluginBlockSettingsMenuGroupTest, +} ); ``` ## Location diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index 75f0a3638f1b4c..25a5ab915cb54b 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -3,15 +3,17 @@ This SlotFill allows registering a UI to edit Document settings. ## Available Props + * __name__ `string`: A string identifying the panel. * __className__ `string`: An optional class name added to the sidebar body. * __title__ `string`: Title displayed at the top of the sidebar. * __icon__ `(string|Element)`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element. ## Example + ```js -const { registerPlugin } = wp.plugins; -const { PluginDocumentSettingPanel } = wp.editPost; +import { registerPlugin } from '@wordpress/plugins'; +import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; const PluginDocumentSettingPanelDemo = () => ( ( Custom Panel Contents ); -registerPlugin( 'plugin-document-setting-panel-demo', { render: PluginDocumentSettingPanelDemo, icon: 'palmtree' } ); -``` \ No newline at end of file + +registerPlugin( 'plugin-document-setting-panel-demo', { + render: PluginDocumentSettingPanelDemo, + icon: 'palmtree', +} ); +``` diff --git a/docs/designers-developers/developers/slotfills/plugin-post-publish-panel.md b/docs/designers-developers/developers/slotfills/plugin-post-publish-panel.md index 50c38098c19496..bbf146b4a8e050 100644 --- a/docs/designers-developers/developers/slotfills/plugin-post-publish-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-post-publish-panel.md @@ -5,19 +5,18 @@ This slot allows for injecting items into the bottom of the post-publish panel t ## Example ```js -const { registerPlugin } = wp.plugins; -const { PluginPostPublishPanel } = wp.editPost; - -const PluginPostPublishPanelTest = () => { - return ( - -

    Post Publish Panel

    -     - ) -} - -registerPlugin( 'post-publish-panel-test', { render: PluginPostPublishPanelTest } ); - +import { registerPlugin } from '@wordpress/plugins'; +import { PluginPostPublishPanel } from '@wordpress/edit-post'; + +const PluginPostPublishPanelTest = () => ( + +

    Post Publish Panel

    +     +); + +registerPlugin( 'post-publish-panel-test', { + render: PluginPostPublishPanelTest, +} ); ``` ## Location diff --git a/docs/designers-developers/developers/slotfills/plugin-post-status-info.md b/docs/designers-developers/developers/slotfills/plugin-post-status-info.md index 745fe64c62b9ee..3a8201e5506e98 100644 --- a/docs/designers-developers/developers/slotfills/plugin-post-status-info.md +++ b/docs/designers-developers/developers/slotfills/plugin-post-status-info.md @@ -5,17 +5,14 @@ This slots allows for the insertion of items in the Status & visibility panel of ## Example ```js -const { registerPlugin } = wp.plugins; -const { PluginPostStatusInfo } = wp.editPost; - - -const PluginPostStatusInfoTest = () => { - return( - -

    Post Status Info SlotFill

    -     - ) -} +import { registerPlugin } from '@wordpress/plugins'; +import { PluginPostStatusInfo } from '@wordpress/edit-post'; + +const PluginPostStatusInfoTest = () => ( + +

    Post Status Info SlotFill

    +     +); registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } ); ``` diff --git a/docs/designers-developers/developers/slotfills/plugin-pre-publish-panel.md b/docs/designers-developers/developers/slotfills/plugin-pre-publish-panel.md index 622a945dd08d87..abaa1cc4d6ae8d 100644 --- a/docs/designers-developers/developers/slotfills/plugin-pre-publish-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-pre-publish-panel.md @@ -1,23 +1,22 @@ # PluginPrePublishPanel -This slot allows for injecting items into the bottom of the pre-publish panel that appears to confirm publishing after the user clicks "Publish'. +This slot allows for injecting items into the bottom of the pre-publish panel that appears to confirm publishing after the user clicks "Publish". ## Example ```js -const { registerPlugin } = wp.plugins; -const { PluginPrePublishPanel }= wp.editPost; - -const PluginPrePublishPanelTest = () => { - return ( - -

    Pre Publish Panel

    -     - ) -} - -registerPlugin( 'pre-publish-panel-test', { render: PluginPrePublishPanelTest } ); - +import { registerPlugin } from '@wordpress/plugins'; +import { PluginPrePublishPanel } from '@wordpress/edit-post'; + +const PluginPrePublishPanelTest = () => ( + +

    Pre Publish Panel

    +     +); + +registerPlugin( 'pre-publish-panel-test', { + render: PluginPrePublishPanelTest, +} ); ``` ## Location diff --git a/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md index 40d1e0e22bab54..687a898c53047a 100644 --- a/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md +++ b/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md @@ -7,33 +7,24 @@ This is done by setting the `target` on `` to match t ```js import { registerPlugin } from '@wordpress/plugins'; -import { - PluginSidebar, - PluginSidebarMoreMenuItem -} from '@wordpress/edit-post'; +import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; import { image } from '@wordpress/icons'; - -const { Fragment } = wp.element; -const myIcon = +import { Fragment } from '@wordpress/element'; const PluginSidebarMoreMenuItemTest = () => ( - + Expanded Sidebar - More item - + Content of the sidebar -) +); -registerPlugin( 'plugin-sidebar-expanded-test', { render: PluginSidebarMoreMenuItemTest } ); +registerPlugin( 'plugin-sidebar-expanded-test', { + render: PluginSidebarMoreMenuItemTest, +} ); ``` ## Location diff --git a/docs/designers-developers/developers/slotfills/plugin-sidebar.md b/docs/designers-developers/developers/slotfills/plugin-sidebar.md index 8af1641f6ea1fd..b5467f04c4bebd 100644 --- a/docs/designers-developers/developers/slotfills/plugin-sidebar.md +++ b/docs/designers-developers/developers/slotfills/plugin-sidebar.md @@ -10,17 +10,12 @@ import { registerPlugin } from '@wordpress/plugins'; import { PluginSidebar } from '@wordpress/edit-post'; import { image } from '@wordpress/icons'; -const PluginSidebarTest = () => { - return ( - -

    Plugin Sidebar

    -     - ); -}; +const PluginSidebarTest = () => ( + +

    Plugin Sidebar

    +     +); + registerPlugin( 'plugin-sidebar-test', { render: PluginSidebarTest } ); ``` From dab58bb6246541b548e769a13c3066efc62b631c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 9 Mar 2020 18:06:35 +0100 Subject: [PATCH 003/448] Bump plugin version to 7.7.0-rc.1 --- changelog.txt | 115 ++++++++++++++++++++++++++++++++++++++++++++++ gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 5 files changed, 119 insertions(+), 4 deletions(-) diff --git a/changelog.txt b/changelog.txt index 9552802795a92a..a7f8ab103087ce 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,120 @@ == Changelog == += 7.7.0-rc.1 = + +### Features + +- Add the initial version of the Patterns UI as a sidebar plugin (This is not the final interface and work is in progress to integrate with the main block inserter). [20354](https://github.com/WordPress/gutenberg/pull/20354), [20715](https://github.com/WordPress/gutenberg/pull/20715). + - Add an initial set of patterns [20724](https://github.com/WordPress/gutenberg/pull/20724). + +### Enhancements + +- Update the Block and editor UI. [19344](https://github.com/WordPress/gutenberg/pull/19344) + - New icons. [20464](https://github.com/WordPress/gutenberg/pull/20464) + - Avoid empty menu groups. [20495](https://github.com/WordPress/gutenberg/pull/20495) + - Block Placeholders. [20441](https://github.com/WordPress/gutenberg/pull/20441), [20676](https://github.com/WordPress/gutenberg/pull/20676). + - Various tweaks [20679](https://github.com/WordPress/gutenberg/pull/20679), [20578](https://github.com/WordPress/gutenberg/pull/20578). +- Improve the Back to WP Admin button in Fullscreen Mode. [20603](https://github.com/WordPress/gutenberg/pull/20603) +- Make the editor Fullscreen by default. [20611](https://github.com/WordPress/gutenberg/pull/20611) +- Remove template locking from the columns block [20465](https://github.com/WordPress/gutenberg/pull/20465) +- Make the inserter full height. [20526](https://github.com/WordPress/gutenberg/pull/20526) + +### Bug Fixes + +- A11y: + - Deselect first/last gallery images on blur. [14930](https://github.com/WordPress/gutenberg/pull/14930) + - Revert top toolbar tab order [20571](https://github.com/WordPress/gutenberg/pull/20571) +- Add an overlay to the html block preview to fix block selection in Firefox. [20425](https://github.com/WordPress/gutenberg/pull/20425) +- Add missing accessibility attributes in the SVG icons. [20538](https://github.com/WordPress/gutenberg/pull/20538) +- Fix invalid syntax error on Safari 12. [20507](https://github.com/WordPress/gutenberg/pull/20507) +- Use a consistent width for the link suggetions. [20448](https://github.com/WordPress/gutenberg/pull/20448) +- Use full labels for directional block movers. [20664](https://github.com/WordPress/gutenberg/pull/20664) +- Columns block: Force 50% column width at mid-range viewport. [20597](https://github.com/WordPress/gutenberg/pull/20597) +- Media & Text block: Fix frontend styles when "Crop image to fill" is selected [20539](https://github.com/WordPress/gutenberg/pull/20539) +- Latest Post block: + - Fix the excerpt length. [20313](https://github.com/WordPress/gutenberg/pull/20313) + - Don't trim manual exerptts [20432](https://github.com/WordPress/gutenberg/pull/20432) +- Fix sidebar scroll issue on small viewports. [20491](https://github.com/WordPress/gutenberg/pull/20491) +- Social Link block: + - Escape generated class name. [20479](https://github.com/WordPress/gutenberg/pull/20479) + - Fix label attribute type as string. [20468](https://github.com/WordPress/gutenberg/pull/20468) + - i18n: Use placeholder for the default label [20475](https://github.com/WordPress/gutenberg/pull/20475) +- Simulated Queries (Device previews): + - Check for match in stylesheet host and protocol to prevent Chrome breakage. [20673](https://github.com/WordPress/gutenberg/pull/20673) + - Fix IE11 editor breakage. [20226](https://github.com/WordPress/gutenberg/pull/20226) + - Fix incorrectly displayed preview option for private post types. [20604](https://github.com/WordPress/gutenberg/pull/20604) + - Focus preview button after opening preview. [20570](https://github.com/WordPress/gutenberg/pull/20570) +- Fix isURL regex to take account file urls. [20435](https://github.com/WordPress/gutenberg/pull/20435) +- Fix error when deleting empty paragraphs in IE11. [20594](https://github.com/WordPress/gutenberg/pull/20594) +- Fix hidden inserter toggle behind the popover. [20663](https://github.com/WordPress/gutenberg/pull/20663) +- Fix block registration shared defaults reuse across blocks. [20565](https://github.com/WordPress/gutenberg/pull/20565) +- Shim meta attributes for early block registrations. [20544](https://github.com/WordPress/gutenberg/pull/20544) +- Fix bouncing Custom color formatter. [20612](https://github.com/WordPress/gutenberg/pull/20612) +- Fix Gallery block styles in Edge causing editor breakage. [20690](https://github.com/WordPress/gutenberg/pull/20690) + +### New APIs: + +- @wordpress/env: Add support for ZIP URL sources. [20426](https://github.com/WordPress/gutenberg/pull/20426) + +### Experiments + +- Lighter Block DOM: allow block types to render their own wrapper [19701](https://github.com/WordPress/gutenberg/pull/19701) + - Lighter InnerBlocks. [19910](https://github.com/WordPress/gutenberg/pull/19910) + - Automatically add block class. [20658](https://github.com/WordPress/gutenberg/pull/20658) +- BlockPreview: Add __experimentalOnReady prop. [17242](https://github.com/WordPress/gutenberg/pull/17242) +- Edit Site: + - Update template navigation to use new link control. [20366](https://github.com/WordPress/gutenberg/pull/20366) + - Update the edit site save modal UI. [20608](https://github.com/WordPress/gutenberg/pull/20608) +- Fix the block toolbar in the Widgets and Site Edit screens. [20458](https://github.com/WordPress/gutenberg/pull/20458) +- Fix widgets screen inserter [20680](https://github.com/WordPress/gutenberg/pull/20680) + +### Documentation + +- Add tutorial for creating a custom block editor instance. [20410](https://github.com/WordPress/gutenberg/pull/20410) +- Create a new "Gutenberg as a Platform" page. [20666](https://github.com/WordPress/gutenberg/pull/20666) +- Typos and tweaks: [20382](https://github.com/WordPress/gutenberg/pull/20382), [20386](https://github.com/WordPress/gutenberg/pull/20386), [20517](https://github.com/WordPress/gutenberg/pull/20517), [20662](https://github.com/WordPress/gutenberg/pull/20662), [20454](https://github.com/WordPress/gutenberg/pull/20454), [20659](https://github.com/WordPress/gutenberg/pull/20659). + +### Code Quality + +- Refactoring to existing blocks to use a lighter DOM: + - List block. [20498](https://github.com/WordPress/gutenberg/pull/20498) + - Image block. [20576](https://github.com/WordPress/gutenberg/pull/20576) + - Heading. [20493](https://github.com/WordPress/gutenberg/pull/20493) +- Consistent block focus behaviour on mount. [20577](https://github.com/WordPress/gutenberg/pull/20577) +- Cleanup CSS variables. [20529](https://github.com/WordPress/gutenberg/pull/20529) +- Use the EditorSkeleton component in the widgets and Edit Site pages. [20440](https://github.com/WordPress/gutenberg/pull/20440), [20431](https://github.com/WordPress/gutenberg/pull/20431). +- Refactor SlotFill components. [19242](https://github.com/WordPress/gutenberg/pull/19242) +- Remove useless style override for floats. [20501](https://github.com/WordPress/gutenberg/pull/20501) +- Block popover: remove data-type. [20531](https://github.com/WordPress/gutenberg/pull/20531) +- Resizable editor improvements. [20259](https://github.com/WordPress/gutenberg/pull/20259) + +### Various + +- @wordpress/env: + - Save the database as a volume. [20648](https://github.com/WordPress/gutenberg/pull/20648) + - Fix accidental quotes in Site Title. [20520](https://github.com/WordPress/gutenberg/pull/20520) + - Set owner of wp-content to www-data. [20406](https://github.com/WordPress/gutenberg/pull/20406) +- @wordpress/create-block: + - Fix system requirements checks. [20461](https://github.com/WordPress/gutenberg/pull/20461) [20456](https://github.com/WordPress/gutenberg/pull/20456) +- Fix React warning triggered by the BlockToolbar component. [20546](https://github.com/WordPress/gutenberg/pull/20546) +- Skip the Type Writer effect component in IE 11. [20485](https://github.com/WordPress/gutenberg/pull/20485) +- Update browserslist to fix out-of-date caniuse-lite messages [20709](https://github.com/WordPress/gutenberg/pull/20709) +- Add storybook stories: + - TextControl [20467](https://github.com/WordPress/gutenberg/pull/20467) + - TextAreaControl [20472](https://github.com/WordPress/gutenberg/pull/20472) + - SelectControl [20482](https://github.com/WordPress/gutenberg/pull/20482) + - Tooltip [20322](https://github.com/WordPress/gutenberg/pull/20322) +- E2E Tests: + - Add test for the Image block. [20622](https://github.com/WordPress/gutenberg/pull/20622) + - More stable embed test. [20668](https://github.com/WordPress/gutenberg/pull/20668) + - Fix intermittent RichText e2e test failure. [20457](https://github.com/WordPress/gutenberg/pull/20457) +- Travis: Avoid skipping Puppeteer download. [20547](https://github.com/WordPress/gutenberg/pull/20547) +- Plugin: Bump minimum WordPress version to 5.3 [20628](https://github.com/WordPress/gutenberg/pull/20628) +- @wordrpess/priority-queue: Fix for environments that don't have `window` defined. [20486](https://github.com/WordPress/gutenberg/pull/20486) +- Update jest configuration to only ignore tests from /wordpress/ as a subdirectory [20420](https://github.com/WordPress/gutenberg/pull/20420) + + + = 7.6.0 = ## Features diff --git a/gutenberg.php b/gutenberg.php index bdd7d4ebce6c2d..c151804694118a 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: 7.6.0 + * Version: 7.7.0-rc.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index aa8dab35dbfc85..2b72c285bff0ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.6.0", + "version": "7.7.0-rc.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d8ed5f7f4aa86f..f426ebd53a6a95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.6.0", + "version": "7.7.0-rc.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index f740b842fa4e21..9b8309f709240d 100644 --- a/readme.txt +++ b/readme.txt @@ -52,4 +52,4 @@ The four phases of the project are Editing, Customization, Collaboration, and Mu == Changelog == -To read the changelog for Gutenberg 7.6.0, please navigate to the release page. +To read the changelog for Gutenberg 7.7.0-rc.1, please navigate to the release page. From 38f56fef5a9002ae606cc28517eb743d4813ab6d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 9 Mar 2020 19:58:38 +0100 Subject: [PATCH 004/448] Add two images side by side pattern (#20725) --- lib/client-assets.php | 1 + lib/patterns/two-images.json | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 lib/patterns/two-images.json diff --git a/lib/client-assets.php b/lib/client-assets.php index e143ef1c6caa69..be7eeb19a83bb0 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -653,6 +653,7 @@ function gutenberg_extend_settings_block_patterns( $settings ) { gutenberg_load_block_pattern( 'text-two-columns' ), gutenberg_load_block_pattern( 'two-buttons' ), gutenberg_load_block_pattern( 'cover-abc' ), + gutenberg_load_block_pattern( 'two-images' ), ]; $settings['__experimentalBlockPatterns'] = $block_patterns; return $settings; diff --git a/lib/patterns/two-images.json b/lib/patterns/two-images.json new file mode 100644 index 00000000000000..d3303be5d5c6c1 --- /dev/null +++ b/lib/patterns/two-images.json @@ -0,0 +1,5 @@ +{ + "__file": "wp_block", + "title": "Two images side by side", + "content": "\n
    • \"\"
    • \"\"
    \n" +} From c01bb1e3aca3b26750521cd711e51369d0475290 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 9 Mar 2020 17:26:46 -0400 Subject: [PATCH 005/448] Build: Include entire `lib/` folder in plugin bundle (#20736) --- bin/build-plugin-zip.sh | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh index d68c58f0c9edb7..4aea6ac016c1e8 100755 --- a/bin/build-plugin-zip.sh +++ b/bin/build-plugin-zip.sh @@ -115,8 +115,7 @@ build_files=$(ls build/*/*.{js,css,asset.php} build/block-library/blocks/*.php b status "Creating archive... 🎁" zip -r gutenberg.zip \ gutenberg.php \ - lib/*.php \ - lib/demo-block-templates/*.html \ + lib \ packages/block-serialization-default-parser/*.php \ post-content.php \ $vendor_scripts \ From 6066186e6bee862c90a8abdc1e984fc1885e2c44 Mon Sep 17 00:00:00 2001 From: Jon Quach Date: Mon, 9 Mar 2020 16:45:36 -0500 Subject: [PATCH 006/448] RangeControl: Fix Reset and initialPosition (#20247) * RangeControl: Fix reset and initialPosition logic * Add tests for desired initialPosition, value, and reset scenarios * Update storybook snapshots * Fix null value fill for marks * Remove unnecessary ref dependency in useEffect hook * Adjust Range x Tooltip interactions So that hovering on a tooltip no longer keeps it open --- .../components/src/range-control/index.js | 42 ++-- .../styles/range-control-styles.js | 1 + .../src/range-control/test/index.js | 117 +++++++++++- .../components/src/range-control/utils.js | 33 ++-- storybook/test/__snapshots__/index.js.snap | 180 +++++------------- 5 files changed, 211 insertions(+), 162 deletions(-) diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js index 365eb921e85efa..3c4d5fcf7b9eba 100644 --- a/packages/components/src/range-control/index.js +++ b/packages/components/src/range-control/index.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { clamp, noop } from 'lodash'; +import { clamp, isFinite, noop } from 'lodash'; /** * WordPress dependencies @@ -18,7 +18,11 @@ import BaseControl from '../base-control'; import Button from '../button'; import Icon from '../icon'; import { color } from '../utils/colors'; -import { useControlledRangeValue, useDebouncedHoverInteraction } from './utils'; +import { + floatClamp, + useControlledRangeValue, + useDebouncedHoverInteraction, +} from './utils'; import RangeRail from './rail'; import SimpleTooltip from './tooltip'; import { @@ -42,6 +46,7 @@ const BaseRangeControl = forwardRef( allowReset = false, beforeIcon, className, + currentInput, color: colorProp = color( 'blue.wordpress.700' ), disabled = false, help, @@ -54,7 +59,7 @@ const BaseRangeControl = forwardRef( onBlur = noop, onChange = noop, onFocus = noop, - onMouseEnter = noop, + onMouseMove = noop, onMouseLeave = noop, renderTooltipContent = ( v ) => v, showTooltip: showTooltipProp, @@ -67,7 +72,7 @@ const BaseRangeControl = forwardRef( ) => { const isRTL = useRtl(); - const sliderValue = initialPosition || valueProp; + const sliderValue = valueProp || initialPosition; const [ value, setValue ] = useControlledRangeValue( { min, max, @@ -75,7 +80,6 @@ const BaseRangeControl = forwardRef( } ); const [ showTooltip, setShowTooltip ] = useState( showTooltipProp ); const [ isFocused, setIsFocused ] = useState( false ); - const originalValueRef = useRef( value ); const inputRef = useRef(); @@ -90,7 +94,16 @@ const BaseRangeControl = forwardRef( const isCurrentlyFocused = inputRef.current?.matches( ':focus' ); const isThumbFocused = ! disabled && isFocused; - const fillValue = ( ( value - min ) / ( max - min ) ) * 100; + const isValueReset = value === null; + const inputSliderValue = isValueReset ? '' : value; + const currentInputValue = isValueReset ? '' : value || currentInput; + + const rangeFillValue = isValueReset + ? floatClamp( max / 2, min, max ) + : value; + + const calculatedFillValue = ( ( value - min ) / ( max - min ) ) * 100; + const fillValue = isValueReset ? 50 : calculatedFillValue; const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`; const classes = classnames( 'components-range-control', className ); @@ -103,7 +116,7 @@ const BaseRangeControl = forwardRef( const id = `inspector-range-control-${ instanceId }`; const describedBy = !! help ? `${ id }__help` : undefined; - const enableTooltip = showTooltipProp !== false; + const enableTooltip = showTooltipProp !== false && isFinite( value ); const handleOnChange = ( event ) => { if ( ! event.target.checkValidity() ) { @@ -117,10 +130,8 @@ const BaseRangeControl = forwardRef( }; const handleOnReset = () => { - const nextValue = originalValueRef.current; - - setValue( nextValue ); - onChange( nextValue ); + setValue( null ); + onChange( undefined ); }; const handleShowTooltip = () => setShowTooltip( true ); @@ -141,7 +152,7 @@ const BaseRangeControl = forwardRef( const hoverInteractions = useDebouncedHoverInteraction( { onShow: handleShowTooltip, onHide: handleHideTooltip, - onMouseEnter, + onMouseMove, onMouseLeave, } ); @@ -188,7 +199,7 @@ const BaseRangeControl = forwardRef( step={ step } tabIndex={ 0 } type="range" - value={ value } + value={ inputSliderValue } /> { enableTooltip && ( ) } { allowReset && ( diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index cdbf2af600b9db..065d273737f3cd 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -229,6 +229,7 @@ export const Tooltip = styled.span` min-width: 32px; opacity: 0; padding: 8px; + pointer-events: none; position: absolute; text-align: center; transition: opacity 120ms ease; diff --git a/packages/components/src/range-control/test/index.js b/packages/components/src/range-control/test/index.js index 5f333b2a40676f..4c67a4f9c1a8f6 100644 --- a/packages/components/src/range-control/test/index.js +++ b/packages/components/src/range-control/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import TestUtils from 'react-dom/test-utils'; +import TestUtils, { act } from 'react-dom/test-utils'; /** * Internal dependencies @@ -293,4 +293,119 @@ describe( 'RangeControl', () => { expect( onChange ).toHaveBeenCalledWith( 0.225 ); } ); } ); + + describe( 'initialPosition / value', () => { + const getInputElement = ( wrapper ) => + TestUtils.findRenderedDOMComponentWithClass( + wrapper, + 'components-range-control__slider' + ); + + it( 'renders initial rendered value of 50% of min/max, if no initialPosition or value is defined', () => { + const wrapper = getWrapper( { min: 0, max: 10 } ); + const inputElement = getInputElement( wrapper ); + + expect( inputElement.value ).toBe( '5' ); + } ); + + it( 'renders initialPosition if no value is provided', () => { + const wrapper = getWrapper( { + initialPosition: 50, + value: undefined, + } ); + const inputElement = getInputElement( wrapper ); + + expect( inputElement.value ).toBe( '50' ); + } ); + + it( 'renders value instead of initialPosition is provided', () => { + const wrapper = getWrapper( { initialPosition: 50, value: 10 } ); + const inputElement = getInputElement( wrapper ); + + expect( inputElement.value ).toBe( '10' ); + } ); + } ); + + describe( 'reset', () => { + class StatefulTestWrapper extends Component { + constructor( props ) { + super( props ); + this.state = { + value: undefined, + }; + this.handleOnChange = this.handleOnChange.bind( this ); + } + + handleOnChange( nextValue = this.props.resetFallbackValue ) { + this.setState( { value: nextValue } ); + } + + render() { + return ( + + ); + } + } + + const getStatefulWrapper = ( props = {} ) => + TestUtils.renderIntoDocument( + + ); + + const getInputElement = ( wrapper ) => + TestUtils.findRenderedDOMComponentWithClass( + wrapper, + 'components-range-control__slider' + ); + + it( 'resets to a custom fallback value, defined by a parent component', () => { + const wrapper = getStatefulWrapper( { + initialPosition: 50, + value: 10, + allowReset: true, + resetFallbackValue: 33, + } ); + + const resetButton = TestUtils.findRenderedDOMComponentWithClass( + wrapper, + 'components-range-control__reset' + ); + + act( () => { + TestUtils.Simulate.click( resetButton ); + } ); + + const inputElement = getInputElement( wrapper ); + + expect( inputElement.value ).toBe( '33' ); + } ); + + it( 'resets to a 50% of min/max value, of no initialPosition or value is defined', () => { + const wrapper = getStatefulWrapper( { + initialPosition: undefined, + value: 10, + min: 0, + max: 100, + allowReset: true, + resetFallbackValue: undefined, + } ); + + const resetButton = TestUtils.findRenderedDOMComponentWithClass( + wrapper, + 'components-range-control__reset' + ); + + act( () => { + TestUtils.Simulate.click( resetButton ); + } ); + + const inputElement = getInputElement( wrapper ); + + expect( inputElement.value ).toBe( '50' ); + } ); + } ); } ); diff --git a/packages/components/src/range-control/utils.js b/packages/components/src/range-control/utils.js index 4c39afebe99109..d1fd148ec2a3fb 100644 --- a/packages/components/src/range-control/utils.js +++ b/packages/components/src/range-control/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { clamp, noop } from 'lodash'; +import { clamp, isFinite, noop } from 'lodash'; /** * WordPress dependencies @@ -11,35 +11,42 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element'; /** * A float supported clamp function for a specific value. * - * @param {number} value The value to clamp + * @param {number|null} value The value to clamp * @param {number} min The minimum value * @param {number} max The maxinum value * * @return {number} A (float) number */ -function floatClamp( value, min, max ) { +export function floatClamp( value, min, max ) { + if ( ! isFinite( value ) ) { + return null; + } + return parseFloat( clamp( value, min, max ) ); } /** * Hook to store a clamped value, derived from props. */ -export function useControlledRangeValue( { min, max, value: valueProp = 0 } ) { +export function useControlledRangeValue( { min, max, value: valueProp } ) { const [ value, setValue ] = useState( floatClamp( valueProp, min, max ) ); const valueRef = useRef( value ); - const setClampValue = ( nextValue ) => { - setValue( floatClamp( nextValue, min, max ) ); - }; + const setClampValue = useCallback( + ( nextValue ) => { + setValue( floatClamp( nextValue, min, max ) ); + }, + [ setValue, min, max ] + ); useEffect( () => { if ( valueRef.current !== valueProp ) { setClampValue( valueProp ); valueRef.current = valueProp; } - }, [ valueProp, setClampValue ] ); + }, [ valueProp, setValue ] ); - return [ value, setClampValue ]; + return [ value, setValue ]; } /** @@ -49,7 +56,7 @@ export function useControlledRangeValue( { min, max, value: valueProp = 0 } ) { export function useDebouncedHoverInteraction( { onShow = noop, onHide = noop, - onMouseEnter = noop, + onMouseMove = noop, onMouseLeave = noop, timeout = 300, } ) { @@ -65,8 +72,8 @@ export function useDebouncedHoverInteraction( { [ timeout ] ); - const handleOnMouseEnter = useCallback( ( event ) => { - onMouseEnter( event ); + const handleOnMouseMove = useCallback( ( event ) => { + onMouseMove( event ); setDebouncedTimeout( () => { if ( ! show ) { @@ -92,7 +99,7 @@ export function useDebouncedHoverInteraction( { } ); return { - onMouseEnter: handleOnMouseEnter, + onMouseMove: handleOnMouseMove, onMouseLeave: handleOnMouseLeave, }; } diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 3e91191010c315..99d418b29f4e41 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -3275,6 +3275,7 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = ` min-width: 32px; opacity: 0; padding: 8px; + pointer-events: none; position: absolute; text-align: center; -webkit-transition: opacity 120ms ease; @@ -3452,8 +3453,8 @@ input[type='number'].emotion-18 { onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - onMouseEnter={[Function]} onMouseLeave={[Function]} + onMouseMove={[Function]} step={1} tabIndex={0} type="range" @@ -3488,8 +3489,6 @@ input[type='number'].emotion-18 {
    @@ -5338,12 +5268,12 @@ input[type='number'].emotion-12 { onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - onMouseEnter={[Function]} onMouseLeave={[Function]} + onMouseMove={[Function]} step={1} tabIndex={0} type="range" - value={0} + value="" /> @@ -5362,7 +5292,7 @@ input[type='number'].emotion-12 { className="emotion-8 emotion-9" style={ Object { - "left": "0%", + "left": "50%", } } > @@ -5382,7 +5312,7 @@ input[type='number'].emotion-12 { onChange={[Function]} step={1} type="number" - value={0} + value="" /> @@ -5525,6 +5455,7 @@ exports[`Storyshots Components/RangeControl Initial Value Zero 1`] = ` min-width: 32px; opacity: 0; padding: 8px; + pointer-events: none; position: absolute; text-align: center; -webkit-transition: opacity 120ms ease; @@ -5613,8 +5544,8 @@ input[type='number'].emotion-14 { onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - onMouseEnter={[Function]} onMouseLeave={[Function]} + onMouseMove={[Function]} step={1} tabIndex={0} type="range" @@ -5649,8 +5580,6 @@ input[type='number'].emotion-14 { @@ -5813,6 +5741,7 @@ exports[`Storyshots Components/RangeControl Multiple 1`] = ` min-width: 32px; opacity: 0; padding: 8px; + pointer-events: none; position: absolute; text-align: center; -webkit-transition: opacity 120ms ease; @@ -5901,8 +5830,8 @@ input[type='number'].emotion-14 { onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - onMouseEnter={[Function]} onMouseLeave={[Function]} + onMouseMove={[Function]} step={1} tabIndex={0} type="range" @@ -5937,8 +5866,6 @@ input[type='number'].emotion-14 { Date: Mon, 9 Mar 2020 16:08:37 -0700 Subject: [PATCH 007/448] Docs: Add Custom Block Editor to TOC and Manifest (#20749) --- docs/manifest.json | 6 ++++++ docs/toc.json | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/manifest.json b/docs/manifest.json index 81369c181351d3..b6df85092c95b2 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -239,6 +239,12 @@ "markdown_source": "../docs/designers-developers/developers/platform/README.md", "parent": "developers" }, + { + "title": "Building a custom block editor", + "slug": "custom-block-editor", + "markdown_source": "../docs/designers-developers/developers/platform/custom-block-editor/README.md", + "parent": "platform" + }, { "title": "Designer Documentation", "slug": "designers", diff --git a/docs/toc.json b/docs/toc.json index ee9edb4ccf0720..b3e896d5e5c773 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -45,7 +45,9 @@ { "docs/designers-developers/developers/backward-compatibility/deprecations.md": [] }, { "docs/designers-developers/developers/backward-compatibility/meta-box.md": [] } ] }, - { "docs/designers-developers/developers/platform/README.md": [] } + { "docs/designers-developers/developers/platform/README.md": [ + { "docs/designers-developers/developers/platform/custom-block-editor/README.md": [] } + ] } ] }, { "docs/designers-developers/designers/README.md": [ { "docs/designers-developers/designers/block-design.md": [] }, From cc39808cf84cef026db6e0743da22ee00ad5162f Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 9 Mar 2020 16:56:10 -0700 Subject: [PATCH 008/448] Docs: Add tutorial file to TOC (#20750) --- docs/manifest.json | 6 ++++++ docs/toc.json | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/manifest.json b/docs/manifest.json index b6df85092c95b2..50fdc3673e7d71 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -245,6 +245,12 @@ "markdown_source": "../docs/designers-developers/developers/platform/custom-block-editor/README.md", "parent": "platform" }, + { + "title": "Tutorial: building a custom block editor", + "slug": "tutorial", + "markdown_source": "../docs/designers-developers/developers/platform/custom-block-editor/tutorial.md", + "parent": "custom-block-editor" + }, { "title": "Designer Documentation", "slug": "designers", diff --git a/docs/toc.json b/docs/toc.json index b3e896d5e5c773..c369873791bd9c 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -46,7 +46,9 @@ { "docs/designers-developers/developers/backward-compatibility/meta-box.md": [] } ] }, { "docs/designers-developers/developers/platform/README.md": [ - { "docs/designers-developers/developers/platform/custom-block-editor/README.md": [] } + { "docs/designers-developers/developers/platform/custom-block-editor/README.md": [ + { "docs/designers-developers/developers/platform/custom-block-editor/tutorial.md": [] } + ] } ] } ] }, { "docs/designers-developers/designers/README.md": [ From f2028fa1b948bbeea3c9b7266e2db0c1cf06cfb9 Mon Sep 17 00:00:00 2001 From: Marco Pereirinha Date: Tue, 10 Mar 2020 09:31:32 +0000 Subject: [PATCH 009/448] Expand create block options and add readme.txt template (#20694) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add Author, License and Version prompt options * Add readme.txt template * Fix typo * Add License URI option * Do not filter, just assume the default value * Update default values * Use version option in documentation * Update the default description field to add details on limits * Update readme description * Remove extra spaces * Update packages/create-block/lib/prompts.js * Apply suggestions from code review Co-authored-by: Grzegorz (Greg) Ziółkowski --- packages/create-block/lib/prompts.js | 29 ++++++++++ packages/create-block/lib/scaffold.js | 2 + packages/create-block/lib/templates.js | 5 ++ .../lib/templates/es5/readme.txt.mustache | 57 +++++++++++++++++++ .../lib/templates/esnext/readme.txt.mustache | 57 +++++++++++++++++++ 5 files changed, 150 insertions(+) create mode 100644 packages/create-block/lib/templates/es5/readme.txt.mustache create mode 100644 packages/create-block/lib/templates/esnext/readme.txt.mustache diff --git a/packages/create-block/lib/prompts.js b/packages/create-block/lib/prompts.js index 99d49120e2d6ed..e891331dbc20b7 100644 --- a/packages/create-block/lib/prompts.js +++ b/packages/create-block/lib/prompts.js @@ -73,6 +73,31 @@ const category = { choices: [ 'common', 'embed', 'formatting', 'layout', 'widgets' ], }; +const author = { + type: 'input', + name: 'author', + message: + 'The list of contributors containing only WordPress.org usernames (optional):', +}; + +const license = { + type: 'input', + name: 'license', + message: 'The plugin license (optional):', +}; + +const licenseURI = { + type: 'input', + name: 'licenseURI', + message: 'The plugin license URI (optional):', +}; + +const version = { + type: 'input', + name: 'version', + message: 'The plugin version (optional):', +}; + module.exports = { slug, namespace, @@ -80,4 +105,8 @@ module.exports = { description, dashicon, category, + author, + license, + licenseURI, + version, }; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 85186c15eb7172..be9b09588bde6c 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -25,6 +25,7 @@ module.exports = async function( category, author, license, + licenseURI, version, } ) { @@ -46,6 +47,7 @@ module.exports = async function( version, author, license, + licenseURI, textdomain: namespace, }; await Promise.all( diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index da5ea63312a358..581e4ee1c48454 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -9,6 +9,7 @@ const dashicon = 'smiley'; const category = 'widgets'; const author = 'The WordPress Contributors'; const license = 'GPL-2.0-or-later'; +const licenseURI = 'https://www.gnu.org/licenses/gpl-2.0.html'; const version = '0.1.0'; const templates = { @@ -23,6 +24,7 @@ const templates = { category, author, license, + licenseURI, version, }, outputFiles: [ @@ -31,6 +33,7 @@ const templates = { 'index.js', '$slug.php', 'style.css', + 'readme.txt', ], }, esnext: { @@ -44,6 +47,7 @@ const templates = { category, author, license, + licenseURI, version, }, outputFiles: [ @@ -53,6 +57,7 @@ const templates = { 'src/index.js', '$slug.php', 'style.css', + 'readme.txt', ], wpScriptsEnabled: true, }, diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.mustache new file mode 100644 index 00000000000000..b0e13c215642b6 --- /dev/null +++ b/packages/create-block/lib/templates/es5/readme.txt.mustache @@ -0,0 +1,57 @@ +=== {{title}} === +Contributors: {{author}} +Tags: block +Requires at least: 5.3.2 +Tested up to: 5.3.2 +Stable tag: {{version}} +Requires PHP: 7.0.0 +License: {{license}} +License URI: {{{licenseURI}}} + +{{description}} + +== Description == + +This is the long description. No limit, and you can use Markdown (as well as in the following sections). + +For backwards compatibility, if this section is missing, the full length of the short description will be used, and +Markdown parsed. + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly. +1. Activate the plugin through the 'Plugins' screen in WordPress + + +== Frequently Asked Questions == + += A question that someone might have = + +An answer to that question. + += What about foo bar? = + +Answer to foo bar dilemma. + +== Screenshots == + +1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from +the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets +directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` +(or jpg, jpeg, gif). +2. This is the second screen shot + +== Changelog == + += {{version}} = +* Release + +== Arbitrary section == + +You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated +plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or +"installation." Arbitrary sections will be shown below the built-in sections outlined above. diff --git a/packages/create-block/lib/templates/esnext/readme.txt.mustache b/packages/create-block/lib/templates/esnext/readme.txt.mustache new file mode 100644 index 00000000000000..b0e13c215642b6 --- /dev/null +++ b/packages/create-block/lib/templates/esnext/readme.txt.mustache @@ -0,0 +1,57 @@ +=== {{title}} === +Contributors: {{author}} +Tags: block +Requires at least: 5.3.2 +Tested up to: 5.3.2 +Stable tag: {{version}} +Requires PHP: 7.0.0 +License: {{license}} +License URI: {{{licenseURI}}} + +{{description}} + +== Description == + +This is the long description. No limit, and you can use Markdown (as well as in the following sections). + +For backwards compatibility, if this section is missing, the full length of the short description will be used, and +Markdown parsed. + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly. +1. Activate the plugin through the 'Plugins' screen in WordPress + + +== Frequently Asked Questions == + += A question that someone might have = + +An answer to that question. + += What about foo bar? = + +Answer to foo bar dilemma. + +== Screenshots == + +1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from +the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets +directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` +(or jpg, jpeg, gif). +2. This is the second screen shot + +== Changelog == + += {{version}} = +* Release + +== Arbitrary section == + +You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated +plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or +"installation." Arbitrary sections will be shown below the built-in sections outlined above. From 0bbb41e45641cde75bbebd46445b31a5a35a7a29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 10 Mar 2020 11:14:33 +0100 Subject: [PATCH 010/448] Lighter block DOM: Group (#20586) --- packages/block-library/src/group/edit.js | 10 +++++++--- packages/block-library/src/group/index.js | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 80f496967f599f..c0d195c997f017 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -3,7 +3,11 @@ */ import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { InnerBlocks, __experimentalUseColors } from '@wordpress/block-editor'; +import { + InnerBlocks, + __experimentalUseColors, + __experimentalBlock as Block, +} from '@wordpress/block-editor'; import { useRef } from '@wordpress/element'; function GroupEdit( { hasInnerBlocks, className } ) { @@ -28,7 +32,7 @@ function GroupEdit( { hasInnerBlocks, className } ) { { InspectorControlsColorPanel } -
    +
    -
    +     diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index 225e6e2ed03496..c977195156b73d 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -87,6 +87,7 @@ export const settings = { align: [ 'wide', 'full' ], anchor: true, html: false, + lightBlockWrapper: true, }, transforms: { from: [ From 03e3c05eca3ee66b99655e79d2939dafe27a46e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 10 Mar 2020 11:28:12 +0100 Subject: [PATCH 011/448] Lighter block DOM: Navigation (#20729) * Lighter block DOM: Navigation * Polish * Polish * Fix classes * Allow to define appender tag name * Revert link tag for now --- .../components/block-list-appender/index.js | 5 +- .../components/block-list/block-wrapper.js | 2 + .../src/components/block-list/index.js | 2 + .../block-library/src/navigation-link/edit.js | 13 +++-- .../src/navigation-link/index.js | 1 + packages/block-library/src/navigation/edit.js | 19 ++++--- .../block-library/src/navigation/editor.scss | 54 +++---------------- .../block-library/src/navigation/index.js | 1 + .../block-library/src/navigation/style.scss | 18 +------ 9 files changed, 40 insertions(+), 75 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index bd226053c6e9b8..3075f0da1f8aff 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -27,6 +27,7 @@ function BlockListAppender( { isLocked, renderAppender: CustomAppender, className, + tagName: TagName = 'div', } ) { if ( isLocked || CustomAppender === false ) { return null; @@ -57,7 +58,7 @@ function BlockListAppender( { } return ( -
    { appender } -
    + ); } diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js index 964bef9008420a..c728b2a8a01364 100644 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -230,7 +230,9 @@ const elements = [ 'h6', 'ol', 'ul', + 'li', 'figure', + 'nav', ]; const ExtendedBlockComponent = elements.reduce( ( acc, element ) => { diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index cbc95d7714c765..8905a17b58f22a 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -31,6 +31,7 @@ function BlockList( renderAppender, __experimentalUIParts = {}, __experimentalTagName = 'div', + __experimentalAppenderTagName, __experimentalPassedProps = {}, }, ref @@ -120,6 +121,7 @@ function BlockList( ); } ) } -
    -
    + ); } diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index b53e4003c0ec01..bbb180e4c3d3c3 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -26,6 +26,7 @@ export const settings = { supports: { reusable: false, html: false, + lightBlockWrapper: true, }, __experimentalLabel: ( { label } ) => label, diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 82230a34408531..36039e879fdcee 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -15,6 +15,7 @@ import { FontSizePicker, withFontSizes, __experimentalUseColors, + __experimentalBlock as Block, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -136,7 +137,7 @@ function Navigation( { const hasPages = hasResolvedPages && pages && pages.length; const blockClassNames = classnames( className, { - [ `items-justification-${ attributes.itemsJustification }` ]: attributes.itemsJustification, + [ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification, [ fontSize.class ]: fontSize.class, } ); const blockInlineStyles = { @@ -148,7 +149,7 @@ function Navigation( { // then show the Placeholder if ( ! hasExistingNavItems ) { return ( - + - + ); } @@ -256,8 +257,7 @@ function Navigation( { -
    @@ -266,13 +266,18 @@ function Navigation( { { __( 'Loading Navigation…' ) }{ ' ' } ) } - -
    +     diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 220dea8d44b739..f6141802433a43 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -1,53 +1,15 @@ $navigation-height: 60px; $navigation-item-height: 46px; -// Reduce the paddings, margins, and UI of inner-blocks. -// @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block. -// When that happens, leverage that instead of the following overrides. -[data-type="core/navigation"] { - - .wp-block-navigation .block-editor-inner-blocks { - flex: 1; // expand to fill available space required for justification - } - - // 1. Reset margins on immediate innerblocks container. - .wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout { - margin-left: 0; - margin-right: 0; - } - - .wp-block-navigation.items-justification-left .block-editor-inner-blocks > .block-editor-block-list__layout { - justify-content: flex-start; - } - - .wp-block-navigation.items-justification-center .block-editor-inner-blocks > .block-editor-block-list__layout { - justify-content: center; - } - - .wp-block-navigation.items-justification-right .block-editor-inner-blocks > .block-editor-block-list__layout { - justify-content: flex-end; - } - - .wp-block-navigation .block-editor-block-list__block::before { - left: 0; - right: 0; - } - - // Remove the dashed outlines for child blocks. - &.is-selected .wp-block-navigation .block-editor-block-list__block::before, - &.has-child-selected .wp-block-navigation .block-editor-block-list__block::before { - border-color: transparent !important; // !important used to keep the selector from growing any more complex. - } - - // Hide the sibling inserter. - .wp-block-navigation .block-editor-block-list__insertion-point { - display: none; - } +// Undo default editor styles. +.editor-styles-wrapper .wp-block-navigation ul, +.editor-styles-wrapper .wp-block-navigation ol { + margin-bottom: 0; + margin-left: 0; +} - // Set a min width when the item is focused and empty in order to show the caret. - .wp-block-navigation .wp-block-navigation-link.is-selected .block-editor-rich-text__editable:focus { - min-width: 20px; - } +.editor-styles-wrapper .wp-block-navigation .block-editor-block-list__block { + margin: 0; } // Polish the Appender. diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js index 26d43f3c5481c8..420b22b999ff79 100644 --- a/packages/block-library/src/navigation/index.js +++ b/packages/block-library/src/navigation/index.js @@ -29,6 +29,7 @@ export const settings = { anchor: true, html: false, inserter: true, + lightBlockWrapper: true, }, styles: [ diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 34f003903a0660..c595f75f198d14 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -84,12 +84,6 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; width: $navigation-sub-menu-width; } - // Remove paddings on subsequent immediate children. - .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block { - margin: 0; - width: auto; - } - &, > .wp-block-navigation__container { align-items: center; @@ -122,12 +116,7 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; margin: 0; } - > .block-editor-inner-blocks { - display: none; - } - - &.has-child > .wp-block-navigation__container, - &.is-editing.has-child > .block-editor-inner-blocks { + &.has-child > .wp-block-navigation__container { // Box model display: flex; border: $border-width solid rgba(0, 0, 0, 0.15); @@ -147,7 +136,6 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; } // Inherit colors from menu - .block-editor-inner-blocks, .wp-block-navigation__container { background-color: inherit; color: inherit; @@ -206,13 +194,11 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; .wp-block-navigation-link, &.is-style-light .wp-block-navigation-link { // No text color - &:not(.has-text-color) > .block-editor-inner-blocks, &:not(.has-text-color) > .wp-block-navigation__container { color: $light-style-sub-menu-text-color; } // No background color - &:not(.has-background) > .block-editor-inner-blocks, &:not(.has-background) > .wp-block-navigation__container { background-color: $light-style-sub-menu-background-color; } @@ -221,13 +207,11 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; // Dark styles. &.is-style-dark .wp-block-navigation-link { // No text color - &:not(.has-text-color) > .block-editor-inner-blocks, &:not(.has-text-color) > .wp-block-navigation__container { color: $dark-style-sub-menu-text-color; } // No background color - &:not(.has-background) > .block-editor-inner-blocks, &:not(.has-background) > .wp-block-navigation__container { background-color: $dark-style-sub-menu-background-color; } From f0ea36c240da2bc0efb8115d93d4157ee01c53d8 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 10 Mar 2020 14:05:27 +0100 Subject: [PATCH 012/448] Try: Show inserter only when block selected for nesting contexts. (#20753) * Try: Show inserter only when block selected for nesting contexts. Starts work on #20728. It doesn't completely fix it though. What it does is create a generic rule to hide the appender in nesting contexts, until the parent or a child of the same block, is selected. * Fix rebase issue, account for "lighter dom" blocks also. --- .../components/block-list-appender/style.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index e0fdd9d4e0afb0..59ddee0e47b6fb 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -8,6 +8,12 @@ .has-background & { margin: ($grid-unit-20 + $block-spacing) $grid-unit-10; } + + // Animate appearance. + opacity: 1; + transform: scale(1); + transition: all 0.1s ease; + @include reduce-motion("transition"); } .block-list-appender.is-drop-target > div::before { @@ -24,3 +30,13 @@ .block-list-appender > .block-editor-inserter { display: block; } + + +// Hide the nested appender unless parent or child is selected. +// This selector targets unselected blocks that have only a single nesting level. +.block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) { + .block-editor-block-list__layout > .block-list-appender { + opacity: 0; + transform: scale(0); + } +} From 8f337a837639bd4bcb31715d1e02fdb7575ac174 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 10 Mar 2020 14:05:39 +0100 Subject: [PATCH 013/448] Polish poster image button arrangement. (#20754) Fixes #20704. This changes the phrasing, the button types, and the arrangement of the video poster buttons. --- packages/block-library/src/video/edit.js | 11 +++++------ packages/block-library/src/video/editor.scss | 13 +++++++------ packages/components/src/base-control/style.scss | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 05e3bc0d9d3f6d..fc359c655cb986 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -184,7 +184,7 @@ class VideoEdit extends Component { } render={ ( { open } ) => ( ) } /> @@ -212,10 +212,9 @@ class VideoEdit extends Component { { !! this.props.attributes.poster && ( ) } diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index ed7b70c1278dc4..dd93768200fbb7 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -2,11 +2,12 @@ text-align: center; } -.editor-video-poster-control .components-button { - display: block; - margin-right: 8px; -} +.editor-video-poster-control { + .components-base-control__label { + display: block; + } -.editor-video-poster-control .components-button + .components-button { - margin-top: 1em; + .components-button { + margin-right: $grid-unit-10; + } } diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss index c94a581dc4e89b..f7ecf486a948df 100644 --- a/packages/components/src/base-control/style.scss +++ b/packages/components/src/base-control/style.scss @@ -12,7 +12,7 @@ .components-base-control__label { display: inline-block; - margin-bottom: $grid-unit-05; + margin-bottom: $grid-unit-10; } .components-base-control__help { From f9ded2dcf53ae315156453c2fc2141eaa6ac0885 Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Tue, 10 Mar 2020 14:25:48 +0100 Subject: [PATCH 014/448] Docs/SlotFills: Small update for consistency (#20767) --- docs/designers-developers/developers/slotfills/README.md | 6 ++---- .../developers/slotfills/plugin-block-settings-menu-item.md | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/designers-developers/developers/slotfills/README.md b/docs/designers-developers/developers/slotfills/README.md index 9df1769c19ba09..2b241ffb979ca7 100644 --- a/docs/designers-developers/developers/slotfills/README.md +++ b/docs/designers-developers/developers/slotfills/README.md @@ -14,13 +14,11 @@ In order to access the SlotFills, we need to do four things: 3. Define a method to render our changes. Our changes/additions will be wrapped in the SlotFill component we imported. 4. Register the plugin. - - Here is an example using the `PluginPostStatusInfo` slotFill: ```js -const { registerPlugin } = wp.plugins; -const { PluginPostStatusInfo } = wp.editPost; +import { registerPlugin } from '@wordpress/plugins'; +import { PluginPostStatusInfo } from '@wordpress/edit-post'; const PluginPostStatusInfoTest = () => ( diff --git a/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md index 666384c53af35d..f96df587dc6243 100644 --- a/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md +++ b/docs/designers-developers/developers/slotfills/plugin-block-settings-menu-item.md @@ -6,8 +6,8 @@ This will either appear in the controls for each block or at the Top Toolbar dep ## Example ```js -const { registerPlugin } = wp.plugins; -const { PluginBlockSettingsMenuItem } = wp.editPost; +import { registerPlugin } from '@wordpress/plugins'; +import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post'; const PluginBlockSettingsMenuGroupTest = () => ( Date: Tue, 10 Mar 2020 09:00:50 -0700 Subject: [PATCH 015/448] Fixes #11079. Removed width restriction in CSS for textarea. (#20624) --- packages/block-library/src/shortcode/editor.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss index 6043e66fd707f7..4d15b92337d8eb 100644 --- a/packages/block-library/src/shortcode/editor.scss +++ b/packages/block-library/src/shortcode/editor.scss @@ -16,7 +16,6 @@ } .block-editor-plain-text { - width: 80%; max-height: 250px; } From a3aecaff89691250417ac4c3684c24ee2b5afea2 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Tue, 10 Mar 2020 11:35:17 -0700 Subject: [PATCH 016/448] Add codeowners for env package (#20667) Adds @noahtallen, @noisysocks, and @epiqueras as codeowners of the wp-env package --- .github/CODEOWNERS | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index d426bc4a2a6012..ffc2089ffa33b9 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -86,6 +86,9 @@ /packages/rich-text @ellatrix @jorgefilipecosta @daniloercoli @sergioestevao @etoledom /packages/block-editor/src/components/rich-text @ellatrix @jorgefilipecosta @daniloercoli @sergioestevao @etoledom +# wp-env +/packages/env @epiqueras @noahtallen @noisysocks + # PHP /lib @timothybjacobs From a03eff9a82ad6897ff41915014a4beac313e3cc1 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 11 Mar 2020 09:51:13 +0100 Subject: [PATCH 017/448] Update Navigation Menu Item icon (#20763) * Update navigation link to use map marker. Also update the map marker icon. * Add triangle margin indicator to menu items. * Update snapshots. --- .../src/components/block-switcher/style.scss | 17 ++++++--------- .../src/navigation-link/index.js | 2 +- packages/icons/src/library/map-marker.js | 5 ++--- storybook/test/__snapshots__/index.js.snap | 21 +++---------------- 4 files changed, 12 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 82ea12fc16a9d0..207acd240f0a45 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -3,11 +3,12 @@ } // Show an indicator triangle. +.block-editor-block-switcher__no-switcher-icon, .block-editor-block-switcher__toggle { position: relative; &::after { - display: none; + display: block; content: ""; position: absolute; bottom: 1px; @@ -41,14 +42,12 @@ } } -// When the block switcher does not have any transformations, we show it but as disabled. -// The background and opacity change helps make the icon legible, despite being disabled. +// Even when the block switcher does not have any transformations, it still serves as a block indicator. .components-button.block-editor-block-switcher__no-switcher-icon:disabled { - opacity: 0.84; + opacity: 1; - // Also make the icon monochrome to further imply disabled state. - // We use !important here because icon colors are set as inline styles, - // and should be overridden when disabled. + // Since it's not clickable, though, don't show a hover state. + &, .block-editor-block-icon.has-colors { color: $dark-gray-primary !important; } @@ -164,10 +163,6 @@ } .components-button.block-editor-block-switcher__toggle { - &::after { - display: block; - } - .block-editor-block-icon, .block-editor-block-switcher__transform { width: $block-toolbar-height; diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index bbb180e4c3d3c3..57c01fc50ad76b 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { navigation as icon } from '@wordpress/icons'; +import { mapMarker as icon } from '@wordpress/icons'; /** * Internal dependencies diff --git a/packages/icons/src/library/map-marker.js b/packages/icons/src/library/map-marker.js index 7b7d43e0f25e82..5891003c81b950 100644 --- a/packages/icons/src/library/map-marker.js +++ b/packages/icons/src/library/map-marker.js @@ -1,12 +1,11 @@ /** * WordPress dependencies */ -import { SVG, Path, Circle } from '@wordpress/primitives'; +import { SVG, Path } from '@wordpress/primitives'; const mapMarker = ( - - + ); diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 99d418b29f4e41..603152a58439e5 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -12481,12 +12481,7 @@ exports[`Storyshots Icons/Icon Library 1`] = ` xmlns="https://www.w3.org/2000/svg" > - - - From f5bfffae29db3fc6123e5cced7b8fe12ac42b4d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= Date: Wed, 11 Mar 2020 09:08:31 +0000 Subject: [PATCH 018/448] Implement mock block-wrapper for mobile version. (#20772) --- .../block-list/block-wrapper.native.js | 22 +++++++++++++++++++ .../src/components/index.native.js | 1 + 2 files changed, 23 insertions(+) create mode 100644 packages/block-editor/src/components/block-list/block-wrapper.native.js diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js new file mode 100644 index 00000000000000..69cbf52723125a --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-wrapper.native.js @@ -0,0 +1,22 @@ +const elements = [ + 'p', + 'div', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'ol', + 'ul', + 'li', + 'figure', + 'nav', +]; + +const ExtendedBlockComponent = elements.reduce( ( acc, element ) => { + acc[ element ] = element; + return acc; +}, String ); + +export const Block = ExtendedBlockComponent; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 9fe95c7d93cd25..cddc6dd39e77db 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -45,6 +45,7 @@ export { default as BlockMover } from './block-mover'; export { default as BlockToolbar } from './block-toolbar'; export { default as DefaultBlockAppender } from './default-block-appender'; export { default as Inserter } from './inserter'; +export { Block as __experimentalBlock } from './block-list/block-wrapper'; // State Related Components export { default as BlockEditorProvider } from './provider'; From 1b3055c6bf36be3b8cc9d67881be9e2b27ed2dd4 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 11 Mar 2020 10:40:25 +0100 Subject: [PATCH 019/448] Check for `node.classList` to avoid crash on mobile pasting wrapped images. (#20499) --- .../blocks/src/api/raw-handling/figure-content-reducer.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/blocks/src/api/raw-handling/figure-content-reducer.js b/packages/blocks/src/api/raw-handling/figure-content-reducer.js index 0d8d3ac9f6be65..bd397884f635fe 100644 --- a/packages/blocks/src/api/raw-handling/figure-content-reducer.js +++ b/packages/blocks/src/api/raw-handling/figure-content-reducer.js @@ -88,7 +88,11 @@ export default function( node, doc, schema ) { // there is no text content. // Otherwise, if directly at the root, wrap in a figure element. if ( wrapper ) { - if ( + // In jsdom-jscore, 'node.classList' can be undefined. + // In this case, default to extract as it offers a better UI experience on mobile. + if ( ! node.classList ) { + wrapFigureContent( nodeToInsert, wrapper ); + } else if ( node.classList.contains( 'alignright' ) || node.classList.contains( 'alignleft' ) || node.classList.contains( 'aligncenter' ) || From dd0e49c2485169fbc29755177671a3e7162e4251 Mon Sep 17 00:00:00 2001 From: Maxime Biais Date: Wed, 11 Mar 2020 11:12:26 +0100 Subject: [PATCH 020/448] Set flex-shrink to 0 on the cell container (#20768) --- packages/components/src/mobile/bottom-sheet/styles.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 04f1651bfc795a..254817bfb44490 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -112,7 +112,7 @@ .cellRowContainer { flex-direction: row; align-items: center; - flex-shrink: 1; + flex-shrink: 0; } .cellIcon { From 886b45cc2448ced7a333acd6c261d6488d27501a Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 11 Mar 2020 11:12:48 +0100 Subject: [PATCH 021/448] Polish a few broken things in the sidebar. (#20782) There were some issues with the block sidebar: - The active style looked a bit overwhelming. - The button-group control lacked a little style. - The Width/Height controls for an image were offset. --- .../src/components/block-styles/style.scss | 8 +++++++- packages/block-library/src/table/editor.scss | 4 ---- packages/components/src/base-control/style.scss | 4 ---- packages/components/src/button-group/style.scss | 11 +++-------- 4 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index da6c8d0ebbbb79..b84725cf707f35 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -27,7 +27,13 @@ } &.is-active { - @include block-style__is-active(); + .block-editor-block-styles__item-label { + font-weight: bold; + } + + .block-editor-block-styles__item-preview { + border: 2px solid $dark-gray-primary; + } } } diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss index c03d8170c49f15..6aedff7549c2d0 100644 --- a/packages/block-library/src/table/editor.scss +++ b/packages/block-library/src/table/editor.scss @@ -68,10 +68,6 @@ margin-bottom: 0; } } - - .components-base-control + .components-base-control { - margin-top: 0; - } } .blocks-table__placeholder-input { diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss index f7ecf486a948df..bbdb59169d3776 100644 --- a/packages/components/src/base-control/style.scss +++ b/packages/components/src/base-control/style.scss @@ -20,7 +20,3 @@ font-style: italic; } } - -.components-base-control + .components-base-control { - margin-top: $grid-unit-20; -} diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index 9d9c48f4980a98..9c80304673b47e 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -1,22 +1,17 @@ .components-button-group { display: inline-block; + border-radius: $radius-block-ui; + border: $border-width solid $theme-color; .components-button { border-radius: 0; display: inline-flex; + color: $theme-color; & + .components-button { margin-left: -1px; } - &:first-child { - border-radius: 3px 0 0 3px; - } - - &:last-child { - border-radius: 0 3px 3px 0; - } - // The focused button should be elevated so the focus ring isn't cropped, // as should the active button, because it has a different border color. &:focus, From 177ca499003d32a9b601a796a80e95895557a17d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 11 Mar 2020 11:32:06 +0100 Subject: [PATCH 022/448] Bump plugin version to 7.7.0 --- changelog.txt | 2 +- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/changelog.txt b/changelog.txt index a7f8ab103087ce..57d205443df49a 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,6 +1,6 @@ == Changelog == -= 7.7.0-rc.1 = += 7.7.0 = ### Features diff --git a/gutenberg.php b/gutenberg.php index c151804694118a..8198fc4303b34f 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: 7.7.0-rc.1 + * Version: 7.7.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 2b72c285bff0ba..30ea302d26b491 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.7.0-rc.1", + "version": "7.7.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f426ebd53a6a95..66d7ea2ec43293 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.7.0-rc.1", + "version": "7.7.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index 9b8309f709240d..6fe5551487e27b 100644 --- a/readme.txt +++ b/readme.txt @@ -52,4 +52,4 @@ The four phases of the project are Editing, Customization, Collaboration, and Mu == Changelog == -To read the changelog for Gutenberg 7.7.0-rc.1, please navigate to the release page. +To read the changelog for Gutenberg 7.7.0, please navigate to the release page. From 39026257fc8ae53c889482de2040e007ef6ec539 Mon Sep 17 00:00:00 2001 From: Jon Quach Date: Wed, 11 Mar 2020 09:53:21 -0400 Subject: [PATCH 023/448] Gallery: Update UI of controls (#20776) * Reduce Gallery custom control border radius * Update Gallery control icons to use Chevron (left/right) from @wordpress/icons --- .../block-library/src/gallery/editor.scss | 2 +- .../src/gallery/gallery-image.js | 11 +++----- packages/block-library/src/gallery/icons.js | 26 ------------------- 3 files changed, 4 insertions(+), 35 deletions(-) delete mode 100644 packages/block-library/src/gallery/icons.js diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 91f17230d8ba4a..4689d36f0c2721 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -60,7 +60,7 @@ figure.wp-block-gallery { .is-selected .block-library-gallery-item__inline-menu { background: $white; border: 1px solid $dark-gray-primary; - border-radius: $radius-round-rectangle; + border-radius: $radius-block-ui; transition: box-shadow 0.2s ease-out; @include reduce-motion("transition"); diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index b661ff0abf1979..77325ba9e77348 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -15,12 +15,7 @@ import { withSelect, withDispatch } from '@wordpress/data'; import { RichText } from '@wordpress/block-editor'; import { isBlobURL } from '@wordpress/blob'; import { compose } from '@wordpress/compose'; -import { close } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import { leftArrow, rightArrow } from './icons'; +import { close, chevronLeft, chevronRight } from '@wordpress/icons'; class GalleryImage extends Component { constructor() { @@ -199,7 +194,7 @@ class GalleryImage extends Component { { href ? { img } : img }
    ) : ( diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index bda439f549b501..7adfb07c597f64 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -139,7 +139,6 @@ $block-inserter-search-height: 38px; display: none; border: $border-width solid $light-gray-secondary; width: 300px; - min-height: $block-inserter-preview-height; margin-right: 20px; padding: 20px; background: $white; @@ -150,8 +149,7 @@ $block-inserter-search-height: 38px; position: absolute; top: -$border-width; left: calc(100% + #{$grid-unit-15}); - display: flex; - flex-direction: column; + display: block; } .block-editor-block-card { @@ -160,12 +158,6 @@ $block-inserter-search-height: 38px; border-bottom: $border-width solid $light-gray-500; @include edit-post__fade-in-animation(); } - - .block-editor-inserter__preview { - display: flex; - flex-grow: 1; - overflow-y: auto; - } } .block-editor-inserter__menu-help-panel-no-block { @@ -210,13 +202,12 @@ $block-inserter-search-height: 38px; .block-editor-inserter__preview-content { border: $border-width solid $light-gray-500; border-radius: $radius-round-rectangle; - min-height: 150px; + min-height: $grid-unit-60 * 3; display: grid; flex-grow: 1; + align-items: center; .block-editor-block-preview__container { - margin-right: 0; - margin-left: 0; padding: 10px; } } @@ -229,6 +220,7 @@ $block-inserter-search-height: 38px; border: $border-width solid $light-gray-500; border-radius: $radius-round-rectangle; align-items: center; + min-height: $grid-unit-60 * 3; } .block-editor-inserter__tips { From 07d751a846bc80199ade310db677bd0e57c69c86 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Thu, 12 Mar 2020 11:49:35 +0200 Subject: [PATCH 033/448] Adds always on display of media URL (#19504) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rebased and addressed feedback review * removed useless space in button label * use a correct type for empty settings Co-Authored-By: Andrew Duthie * fixes arrow keys navigation * adds sending null when suggestions are not needed as it is proper in react rendering * fixes the ESCAPE key to close the dropdown menu * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede * removes deprecated mixing * moves keyboard capture outside of LinkControlto account only for it's usage in a dropwdown for MediaFlow * Overriding the width, removing the hr, and cleaning up spacing with the new grid variables. * Adjusting the spacing around the input for editing the link URL. * I'm not sure these are actually doing anything. Co-authored-by: Andrew Duthie Co-authored-by: Sören Wrede Co-authored-by: Shaun Andrews --- .../src/components/link-control/README.md | 8 ++ .../src/components/link-control/index.js | 10 +- .../components/media-replace-flow/index.js | 95 ++++++------------- .../components/media-replace-flow/style.scss | 55 +++++++---- 4 files changed, 84 insertions(+), 84 deletions(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index aeee36017a3f18..f05d9773f24f86 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -92,6 +92,14 @@ Value change handler, called with the updated value if the user selects a new li /> ``` +### showSuggestions + +- Type: `boolean` +- Required: No +- Default: `true` + +Whether to present suggestions when typing the URL. + ### showInitialSuggestions - Type: `boolean` diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 1a47f3283550f8..7cd7c632374cd4 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -139,6 +139,7 @@ const makeCancelable = ( promise ) => { * @property {WPLinkControlValue=} value Current link value. * @property {WPLinkControlOnChangeProp=} onChange Value change handler, called with the updated value if * the user selects a new link or updates settings. + * @property {boolean=} showSuggestions Whether to present suggestions when typing the URL. * @property {boolean=} showInitialSuggestions Whether to present initial suggestions immediately. * @property {WPLinkControlCreateSuggestionProp=} createSuggestion Handler to manage creation of link value from suggestion. */ @@ -154,6 +155,7 @@ function LinkControl( { value, settings, onChange = noop, + showSuggestions = true, showInitialSuggestions, forceIsEditingLink, createSuggestion, @@ -345,6 +347,10 @@ function LinkControl( { // Effects const getSearchHandler = useCallback( ( val, args ) => { + if ( ! showSuggestions ) { + return Promise.resolve( [] ); + } + return isURLLike( val ) ? handleDirectEntry( val, args ) : handleEntitySearch( val, args ); @@ -544,7 +550,9 @@ function LinkControl( { stopEditing(); } } } - renderSuggestions={ renderSearchResults } + renderSuggestions={ + showSuggestions ? renderSearchResults : null + } fetchSuggestions={ getSearchHandler } showInitialSuggestions={ showInitialSuggestions } errorMessage={ errorMessage } diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index 32aa43e910f2bf..79719047690a48 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -13,18 +13,17 @@ import { Dropdown, withNotices, } from '@wordpress/components'; -import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; +import { DOWN } from '@wordpress/keycodes'; import { useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { link, upload, media as mediaIcon } from '@wordpress/icons'; +import { upload, media as mediaIcon } from '@wordpress/icons'; /** * Internal dependencies */ import MediaUpload from '../media-upload'; import MediaUploadCheck from '../media-upload/check'; -import LinkEditor from '../url-popover/link-editor'; -import LinkViewer from '../url-popover/link-viewer'; +import LinkControl from '../link-control'; const MediaReplaceFlow = ( { mediaURL, @@ -36,29 +35,12 @@ const MediaReplaceFlow = ( { onError, name = __( 'Replace' ), } ) => { - const [ showURLInput, setShowURLInput ] = useState( false ); - const [ showEditURLInput, setShowEditURLInput ] = useState( false ); const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL ); const mediaUpload = useSelect( ( select ) => { return select( 'core/block-editor' ).getSettings().mediaUpload; }, [] ); const editMediaButtonRef = createRef(); - const stopPropagation = ( event ) => { - event.stopPropagation(); - }; - - const stopPropagationRelevantKeys = ( event ) => { - if ( - [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( - event.keyCode - ) > -1 - ) { - // Stop the key event from propagating up to ObserveTyping.startTypingInTextField. - event.stopPropagation(); - } - }; - const selectMedia = ( media ) => { onSelect( media ); setMediaURLValue( media.url ); @@ -67,7 +49,6 @@ const MediaReplaceFlow = ( { const selectURL = ( newURL ) => { onSelectURL( newURL ); - setShowEditURLInput( false ); }; const uploadFiles = ( event, closeDropdown ) => { @@ -92,36 +73,6 @@ const MediaReplaceFlow = ( { } }; - let urlInputUIContent; - if ( showEditURLInput ) { - urlInputUIContent = ( - setMediaURLValue( url ) } - onSubmit={ ( event ) => { - event.preventDefault(); - selectURL( mediaURLValue ); - editMediaButtonRef.current.focus(); - } } - /> - ); - } else { - urlInputUIContent = ( - - setShowEditURLInput( ! showEditURLInput ) - } - /> - ); - } - return ( - { onSelectURL && ( - - setShowURLInput( ! showURLInput ) - } - aria-expanded={ showURLInput } - > -
    { __( 'Insert from URL' ) }
    -     - ) } - { showURLInput && ( -
    - { urlInputUIContent } -
    + { onSelectURL && ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions +
    { + event.stopPropagation(); + } } + onKeyPress={ ( event ) => { + event.stopPropagation(); + } } + > + + { __( 'Current media URL:' ) } + + { + setMediaURLValue( url ); + selectURL( url ); + editMediaButtonRef.current.focus(); + } } + /> + ) } ) } diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss index 38ac4d82cbd1dd..c502f5339c9fd5 100644 --- a/packages/block-editor/src/components/media-replace-flow/style.scss +++ b/packages/block-editor/src/components/media-replace-flow/style.scss @@ -5,25 +5,48 @@ display: none; } -.block-editor-media-flow__url-input { - padding: 0 15px; - max-width: 255px; - padding-bottom: 10px; +// Forcing some space above the list of options in +// the dropdown to visually balance them. +.block-editor-media-replace-flow__options .components-popover__content { + padding-top: $grid-unit-20; +} - input { - max-width: 180px; - } +.block-editor-media-replace-flow__indicator { + margin-left: 4px; } -.block-editor-media-replace-flow__link-viewer { - // Overflow is not working properly if we show the icon. - .components-external-link__icon { - display: none; - } - .components-visually-hidden { - position: initial; +.block-editor-media-flow__url-input { + margin-top: $grid-unit-20; + + .block-editor-media-replace-flow__image-url-label { + top: $grid-unit-20; } - .components-button { - flex-shrink: 0; + + .block-editor-link-control { + margin-top: -16px; + width: auto; + + .components-base-control .components-base-control__field { + margin-bottom: 0; + } + + .block-editor-link-control__search-item-title { + max-width: 180px; + margin-top: $grid-unit-20; + } + + .block-editor-link-control__search-item.is-current { + width: auto; + padding: 0; + } + + .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] { + margin: 16px 0 0 0; + width: 100%; + } + + .block-editor-link-control__search-actions { + right: 4px; + } } } From e41535de552fade417d1ce31ce9f9dbf9f939f78 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Mar 2020 11:25:00 +0100 Subject: [PATCH 034/448] Fix drag and drop into the Columns block (#20822) --- packages/components/src/drop-zone/index.js | 3 +++ packages/components/src/drop-zone/provider.js | 24 +++++++++---------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js index de2318d4d7c847..5180c6efdd7040 100644 --- a/packages/components/src/drop-zone/index.js +++ b/packages/components/src/drop-zone/index.js @@ -22,6 +22,7 @@ export function useDropZone( { onDrop, isDisabled, withPosition, + __unstableIsRelative = false, } ) { const { addDropZone, removeDropZone } = useContext( Context ); const [ state, setState ] = useState( { @@ -39,6 +40,7 @@ export function useDropZone( { onHTMLDrop, setState, withPosition, + isRelative: __unstableIsRelative, }; addDropZone( dropZone ); return () => { @@ -76,6 +78,7 @@ function DropZoneComponent( { onFilesDrop, onHTMLDrop, onDrop, + __unstableIsRelative: true, } ); diff --git a/packages/components/src/drop-zone/provider.js b/packages/components/src/drop-zone/provider.js index cd71dc000e4ff4..43d9d859fd484b 100644 --- a/packages/components/src/drop-zone/provider.js +++ b/packages/components/src/drop-zone/provider.js @@ -150,18 +150,18 @@ class DropZoneProvider extends Component { ); // Find the leaf dropzone not containing another dropzone - const hoveredDropZone = find( - hoveredDropZones, - ( zone ) => - ! some( - hoveredDropZones, - ( subZone ) => - subZone !== zone && - zone.element.current.parentElement.contains( - subZone.element.current - ) - ) - ); + const hoveredDropZone = find( hoveredDropZones, ( zone ) => { + const container = zone.isRelative + ? zone.element.current.parentElement + : zone.element.current; + + return ! some( + hoveredDropZones, + ( subZone ) => + subZone !== zone && + container.contains( subZone.element.current ) + ); + } ); const hoveredDropZoneIndex = this.dropZones.indexOf( hoveredDropZone ); From 8af5f08d37901f442ed7c46cf66cd21bf9864909 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Mar 2020 11:25:23 +0100 Subject: [PATCH 035/448] Fix columns block selection (#20823) --- packages/block-editor/src/utils/dom.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 1ea7c881b494df..727311d06b0b02 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -58,13 +58,8 @@ export function isInSameBlock( a, b ) { * @return {boolean} Whether element is in the block Element but not its children. */ export function isInsideRootBlock( blockElement, element ) { - const innerBlocksContainer = blockElement.querySelector( - '.block-editor-block-list__layout' - ); - return ( - blockElement.contains( element ) && - ( ! innerBlocksContainer || ! innerBlocksContainer.contains( element ) ) - ); + const parentBlock = element.closest( '.block-editor-block-list__block' ); + return parentBlock === blockElement; } /** From 3848806ccc7b8a65778366e80af7ea63258538d4 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 12 Mar 2020 12:42:16 +0100 Subject: [PATCH 036/448] Polish date-picker component (#20824) * Refine the buttongroup. * Refactor am/pm picker to be buttongroup. * Polish padding. Fixes #20774. * Try alternate fix. * Fix to pass test, and update snaps. --- .../components/src/button-group/style.scss | 13 ++++-- packages/components/src/date-time/style.scss | 46 ++----------------- .../date-time/test/__snapshots__/time.js.snap | 20 ++++---- packages/components/src/date-time/time.js | 17 +++---- .../components/post-publish-panel/style.scss | 6 --- 5 files changed, 34 insertions(+), 68 deletions(-) diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index 9c80304673b47e..f1dace4f64797a 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -1,17 +1,24 @@ .components-button-group { display: inline-block; - border-radius: $radius-block-ui; - border: $border-width solid $theme-color; .components-button { border-radius: 0; display: inline-flex; color: $theme-color; + box-shadow: inset 0 0 0 $border-width $theme-color; & + .components-button { margin-left: -1px; } + &:first-child { + border-radius: $radius-block-ui 0 0 $radius-block-ui; + } + + &:last-child { + border-radius: 0 $radius-block-ui $radius-block-ui 0; + } + // The focused button should be elevated so the focus ring isn't cropped, // as should the active button, because it has a different border color. &:focus, @@ -22,7 +29,7 @@ // The active button should look pressed. &.is-primary { - box-shadow: none; + box-shadow: inset 0 0 0 $border-width $theme-color; } } } diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index c0690e9e216fb5..c80ac572d6afe1 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -5,7 +5,7 @@ /*rtl:end:ignore*/ .components-datetime { - padding: $grid-unit-20; + padding: 0; .components-datetime__calendar-help { padding: $grid-unit-20; @@ -118,36 +118,6 @@ color: $dark-gray-500; } - .components-datetime__time-am-button { - margin-left: 8px; - margin-right: -1px; - border-radius: 3px 0 0 3px; - } - - .components-datetime__time-pm-button { - margin-left: -1px; - border-radius: 0 3px 3px 0; - } - - .components-datetime__time-am-button:focus, - .components-datetime__time-pm-button:focus { - position: relative; - z-index: 1; - } - - .components-datetime__time-am-button.is-pressed, - .components-datetime__time-pm-button.is-pressed { - background: $light-gray-300; - border-color: $dark-gray-100; - box-shadow: inset 0 2px 5px -3px $dark-gray-500; - &:focus { - box-shadow: - inset 0 2px 5px -3px $dark-gray-500, - 0 0 0 1px $white, - 0 0 0 3px $blue-medium-focus; - } - } - .components-datetime__time-field { &-time { @@ -155,14 +125,8 @@ direction: ltr; } - - &.am-pm button { - font-size: 11px; - font-weight: 600; - } - select { - margin-right: 4px; + margin-right: $grid-unit-05; &:focus { position: relative; @@ -172,7 +136,7 @@ input[type="number"] { padding: 2px; - margin-right: 4px; + margin-right: $grid-unit-05; text-align: center; -moz-appearance: textfield; @@ -193,7 +157,7 @@ // We are assuming MM-DD-YYY correlates with AM/PM &.is-12-hour { .components-datetime__time-field-day input { - margin: 0 -4px 0 0 !important; + margin: 0 -$grid-unit-05 0 0 !important; border-radius: $radius-round-rectangle 0 0 $radius-round-rectangle !important; } .components-datetime__time-field-year input { @@ -230,5 +194,5 @@ // Hack to center the datepicker component within the popover. // It sets its own styles so centering is tricky. .components-popover .components-datetime__date { - padding-left: 4px; + padding-left: $grid-unit-05; } diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap index 14726e4cf644a2..e27e600f089f22 100644 --- a/packages/components/src/date-time/test/__snapshots__/time.js.snap +++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap @@ -317,12 +317,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] value="00" /> -
    @@ -330,13 +330,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] PM -
    + @@ -498,12 +498,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = ` value="00" /> -
    @@ -511,13 +511,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = ` PM -
    + diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js index 25955a3335af28..9d8dbce3b2db04 100644 --- a/packages/components/src/date-time/time.js +++ b/packages/components/src/date-time/time.js @@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import Button from '../button'; +import ButtonGroup from '../button-group'; /** * Module Constants @@ -318,24 +319,24 @@ class TimePicker extends Component { /> { is12Hour && ( -
    + -
    + ) } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index aaadde5f80884a..254e67e59522c0 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -78,12 +78,6 @@ .editor-post-visibility__dialog-legend { display: none; } - - // The DateTime component has an intrinsic padding in order for the horizontal scrolling to function inside a popover. - // We unset that here when used inline. - .components-datetime { - padding: 0; - } } .post-publish-panel__postpublish .components-panel__body { From f489e13fc36035bcb5e91c5a58bfa3cabb2dacec Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Mar 2020 14:05:42 +0100 Subject: [PATCH 037/448] Fix applyting backgrounds and colors to the columns block in the editor (#20818) --- .../src/components/colors/use-colors.js | 80 ++++++++++++------- packages/block-library/src/columns/edit.js | 34 +++++--- 2 files changed, 72 insertions(+), 42 deletions(-) diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js index 214aab8a9e2dac..9a50bc266822f9 100644 --- a/packages/block-editor/src/components/colors/use-colors.js +++ b/packages/block-editor/src/components/colors/use-colors.js @@ -3,7 +3,14 @@ */ import memoize from 'memize'; import classnames from 'classnames'; -import { map, kebabCase, camelCase, castArray, startCase } from 'lodash'; +import { + map, + kebabCase, + camelCase, + castArray, + startCase, + isFunction, +} from 'lodash'; /** * WordPress dependencies @@ -172,37 +179,48 @@ export default function __experimentalUseColors( children, className: componentClassName = '', style: componentStyle = {}, - } ) => - // Clone children, setting the style property from the color configuration, - // if not already set explicitly through props. - Children.map( children, ( child ) => { - let colorStyle = {}; - if ( color ) { - colorStyle = { [ property ]: colorValue }; - } else if ( customColor ) { - colorStyle = { [ property ]: customColor }; - } + } ) => { + let colorStyle = {}; + if ( color ) { + colorStyle = { [ property ]: colorValue }; + } else if ( customColor ) { + colorStyle = { [ property ]: customColor }; + } + const extraProps = { + className: classnames( componentClassName, { + [ `has-${ kebabCase( color ) }-${ kebabCase( + property + ) }` ]: color, + [ className || `has-${ kebabCase( name ) }` ]: + color || customColor, + } ), + style: { + ...colorStyle, + ...componentStyle, + }, + }; + + if ( isFunction( children ) ) { + return children( extraProps ); + } - return cloneElement( child, { - className: classnames( - componentClassName, - child.props.className, - { - [ `has-${ kebabCase( color ) }-${ kebabCase( - property - ) }` ]: color, - [ className || - `has-${ kebabCase( name ) }` ]: - color || customColor, - } - ), - style: { - ...colorStyle, - ...componentStyle, - ...( child.props.style || {} ), - }, - } ); - } ), + return ( + // Clone children, setting the style property from the color configuration, + // if not already set explicitly through props. + Children.map( children, ( child ) => { + return cloneElement( child, { + className: classnames( + child.props.className, + extraProps.className + ), + style: { + ...extraProps.style, + ...( child.props.style || {} ), + }, + } ); + } ) + ); + }, { maxSize: colorConfigs.length } ), [ colorConfigs.length ] diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 926a26014ccde0..05aaed154a4e4d 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -102,17 +102,29 @@ function ColumnsEditContainer( { { InspectorControlsColorPanel } - - - + { ( backgroundProps ) => ( + + { ( textColorProps ) => ( + + ) } + + ) } ); From d60fd397126762eac99424b1037c6acfe7444d88 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 09:06:18 -0400 Subject: [PATCH 038/448] E2E Tests: Mock Embed response for InnerBlocks locking test (#20481) --- .../plugins/innerblocks-locking-all-embed.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js index c0f081976ecfe3..a0a83fbf90e616 100644 --- a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js +++ b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js @@ -6,14 +6,32 @@ import { createNewPost, deactivatePlugin, insertBlock, + createEmbeddingMatcher, + createJSONResponse, + setUpResponseMocking, } from '@wordpress/e2e-test-utils'; +const MOCK_RESPONSES = [ + { + match: createEmbeddingMatcher( 'https://twitter.com/wordpress' ), + onRequestMatch: createJSONResponse( { + url: 'https://twitter.com/wordpress', + html: '

    Mock success response.

    ', + type: 'rich', + provider_name: 'Twitter', + provider_url: 'https://twitter.com', + version: '1.0', + } ), + }, +]; + describe( 'Embed block inside a locked all parent', () => { beforeAll( async () => { await activatePlugin( 'gutenberg-test-innerblocks-locking-all-embed' ); } ); beforeEach( async () => { + await setUpResponseMocking( MOCK_RESPONSES ); await createNewPost(); } ); @@ -30,7 +48,7 @@ describe( 'Embed block inside a locked all parent', () => { await page.waitForSelector( embedInputSelector ); await page.click( embedInputSelector ); // This URL should not have a trailing slash. - await page.keyboard.type( 'https://twitter.com/WordPress' ); + await page.keyboard.type( 'https://twitter.com/wordpress' ); await page.keyboard.press( 'Enter' ); // The twitter block should appear correctly. await page.waitForSelector( 'figure.wp-block-embed' ); From e4b6da7ce0115d40693c4d78f84e0ee95017c307 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 09:18:36 -0400 Subject: [PATCH 039/448] E2E Test Utils: Improve durability of embedding matcher (#20811) * E2E Test Utils: Improve durability of embedding matcher * E2E Test Utils: Add newline between functions * E2E Test Utils: Avoid normalizing path endings (a) It's not consistent with preceding `parameterEquals` testing and (b) there's not variance here, for all requests via `getEmbedPreview` implementation See: https://github.com/WordPress/gutenberg/blob/3848806ccc7b8a65778366e80af7ea63258538d4/packages/core-data/src/resolvers.js#L112 --- .../src/mocks/create-embedding-matcher.js | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/e2e-test-utils/src/mocks/create-embedding-matcher.js b/packages/e2e-test-utils/src/mocks/create-embedding-matcher.js index 403b3a3911220d..754d7bc33068ed 100644 --- a/packages/e2e-test-utils/src/mocks/create-embedding-matcher.js +++ b/packages/e2e-test-utils/src/mocks/create-embedding-matcher.js @@ -1,7 +1,7 @@ /** - * Internal dependencies + * External dependencies */ -import { createURLMatcher } from './create-url-matcher'; +import { join } from 'path'; /** * Creates a function to determine if a request has a parameter with a certain value. @@ -11,16 +11,24 @@ import { createURLMatcher } from './create-url-matcher'; * @return {Function} Function that determines if a request's query parameter is the specified value. */ function parameterEquals( parameterName, value ) { - return ( request ) => { - const url = request.url(); - const match = new RegExp( `.*${ parameterName }=([^&]+).*` ).exec( - url - ); - if ( ! match ) { - return false; - } - return value === decodeURIComponent( match[ 1 ] ); - }; + return ( request ) => + new URL( request.url() ).searchParams.get( parameterName ) === value; +} + +/** + * Creates a function to determine if a request is a REST request of a given + * path, accounting for variance in site permalink configuration. + * + * @param {string} path REST path to test. + * + * @return {Function} Function that determines if a request is a REST request of + * a given path, accounting for variance in site permalink + * configuration. + */ +function isRESTRoute( path ) { + return ( request ) => + parameterEquals( 'rest_route', path )( request ) || + new URL( request.url() ).pathname.endsWith( join( '/wp-json', path ) ); } /** @@ -31,6 +39,6 @@ function parameterEquals( parameterName, value ) { */ export function createEmbeddingMatcher( url ) { return ( request ) => - createURLMatcher( 'oembed%2F1.0%2Fproxy' )( request ) && + isRESTRoute( '/oembed/1.0/proxy' )( request ) && parameterEquals( 'url', url )( request ); } From 3233009f6f5a70bacc855b342dc9d81f15258f16 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 09:22:48 -0400 Subject: [PATCH 040/448] URL: Fix getQueryString incorrect handling of hash fragment (#20738) * URL: Fix getQueryString incorrect handling of hash fragment * URL: Update getQueryString test cases to proper URLs * URL: Add test case for empty querystring as undefined Previously _sort of_ existed, but as an invalid URL which would fail to construct as `new URL` in the current implementation. Now split to two assertions verifying "invalid URL" behavior and "empty querystring" behavior. --- packages/url/CHANGELOG.md | 4 ++++ packages/url/README.md | 3 +-- packages/url/src/get-query-string.js | 13 ++++++++----- packages/url/src/test/index.test.js | 27 +++++++++++++-------------- 4 files changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md index 2e29586280a67d..2845b6c35e4ac6 100644 --- a/packages/url/CHANGELOG.md +++ b/packages/url/CHANGELOG.md @@ -1,5 +1,9 @@ ## Master +### Bug Fixes + +- `getQueryString` now correctly considers hash fragments when considering whether to return a query string. Previously, `getQueryString( 'https://example.com/#?foo' )` would wrongly return `'foo'` as its result. A hash fragment is always the last segment of a URL, and the querystring must always precede it ([see reference specification](https://url.spec.whatwg.org/#absolute-url-with-fragment-string)). + ## 2.11.0 (2020-02-10) ### Bug Fixes diff --git a/packages/url/README.md b/packages/url/README.md index b08f57b7e39595..71b2a0d47a5ab0 100644 --- a/packages/url/README.md +++ b/packages/url/README.md @@ -178,8 +178,7 @@ Returns the query string part of the URL. _Usage_ ```js -const queryString1 = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' -const queryString2 = getQueryString( 'https://wordpress.org#fragment?query=false&search=hello' ); // 'query=false&search=hello' +const queryString = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' ``` _Parameters_ diff --git a/packages/url/src/get-query-string.js b/packages/url/src/get-query-string.js index 8341da1f9fa1bd..e1437f4e78a131 100644 --- a/packages/url/src/get-query-string.js +++ b/packages/url/src/get-query-string.js @@ -5,15 +5,18 @@ * * @example * ```js - * const queryString1 = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' - * const queryString2 = getQueryString( 'https://wordpress.org#fragment?query=false&search=hello' ); // 'query=false&search=hello' + * const queryString = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true' * ``` * * @return {string|void} The query string part of the URL. */ export function getQueryString( url ) { - const matches = /^\S+?\?([^\s#]+)/.exec( url ); - if ( matches ) { - return matches[ 1 ]; + let query; + try { + query = new URL( url ).search.substring( 1 ); + } catch ( error ) {} + + if ( query ) { + return query; } } diff --git a/packages/url/src/test/index.test.js b/packages/url/src/test/index.test.js index 8b25963dadcfd5..ddb603ba3fa76c 100644 --- a/packages/url/src/test/index.test.js +++ b/packages/url/src/test/index.test.js @@ -251,11 +251,6 @@ describe( 'isValidPath', () => { describe( 'getQueryString', () => { it( 'returns the query string of a URL', () => { - expect( - getQueryString( - 'https://user:password@www.test-this.com:1020/test-path/file.extension#anchor?query=params&more' - ) - ).toBe( 'query=params&more' ); expect( getQueryString( 'http://user:password@www.test-this.com:1020/test-path/file.extension?query=params&more#anchor' @@ -284,16 +279,21 @@ describe( 'getQueryString', () => { 'https://andalouses.example/beach?foo[]=bar&foo[]=baz' ) ).toBe( 'foo[]=bar&foo[]=baz' ); - expect( getQueryString( 'test.com?foo[]=bar&foo[]=baz' ) ).toBe( + expect( getQueryString( 'https://test.com?foo[]=bar&foo[]=baz' ) ).toBe( 'foo[]=bar&foo[]=baz' ); - expect( getQueryString( 'test.com?foo=bar&foo=baz?test' ) ).toBe( - 'foo=bar&foo=baz?test' - ); + expect( + getQueryString( 'https://test.com?foo=bar&foo=baz?test' ) + ).toBe( 'foo=bar&foo=baz?test' ); } ); it( 'returns undefined when the provided does not contain a url query string', () => { expect( getQueryString( '' ) ).toBeUndefined(); + expect( + getQueryString( + 'https://user:password@www.test-this.com:1020/test-path/file.extension#anchor?query=params&more' + ) + ).toBeUndefined(); expect( getQueryString( 'https://wordpress.org/test-path#anchor' ) ).toBeUndefined(); @@ -305,11 +305,10 @@ describe( 'getQueryString', () => { ).toBeUndefined(); expect( getQueryString( 'https://wordpress.org/' ) ).toBeUndefined(); expect( getQueryString( 'https://localhost:8080' ) ).toBeUndefined(); - expect( getQueryString( 'https://' ) ).toBeUndefined(); - expect( getQueryString( 'https:///test' ) ).toBeUndefined(); - expect( getQueryString( 'https://#' ) ).toBeUndefined(); - expect( getQueryString( 'https://?' ) ).toBeUndefined(); - expect( getQueryString( 'test.com' ) ).toBeUndefined(); + expect( getQueryString( 'invalid' ) ).toBeUndefined(); + expect( + getQueryString( 'https://example.com/empty?' ) + ).toBeUndefined(); } ); } ); From 165365aa9224c6eb3998284da82291b7c446b79a Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 09:24:07 -0400 Subject: [PATCH 041/448] ESLint Plugin: Relax `prefer-const` for destructuring assignment (#20737) --- packages/eslint-plugin/CHANGELOG.md | 4 ++++ packages/eslint-plugin/configs/esnext.js | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index a38e783e1adb9f..48149ffc4c43fb 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -1,5 +1,9 @@ ## Master +### New Features + +- The `prefer-const` rule included in the `recommended` and `esnext` rulesets has been relaxed to allow a `let` assignment if any of a [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) are reassigned. + ## 4.0.0 (2020-02-10) ### Breaking Changes diff --git a/packages/eslint-plugin/configs/esnext.js b/packages/eslint-plugin/configs/esnext.js index 35a758449571fc..4cdd60b0fa05ba 100644 --- a/packages/eslint-plugin/configs/esnext.js +++ b/packages/eslint-plugin/configs/esnext.js @@ -22,7 +22,12 @@ module.exports = { 'no-useless-constructor': 'error', 'no-var': 'error', 'object-shorthand': 'error', - 'prefer-const': 'error', + 'prefer-const': [ + 'error', + { + destructuring: 'all', + }, + ], quotes: [ 'error', 'single', From 214c9fb2b61e49e12132c0d8602e2903f5f73367 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Mar 2020 14:48:43 +0100 Subject: [PATCH 042/448] Bump plugin version to 7.7.1 --- changelog.txt | 10 ++++++++++ gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/changelog.txt b/changelog.txt index 57d205443df49a..55a5d52c3441fa 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,15 @@ == Changelog == += 7.7.1 = + +### Bug Fixes + +- Fix Drag and Drop into the columns block. +- Fix the columns block selection. +- Fix applying colors and backgrounds to the columns block. +- Fix the RangeControl controlled behavior. + + = 7.7.0 = ### Features diff --git a/gutenberg.php b/gutenberg.php index 8198fc4303b34f..04e5abe780f13c 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: 7.7.0 + * Version: 7.7.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 42dabf49da7d7b..30aa4f00b92851 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.7.0", + "version": "7.7.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 66d7ea2ec43293..96271ef7f816be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "7.7.0", + "version": "7.7.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index 6fe5551487e27b..3f5bcfa5fe3918 100644 --- a/readme.txt +++ b/readme.txt @@ -52,4 +52,4 @@ The four phases of the project are Editing, Customization, Collaboration, and Mu == Changelog == -To read the changelog for Gutenberg 7.7.0, please navigate to the release page. +To read the changelog for Gutenberg 7.7.1, please navigate to the release page. From 72732023c1d9eed76fd029c7bf1da357146ec868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= Date: Thu, 12 Mar 2020 14:19:06 +0000 Subject: [PATCH 043/448] Refactor spacer block to share edit method with the web. (#20746) * Refactor spacer block to share edit method with the web. * Update code to now allow spacer larger than 500px. * Fix constant naming format. --- packages/block-library/src/spacer/edit.js | 63 ++++++--------- .../block-library/src/spacer/edit.native.js | 76 ------------------- packages/components/src/index.native.js | 1 + .../src/resizable-box/index.native.js | 32 ++++++++ .../src/resizable-box/style.native.scss | 14 ++++ 5 files changed, 72 insertions(+), 114 deletions(-) delete mode 100644 packages/block-library/src/spacer/edit.native.js create mode 100644 packages/components/src/resizable-box/index.native.js create mode 100644 packages/components/src/resizable-box/style.native.scss diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 181290fab71f35..ce843e1a313315 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -6,24 +6,28 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; -import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components'; +import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { compose, withInstanceId } from '@wordpress/compose'; import { withDispatch } from '@wordpress/data'; +const MIN_SPACER_HEIGHT = 20; +const MAX_SPACER_HEIGHT = 500; + const SpacerEdit = ( { attributes, isSelected, setAttributes, - instanceId, onResizeStart, onResizeStop, } ) => { const { height } = attributes; - const id = `block-spacer-height-input-${ instanceId }`; - const [ inputHeightValue, setInputHeightValue ] = useState( height ); + const updateHeight = ( value ) => { + setAttributes( { + height: value, + } ); + }; return ( <> @@ -37,7 +41,7 @@ const SpacerEdit = ( { size={ { height, } } - minHeight="20" + minHeight={ MIN_SPACER_HEIGHT } enable={ { top: false, right: false, @@ -48,45 +52,28 @@ const SpacerEdit = ( { bottomLeft: false, topLeft: false, } } + isSelected={ isSelected } onResizeStart={ onResizeStart } onResizeStop={ ( event, direction, elt, delta ) => { onResizeStop(); - const spacerHeight = parseInt( height + delta.height, 10 ); - setAttributes( { - height: spacerHeight, - } ); - setInputHeightValue( spacerHeight ); + const spacerHeight = Math.min( + parseInt( height + delta.height, 10 ), + MAX_SPACER_HEIGHT + ); + updateHeight( spacerHeight ); } } /> - - { - let spacerHeight = parseInt( - event.target.value, - 10 - ); - setInputHeightValue( spacerHeight ); - if ( isNaN( spacerHeight ) ) { - // Set spacer height to default size and input box to empty string - setInputHeightValue( '' ); - spacerHeight = 100; - } else if ( spacerHeight < 20 ) { - // Set spacer height to minimum size - spacerHeight = 20; - } - setAttributes( { - height: spacerHeight, - } ); - } } - value={ inputHeightValue } - min="20" - step="10" - /> - + diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js deleted file mode 100644 index 8c5b34ba66fc93..00000000000000 --- a/packages/block-library/src/spacer/edit.native.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * External dependencies - */ -import { View } from 'react-native'; -/** - * WordPress dependencies - */ -import { RangeControl, PanelBody } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; -import { useState, useEffect } from '@wordpress/element'; -import { InspectorControls } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import styles from './editor.scss'; - -const minSpacerHeight = 20; -const maxSpacerHeight = 500; - -const SpacerEdit = ( { - isSelected, - attributes, - setAttributes, - getStylesFromColorScheme, -} ) => { - const { height } = attributes; - const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); - - // Height defined on the web can be higher than - // `maxSpacerHeight`, so there is a need to `setSpacerMaxHeight` - // after the initial render. - useEffect( () => { - setSpacerMaxHeight( - height > maxSpacerHeight ? height * 2 : maxSpacerHeight - ); - }, [] ); - - const changeAttribute = ( value ) => { - setAttributes( { - height: value, - } ); - }; - - const defaultStyle = getStylesFromColorScheme( - styles.staticSpacer, - styles.staticDarkSpacer - ); - - return ( - - - - - - - - ); -}; - -export default withPreferredColorScheme( SpacerEdit ); diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index ca4c120d4fa71d..abb7b278dc5723 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -34,6 +34,7 @@ export { default as TextControl } from './text-control'; export { default as ToggleControl } from './toggle-control'; export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; +export { default as ResizableBox } from './resizable-box'; export { default as UnsupportedFooterControl } from './unsupported-footer-control'; export { default as QueryControls } from './query-controls'; diff --git a/packages/components/src/resizable-box/index.native.js b/packages/components/src/resizable-box/index.native.js new file mode 100644 index 00000000000000..8c152613064f80 --- /dev/null +++ b/packages/components/src/resizable-box/index.native.js @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { withPreferredColorScheme } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function ResizableBox( props ) { + const { size, isSelected, getStylesFromColorScheme } = props; + const { height } = size; + const defaultStyle = getStylesFromColorScheme( + styles.staticSpacer, + styles.staticDarkSpacer + ); + return ( + + ); +} + +export default withPreferredColorScheme( ResizableBox ); diff --git a/packages/components/src/resizable-box/style.native.scss b/packages/components/src/resizable-box/style.native.scss new file mode 100644 index 00000000000000..2c47044df822d7 --- /dev/null +++ b/packages/components/src/resizable-box/style.native.scss @@ -0,0 +1,14 @@ +.staticSpacer { + height: 20px; + background-color: transparent; + border: $border-width dashed $light-gray-500; + border-radius: 1px; +} + +.staticDarkSpacer { + border: $border-width dashed rgba($color: $light-gray-500, $alpha: 0.3); +} + +.selectedSpacer { + border: $border-width * 2 solid $blue-30; +} From 7dda4422e46976ea4de03d6cbe20f51dfacc54b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Thu, 12 Mar 2020 14:29:15 +0000 Subject: [PATCH 044/448] Improve performance testing (#20802) --- .../e2e-tests/config/performance-reporter.js | 15 ++- .../specs/performance/performance.test.js | 98 ++++++++++++++++--- 2 files changed, 96 insertions(+), 17 deletions(-) diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js index f7bb05666054d5..03bb99795f848b 100644 --- a/packages/e2e-tests/config/performance-reporter.js +++ b/packages/e2e-tests/config/performance-reporter.js @@ -4,6 +4,11 @@ function average( array ) { return array.reduce( ( a, b ) => a + b ) / array.length; } +function round( number, decimalPlaces = 2 ) { + const factor = Math.pow( 10, decimalPlaces ); + return Math.round( number * factor ) / factor; +} + class PerformanceReporter { onRunComplete() { const path = __dirname + '/../specs/performance/results.json'; @@ -17,11 +22,11 @@ class PerformanceReporter { // eslint-disable-next-line no-console console.log( ` -Average time to load: ${ average( load ) }ms -Average time to DOM content load: ${ average( domcontentloaded ) }ms -Average time to type character: ${ average( type ) }ms -Slowest time to type character: ${ Math.max( ...type ) }ms -Fastest time to type character: ${ Math.min( ...type ) }ms +Average time to load: ${ round( average( load ) ) }ms +Average time to DOM content load: ${ round( average( domcontentloaded ) ) }ms +Average time to type character: ${ round( average( type ) ) }ms +Slowest time to type character: ${ round( Math.max( ...type ) ) }ms +Fastest time to type character: ${ round( Math.min( ...type ) ) }ms ` ); } } diff --git a/packages/e2e-tests/specs/performance/performance.test.js b/packages/e2e-tests/specs/performance/performance.test.js index 0bdc172682fafc..b4ba1419bb9475 100644 --- a/packages/e2e-tests/specs/performance/performance.test.js +++ b/packages/e2e-tests/specs/performance/performance.test.js @@ -2,7 +2,7 @@ * External dependencies */ import { join } from 'path'; -import { existsSync, readFileSync, writeFileSync } from 'fs'; +import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs'; /** * WordPress dependencies @@ -19,6 +19,48 @@ function readFile( filePath ) { : ''; } +function deleteFile( filePath ) { + if ( existsSync( filePath ) ) { + unlinkSync( filePath ); + } +} + +function isKeyEvent( item ) { + return ( + item.cat === 'devtools.timeline' && + item.name === 'EventDispatch' && + item.dur && + item.args && + item.args.data + ); +} + +function isKeyDownEvent( item ) { + return isKeyEvent( item ) && item.args.data.type === 'keydown'; +} + +function isKeyPressEvent( item ) { + return isKeyEvent( item ) && item.args.data.type === 'keypress'; +} + +function isKeyUpEvent( item ) { + return isKeyEvent( item ) && item.args.data.type === 'keyup'; +} + +function getEventDurationsForType( trace, filterFunction ) { + return trace.traceEvents + .filter( filterFunction ) + .map( ( item ) => item.dur / 1000 ); +} + +function getEventDurations( trace ) { + return [ + getEventDurationsForType( trace, isKeyDownEvent ), + getEventDurationsForType( trace, isKeyPressEvent ), + getEventDurationsForType( trace, isKeyUpEvent ), + ]; +} + describe( 'Performance', () => { it( '1000 paragraphs', async () => { const html = readFile( @@ -49,28 +91,58 @@ describe( 'Performance', () => { }; let i = 1; - let startTime; - - await page.on( 'load', () => - results.load.push( new Date() - startTime ) - ); - await page.on( 'domcontentloaded', () => - results.domcontentloaded.push( new Date() - startTime ) - ); while ( i-- ) { - startTime = new Date(); await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } ); + const timings = JSON.parse( + await page.evaluate( () => + JSON.stringify( window.performance.timing ) + ) + ); + const { + navigationStart, + domContentLoadedEventEnd, + loadEventEnd, + } = timings; + results.load.push( loadEventEnd - navigationStart ); + results.domcontentloaded.push( + domContentLoadedEventEnd - navigationStart + ); } await insertBlock( 'Paragraph' ); i = 200; + const traceFile = __dirname + '/trace.json'; + + await page.tracing.start( { + path: traceFile, + screenshots: false, + categories: [ 'devtools.timeline' ], + } ); while ( i-- ) { - startTime = new Date(); await page.keyboard.type( 'x' ); - results.type.push( new Date() - startTime ); + } + + await page.tracing.stop(); + + const traceResults = JSON.parse( readFile( traceFile ) ); + const [ + keyDownEvents, + keyPressEvents, + keyUpEvents, + ] = getEventDurations( traceResults ); + + if ( + keyDownEvents.length === keyPressEvents.length && + keyPressEvents.length === keyUpEvents.length + ) { + for ( let j = 0; j < keyDownEvents.length; j++ ) { + results.type.push( + keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ] + ); + } } writeFileSync( @@ -78,6 +150,8 @@ describe( 'Performance', () => { JSON.stringify( results, null, 2 ) ); + deleteFile( traceFile ); + expect( true ).toBe( true ); } ); } ); From 4dfb8598c8caf87760e659665e1d40775ac5c0ce Mon Sep 17 00:00:00 2001 From: Drapich Piotr Date: Thu, 12 Mar 2020 17:19:08 +0100 Subject: [PATCH 045/448] [RNMobile] Fix replacing empty paragraph in inner block (#20653) * Check if the replaceable block is a nested one --- packages/block-editor/src/components/inserter/menu.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 12c8d7d842bc29..0ecfba8e84e709 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -241,7 +241,8 @@ export default compose( ); const count = getBlockCount(); - if ( count === 1 ) { + // Check if there is a rootClientId because that means it is a nested replacable block and we don't want to clear/reset all blocks. + if ( count === 1 && ! ownProps.rootClientId ) { // removing the last block is not possible with `removeBlock` action // it always inserts a default block if the last of the blocks have been removed clearSelectedBlock(); From 790655622b099e0b5e9e7e4ece6a66d7f3bf82ab Mon Sep 17 00:00:00 2001 From: Jon Quach Date: Thu, 12 Mar 2020 12:55:11 -0400 Subject: [PATCH 046/448] Improves RTL style conversion (#20503) * Improves rtl style conversion + adds tests This update improves the rtl style utility to better handle varying combinations of `left` and `Left` based properties. A handful of tests have been added to ensure style property conversions are outputted as expected. * Adds support for left->right and right->left. Also adds tests * Components: Add RTL conversion edge case test * Rename rtl.test.js to rtl.js * Fixes upright CSS property use case. Adds tests for scroll padding/margin * Converts Regex to const. Refactors left/right key conversion utility. * Adds and improves comments for rtl functions. * Simplify with lodash.mapKeys and rename function to match standards Co-authored-by: Andrew Duthie --- packages/components/src/utils/rtl.js | 74 +++++++++---- packages/components/src/utils/test/rtl.js | 124 ++++++++++++++++++++++ 2 files changed, 179 insertions(+), 19 deletions(-) create mode 100644 packages/components/src/utils/test/rtl.js diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index 3fa6c3757737a9..bc312455baa3a6 100644 --- a/packages/components/src/utils/rtl.js +++ b/packages/components/src/utils/rtl.js @@ -2,48 +2,84 @@ * External dependencies */ import { css } from '@emotion/core'; +import { mapKeys } from 'lodash'; +const LOWER_LEFT_REGEXP = new RegExp( /-left/g ); +const LOWER_RIGHT_REGEXP = new RegExp( /-right/g ); +const UPPER_LEFT_REGEXP = new RegExp( /Left/g ); +const UPPER_RIGHT_REGEXP = new RegExp( /Right/g ); + +/** + * Checks to see whether the document is set to rtl. + * + * @return {boolean} Whether document is RTL. + */ function getRtl() { return !! ( document && document.documentElement.dir === 'rtl' ); } /** * Simple hook to retrieve RTL direction value + * + * @return {boolean} Whether document is RTL. */ export function useRtl() { return getRtl(); } +/** + * Flips a CSS property from left <-> right. + * + * @param {string} key The CSS property name. + * + * @return {string} The flipped CSS property name, if applicable. + */ +function getConvertedKey( key ) { + if ( key === 'left' ) { + return 'right'; + } + + if ( key === 'right' ) { + return 'left'; + } + + if ( LOWER_LEFT_REGEXP.test( key ) ) { + return key.replace( LOWER_LEFT_REGEXP, '-right' ); + } + + if ( LOWER_RIGHT_REGEXP.test( key ) ) { + return key.replace( LOWER_RIGHT_REGEXP, '-left' ); + } + + if ( UPPER_LEFT_REGEXP.test( key ) ) { + return key.replace( UPPER_LEFT_REGEXP, 'Right' ); + } + + if ( UPPER_RIGHT_REGEXP.test( key ) ) { + return key.replace( UPPER_RIGHT_REGEXP, 'Left' ); + } + + return key; +} + /** * An incredibly basic ltr -> rtl converter for style properties * * @param {Object} ltrStyles + * * @return {Object} Converted ltr -> rtl styles */ -const convertLtrToRtl = ( ltrStyles = {} ) => { - const nextStyles = {}; - - for ( const key in ltrStyles ) { - const value = ltrStyles[ key ]; - let nextKey = key; - if ( /left/gi.test( key ) ) { - nextKey = [ key.replace( 'left', 'right' ) ]; - } - if ( /Left/gi.test( key ) ) { - nextKey = [ key.replace( 'Left', 'Right' ) ]; - } - nextStyles[ nextKey ] = value; - } - - return nextStyles; +export const convertLTRToRTL = ( ltrStyles = {} ) => { + return mapKeys( ltrStyles, ( _value, key ) => getConvertedKey( key ) ); }; /** - * An incredibly basic ltr -> rtl style converter for CSS objects. + * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. * * @param {Object} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable. * @param {null|Object} rtlStyles Rtl styles. Renders if provided. - * @return {Object} Rendered CSS styles for Emotion's renderer + * + * @return {Function} A function to output CSS styles for Emotion's renderer */ export function rtl( ltrStyles = {}, rtlStyles ) { return () => { @@ -53,6 +89,6 @@ export function rtl( ltrStyles = {}, rtlStyles ) { return isRtl ? css( rtlStyles ) : css( ltrStyles ); } - return isRtl ? css( convertLtrToRtl( ltrStyles ) ) : css( ltrStyles ); + return isRtl ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles ); }; } diff --git a/packages/components/src/utils/test/rtl.js b/packages/components/src/utils/test/rtl.js new file mode 100644 index 00000000000000..1e30162037087a --- /dev/null +++ b/packages/components/src/utils/test/rtl.js @@ -0,0 +1,124 @@ +/** + * Internal dependencies + */ +import { convertLTRToRTL } from '../rtl'; + +describe( 'convertLTRToRTL', () => { + it( 'converts (*)Left <-> (*)Right', () => { + const style = { + // left values + borderLeft: '10px solid red', + borderLeftColor: 'red', + borderLeftStyle: 'solid', + borderLeftWidth: 10, + borderTopLeftRadius: 10, + marginLeft: 10, + scrollMarginLeft: 10, + scrollPaddingLeft: 10, + // right values + paddingLeft: 10, + borderRight: '20px solid blue', + borderRightColor: 'blue', + borderRightStyle: 'dashed', + borderRightWidth: 20, + borderTopRightRadius: 20, + marginRight: 20, + paddingRight: 20, + scrollMarginRight: 20, + scrollPaddingRight: 20, + // edge cases + textCombineUpright: 'none', + }; + const nextStyle = convertLTRToRTL( style ); + + expect( Object.keys( style ).length ).toBe( + Object.keys( nextStyle ).length + ); + + // Left -> Right + expect( nextStyle.borderRight ).toBe( '10px solid red' ); + expect( nextStyle.borderRightColor ).toBe( 'red' ); + expect( nextStyle.borderRightStyle ).toBe( 'solid' ); + expect( nextStyle.borderRightWidth ).toBe( 10 ); + expect( nextStyle.borderTopRightRadius ).toBe( 10 ); + expect( nextStyle.marginRight ).toBe( 10 ); + expect( nextStyle.paddingRight ).toBe( 10 ); + expect( nextStyle.scrollMarginRight ).toBe( 10 ); + expect( nextStyle.scrollPaddingRight ).toBe( 10 ); + + // Right -> Left + expect( nextStyle.borderLeft ).toBe( '20px solid blue' ); + expect( nextStyle.borderLeftColor ).toBe( 'blue' ); + expect( nextStyle.borderLeftStyle ).toBe( 'dashed' ); + expect( nextStyle.borderLeftWidth ).toBe( 20 ); + expect( nextStyle.borderTopLeftRadius ).toBe( 20 ); + expect( nextStyle.marginLeft ).toBe( 20 ); + expect( nextStyle.paddingLeft ).toBe( 20 ); + expect( nextStyle.scrollMarginLeft ).toBe( 20 ); + expect( nextStyle.scrollPaddingLeft ).toBe( 20 ); + + // Edge cases + expect( nextStyle.textCombineUpright ).toBe( 'none' ); + } ); + + it( 'converts (*)left <-> (*)right', () => { + const style = { + // left values + 'border-left': '10px solid red', + 'border-left-color': 'red', + 'border-left-style': 'solid', + 'border-left-width': 10, + 'border-top-left-radius': 10, + 'margin-left': 10, + 'padding-left': 10, + 'scroll-margin-left': 10, + 'scroll-padding-left': 10, + left: 10, + // right values + 'border-right': '20px solid blue', + 'border-right-color': 'blue', + 'border-right-style': 'dashed', + 'border-right-width': 20, + 'border-top-right-radius': 20, + 'margin-right': 20, + 'padding-right': 20, + 'scroll-margin-right': 20, + 'scroll-padding-right': 20, + right: 20, + // edge cases + 'text-combine-upright': 'none', + }; + const nextStyle = convertLTRToRTL( style ); + + expect( Object.keys( style ).length ).toBe( + Object.keys( nextStyle ).length + ); + + // left -> right + expect( nextStyle[ 'border-right' ] ).toBe( '10px solid red' ); + expect( nextStyle[ 'border-right-color' ] ).toBe( 'red' ); + expect( nextStyle[ 'border-right-style' ] ).toBe( 'solid' ); + expect( nextStyle[ 'border-right-width' ] ).toBe( 10 ); + expect( nextStyle[ 'border-top-right-radius' ] ).toBe( 10 ); + expect( nextStyle[ 'margin-right' ] ).toBe( 10 ); + expect( nextStyle[ 'padding-right' ] ).toBe( 10 ); + expect( nextStyle[ 'scroll-margin-right' ] ).toBe( 10 ); + expect( nextStyle[ 'scroll-padding-right' ] ).toBe( 10 ); + expect( nextStyle.right ).toBe( 10 ); + + // right -> left + expect( nextStyle[ 'border-left' ] ).toBe( '20px solid blue' ); + expect( nextStyle[ 'border-left-color' ] ).toBe( 'blue' ); + expect( nextStyle[ 'border-left-style' ] ).toBe( 'dashed' ); + expect( nextStyle[ 'border-left-width' ] ).toBe( 20 ); + expect( nextStyle[ 'border-top-left-radius' ] ).toBe( 20 ); + expect( nextStyle[ 'margin-left' ] ).toBe( 20 ); + expect( nextStyle[ 'padding-left' ] ).toBe( 20 ); + expect( nextStyle[ 'scroll-margin-left' ] ).toBe( 20 ); + expect( nextStyle[ 'scroll-padding-left' ] ).toBe( 20 ); + expect( nextStyle.left ).toBe( 20 ); + + // Edge cases + expect( nextStyle[ 'text-combine-upright' ] ).toBe( 'none' ); + } ); +} ); From 4f3b69e36da9ace2535d99c513fa75572fffa27f Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 15:27:44 -0400 Subject: [PATCH 047/448] Revert "Framework: Travis: Avoid skipping Puppeteer download (#20547)" (#20828) This reverts commit 371faf7ac32a65f5f9ab1cf9bf7a1f9fede47d06. --- .travis.yml | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/.travis.yml b/.travis.yml index d1d0c5ac032a8b..8798f87bb55da5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -24,6 +24,7 @@ branches: env: global: + - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true - WP_DEVELOP_DIR: ./wordpress - LOCAL_SCRIPT_DEBUG: false - INSTALL_COMPOSER: false @@ -161,49 +162,49 @@ jobs: - npm run test-php && npm run test-unit-php-multisite - name: E2E tests (Admin) (1/4) - env: FORCE_REDUCED_MOTION=true + env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 0' < ~/.jest-e2e-tests ) - name: E2E tests (Admin) (2/4) - env: FORCE_REDUCED_MOTION=true + env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 1' < ~/.jest-e2e-tests ) - name: E2E tests (Admin) (3/4) - env: FORCE_REDUCED_MOTION=true + env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 2' < ~/.jest-e2e-tests ) - name: E2E tests (Admin) (4/4) - env: FORCE_REDUCED_MOTION=true + env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 3' < ~/.jest-e2e-tests ) - name: E2E tests (Author) (1/4) - env: E2E_ROLE=author FORCE_REDUCED_MOTION=true + env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 0' < ~/.jest-e2e-tests ) - name: E2E tests (Author) (2/4) - env: E2E_ROLE=author FORCE_REDUCED_MOTION=true + env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 1' < ~/.jest-e2e-tests ) - name: E2E tests (Author) (3/4) - env: E2E_ROLE=author FORCE_REDUCED_MOTION=true + env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 2' < ~/.jest-e2e-tests ) - name: E2E tests (Author) (4/4) - env: E2E_ROLE=author FORCE_REDUCED_MOTION=true + env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= script: - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 3' < ~/.jest-e2e-tests ) From 3b63be6e91dd9f5477f6c5de04dd827f05e1b659 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 15:59:36 -0400 Subject: [PATCH 048/448] Framework: Use WHATWG URL in place of legacy url module (#19823) * Block Editor: Use WHATWG URL in place of legacy url module * Block Library: Use WHATWG URL in place of legacy url module * E2E Test Utils: Block Editor: Use WHATWG URL in place of legacy url module * E2E Tests: Use WHATWG URL in place of legacy url module --- package-lock.json | 10 ++++++---- .../utils/transform-styles/transforms/url-rewrite.js | 10 +--------- packages/block-library/package.json | 3 +-- packages/block-library/src/embed/embed-preview.js | 3 +-- packages/e2e-test-utils/src/create-url.js | 1 - packages/e2e-test-utils/src/is-current-url.js | 5 ----- .../e2e-tests/specs/editor/various/preview.test.js | 7 +++---- 7 files changed, 12 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30aa4f00b92851..b906c9019f78eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10136,8 +10136,7 @@ "lodash": "^4.17.15", "memize": "^1.0.5", "moment": "^2.22.1", - "tinycolor2": "^1.4.1", - "url": "^0.11.0" + "tinycolor2": "^1.4.1" } }, "@wordpress/block-serialization-default-parser": { @@ -32532,7 +32531,8 @@ "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "dev": true }, "querystring-es3": { "version": "0.2.1", @@ -39363,6 +39363,7 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "dev": true, "requires": { "punycode": "1.3.2", "querystring": "0.2.0" @@ -39371,7 +39372,8 @@ "punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", + "dev": true } } }, diff --git a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js b/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js index 4e0d07e4083d74..e74559515adaf4 100644 --- a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js +++ b/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { parse, resolve } from 'url'; - /** * Return `true` if the given path is http/https. * @@ -62,10 +57,7 @@ function isValidURL( meta ) { * @return {string} the full path to the file */ function getResourcePath( str, baseURL ) { - const pathname = parse( str ).pathname; - const filePath = resolve( baseURL, pathname ); - - return filePath; + return new URL( str, baseURL ).toString(); } /** diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 68acaac0d89555..2a19ca9a97c52b 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -55,8 +55,7 @@ "lodash": "^4.17.15", "memize": "^1.0.5", "moment": "^2.22.1", - "tinycolor2": "^1.4.1", - "url": "^0.11.0" + "tinycolor2": "^1.4.1" }, "publishConfig": { "access": "public" diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index db139e5292b7bd..419ef17c7bb115 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -7,7 +7,6 @@ import { getPhotoHtml } from './util'; /** * External dependencies */ -import { parse } from 'url'; import { includes } from 'lodash'; import classnames from 'classnames/dedupe'; @@ -69,7 +68,7 @@ class EmbedPreview extends Component { const { interactive } = this.state; const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html; - const parsedHost = parse( url ).host.split( '.' ); + const parsedHost = new URL( url ).host.split( '.' ); const parsedHostBaseUrl = parsedHost .splice( parsedHost.length - 2, parsedHost.length - 1 ) .join( '.' ); diff --git a/packages/e2e-test-utils/src/create-url.js b/packages/e2e-test-utils/src/create-url.js index 5bc9e6df3a59d4..d608e75e306ae9 100644 --- a/packages/e2e-test-utils/src/create-url.js +++ b/packages/e2e-test-utils/src/create-url.js @@ -2,7 +2,6 @@ * External dependencies */ import { join } from 'path'; -import { URL } from 'url'; /** * Internal dependencies diff --git a/packages/e2e-test-utils/src/is-current-url.js b/packages/e2e-test-utils/src/is-current-url.js index 80058d1225281f..002ce83b4c1e8b 100644 --- a/packages/e2e-test-utils/src/is-current-url.js +++ b/packages/e2e-test-utils/src/is-current-url.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { URL } from 'url'; - /** * Internal dependencies */ diff --git a/packages/e2e-tests/specs/editor/various/preview.test.js b/packages/e2e-tests/specs/editor/various/preview.test.js index 53130fe8d2eba6..c45e7cced2e7b4 100644 --- a/packages/e2e-tests/specs/editor/various/preview.test.js +++ b/packages/e2e-tests/specs/editor/various/preview.test.js @@ -2,7 +2,6 @@ * External dependencies */ import { last } from 'lodash'; -import { parse } from 'url'; /** * WordPress dependencies @@ -187,9 +186,9 @@ describe( 'Preview', () => { expect( previewTitle ).toBe( 'Hello World! And more.' ); // Published preview URL should include ID and nonce parameters. - const { query } = parse( previewPage.url(), true ); - expect( query ).toHaveProperty( 'preview_id' ); - expect( query ).toHaveProperty( 'preview_nonce' ); + const { searchParams } = new URL( previewPage.url() ); + expect( searchParams.has( 'preview_id' ) ).toBe( true ); + expect( searchParams.has( 'preview_nonce' ) ).toBe( true ); // Return to editor. Previewing already-autosaved preview tab should // reuse the opened tab, skipping interstitial. This resolves an edge From 03960e671cca1afee4f6ebbf20d0bdaf2170e672 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 12 Mar 2020 16:00:07 -0400 Subject: [PATCH 049/448] Compat: Use core-js-url-browser for URL polyfill (#20225) * Compat: Fix URL polyfill test * Compat: Use core-js-url-browser for URL polyfill * Compat: Respect SCRIPT_DEBUG for minified suffix * Compat: Move polyfill script registration to client-assets.php Only scripts registered in gutenberg_register_vendor_scripts are downloaded as part of the plugin build script. --- lib/client-assets.php | 41 ++++++++++++++++++++++++++++++----------- lib/compat.php | 42 +++++++++--------------------------------- 2 files changed, 39 insertions(+), 44 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index be7eeb19a83bb0..05e6ff4a35ee48 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -205,17 +205,36 @@ function gutenberg_override_style( &$styles, $handle, $src, $deps = array(), $ve * * @param WP_Scripts $scripts WP_Scripts instance (passed by reference). */ -function gutenberg_register_vendor_scripts( &$scripts ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable - // This function is intentionally left empty. - // - // Scripts such as react and react-dom are expected to be overridden soon, - // and it is preferred to keep this function in place so as not to disturb - // tooling related to the plugin build process. - // - // TODO: Remove phpcs exception in function signature once this function - // regains its use. - // - // See https://github.com/WordPress/gutenberg/pull/20628. +function gutenberg_register_vendor_scripts( &$scripts ) { + $suffix = SCRIPT_DEBUG ? '' : '.min'; + + /* + * This script registration and the corresponding function should be removed + * once the plugin is updated to support WordPress 5.4.0 and newer. + * + * See: `gutenberg_add_url_polyfill` + */ + gutenberg_register_vendor_script( + $scripts, + 'wp-polyfill-url', + 'https://unpkg.com/core-js-url-browser@3.6.4/url' . $suffix . '.js', + array(), + '3.6.4' + ); + + /* + * This script registration and the corresponding function should be removed + * removed once the plugin is updated to support WordPress 5.4.0 and newer. + * + * See: `gutenberg_add_dom_rect_polyfill` + */ + gutenberg_register_vendor_script( + $scripts, + 'wp-polyfill-dom-rect', + 'https://unpkg.com/polyfill-library@3.42.0/polyfills/DOMRect/polyfill.js', + array(), + '3.42.0' + ); } add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' ); diff --git a/lib/compat.php b/lib/compat.php index 9fc297fbf73776..67fefa0b102546 100644 --- a/lib/compat.php +++ b/lib/compat.php @@ -16,6 +16,10 @@ * * This can be removed when plugin support requires WordPress 5.4.0+. * + * The script registration occurs in `gutenberg_register_vendor_scripts`, which + * should be removed in coordination with this function. + * + * @see gutenberg_register_vendor_scripts * @see https://core.trac.wordpress.org/ticket/49360 * @see https://developer.mozilla.org/en-US/docs/Web/API/URL/URL * @see https://developer.wordpress.org/reference/functions/wp_default_packages_vendor/ @@ -25,28 +29,12 @@ * @param WP_Scripts $scripts WP_Scripts object. */ function gutenberg_add_url_polyfill( $scripts ) { - // Only register polyfill if not already registered. This prevents handling - // in an environment where core has updated to manage the polyfill. This - // depends on the action being handled after default script registration. - $is_polyfill_script_registered = (bool) $scripts->query( 'wp-polyfill-url', 'registered' ); - if ( $is_polyfill_script_registered ) { - return; - } - - gutenberg_register_vendor_script( - $scripts, - 'wp-polyfill-url', - 'https://unpkg.com/polyfill-library@3.42.0/polyfills/URL/polyfill.js', - array(), - '3.42.0' - ); - did_action( 'init' ) && $scripts->add_inline_script( 'wp-polyfill', wp_get_script_polyfill( $scripts, array( - '\'URL\' in window' => 'wp-polyfill-url', + 'window.URL && window.URL.prototype && window.URLSearchParams' => 'wp-polyfill-url', ) ) ); @@ -58,6 +46,10 @@ function gutenberg_add_url_polyfill( $scripts ) { * * This can be removed when plugin support requires WordPress 5.4.0+. * + * The script registration occurs in `gutenberg_register_vendor_scripts`, which + * should be removed in coordination with this function. + * + * @see gutenberg_register_vendor_scripts * @see gutenberg_add_url_polyfill * @see https://core.trac.wordpress.org/ticket/49360 * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect @@ -68,22 +60,6 @@ function gutenberg_add_url_polyfill( $scripts ) { * @param WP_Scripts $scripts WP_Scripts object. */ function gutenberg_add_dom_rect_polyfill( $scripts ) { - // Only register polyfill if not already registered. This prevents handling - // in an environment where core has updated to manage the polyfill. This - // depends on the action being handled after default script registration. - $is_polyfill_script_registered = (bool) $scripts->query( 'wp-polyfill-dom-rect', 'registered' ); - if ( $is_polyfill_script_registered ) { - return; - } - - gutenberg_register_vendor_script( - $scripts, - 'wp-polyfill-dom-rect', - 'https://unpkg.com/polyfill-library@3.42.0/polyfills/DOMRect/polyfill.js', - array(), - '3.42.0' - ); - did_action( 'init' ) && $scripts->add_inline_script( 'wp-polyfill', wp_get_script_polyfill( From db2825fe568a8d8a056679df0f53cb19ef6efa0e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 13 Mar 2020 12:05:53 +0800 Subject: [PATCH 050/448] Fix visually hidden classnames (#20649) * Add tests with failing test case * Allow visually hidden class names to be extended * Repace manual tests with storybook snapshots * Fix dodgy grammar --- .../components/src/visually-hidden/index.js | 9 ++++-- .../src/visually-hidden/stories/index.js | 22 ++++++++++++++ storybook/test/__snapshots__/index.js.snap | 29 +++++++++++++++++++ 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/packages/components/src/visually-hidden/index.js b/packages/components/src/visually-hidden/index.js index 17ac119ad01ad1..9824ab5106b9be 100644 --- a/packages/components/src/visually-hidden/index.js +++ b/packages/components/src/visually-hidden/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * Internal dependencies */ @@ -7,10 +12,10 @@ import { renderAsRenderProps } from './utils'; * VisuallyHidden component to render text out non-visually * for use in devices such as a screen reader. */ -function VisuallyHidden( { as = 'div', ...props } ) { +function VisuallyHidden( { as = 'div', className, ...props } ) { return renderAsRenderProps( { as, - className: 'components-visually-hidden', + className: classnames( 'components-visually-hidden', className ), ...props, } ); } diff --git a/packages/components/src/visually-hidden/stories/index.js b/packages/components/src/visually-hidden/stories/index.js index aaaa56991cc230..2b45ad1d15121c 100644 --- a/packages/components/src/visually-hidden/stories/index.js +++ b/packages/components/src/visually-hidden/stories/index.js @@ -18,3 +18,25 @@ export const _default = () => ( ); + +export const withForwardedProps = () => ( + <> + Additional props can be passed to VisuallyHidden and are forwarded to + the rendered element.{ ' ' } + + Check out my data attribute!{ ' ' } + + Inspect the HTML to see! + +); + +export const withAdditionalClassNames = () => ( + <> + Additional class names passed to VisuallyHidden extend the component + class name.{ ' ' } + + Check out my class!{ ' ' } + + Inspect the HTML to see! + +); diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 603152a58439e5..a86155f125541d 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -8706,6 +8706,35 @@ Array [ ] `; +exports[`Storyshots Components/VisuallyHidden With Additional Class Names 1`] = ` +Array [ + "Additional class names passed to VisuallyHidden extend the component class name.", + " ", + , + "Inspect the HTML to see!", +] +`; + +exports[`Storyshots Components/VisuallyHidden With Forwarded Props 1`] = ` +Array [ + "Additional props can be passed to VisuallyHidden and are forwarded to the rendered element.", + " ", + + Check out my data attribute! + + , + "Inspect the HTML to see!", +] +`; + exports[`Storyshots Components|AnglePickerControl Default 1`] = `
    Date: Fri, 13 Mar 2020 06:41:26 +0100 Subject: [PATCH 051/448] Dependencies webpack plugin: Let the output file be specified when output is combined (#20844) --- packages/dependency-extraction-webpack-plugin/CHANGELOG.md | 6 +++++- packages/dependency-extraction-webpack-plugin/README.md | 7 +++++++ packages/dependency-extraction-webpack-plugin/index.js | 5 ++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md index b96a8339b0debc..3505c6e0b62c1b 100644 --- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md +++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md @@ -1,10 +1,14 @@ ## Master +### New Features + +- The plugin now supports an optional `combinedOutputFile` option that is useful only when another `combineAssets` option is enabled. It allows providing a custom output file for the generated single assets file ([#20844](https://github.com/WordPress/gutenberg/pull/20844)). + ## 2.3.0 (2020-02-21) ### New Features -- The plugin now supports optional `combineAssets` options. When this flag is set to `true`, all information about assets is combined into a single `assets.(json|php)` file generated in the output directory ([#20330](https://github.com/WordPress/gutenberg/pull/20330)). +- The plugin now supports optional `combineAssets` option. When this flag is set to `true`, all information about assets is combined into a single `assets.(json|php)` file generated in the output directory ([#20330](https://github.com/WordPress/gutenberg/pull/20330)). ## 2.0.0 (2019-09-16) diff --git a/packages/dependency-extraction-webpack-plugin/README.md b/packages/dependency-extraction-webpack-plugin/README.md index 58575c12b47dde..7c4dad1e501ed5 100644 --- a/packages/dependency-extraction-webpack-plugin/README.md +++ b/packages/dependency-extraction-webpack-plugin/README.md @@ -123,6 +123,13 @@ The output format for the generated asset file. There are two options available: By default, one asset file is created for each entry point. When this flag is set to `true`, all information about assets is combined into a single `assets.(json|php)` file generated in the output directory. +##### `combinedOutputFile` + +- Type: string +- Default: `null` + +This option is useful only when the `combineAssets` option is enabled. It allows providing a custom output file for the generated single assets file. It's possible to provide a path that is relative to the output directory. + ##### `useDefaults` - Type: boolean diff --git a/packages/dependency-extraction-webpack-plugin/index.js b/packages/dependency-extraction-webpack-plugin/index.js index 12e048d4fe2593..89e9a26dbc4513 100644 --- a/packages/dependency-extraction-webpack-plugin/index.js +++ b/packages/dependency-extraction-webpack-plugin/index.js @@ -20,6 +20,7 @@ class DependencyExtractionWebpackPlugin { this.options = Object.assign( { combineAssets: false, + combinedOutputFile: null, injectPolyfill: false, outputFormat: 'php', useDefaults: true, @@ -106,6 +107,7 @@ class DependencyExtractionWebpackPlugin { compiler.hooks.emit.tap( this.constructor.name, ( compilation ) => { const { combineAssets, + combinedOutputFile, injectPolyfill, outputFormat, } = this.options; @@ -180,7 +182,8 @@ class DependencyExtractionWebpackPlugin { const outputFolder = compiler.options.output.path; const assetsFilePath = path.resolve( outputFolder, - 'assets.' + ( outputFormat === 'php' ? 'php' : 'json' ) + combinedOutputFile || + 'assets.' + ( outputFormat === 'php' ? 'php' : 'json' ) ); const assetsFilename = path.relative( outputFolder, From 2e996852b6f5856ba30357c041ee2a0a2ae3fb5f Mon Sep 17 00:00:00 2001 From: Ulrich Pogson Date: Fri, 13 Mar 2020 08:00:53 +0100 Subject: [PATCH 052/448] Add ESNext example for unregisterBlockType (#20784) Add an explanation why 'wp-edit-post' is needed to unregister a block --- .../developers/filters/block-filters.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/designers-developers/developers/filters/block-filters.md b/docs/designers-developers/developers/filters/block-filters.md index 7a75fbae9d5ee1..f9a5ec173cd30a 100644 --- a/docs/designers-developers/developers/filters/block-filters.md +++ b/docs/designers-developers/developers/filters/block-filters.md @@ -324,12 +324,25 @@ wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-nam Adding blocks is easy enough, removing them is as easy. Plugin or theme authors have the possibility to "unregister" blocks. +{% codetabs %} +{% ES5 %} ```js // my-plugin.js wp.domReady( function() { wp.blocks.unregisterBlockType( 'core/verse' ); } ); ``` +{% ESNext %} +```js +// my-plugin.js +import { unregisterBlockType } from '@wordpress/blocks'; +import domReady from '@wordpress/dom-ready' + +domReady( function() { + unregisterBlockType( 'core/verse' ); +} ); +``` +{% end %} and load this script in the Editor @@ -347,6 +360,8 @@ function my_plugin_blacklist_blocks() { add_action( 'enqueue_block_editor_assets', 'my_plugin_blacklist_blocks' ); ``` +**Important:** When unregistering a block, there can be a [race condition](https://en.wikipedia.org/wiki/Race_condition) on which code runs first: registering the block, or unregistering the block. You want your unregister code to run last. The way to do that is specify the component that is registering the block as a dependency, in this case `wp-edit-post`. Additionally, using `wp.domReady()` ensures the unregister code runs once the dom is loaded. + ### Using a whitelist If you want to disable all blocks except a whitelisted list, you can adapt the script above like so: From b0dbaa1e43f2d3e27d4bfa7698b1e9fbbca0ee20 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 13 Mar 2020 08:15:30 +0100 Subject: [PATCH 053/448] Docs: Add the release date to the @wordpress/scripts CHANGELOG --- packages/scripts/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 7471b1cea78397..2d15b6edd34555 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -1,5 +1,7 @@ ## Master +## 7.1.2 (2020-02-25) + ### Bug Fixes - Ensure `packages-update` work when `dependencies` or `devDependencies` are missing in the `package.json` file ([#20408](https://github.com/WordPress/gutenberg/pull/20408)). From c0c924abb85cf7e664ac94b89dd18a0a660f0407 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Fri, 13 Mar 2020 11:00:19 +0200 Subject: [PATCH 054/448] Show errors in the media replace control (#19244) * adds errors to the media replace control * adds a debounced speak message * removes __unstableHTML dependency, uses built in speak, creates notice with a small delay, VO works * adds comments to setTimeout call for notice and HTML removal on notice error, adds prefix to notice uniqueid * updates comment wording * fixes rebased style for media replace flow --- .../components/media-replace-flow/index.js | 54 ++++++++++++++++--- .../components/media-replace-flow/style.scss | 18 +++++++ 2 files changed, 65 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index 79719047690a48..ed72ad8a5f25f2 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -1,7 +1,12 @@ +/** + * External dependencies + */ +import { uniqueId } from 'lodash'; + /** * WordPress dependencies */ -import { useState, createRef } from '@wordpress/element'; +import { useState, createRef, renderToString } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; import { @@ -11,10 +16,9 @@ import { ToolbarGroup, Button, Dropdown, - withNotices, } from '@wordpress/components'; +import { withDispatch, useSelect } from '@wordpress/data'; import { DOWN } from '@wordpress/keycodes'; -import { useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { upload, media as mediaIcon } from '@wordpress/icons'; @@ -32,30 +36,58 @@ const MediaReplaceFlow = ( { accept, onSelect, onSelectURL, - onError, name = __( 'Replace' ), + createNotice, + removeNotice, } ) => { const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL ); const mediaUpload = useSelect( ( select ) => { return select( 'core/block-editor' ).getSettings().mediaUpload; }, [] ); const editMediaButtonRef = createRef(); + const errorNoticeID = uniqueId( + 'block-editor/media-replace-flow/error-notice/' + ); + + const onError = ( message ) => { + const errorElement = document.createElement( 'div' ); + errorElement.innerHTML = renderToString( message ); + // The default error contains some HTML that, + // for example, makes the filename bold. + // The notice, by default, accepts strings only and so + // we need to remove the html from the error. + const renderMsg = + errorElement.textContent || errorElement.innerText || ''; + // We need to set a timeout for showing the notice + // so that VoiceOver and possibly other screen readers + // can announce the error afer the toolbar button + // regains focus once the upload dialog closes. + // Otherwise VO simply skips over the notice and announces + // the focused element and the open menu. + setTimeout( () => { + createNotice( 'error', renderMsg, { + speak: true, + id: errorNoticeID, + isDismissible: true, + } ); + }, 1000 ); + }; const selectMedia = ( media ) => { onSelect( media ); setMediaURLValue( media.url ); speak( __( 'The media file has been replaced' ) ); + removeNotice( errorNoticeID ); }; const selectURL = ( newURL ) => { onSelectURL( newURL ); }; - const uploadFiles = ( event, closeDropdown ) => { + const uploadFiles = ( event ) => { const files = event.target.files; const setMedia = ( [ media ] ) => { selectMedia( media ); - closeDropdown(); }; mediaUpload( { allowedTypes, @@ -154,4 +186,12 @@ const MediaReplaceFlow = ( { ); }; -export default compose( withNotices )( MediaReplaceFlow ); +export default compose( [ + withDispatch( ( dispatch ) => { + const { createNotice, removeNotice } = dispatch( 'core/notices' ); + return { + createNotice, + removeNotice, + }; + } ), +] )( MediaReplaceFlow ); diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss index c502f5339c9fd5..bde255a1842141 100644 --- a/packages/block-editor/src/components/media-replace-flow/style.scss +++ b/packages/block-editor/src/components/media-replace-flow/style.scss @@ -50,3 +50,21 @@ } } } + +.block-editor-media-flow__error { + padding: 0 20px 20px 20px; + max-width: 255px; + + .components-with-notices-ui { + max-width: 255px; + + .components-notice__content { + overflow: hidden; + word-wrap: break-word; + } + .components-notice__dismiss { + position: absolute; + right: 10px; + } + } +} From 0ef1e8c1a09debe980ef8b166587cae7f396eb81 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 13 Mar 2020 11:20:58 +0100 Subject: [PATCH 055/448] [RNMobile]: Refine block settings' separator margin (#20842) * Hide last separator of video block settings * Remove block settings' cell's left margin when there's no icon --- packages/block-library/src/video/edit-common-settings.js | 1 + packages/components/src/mobile/bottom-sheet/cell.native.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index a180593ad055a3..f713faeba995fa 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -65,6 +65,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => { { value: 'metadata', label: __( 'Metadata' ) }, { value: 'none', label: __( 'None' ) }, ] } + separatorType={ 'none' } /> ); diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index e1bea1ac3bea34..37228c481eb59f 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -187,7 +187,10 @@ class BottomSheetCell extends Component { case 'none': return undefined; case undefined: - return showValue ? leftMarginStyle : defaultSeparatorStyle; + if ( showValue && icon !== undefined ) { + return leftMarginStyle; + } + return defaultSeparatorStyle; } }; From 47936965b178422a2d95cd9e59d129f665aabd82 Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 13 Mar 2020 11:21:28 +0100 Subject: [PATCH 056/448] Update 'Add Block Here' indicator style (#20864) --- .../block-editor/src/components/block-list/style.native.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index c102d1644d838b..4676e50107e9bd 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -30,8 +30,9 @@ flex: 1; text-align: center; font-family: $default-monospace-font; - font-size: 12px; - font-weight: bold; + font-size: 14px; + color: $gray; + margin: 0 8px; } .labelStyleAddHereDark { From f8421c422633921c291adb05f87cea54c4cd640d Mon Sep 17 00:00:00 2001 From: Jorge Bernal Date: Fri, 13 Mar 2020 11:32:38 +0100 Subject: [PATCH 057/448] Remove feature flag for mobile page templates (#20718) * Enable page templates on production builds * Remove mobileEnablePageTemplates from docs * Fix contact emoji * Update spacer height on services template * Remove old documentation for the feature flag * Remove unused variable --- packages/block-editor/README.md | 1 - .../page-template-picker/templates/contact.native.js | 2 +- .../page-template-picker/templates/services.native.js | 2 +- .../use-page-template-picker-visible.js | 9 ++------- packages/block-editor/src/store/defaults.js | 1 - packages/editor/src/components/provider/index.js | 1 - 6 files changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index d6c047e4cb8801..e9ea7ce70d1cc0 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -420,7 +420,6 @@ _Properties_ - _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory - _\_\_experimentalEnableFullSiteEditing_ `boolean`: Whether the user has enabled Full Site Editing - _\_\_experimentalEnableFullSiteEditingDemo_ `boolean`: Whether the user has enabled Full Site Editing Demo Templates -- _\_\_mobileEnablePageTemplates_ `boolean`: Whether the user has enabled the Page Templates # **SkipToSelectedBlock** diff --git a/packages/block-editor/src/components/page-template-picker/templates/contact.native.js b/packages/block-editor/src/components/page-template-picker/templates/contact.native.js index de45d5bb3822fc..cd30fdc424243c 100644 --- a/packages/block-editor/src/components/page-template-picker/templates/contact.native.js +++ b/packages/block-editor/src/components/page-template-picker/templates/contact.native.js @@ -7,7 +7,7 @@ const Contact = { // translators: title for "Contact" page template name: __( 'Contact' ), key: 'contact', - icon: '✉', + icon: '✉️', content: [ { name: 'core/paragraph', diff --git a/packages/block-editor/src/components/page-template-picker/templates/services.native.js b/packages/block-editor/src/components/page-template-picker/templates/services.native.js index 214f37a449ea62..35fab8a9321289 100644 --- a/packages/block-editor/src/components/page-template-picker/templates/services.native.js +++ b/packages/block-editor/src/components/page-template-picker/templates/services.native.js @@ -116,7 +116,7 @@ const Services = { { name: 'core/spacer', attributes: { - height: 40, + height: 24, }, }, { diff --git a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js b/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js index ac2f78692dec8f..29d1508d3b2641 100644 --- a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js +++ b/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js @@ -8,12 +8,7 @@ const __experimentalUsePageTemplatePickerVisible = () => { return useSelect( ( select ) => { const { getCurrentPostType } = select( 'core/editor' ); - const { getBlockOrder, getBlock, getSettings } = select( - 'core/block-editor' - ); - - const isPageTemplatesEnabled = getSettings() - .__mobileEnablePageTemplates; + const { getBlockOrder, getBlock } = select( 'core/block-editor' ); const blocks = getBlockOrder(); const isEmptyBlockList = blocks.length === 0; @@ -23,7 +18,7 @@ const __experimentalUsePageTemplatePickerVisible = () => { const isEmptyContent = isEmptyBlockList || isOnlyUnmodifiedDefault; const isPage = getCurrentPostType() === 'page'; - return isPageTemplatesEnabled && isEmptyContent && isPage; + return isEmptyContent && isPage; }, [] ); }; diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 3fbcd61f2e7bdf..3066066e3ea488 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -33,7 +33,6 @@ export const PREFERENCES_DEFAULTS = { * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory * @property {boolean} __experimentalEnableFullSiteEditing Whether the user has enabled Full Site Editing * @property {boolean} __experimentalEnableFullSiteEditingDemo Whether the user has enabled Full Site Editing Demo Templates - * @property {boolean} __mobileEnablePageTemplates Whether the user has enabled the Page Templates */ export const SETTINGS_DEFAULTS = { alignWide: false, diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 6a9cb86c20981a..69a2dbbd958892 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -118,7 +118,6 @@ class EditorProvider extends Component { '__experimentalBlockDirectory', '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', - '__mobileEnablePageTemplates', '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBase', 'gradients', From f8da7a19d3cec213984db3a8e46e30573861927f Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Fri, 13 Mar 2020 13:15:22 +0100 Subject: [PATCH 058/448] [RNMobile] Create cross platform `useResizeObserver()` hook (#19918) * Create a hook to be useResizeObserver() and unify with web API --- package-lock.json | 4 +- .../embed/test/__snapshots__/index.js.snap | 10 +--- packages/components/package.json | 1 - packages/components/src/placeholder/index.js | 10 +++- .../components/src/placeholder/test/index.js | 15 ++--- packages/compose/README.md | 24 ++++++++ packages/compose/package.json | 3 +- .../src/hooks/use-resize-observer/index.js | 28 ++++++++++ .../hooks/use-resize-observer/index.native.js | 55 +++++++++++++++++++ .../use-resize-observer/test/index.native.js | 50 +++++++++++++++++ packages/compose/src/index.js | 1 + packages/compose/src/index.native.js | 1 + storybook/test/__snapshots__/index.js.snap | 23 +------- test/unit/config/global-mocks.js | 5 ++ 14 files changed, 185 insertions(+), 45 deletions(-) create mode 100644 packages/compose/src/hooks/use-resize-observer/index.js create mode 100644 packages/compose/src/hooks/use-resize-observer/index.native.js create mode 100644 packages/compose/src/hooks/use-resize-observer/test/index.native.js diff --git a/package-lock.json b/package-lock.json index b906c9019f78eb..c7fef6f775a45d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10213,7 +10213,6 @@ "moment": "^2.22.1", "re-resizable": "^6.0.0", "react-dates": "^17.1.1", - "react-resize-aware": "^3.0.0", "react-spring": "^8.0.20", "reakit": "^1.0.0-beta.12", "rememo": "^3.0.0", @@ -10228,7 +10227,8 @@ "@wordpress/element": "file:packages/element", "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "lodash": "^4.17.15", - "mousetrap": "^1.6.2" + "mousetrap": "^1.6.2", + "react-resize-aware": "^3.0.0" } }, "@wordpress/core-data": { diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index a3aa6b0bb28b63..d3a08d978e03b3 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -2,16 +2,8 @@ exports[`core/embed block edit matches snapshot 1`] = `
    - - + +
    +https://www.google.com/maps/embed +
    + \ No newline at end of file From 0446ed1882c598ad6c34165f67cc1885c414eb40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 19 Mar 2020 10:18:48 +0100 Subject: [PATCH 126/448] Editable Component (#18361) * Text Component * Rename * Lint fixes --- packages/block-editor/README.md | 4 + .../src/components/editable/README.md | 114 ++++++++++++++++++ .../src/components/editable/index.js | 17 +++ packages/block-editor/src/components/index.js | 1 + .../src/components/rich-text/index.js | 24 +++- packages/block-library/src/site-title/edit.js | 19 +++ packages/rich-text/src/component/index.js | 19 +++ 7 files changed, 195 insertions(+), 3 deletions(-) create mode 100644 packages/block-editor/src/components/editable/README.md create mode 100644 packages/block-editor/src/components/editable/index.js create mode 100644 packages/block-library/src/site-title/edit.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index e9ea7ce70d1cc0..574e77a1ddce82 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -231,6 +231,10 @@ _Returns_ Undocumented declaration. +# **Editable** + +Renders an editable text input in which text formatting is not allowed. + # **FontSizePicker** Undocumented declaration. diff --git a/packages/block-editor/src/components/editable/README.md b/packages/block-editor/src/components/editable/README.md new file mode 100644 index 00000000000000..38c7c89dc3ba5b --- /dev/null +++ b/packages/block-editor/src/components/editable/README.md @@ -0,0 +1,114 @@ +# `Editable` + +Renders an editable text input in which text formatting is not allowed. + +## Properties + +### `value: String` + +*Required.* String to make editable. + +### `onChange( value: String ): Function` + +*Required.* Called when the value changes. + +### `tagName: String` + +*Default: `div`.* The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element. Elements that display inline are not supported. + +### `disableLineBreaks: Boolean` + +*Optional.* `Text` won't insert line breaks on `Enter` if set to `true`. + +### `placeholder: String` + +*Optional.* Placeholder text to show when the field is empty, similar to the + [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute). + +### `keepPlaceholderOnFocus: Boolean` + +*Optional.* Show placeholder even when selected/focused, as long as there is no content. + +### `onSplit( value: String ): Function` + +*Optional.* Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect. + +### `onReplace( blocks: Array ): Function` + +*Optional.* Called when the `Text` instance can be replaced with the given blocks. + +### `onMerge( forward: Boolean ): Function` + +*Optional.* Called when blocks can be merged. `forward` is true when merging with the next block, false when merging with the previous block. + +### `onRemove( forward: Boolean ): Function` + +*Optional.* Called when the block can be removed. `forward` is true when the selection is expected to move to the next block, false to the previous block. + +## Editable.Content + +`Text.Content` should be used in the `save` function of your block to correctly save text content. + +## Example + +{% codetabs %} +{% ES5 %} +```js +wp.blocks.registerBlockType( /* ... */, { + // ... + + attributes: { + content: { + source: 'html', + selector: 'div', + }, + }, + + edit: function( props ) { + return wp.element.createElement( wp.editor.Editable, { + className: props.className, + value: props.attributes.content, + onChange: function( content ) { + props.setAttributes( { content: content } ); + } + } ); + }, + + save: function( props ) { + return wp.element.createElement( wp.editor.Editable.Content, { + value: props.attributes.content + } ); + } +} ); +``` +{% ESNext %} +```js +const { registerBlockType } = wp.blocks; +const { Editable } = wp.editor; + +registerBlockType( /* ... */, { + // ... + + attributes: { + content: { + source: 'html', + selector: '.text', + }, + }, + + edit( { className, attributes, setAttributes } ) { + return ( + setAttributes( { content } ) } + /> + ); + }, + + save( { attributes } ) { + return ; + } +} ); +``` +{% end %} diff --git a/packages/block-editor/src/components/editable/index.js b/packages/block-editor/src/components/editable/index.js new file mode 100644 index 00000000000000..25fb330ea9a1e2 --- /dev/null +++ b/packages/block-editor/src/components/editable/index.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import RichText from '../rich-text'; + +function Editable( props ) { + return ; +} + +Editable.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => { + return { value }; +}; + +/** + * Renders an editable text input in which text formatting is not allowed. + */ +export default Editable; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 31365b395684a9..3467ef2cee5c25 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -47,6 +47,7 @@ export { RichTextToolbarButton, __unstableRichTextInputEvent, } from './rich-text'; +export { default as Editable } from './editable'; export { default as ToolSelector } from './tool-selector'; export { default as URLInput } from './url-input'; export { default as URLInputButton } from './url-input/button'; diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 7fc7f32291b457..142c02e8ed9074 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -67,7 +67,15 @@ function getMultilineTag( multiline ) { return multiline === true ? 'p' : multiline; } -function getAllowedFormats( { allowedFormats, formattingControls } ) { +function getAllowedFormats( { + allowedFormats, + formattingControls, + disableFormats, +} ) { + if ( disableFormats ) { + return getAllowedFormats.EMPTY_ARRAY; + } + if ( ! allowedFormats && ! formattingControls ) { return; } @@ -83,6 +91,8 @@ function getAllowedFormats( { allowedFormats, formattingControls } ) { return formattingControls.map( ( name ) => `core/${ name }` ); } +getAllowedFormats.EMPTY_ARRAY = []; + function RichTextWrapper( { children, @@ -112,6 +122,8 @@ function RichTextWrapper( style, preserveWhiteSpace, __unstableEmbedURLOnPaste, + __unstableDisableFormats: disableFormats, + disableLineBreaks, ...props }, forwardedRef @@ -202,6 +214,7 @@ function RichTextWrapper( const adjustedAllowedFormats = getAllowedFormats( { allowedFormats, formattingControls, + disableFormats, } ); const hasFormats = ! adjustedAllowedFormats || adjustedAllowedFormats.length > 0; @@ -329,14 +342,18 @@ function RichTextWrapper( if ( multiline ) { if ( shiftKey ) { - onChange( insert( value, '\n' ) ); + if ( ! disableLineBreaks ) { + onChange( insert( value, '\n' ) ); + } } else if ( canSplit && isEmptyLine( value ) ) { splitValue( value ); } else { onChange( insertLineSeparator( value ) ); } } else if ( shiftKey || ! canSplit ) { - onChange( insert( value, '\n' ) ); + if ( ! disableLineBreaks ) { + onChange( insert( value, '\n' ) ); + } } else { splitValue( value ); } @@ -504,6 +521,7 @@ function RichTextWrapper( __unstableMarkAutomaticChange={ __unstableMarkAutomaticChange } __unstableDidAutomaticChange={ didAutomaticChange } __unstableUndo={ undo } + __unstableDisableFormats={ disableFormats } style={ style } preserveWhiteSpace={ preserveWhiteSpace } disabled={ disabled } diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js new file mode 100644 index 00000000000000..382493e17c8c5d --- /dev/null +++ b/packages/block-library/src/site-title/edit.js @@ -0,0 +1,19 @@ +/** + * WordPress dependencies + */ +import { useEntityProp } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; +import { Editable } from '@wordpress/block-editor'; + +export default function SiteTitleEdit() { + const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' ); + return ( + + ); +} diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index eb0732a37658c4..baa8826f12879e 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -620,6 +620,11 @@ class RichText extends Component { * created. */ onChange( record, { withoutHistory } = {} ) { + if ( this.props.__unstableDisableFormats ) { + record.formats = Array( record.text.length ); + record.replacements = Array( record.text.length ); + } + this.applyRecord( record ); const { start, end, activeFormats = [] } = record; @@ -1005,8 +1010,17 @@ class RichText extends Component { format, __unstableMultilineTag: multilineTag, preserveWhiteSpace, + __unstableDisableFormats: disableFormats, } = this.props; + if ( disableFormats ) { + return { + text: value, + formats: Array( value.length ), + replacements: Array( value.length ), + }; + } + if ( format !== 'string' ) { return value; } @@ -1064,8 +1078,13 @@ class RichText extends Component { format, __unstableMultilineTag: multilineTag, preserveWhiteSpace, + __unstableDisableFormats: disableFormats, } = this.props; + if ( disableFormats ) { + return value.text; + } + value = this.removeEditorOnlyFormats( value ); if ( format !== 'string' ) { From bc5f55d11a4520dc404694cfa64908d70caf66a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= Date: Thu, 19 Mar 2020 10:37:17 +0000 Subject: [PATCH 127/448] Add isFileURL method and use it on all native media upload checks. (#20985) * Add isFileURL method and use it on all native media upload checks. * Check if url is defined. * Add test for undefined and fix lint error for isFileURL * Replace isFileURL method for getProcotol == 'file' mettod --- .../src/gallery/gallery-image.native.js | 7 +++++-- .../block-library/src/image/edit.native.js | 20 ++++++++++++------- .../src/media-text/media-container.native.js | 6 +++--- .../block-library/src/video/edit.native.js | 9 ++++++--- packages/url/src/test/index.test.js | 1 + 5 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js index 83aad48961ca82..43f4125121ee7f 100644 --- a/packages/block-library/src/gallery/gallery-image.native.js +++ b/packages/block-library/src/gallery/gallery-image.native.js @@ -22,7 +22,7 @@ import { Component } from '@wordpress/element'; import { Icon } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { Caption, MediaUploadProgress } from '@wordpress/block-editor'; -import { isURL } from '@wordpress/url'; +import { getProtocol } from '@wordpress/url'; import { withPreferredColorScheme } from '@wordpress/compose'; import { close, arrowLeft, arrowRight } from '@wordpress/icons'; @@ -91,7 +91,10 @@ class GalleryImage extends Component { if ( this.state.isUploadInProgress ) { requestImageUploadCancelDialog( id ); - } else if ( this.state.didUploadFail || ( id && ! isURL( url ) ) ) { + } else if ( + this.state.didUploadFail || + ( id && getProtocol( url ) === 'file:' ) + ) { requestImageFailedRetryDialog( id ); } } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6eacd85a2438a8..14fb569a91f8b2 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -44,7 +44,7 @@ import { MediaEdit, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; -import { isURL } from '@wordpress/url'; +import { getProtocol } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; @@ -83,8 +83,6 @@ const getUrlForSlug = ( image, { sizeSlug } ) => { return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ); }; -const isFileUrl = ( url ) => url && url.startsWith( 'file:' ); - export class ImageEdit extends React.Component { constructor( props ) { super( props ); @@ -130,7 +128,7 @@ export class ImageEdit extends React.Component { if ( ! attributes.id && attributes.url && - isFileUrl( attributes.url ) + getProtocol( attributes.url ) === 'file:' ) { requestMediaImport( attributes.url, ( id, url ) => { if ( url ) { @@ -141,7 +139,11 @@ export class ImageEdit extends React.Component { // Make sure we mark any temporary images as failed if they failed while // the editor wasn't open - if ( attributes.id && attributes.url && ! isURL( attributes.url ) ) { + if ( + attributes.id && + attributes.url && + getProtocol( attributes.url ) === 'file:' + ) { mediaUploadSync(); } } @@ -180,7 +182,10 @@ export class ImageEdit extends React.Component { if ( this.state.isUploadInProgress ) { requestImageUploadCancelDialog( attributes.id ); - } else if ( attributes.id && ! isURL( attributes.url ) ) { + } else if ( + attributes.id && + getProtocol( attributes.url ) === 'file:' + ) { requestImageFailedRetryDialog( attributes.id ); } else if ( ! this.state.isCaptionSelected ) { requestImageFullscreenPreview( @@ -669,7 +674,8 @@ export default compose( [ } = props; const { imageSizes } = getSettings(); - const shouldGetMedia = id && isSelected && ! isFileUrl( url ); + const shouldGetMedia = + id && isSelected && getProtocol( url ) !== 'file:'; return { image: shouldGetMedia ? getMedia( id ) : null, imageSizes, diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index f3c44e67c9db25..cac4d5615a7265 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -29,7 +29,7 @@ import { } from '@wordpress/block-editor'; import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { isURL } from '@wordpress/url'; +import { isURL, getProtocol } from '@wordpress/url'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { replace } from '@wordpress/icons'; @@ -74,7 +74,7 @@ class MediaContainer extends Component { // Make sure we mark any temporary images as failed if they failed while // the editor wasn't open - if ( mediaId && mediaUrl && mediaUrl.indexOf( 'file:' ) === 0 ) { + if ( mediaId && mediaUrl && getProtocol( mediaUrl ) === 'file:' ) { mediaUploadSync(); } } @@ -101,7 +101,7 @@ class MediaContainer extends Component { if ( this.state.isUploadInProgress ) { requestImageUploadCancelDialog( mediaId ); - } else if ( mediaId && ! isURL( mediaUrl ) ) { + } else if ( mediaId && getProtocol( mediaUrl ) === 'file:' ) { requestImageFailedRetryDialog( mediaId ); } } diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 3a0fe4a1d231a7..1afe94d47dc2fe 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -36,7 +36,7 @@ import { InspectorControls, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; -import { isURL } from '@wordpress/url'; +import { isURL, getProtocol } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { video as SvgIcon, replace } from '@wordpress/icons'; @@ -80,7 +80,7 @@ class VideoEdit extends React.Component { componentDidMount() { const { attributes } = this.props; - if ( attributes.id && ! isURL( attributes.src ) ) { + if ( attributes.id && getProtocol( attributes.src ) === 'file:' ) { mediaUploadSync(); } } @@ -111,7 +111,10 @@ class VideoEdit extends React.Component { if ( this.state.isUploadInProgress ) { requestImageUploadCancelDialog( attributes.id ); - } else if ( attributes.id && ! isURL( attributes.src ) ) { + } else if ( + attributes.id && + getProtocol( attributes.src ) === 'file:' + ) { requestImageFailedRetryDialog( attributes.id ); } diff --git a/packages/url/src/test/index.test.js b/packages/url/src/test/index.test.js index ddb603ba3fa76c..b9e85c88e748cf 100644 --- a/packages/url/src/test/index.test.js +++ b/packages/url/src/test/index.test.js @@ -89,6 +89,7 @@ describe( 'getProtocol', () => { expect( getProtocol( 'https://localhost:8080' ) ).toBe( 'https:' ); expect( getProtocol( 'tel:1234' ) ).toBe( 'tel:' ); expect( getProtocol( 'blob:data' ) ).toBe( 'blob:' ); + expect( getProtocol( 'file:///folder/file.txt' ) ).toBe( 'file:' ); } ); it( 'returns undefined when the provided value does not contain a URL protocol', () => { From 70eef3a076787043e8d960d70cae81724e69adcf Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 19 Mar 2020 20:46:51 +0800 Subject: [PATCH 128/448] Add basic nav block example for inserter and styles previews (#21011) --- .../block-library/src/navigation/index.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js index 420b22b999ff79..08030d5b8895d5 100644 --- a/packages/block-library/src/navigation/index.js +++ b/packages/block-library/src/navigation/index.js @@ -32,6 +32,35 @@ export const settings = { lightBlockWrapper: true, }, + example: { + innerBlocks: [ + { + name: 'core/navigation-link', + attributes: { + // translators: 'Home' as in a website's home page. + label: __( 'Home' ), + url: 'https://make.wordpress.org/', + }, + }, + { + name: 'core/navigation-link', + attributes: { + // translators: 'About' as in a website's about page. + label: __( 'About' ), + url: 'https://make.wordpress.org/', + }, + }, + { + name: 'core/navigation-link', + attributes: { + // translators: 'Contact' as in a website's contact page. + label: __( 'Contact' ), + url: 'https://make.wordpress.org/', + }, + }, + ], + }, + styles: [ { name: 'light', label: __( 'Light' ), isDefault: true }, { name: 'dark', label: __( 'Dark' ) }, From 2e674201be40ee31f56e5a5843f8a16f41948a43 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 19 Mar 2020 19:01:40 +0100 Subject: [PATCH 129/448] Fix fullscreen mode device preview (#21010) --- packages/block-editor/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 27ac1a3832f1da..cdf78fbc8f4981 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -26,7 +26,6 @@ @import "./components/colors-gradients/style.scss"; @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/style.scss"; -@import "./components/fullscreen-mode/style.scss"; @import "./components/link-control/style.scss"; @import "./components/image-size-control/style.scss"; @import "./components/inner-blocks/style.scss"; @@ -55,5 +54,6 @@ @import "./components/block-toolbar/style.scss"; @import "./components/editor-skeleton/style.scss"; +@import "./components/fullscreen-mode/style.scss"; @import "./components/inserter/style.scss"; From d4f159a3da0738aa045e9969dba2c6c13a7f6a8d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 19 Mar 2020 15:39:20 -0400 Subject: [PATCH 130/448] Docs: Include `npm run dev` guidance in "Getting Started" (#21015) --- docs/contributors/getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/contributors/getting-started.md b/docs/contributors/getting-started.md index 1a5656887b3601..6236c404a71dbb 100644 --- a/docs/contributors/getting-started.md +++ b/docs/contributors/getting-started.md @@ -15,6 +15,8 @@ npm run build This will build Gutenberg, ready to be used as a WordPress plugin! +`npm run build` is intended for one-off compilations of the project. If you're planning to do continued development in the source files, using `npm run dev` will most often be the better option. This will configure the build to avoid minifying the generated output, rebuild files automatically as they are changed in your working directory, and configure dependencies as running in a development environment so that useful warnings and errors are logged to your browser's developer console. + If you don't have a local WordPress environment to load Gutenberg in, we can help get that up and running, too. ## Local Environment From 8017d0f3526015529f20067b57c67953a9980bdd Mon Sep 17 00:00:00 2001 From: Chip Date: Thu, 19 Mar 2020 17:30:16 -0400 Subject: [PATCH 131/448] [RNMobile] Latest-Posts: Resolve issue with Query Controls, and fix API Fetch strategy (#21025) * Convert the categories fetchRequest to use the apiFetch API for cacheing * Fix Conflict in Query Controls to move the stable state to Mobile * Fix Conflict in Query Controls to move the stable state to Mobile --- .../src/latest-posts/edit.native.js | 20 ++--- .../src/latest-posts/style.native.scss | 2 +- .../components/src/query-controls/index.js | 14 --- .../src/query-controls/index.native.js | 87 +++++++++++++++++++ 4 files changed, 93 insertions(+), 30 deletions(-) create mode 100644 packages/components/src/query-controls/index.native.js diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 53481203a135c7..5b37ad2a530a81 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -14,7 +14,7 @@ import { coreBlocks } from '@wordpress/block-library'; import { __ } from '@wordpress/i18n'; import { postList as icon } from '@wordpress/icons'; import { InspectorControls } from '@wordpress/block-editor'; -import { fetchRequest } from 'react-native-gutenberg-bridge'; +import apiFetch from '@wordpress/api-fetch'; import { Icon, PanelBody, @@ -52,23 +52,13 @@ class LatestPostsEdit extends Component { componentDidMount() { this.isStillMounted = true; - this.fetchRequest = fetchRequest( '/wp/v2/categories' ) + this.fetchRequest = apiFetch( { path: '/wp/v2/categories' } ) .then( ( categoriesList ) => { if ( this.isStillMounted ) { - let parsedCategoriesList = categoriesList; - - // TODO: remove this check after `fetchRequest` types are made consist across platforms - // (see: https://github.com/wordpress-mobile/gutenberg-mobile/issues/1961) - if ( typeof categoriesList === 'string' ) { - parsedCategoriesList = JSON.parse( categoriesList ); - } - - if ( isEmpty( parsedCategoriesList ) ) { - parsedCategoriesList = []; - } - this.setState( { - categoriesList: parsedCategoriesList, + categoriesList: isEmpty( categoriesList ) + ? [] + : categoriesList, } ); } } ) diff --git a/packages/block-library/src/latest-posts/style.native.scss b/packages/block-library/src/latest-posts/style.native.scss index cba3877e8904b5..529c52f507fecf 100644 --- a/packages/block-library/src/latest-posts/style.native.scss +++ b/packages/block-library/src/latest-posts/style.native.scss @@ -31,7 +31,7 @@ text-align: center; margin-top: 8; font-size: 14; - color: #2e4453; + color: $gray-dark; } .latestPostBlockMessageDark { diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js index 67c975b8e4bee8..a1a1a2bc4a4cf9 100644 --- a/packages/components/src/query-controls/index.js +++ b/packages/components/src/query-controls/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -13,17 +12,6 @@ const DEFAULT_MIN_ITEMS = 1; const DEFAULT_MAX_ITEMS = 100; const MAX_CATEGORIES_SUGGESTIONS = 20; -// currently this is needed for consistent controls UI on mobile -// this can be removed after control components settle on consistent defaults -const MOBILE_CONTROL_PROPS = Platform.select( { - web: {}, - native: { separatorType: 'fullWidth' }, -} ); -const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( { - web: {}, - native: { separatorType: 'none' }, -} ); - export default function QueryControls( { categorySuggestions, selectedCategories, @@ -72,7 +60,6 @@ export default function QueryControls( { onOrderByChange( newOrderBy ); } } } - { ...MOBILE_CONTROL_PROPS } /> ), onCategoryChange && ( @@ -100,7 +87,6 @@ export default function QueryControls( { min={ minItems } max={ maxItems } required - { ...MOBILE_CONTROL_PROPS_SEPARATOR_NONE } /> ), ]; diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js new file mode 100644 index 00000000000000..e7932cd2854991 --- /dev/null +++ b/packages/components/src/query-controls/index.native.js @@ -0,0 +1,87 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { RangeControl, SelectControl } from '../'; +import CategorySelect from './category-select'; + +const DEFAULT_MIN_ITEMS = 1; +const DEFAULT_MAX_ITEMS = 100; + +export default function QueryControls( { + categoriesList, + selectedCategoryId, + numberOfItems, + order, + orderBy, + maxItems = DEFAULT_MAX_ITEMS, + minItems = DEFAULT_MIN_ITEMS, + onCategoryChange, + onNumberOfItemsChange, + onOrderChange, + onOrderByChange, +} ) { + return [ + onOrderChange && onOrderByChange && ( + { + const [ newOrderBy, newOrder ] = value.split( '/' ); + if ( newOrder !== order ) { + onOrderChange( newOrder ); + } + if ( newOrderBy !== orderBy ) { + onOrderByChange( newOrderBy ); + } + } } + { ...{ separatorType: 'fullWidth' } } + /> + ), + onCategoryChange && ( + + ), + onNumberOfItemsChange && ( + + ), + ]; +} From dcfbd8c8d760f2581e84a4c0326913f22724b23a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20S=C3=A1nchez?= Date: Thu, 19 Mar 2020 17:52:27 -0600 Subject: [PATCH 132/448] Remove aria-expanded from close button in Publish panel (#20993) * Remove aria-expanded from close button in Publish panel * Small border fix. * Update snapshots. Co-authored-by: jasmussen --- .../editor/src/components/post-publish-panel/index.js | 1 - .../editor/src/components/post-publish-panel/style.scss | 8 ++++---- .../post-publish-panel/test/__snapshots__/index.js.snap | 5 ----- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index b3621483495822..232d23f5cc0a9d 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -95,7 +95,6 @@ export class PostPublishPanel extends Component {
    ) }
    Date: Fri, 20 Mar 2020 04:39:02 +0200 Subject: [PATCH 133/448] Accessibility: updated headings to reflect semantic relationship between html tag and it's content. (#16444) * Updated block-editor-block-card__title. * Fixed specificity. --- packages/block-editor/src/components/block-card/index.js | 8 ++++---- .../block-editor/src/components/block-card/style.scss | 4 +++- .../edit-post/src/components/sidebar/post-link/index.js | 4 ++-- .../edit-post/src/components/sidebar/post-link/style.scss | 1 + 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 674d437d9c7a3e..aaff1af27e16dd 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -8,12 +8,12 @@ function BlockCard( { blockType } ) {
    -
    +

    { blockType.title } -

    -
    + + { blockType.description } -
    +
    ); diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 3b1c753929f868..993ac878d03c4c 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -18,7 +18,9 @@ .block-editor-block-card__title { font-weight: 500; - margin-bottom: 5px; + &.block-editor-block-card__title { + margin: 0 0 5px; + } } .block-editor-block-card__description { diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js index e8f7f6008b27d2..5bf5b6bba6997b 100644 --- a/packages/edit-post/src/components/sidebar/post-link/index.js +++ b/packages/edit-post/src/components/sidebar/post-link/index.js @@ -94,9 +94,9 @@ function PostLink( {

    ) } -

    +

    { postTypeLabel || __( 'View post' ) } -

    +

    Date: Fri, 20 Mar 2020 14:31:43 +0800 Subject: [PATCH 134/448] Remove z-index (#21033) --- packages/block-library/src/navigation/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index c595f75f198d14..3abfff7b3db9cb 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -41,7 +41,6 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; &:hover, &:focus-within { cursor: pointer; - z-index: 99999; } // Submenu Display From 9eae465cfc873f3e56ac969d4847e1ed81661e62 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 20 Mar 2020 14:32:48 +0800 Subject: [PATCH 135/448] Remove frontend from style comments (#21034) --- packages/block-library/src/navigation/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3abfff7b3db9cb..6d8fa6f441e2e2 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -3,7 +3,7 @@ $navigation-sub-menu-height: $grid-unit-10 * 5; $navigation-sub-menu-width: $grid-unit-10 * 25; /* -* Frontend: reset the default list styles +* Reset the default list styles */ .wp-block-navigation > ul { @@ -31,7 +31,7 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; } /* -* Frontend: styles for submenu flyout +* Styles for submenu flyout */ .wp-block-navigation > ul { @@ -218,7 +218,7 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; } /* -* Frontend: non-shared styles & overrides +* Non-shared styles & overrides */ .wp-block-navigation { From 5a9840e993e79b13494cfc8cf3adb99c1a6d9a5f Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 20 Mar 2020 14:34:17 +0800 Subject: [PATCH 136/448] Use editor only classname to keep submenus open when inner blocks are selected (#21035) --- packages/block-library/src/navigation-link/edit.js | 7 ++++++- packages/block-library/src/navigation/editor.scss | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index c4ae29f382f770..09fc6ae3726738 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -296,7 +296,12 @@ function NavigationLinkEdit( { __experimentalTagName="ul" __experimentalAppenderTagName="li" __experimentalPassedProps={ { - className: 'wp-block-navigation__container', + className: classnames( + 'wp-block-navigation__container', + { + 'is-parent-of-selected-block': isParentOfSelectedBlock, + } + ), } } /> diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index f6141802433a43..7b7f4a3a192e87 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -23,6 +23,12 @@ $navigation-item-height: 46px; padding: $grid-unit-20; } +// Ensure sub-menus stay open and visible when a nested block is selected. +.wp-block-navigation__container.is-parent-of-selected-block { + visibility: visible; + opacity: 1; +} + /** * Colors Selector component */ From bbc2390d5bd48d754e3cc4033d972eb2aa725e2e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 20 Mar 2020 14:47:09 +0800 Subject: [PATCH 137/448] Allow media library in gallery mode to be reset (#20675) --- .../src/components/media-upload/index.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/media-utils/src/components/media-upload/index.js b/packages/media-utils/src/components/media-upload/index.js index d955161a57139e..3002864d6a46da 100644 --- a/packages/media-utils/src/components/media-upload/index.js +++ b/packages/media-utils/src/components/media-upload/index.js @@ -11,6 +11,8 @@ import { __ } from '@wordpress/i18n'; const { wp } = window; +const DEFAULT_EMPTY_GALLERY = []; + /** * Prepares the Featured Image toolbars and frames. * @@ -280,8 +282,9 @@ class MediaUpload extends Component { addToGallery = false, allowedTypes, multiple = false, - value = null, + value = DEFAULT_EMPTY_GALLERY, } = this.props; + // If the value did not changed there is no need to rebuild the frame, // we can continue to use the existing one. if ( value === this.lastGalleryValue ) { @@ -298,7 +301,7 @@ class MediaUpload extends Component { if ( addToGallery ) { currentState = 'gallery-library'; } else { - currentState = value ? 'gallery-edit' : 'gallery'; + currentState = value && value.length ? 'gallery-edit' : 'gallery'; } if ( ! this.GalleryDetailsMediaFrame ) { this.GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame(); @@ -313,7 +316,7 @@ class MediaUpload extends Component { state: currentState, multiple, selection, - editing: value ? true : false, + editing: value && value.length ? true : false, } ); wp.media.frame = this.frame; this.initializeListeners(); @@ -417,11 +420,7 @@ class MediaUpload extends Component { } openModal() { - if ( - this.props.gallery && - this.props.value && - this.props.value.length > 0 - ) { + if ( this.props.gallery ) { this.buildAndSetGalleryFrame(); } this.frame.open(); From 441e909e72b04cddab28dd8f0e8e3d2d07d876b4 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Fri, 20 Mar 2020 13:56:33 +0200 Subject: [PATCH 138/448] [Latest posts] Fixes the categories selector crash when category does not exist (#20960) * fixes the categories selector crash when category does not exist * fixes adding more than one category * more explicit return for when we don't set categories * Fix comment. * refactors code for clarity Co-authored-by: Daniel Richards --- .../block-library/src/latest-posts/edit.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 81a1b9f86537d2..746919eba3935c 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { get, invoke, isUndefined, pickBy } from 'lodash'; +import { get, includes, invoke, isUndefined, pickBy } from 'lodash'; import classnames from 'classnames'; /** @@ -119,11 +119,22 @@ class LatestPostsEdit extends Component { {} ); const selectCategories = ( tokens ) => { + const hasNoSuggestion = tokens.some( + ( token ) => typeof token === 'string' && ! suggestions[ token ] + ); + if ( hasNoSuggestion ) { + return; + } // Categories that are already will be objects, while new additions will be strings (the name). // allCategories nomalizes the array so that they are all objects. - const allCategories = tokens.map( ( token ) => - typeof token === 'string' ? suggestions[ token ] : token - ); + const allCategories = tokens.map( ( token ) => { + return typeof token === 'string' ? suggestions[ token ] : token; + } ); + // We do nothing if the category is not selected + // from suggestions. + if ( includes( allCategories, null ) ) { + return false; + } setAttributes( { categories: allCategories } ); }; From 83eb6400143af69fd47da5dc52fd1f8bb8c26843 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 20 Mar 2020 08:49:25 -0400 Subject: [PATCH 139/448] Framework: Migrate apiFetch middlewares initialization to compat (#19178) --- lib/client-assets.php | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index e90d5afa026d46..a7e3108a0f73fd 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -432,19 +432,6 @@ function gutenberg_register_packages_styles( &$styles ) { * @since 0.1.0 */ function gutenberg_enqueue_block_editor_assets() { - wp_add_inline_script( - 'wp-api-fetch', - sprintf( - 'wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );' . - 'wp.apiFetch.use( wp.apiFetch.nonceMiddleware );' . - 'wp.apiFetch.nonceEndpoint = "%s";' . - 'wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );', - ( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' ), - admin_url( 'admin-ajax.php?action=gutenberg_rest_nonce' ) - ), - 'after' - ); - if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) { $live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD; From f0e36362104e9be9e655ce8cfa9e5c6b45913602 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 20 Mar 2020 08:50:01 -0400 Subject: [PATCH 140/448] Edit Post: Make sidebar header focusable for button focus normalization (#21031) * Edit Post: Make sidebar header focusable for button focus normalization * E2E Tests: Update snapshots for sidebar markup --- .../plugins/__snapshots__/plugins-api.test.js.snap | 4 ++-- .../src/components/sidebar/sidebar-header/index.js | 9 +++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap index f823deeb3965f8..8d2ca2c2bd9a78 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap @@ -2,6 +2,6 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`; -exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
    (no title)
    Sidebar title plugin
    "`; diff --git a/packages/edit-post/src/components/sidebar/sidebar-header/index.js b/packages/edit-post/src/components/sidebar/sidebar-header/index.js index 84bd69b07e7048..748992e82b0426 100644 --- a/packages/edit-post/src/components/sidebar/sidebar-header/index.js +++ b/packages/edit-post/src/components/sidebar/sidebar-header/index.js @@ -23,6 +23,14 @@ const SidebarHeader = ( { children, className, closeLabel } ) => { ); const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); + // The `tabIndex` serves the purpose of normalizing browser behavior of + // button clicks and focus. Notably, without making the header focusable, a + // Button click would not trigger a focus event in macOS Firefox. Thus, when + // the sidebar is unmounted, the corresponding "focus return" behavior to + // shift focus back to the heading toolbar would not be run. + // + // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + return ( <>
    @@ -40,6 +48,7 @@ const SidebarHeader = ( { children, className, closeLabel } ) => { 'components-panel__header edit-post-sidebar-header', className ) } + tabIndex={ -1 } > { children }
    +
    ); diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js new file mode 100644 index 00000000000000..c762ffa60d8946 --- /dev/null +++ b/packages/edit-site/src/components/header/more-menu/index.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { DropdownMenu, MenuGroup } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import FeatureToggle from '../feature-toggle'; +import { moreVertical } from '@wordpress/icons'; + +const POPOVER_PROPS = { + className: 'edit-site-more-menu__content', + position: 'bottom left', +}; +const TOGGLE_PROPS = { + tooltipPosition: 'bottom', +}; + +const MoreMenu = () => ( + + { () => ( + + + + ) } + +); + +export default MoreMenu; diff --git a/packages/edit-site/src/components/header/more-menu/style.scss b/packages/edit-site/src/components/header/more-menu/style.scss new file mode 100644 index 00000000000000..6151efb026a189 --- /dev/null +++ b/packages/edit-site/src/components/header/more-menu/style.scss @@ -0,0 +1,29 @@ +.edit-site-more-menu { + margin-left: -4px; + + // the padding and margin of the more menu is intentionally non-standard + .components-button { + width: auto; + padding: 0 2px; + } + + @include break-small() { + margin-left: 4px; + + .components-button { + padding: 0 4px; + } + } +} + +.edit-site-more-menu__content .components-popover__content { + min-width: 260px; + + .components-dropdown-menu__menu { + padding: 0; + } +} + +.components-popover.edit-site-more-menu__content { + z-index: z-index(".components-popover.edit-site-more-menu__content"); +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 4bbd782ccf5975..89a9b929e9e351 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,5 +1,6 @@ @import "./components/block-editor/style.scss"; @import "./components/header/style.scss"; +@import "./components/header/more-menu/style.scss"; @import "./components/notices/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/template-switcher/style.scss"; From 82225c656de79e7d4bb8c1d47cc33dba7252beec Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Mon, 23 Mar 2020 11:58:24 +0100 Subject: [PATCH 146/448] Merge changes from mobile v1.24.0 to master (#21041) From a83cb80095795fe7998212f287a9a68a8e318a77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 23 Mar 2020 13:30:16 +0100 Subject: [PATCH 147/448] PlainText v2 (#21076) --- packages/block-editor/README.md | 4 ---- .../{editable => editable-text}/README.md | 16 +++++++------- .../src/components/editable-text/index.js | 22 +++++++++++++++++++ .../src/components/editable/index.js | 17 -------------- packages/block-editor/src/components/index.js | 1 - .../src/components/plain-text/index.js | 21 +++++++++++++----- packages/block-library/src/site-title/edit.js | 5 +++-- 7 files changed, 49 insertions(+), 37 deletions(-) rename packages/block-editor/src/components/{editable => editable-text}/README.md (86%) create mode 100644 packages/block-editor/src/components/editable-text/index.js delete mode 100644 packages/block-editor/src/components/editable/index.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 574e77a1ddce82..e9ea7ce70d1cc0 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -231,10 +231,6 @@ _Returns_ Undocumented declaration. -# **Editable** - -Renders an editable text input in which text formatting is not allowed. - # **FontSizePicker** Undocumented declaration. diff --git a/packages/block-editor/src/components/editable/README.md b/packages/block-editor/src/components/editable-text/README.md similarity index 86% rename from packages/block-editor/src/components/editable/README.md rename to packages/block-editor/src/components/editable-text/README.md index 38c7c89dc3ba5b..6696a43c7e05c0 100644 --- a/packages/block-editor/src/components/editable/README.md +++ b/packages/block-editor/src/components/editable-text/README.md @@ -1,4 +1,4 @@ -# `Editable` +# `EditableText` Renders an editable text input in which text formatting is not allowed. @@ -45,9 +45,9 @@ Renders an editable text input in which text formatting is not allowed. *Optional.* Called when the block can be removed. `forward` is true when the selection is expected to move to the next block, false to the previous block. -## Editable.Content +## EditableText.Content -`Text.Content` should be used in the `save` function of your block to correctly save text content. +`EditableText.Content` should be used in the `save` function of your block to correctly save text content. ## Example @@ -65,7 +65,7 @@ wp.blocks.registerBlockType( /* ... */, { }, edit: function( props ) { - return wp.element.createElement( wp.editor.Editable, { + return wp.element.createElement( wp.editor.EditableText, { className: props.className, value: props.attributes.content, onChange: function( content ) { @@ -75,7 +75,7 @@ wp.blocks.registerBlockType( /* ... */, { }, save: function( props ) { - return wp.element.createElement( wp.editor.Editable.Content, { + return wp.element.createElement( wp.editor.EditableText.Content, { value: props.attributes.content } ); } @@ -84,7 +84,7 @@ wp.blocks.registerBlockType( /* ... */, { {% ESNext %} ```js const { registerBlockType } = wp.blocks; -const { Editable } = wp.editor; +const { EditableText } = wp.editor; registerBlockType( /* ... */, { // ... @@ -98,7 +98,7 @@ registerBlockType( /* ... */, { edit( { className, attributes, setAttributes } ) { return ( - setAttributes( { content } ) } @@ -107,7 +107,7 @@ registerBlockType( /* ... */, { }, save( { attributes } ) { - return ; + return ; } } ); ``` diff --git a/packages/block-editor/src/components/editable-text/index.js b/packages/block-editor/src/components/editable-text/index.js new file mode 100644 index 00000000000000..62bb166efa8e6b --- /dev/null +++ b/packages/block-editor/src/components/editable-text/index.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import RichText from '../rich-text'; + +const EditableText = forwardRef( ( props, ref ) => { + return ; +} ); + +EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => { + return { value }; +}; + +/** + * Renders an editable text input in which text formatting is not allowed. + */ +export default EditableText; diff --git a/packages/block-editor/src/components/editable/index.js b/packages/block-editor/src/components/editable/index.js deleted file mode 100644 index 25fb330ea9a1e2..00000000000000 --- a/packages/block-editor/src/components/editable/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Internal dependencies - */ -import RichText from '../rich-text'; - -function Editable( props ) { - return ; -} - -Editable.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => { - return { value }; -}; - -/** - * Renders an editable text input in which text formatting is not allowed. - */ -export default Editable; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 3467ef2cee5c25..31365b395684a9 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -47,7 +47,6 @@ export { RichTextToolbarButton, __unstableRichTextInputEvent, } from './rich-text'; -export { default as Editable } from './editable'; export { default as ToolSelector } from './tool-selector'; export { default as URLInput } from './url-input'; export { default as URLInputButton } from './url-input/button'; diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js index a0a2aae23a2ce7..7421fe3be0932f 100644 --- a/packages/block-editor/src/components/plain-text/index.js +++ b/packages/block-editor/src/components/plain-text/index.js @@ -1,24 +1,35 @@ +/** + * External dependencies + */ +import TextareaAutosize from 'react-autosize-textarea'; +import classnames from 'classnames'; + /** * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; /** - * External dependencies + * Internal dependencies */ -import TextareaAutosize from 'react-autosize-textarea'; -import classnames from 'classnames'; +import EditableText from '../editable-text'; /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/plain-text/README.md */ -const PlainText = forwardRef( ( { onChange, className, ...props }, ref ) => { +const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => { + if ( __experimentalVersion === 2 ) { + return ; + } + + const { className, onChange, ...remainingProps } = props; + return ( onChange( event.target.value ) } - { ...props } + { ...remainingProps } /> ); } ); diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 382493e17c8c5d..55661ca1ae9b29 100644 --- a/packages/block-library/src/site-title/edit.js +++ b/packages/block-library/src/site-title/edit.js @@ -3,12 +3,13 @@ */ import { useEntityProp } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; -import { Editable } from '@wordpress/block-editor'; +import { PlainText } from '@wordpress/block-editor'; export default function SiteTitleEdit() { const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' ); return ( - Date: Mon, 23 Mar 2020 14:43:54 +0200 Subject: [PATCH 148/448] fix function name typo (#21078) --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 9d0fceaedddb34..8afba2b584d8cb 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -272,7 +272,7 @@ function block_core_navigation_build_html( $attributes, $block, $colors, $font_s // End anchor tag content. if ( $has_submenu ) { - $html .= core_block_navigation_build_html( $attributes, $block, $colors, $font_sizes ); + $html .= block_core_navigation_build_html( $attributes, $block, $colors, $font_sizes ); } $html .= '
    • '; From 9f0471e36aaf4a7172cc567494a8b9e4561861db Mon Sep 17 00:00:00 2001 From: jbinda Date: Mon, 23 Mar 2020 14:22:46 +0100 Subject: [PATCH 149/448] extract opacity for dimmed block to _.variables.scss and change its value from 0.2 to 1 (#21042) --- packages/base-styles/_variables.scss | 1 + .../block-editor/src/components/block-list/block.native.scss | 2 +- packages/editor/src/components/post-title/style.native.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 5de37b965294c7..106652e07e095d 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -80,6 +80,7 @@ $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint. $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) +$dimmed-opacity: 1; $block-edge-to-content: 16px; $block-selected-margin: 3px; diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index 4c6936e57f5458..85bae3528b130a 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -31,7 +31,7 @@ } .dimmed { - opacity: 0.2; + opacity: $dimmed-opacity; } .horizontalSpaceNone { diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss index 375d423a6cffd4..623ee573a92c79 100644 --- a/packages/editor/src/components/post-title/style.native.scss +++ b/packages/editor/src/components/post-title/style.native.scss @@ -8,6 +8,6 @@ } .dimmed { - opacity: 0.2; + opacity: $dimmed-opacity; } From d531729b841a95affaf6c9e6dca1c17ec1a1fe5f Mon Sep 17 00:00:00 2001 From: Marko Andrijasevic Date: Mon, 23 Mar 2020 15:50:10 +0100 Subject: [PATCH 150/448] Site Editor: add fullscreen close button (#20989) Add close button to site editor similar to the one that already exists in the post editor. --- package-lock.json | 1 + packages/edit-site/package.json | 1 + .../header/fullscreen-mode-close/index.js | 35 +++++++++++++++++++ .../header/fullscreen-mode-close/style.scss | 29 +++++++++++++++ .../edit-site/src/components/header/index.js | 2 ++ .../src/components/header/style.scss | 9 +++-- packages/edit-site/src/store/defaults.js | 2 +- packages/edit-site/src/style.scss | 1 + 8 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/index.js create mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/style.scss diff --git a/package-lock.json b/package-lock.json index 6938a356534e84..1909d81dad98f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10849,6 +10849,7 @@ "@wordpress/icons": "file:packages/icons", "@wordpress/media-utils": "file:packages/media-utils", "@wordpress/notices": "file:packages/notices", + "@wordpress/primitives": "file:packages/primitives", "@wordpress/url": "file:packages/url", "file-saver": "^2.0.2", "jszip": "^3.2.2", diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 26bd51227b58d3..3be57eb0b4ee70 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -35,6 +35,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/media-utils": "file:../media-utils", "@wordpress/notices": "file:../notices", + "@wordpress/primitives": "file:../primitives", "@wordpress/url": "file:../url", "file-saver": "^2.0.2", "jszip": "^3.2.2", diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js new file mode 100644 index 00000000000000..e5a14f30af66b0 --- /dev/null +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { Path, SVG } from '@wordpress/primitives'; +import { __ } from '@wordpress/i18n'; + +const wordPressLogo = ( + + + +); + +function FullscreenModeClose() { + const isActive = useSelect( ( select ) => { + return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' ); + }, [] ); + + if ( ! isActive ) { + return null; + } + + return ( +