diff --git a/.github/ISSUE_TEMPLATE/Bug_report.yml b/.github/ISSUE_TEMPLATE/Bug_report.yml index a104c70d1072f..df4e13eb58d91 100644 --- a/.github/ISSUE_TEMPLATE/Bug_report.yml +++ b/.github/ISSUE_TEMPLATE/Bug_report.yml @@ -1,6 +1,6 @@ name: Bug report description: Report a bug with the WordPress block editor or Gutenberg plugin -title: '' +title: '' body: - type: markdown attributes: @@ -49,10 +49,25 @@ body: validations: required: false - - type: checkboxes + - type: dropdown + id: existing attributes: - label: Pre-checks - description: Please check if the bug has already been reported by searching https://github.com/WordPress/gutenberg/issues and make sure the bug is not related to another plugin. + label: Please confirm that you have searched existing issues in the repo. + description: You can do this by searching https://github.com/WordPress/gutenberg/issues and making sure the bug is not related to another plugin. + multiple: true options: - - label: I have searched the existing issues. - - label: I have tested with all plugins deactivated except Gutenberg. + - 'Yes' + - 'No' + validations: + required: true + + - type: dropdown + id: plugins + attributes: + label: Please confirm that you have tested with all plugins deactivated except Gutenberg. + multiple: true + options: + - 'Yes' + - 'No' + validations: + required: true diff --git a/lib/navigation-page.php b/lib/navigation-page.php index 31133a90d7ee9..568fca8cb3bbf 100644 --- a/lib/navigation-page.php +++ b/lib/navigation-page.php @@ -41,7 +41,10 @@ function gutenberg_navigation_init( $hook ) { $settings = array_merge( gutenberg_get_default_block_editor_settings(), array( - 'blockNavMenus' => get_theme_support( 'block-nav-menus' ), + 'blockNavMenus' => false, + // We should uncomment the line below when the block-nav-menus feature becomes stable. + // @see https://github.com/WordPress/gutenberg/issues/34265. + /*'blockNavMenus' => get_theme_support( 'block-nav-menus' ),*/ ) ); $settings = gutenberg_experimental_global_styles_settings( $settings ); diff --git a/lib/navigation.php b/lib/navigation.php index 7bfe3416647c6..0a4ddab251efa 100644 --- a/lib/navigation.php +++ b/lib/navigation.php @@ -152,7 +152,10 @@ function gutenberg_output_block_nav_menu_item( $item_output, $item, $depth, $arg * @return array Updated menu items, sorted by each menu item's menu order. */ function gutenberg_remove_block_nav_menu_items( $menu_items ) { - if ( current_theme_supports( 'block-nav-menus' ) ) { + // We should uncomment the line below when the block-nav-menus feature becomes stable. + // @see https://github.com/WordPress/gutenberg/issues/34265. + /*if ( current_theme_supports( 'block-nav-menus' ) ) {*/ + if ( false ) { return $menu_items; } @@ -246,7 +249,10 @@ function gutenberg_convert_menu_items_to_blocks( * @return string|null Nav menu output to short-circuit with. */ function gutenberg_output_block_nav_menu( $output, $args ) { - if ( ! current_theme_supports( 'block-nav-menus' ) ) { + // We should uncomment the line below when the block-nav-menus feature becomes stable. + // @see https://github.com/WordPress/gutenberg/issues/34265. + /*if ( ! current_theme_supports( 'block-nav-menus' ) ) {*/ + if ( true ) { return null; } diff --git a/package-lock.json b/package-lock.json index d4899cfca2fa1..def5e7fc6713d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7824,12 +7824,12 @@ } }, "@react-native-community/masked-view": { - "version": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#d849a1c7ed318196394aa20c3ae329431435e01f", - "from": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#ed1c3812e4982075279a3dca952afaa243ea1b4c", + "from": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp-1" }, "@react-native-community/slider": { - "version": "git+https://github.com/wordpress-mobile/react-native-slider.git#af01fce403b2c559c704fc87654f363ed2aea9fd", - "from": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-slider.git#159fe48cb616cfbe684e06c2fbea5561f5c9cbfd", + "from": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp-1" }, "@react-native/assets": { "version": "1.0.0", @@ -18899,8 +18899,8 @@ "requires": { "@babel/runtime": "^7.13.10", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp", - "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp-1", + "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp-1", "@react-navigation/core": "5.12.0", "@react-navigation/native": "5.7.0", "@react-navigation/routers": "5.4.9", @@ -18923,23 +18923,23 @@ "jsdom-jscore-rn": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800", "node-fetch": "^2.6.0", "react-native": "0.64.0", - "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-2", - "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-3", + "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp-1", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", - "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#v1.0.1-wp", + "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#v1.0.1-wp-1", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#v0.8.8-wp", - "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp", + "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp-1", "react-native-modal": "^11.10.0", - "react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp", - "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp", + "react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp-1", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp-1", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp-1", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp", - "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp-1", + "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp-1", "react-native-url-polyfill": "^1.1.2", - "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp", - "react-native-webview": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp" + "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp-1", + "react-native-webview": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp-1" } }, "@wordpress/readable-js-assets-webpack-plugin": { @@ -53388,8 +53388,8 @@ } }, "react-native-gesture-handler": { - "version": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#0b284c3d26c2af4b99f9b631b9888df7e11502d0", - "from": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-2", + "version": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#f1ae186d300b8de79b03c143001552165bf04756", + "from": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-3", "requires": { "@egjs/hammerjs": "^2.0.17", "fbjs": "^3.0.0", @@ -53399,8 +53399,8 @@ } }, "react-native-get-random-values": { - "version": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#91140c28d87d6fa4f7303296ff2b6e214a078eed", - "from": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#fe4994554df3a16fb9401e28242e6c81a7726cc8", + "from": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp-1", "requires": { "fast-base64-decode": "^1.0.0" } @@ -53410,10 +53410,10 @@ "from": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3" }, "react-native-hsv-color-picker": { - "version": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#0b0b717c7f1c4f453922be8c574b0cf638b8f104", - "from": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#v1.0.1-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#c13b48ec55b049e4c59a8629521097c6938f7992", + "from": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git#v1.0.1-wp-1", "requires": { - "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp", + "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp-1", "tinycolor2": "^1.4.1" } }, @@ -53431,8 +53431,8 @@ } }, "react-native-linear-gradient": { - "version": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#875ec02beab4d1e97e5f4cca57ea3e436f4e8a1f", - "from": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#7526050edcd00d0ed84e8bd58986b8108e3b3962", + "from": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp-1" }, "react-native-modal": { "version": "11.10.0", @@ -53444,12 +53444,12 @@ } }, "react-native-prompt-android": { - "version": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#ea43e81db49aed3c284cd1decdbe2ac2fdabd58c", - "from": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#09b2fb1abde2cf2ae3c16b83852689ec2c86e76f", + "from": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp-1" }, "react-native-reanimated": { - "version": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1e482d83d83d5694dffa81f333ef570607d7b303", - "from": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#4f4aa06ad3088215e6bd681a5060ee5ca8ea7bf0", + "from": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp-1", "requires": { "fbjs": "^1.0.0" }, @@ -53485,8 +53485,8 @@ } }, "react-native-safe-area-context": { - "version": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#efdae6b42ecff783f9b30cdd794f87e335307aac", - "from": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#12c8baa168a60bc6c19924f6665416cda6293351", + "from": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp-1" }, "react-native-sass-transformer": { "version": "1.4.0", @@ -53506,12 +53506,12 @@ } }, "react-native-screens": { - "version": "git+https://github.com/wordpress-mobile/react-native-screens.git#218b47b8ce22ddcdb17f3278cbc2955a00e22a78", - "from": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp" + "version": "git+https://github.com/wordpress-mobile/react-native-screens.git#ff79e1dfb50d0a8de5fa2d5ce0322e7bb2b8948d", + "from": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp-1" }, "react-native-svg": { - "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#44af900ff8cd37a2c781029feca0cb18a22dddac", - "from": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#49e0d3b47158e188093f6bf9f76970e455988c2d", + "from": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp-1", "requires": { "css-select": "^2.0.2", "css-tree": "^1.0.0-alpha.37" @@ -53573,15 +53573,15 @@ } }, "react-native-video": { - "version": "git+https://github.com/wordpress-mobile/react-native-video.git#c12d84e7972f5f763c336237b2003f0e6717051c", - "from": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-video.git#8a286f65cdb85a496793f725e510bd0e084b46b5", + "from": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp-1", "requires": { "prop-types": "^15.5.10" } }, "react-native-webview": { - "version": "git+https://github.com/wordpress-mobile/react-native-webview.git#ef42e662f4642cb1c236fb0e24f6608e519cdad1", - "from": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp", + "version": "git+https://github.com/wordpress-mobile/react-native-webview.git#ba81efba75f88c436b24432acdca012a21c136a5", + "from": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp-1", "requires": { "escape-string-regexp": "2.0.0", "invariant": "2.2.4" diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index f82b7e38f0d2e..74f03a3545cdd 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -7,6 +7,7 @@ import { get } from 'lodash'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; +import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks'; /** * Internal dependencies @@ -49,13 +50,6 @@ const deprecatedFlags = { 'spacing.customPadding': ( settings ) => settings.enableCustomSpacing, }; -const PATHS_WITH_MERGE = { - 'color.gradients': true, - 'color.palette': true, - 'typography.fontFamilies': true, - 'typography.fontSizes': true, -}; - /** * Hook that retrieves the editor setting. * It works with nested objects using by finding the value at path. diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index fb85a6cdd6ce2..4b778ed3be541 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -14,7 +14,7 @@ $blocks-block__margin: 0.5em; padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions. text-align: center; text-decoration: none; - overflow-wrap: break-word; + word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here. box-sizing: border-box; &:hover, diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index c0a0946a1fa86..deb4fe67e7603 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -32,6 +32,10 @@ import { import { store as coreStore } from '@wordpress/core-data'; import { View } from '@wordpress/primitives'; +// The inline preview feature will be released progressible, for this reason +// the embed will only be considered previewable for the following providers list. +const PREVIEWABLE_PROVIDERS = [ 'youtube', 'twitter' ]; + const EmbedEdit = ( props ) => { const { attributes: { align, providerNameSlug, previewable, responsive, url }, @@ -243,7 +247,12 @@ const EmbedEdit = ( props ) => { label={ title } onFocus={ onFocus } preview={ preview } - previewable={ previewable } + previewable={ + previewable && + PREVIEWABLE_PROVIDERS.includes( + providerNameSlug + ) + } type={ type } url={ url } /> diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js index 7bea26775b634..8670b3c2d2266 100644 --- a/packages/block-library/src/embed/embed-preview.native.js +++ b/packages/block-library/src/embed/embed-preview.native.js @@ -123,19 +123,16 @@ const EmbedPreview = ( { disabled={ ! isSelected } > <View> - { - // eslint-disable-next-line no-undef - __DEV__ && previewable ? ( - embedWrapper - ) : ( - <EmbedNoPreview - label={ label } - icon={ icon } - isSelected={ isSelected } - onPress={ () => setIsCaptionSelected( false ) } - /> - ) - } + { previewable ? ( + embedWrapper + ) : ( + <EmbedNoPreview + label={ label } + icon={ icon } + isSelected={ isSelected } + onPress={ () => setIsCaptionSelected( false ) } + /> + ) } <BlockCaption accessibilityLabelCreator={ accessibilityLabelCreator } accessible diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index f416d1d73c80e..30ab048529ef2 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -21,6 +21,7 @@ .wp-block-embed { margin: 0 0 1em 0; + overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block. // Supply caption styles to embeds, even if the theme hasn't opted in. // Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes, diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss index 31a6989c39c81..e07cdb2f11193 100644 --- a/packages/block-library/src/heading/style.scss +++ b/packages/block-library/src/heading/style.scss @@ -4,6 +4,9 @@ h3, h4, h5, h6 { + // Break long strings of text without spaces so they don't overflow the block. + overflow-wrap: break-word; + &.has-background { padding: $block-bg-padding--v $block-bg-padding--h; } diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss index 04f579042196f..2bc29a349e4f4 100644 --- a/packages/block-library/src/list/style.scss +++ b/packages/block-library/src/list/style.scss @@ -1,4 +1,9 @@ -ol.has-background, -ul.has-background { - padding: $block-bg-padding--v $block-bg-padding--h; +ol, +ul { + // Break long strings of text without spaces so they don't overflow the block. + overflow-wrap: break-word; + + &.has-background { + padding: $block-bg-padding--v $block-bg-padding--h; + } } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index e85c873c700e1..ba4212cf67777 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -11,6 +11,13 @@ margin-left: 0; padding-left: 0; } + + // Revert any left/right margins. + // This also makes it work with classic theme auto margins. + .wp-block-navigation-item.wp-block { + margin-left: revert; + margin-right: revert; + } } // This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor. diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index bfccc9cb142bf..eef1422983540 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -208,19 +208,12 @@ /** * Margins - * @todo: refactor this to use gap. */ // Menu items with no background. -.wp-block-page-list, -.wp-block-page-list > .wp-block-navigation-item, -.wp-block-navigation__container > .wp-block-navigation-item { - margin: 0 2em 0 0; - - // Margin of right-most margin should be zero, for right aligned or justified items. - &:last-child { - margin-right: 0; - } +.wp-block-navigation .wp-block-page-list, +.wp-block-navigation__container { + gap: 0.5em 2em; } // Menu items with background. @@ -228,15 +221,9 @@ // That way if padding is set in theme.json, it still wins. // https://css-tricks.com/almanac/selectors/w/where/ .wp-block-navigation:where(.has-background) { - .wp-block-page-list, - .wp-block-page-list > .wp-block-navigation-item, - .wp-block-navigation__container > .wp-block-navigation-item { - margin: 0 0.5em 0 0; - - // Don't show right margin on the last child. - &:last-child { - margin: 0; - } + .wp-block-navigation .wp-block-page-list, + .wp-block-navigation__container { + gap: 0 0.5em; } } @@ -357,7 +344,6 @@ align-items: flex-end; .wp-block-navigation-item { - margin-right: 0; justify-content: flex-end; } } @@ -524,6 +510,8 @@ position: relative; opacity: 1; visibility: visible; + height: auto; + width: auto; padding: 0 0 0 32px; border: none; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index eb320b1853c2a..23e4de9c320ca 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -28,6 +28,11 @@ font-style: normal; } +p { + // Break long strings of text without spaces so they don't overflow the block. + overflow-wrap: break-word; +} + // Prevent the dropcap from breaking out of the box when a background is applied. p.has-drop-cap.has-background { overflow: hidden; diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss index 3466ce56fa6c0..e1c98fa5ec0c4 100644 --- a/packages/block-library/src/pullquote/style.scss +++ b/packages/block-library/src/pullquote/style.scss @@ -2,6 +2,7 @@ margin: 0 0 1em 0; padding: 3em 0; text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified. + overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block. p, blockquote, diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index e6a6dfea5a485..e10ccb18bec7c 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -1,4 +1,6 @@ .wp-block-quote { + overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block. + &.is-style-large, &.is-large { margin-bottom: 1em; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 5564b339ec4a4..e60d868fc2227 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -126,3 +126,10 @@ export const __EXPERIMENTAL_ELEMENTS = { h5: 'h5', h6: 'h6', }; + +export const __EXPERIMENTAL_PATHS_WITH_MERGE = { + 'color.gradients': true, + 'color.palette': true, + 'typography.fontFamilies': true, + 'typography.fontSizes': true, +}; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 394fddaa5de6e..e567cde21e74b 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -159,4 +159,5 @@ export { default as node } from './node'; export { __EXPERIMENTAL_STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS, + __EXPERIMENTAL_PATHS_WITH_MERGE, } from './constants'; diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 752245898aa45..03643e9e484c9 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - Fixed RTL styles in `Flex` component ([#33729](https://github.com/WordPress/gutenberg/pull/33729)). +### Internal + +- Renamed `PolymorphicComponent*` types to `WordPressComponent*` ([#34330](https://github.com/WordPress/gutenberg/pull/34330)) + ## 16.0.0 (2021-08-23) ### Breaking Change diff --git a/packages/components/src/base-field/hook.js b/packages/components/src/base-field/hook.js index 14cb90c9e97eb..e0eaf01dc5c9c 100644 --- a/packages/components/src/base-field/hook.js +++ b/packages/components/src/base-field/hook.js @@ -23,7 +23,7 @@ import { useCx } from '../utils/hooks/use-cx'; /** @typedef {import('../flex/types').FlexProps & OwnProps} Props */ /** - * @param {import('../ui/context').PolymorphicComponentProps<Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<Props, 'div'>} props */ export function useBaseField( props ) { const { diff --git a/packages/components/src/card/card-body/component.js b/packages/components/src/card/card-body/component.js index 455ddc85ef5b2..73e2e337b4beb 100644 --- a/packages/components/src/card/card-body/component.js +++ b/packages/components/src/card/card-body/component.js @@ -7,8 +7,8 @@ import { View } from '../../view'; import { useCardBody } from './hook'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function CardBody( props, forwardedRef ) { const { isScrollable, ...otherProps } = useCardBody( props ); diff --git a/packages/components/src/card/card-body/hook.js b/packages/components/src/card/card-body/hook.js index f7fdab10a0304..2e62181b60984 100644 --- a/packages/components/src/card/card-body/hook.js +++ b/packages/components/src/card/card-body/hook.js @@ -11,7 +11,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props */ export function useCardBody( props ) { const { diff --git a/packages/components/src/card/card-divider/component.js b/packages/components/src/card/card-divider/component.js index d3cce90bc02ba..058cc341633c2 100644 --- a/packages/components/src/card/card-divider/component.js +++ b/packages/components/src/card/card-divider/component.js @@ -6,8 +6,8 @@ import { Divider } from '../../divider'; import { useCardDivider } from './hook'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props + * @param {import('react').Ref<any>} forwardedRef */ function CardDivider( props, forwardedRef ) { const dividerProps = useCardDivider( props ); diff --git a/packages/components/src/card/card-divider/hook.js b/packages/components/src/card/card-divider/hook.js index 06961607c7884..091f99a12d079 100644 --- a/packages/components/src/card/card-divider/hook.js +++ b/packages/components/src/card/card-divider/hook.js @@ -11,7 +11,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props */ export function useCardDivider( props ) { const { className, ...otherProps } = useContextSystem( diff --git a/packages/components/src/card/card-footer/component.js b/packages/components/src/card/card-footer/component.js index b5ef215eb3964..0b0fa967a7d6c 100644 --- a/packages/components/src/card/card-footer/component.js +++ b/packages/components/src/card/card-footer/component.js @@ -6,8 +6,8 @@ import { Flex } from '../../flex'; import { useCardFooter } from './hook'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function CardFooter( props, forwardedRef ) { const footerProps = useCardFooter( props ); diff --git a/packages/components/src/card/card-footer/hook.js b/packages/components/src/card/card-footer/hook.js index 772d0fc175b40..9c5ba8da75532 100644 --- a/packages/components/src/card/card-footer/hook.js +++ b/packages/components/src/card/card-footer/hook.js @@ -11,7 +11,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props */ export function useCardFooter( props ) { const { diff --git a/packages/components/src/card/card-header/component.js b/packages/components/src/card/card-header/component.js index 621448d82856a..d08a2e3438ea1 100644 --- a/packages/components/src/card/card-header/component.js +++ b/packages/components/src/card/card-header/component.js @@ -6,8 +6,8 @@ import { Flex } from '../../flex'; import { useCardHeader } from './hook'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function CardHeader( props, forwardedRef ) { const headerProps = useCardHeader( props ); diff --git a/packages/components/src/card/card-header/hook.js b/packages/components/src/card/card-header/hook.js index 56a9b99972cab..3c72511d6bff4 100644 --- a/packages/components/src/card/card-header/hook.js +++ b/packages/components/src/card/card-header/hook.js @@ -11,7 +11,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props */ export function useCardHeader( props ) { const { diff --git a/packages/components/src/card/card-media/hook.js b/packages/components/src/card/card-media/hook.js index 266e112090af1..ec42aabc09155 100644 --- a/packages/components/src/card/card-media/hook.js +++ b/packages/components/src/card/card-media/hook.js @@ -11,7 +11,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props */ export function useCardMedia( props ) { const { className, ...otherProps } = useContextSystem( props, 'CardMedia' ); diff --git a/packages/components/src/card/card/component.js b/packages/components/src/card/card/component.js index 9f8bcbde6d9bf..45afbc28de136 100644 --- a/packages/components/src/card/card/component.js +++ b/packages/components/src/card/card/component.js @@ -20,8 +20,8 @@ import CONFIG from '../../utils/config-values'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function Card( props, forwardedRef ) { const { diff --git a/packages/components/src/card/card/hook.js b/packages/components/src/card/card/hook.js index b0e2d1a32325d..d5a5cf0b47841 100644 --- a/packages/components/src/card/card/hook.js +++ b/packages/components/src/card/card/hook.js @@ -13,10 +13,10 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props */ function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) { - /**@type {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} */ + /**@type {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} */ const propsToReturn = { ...otherProps, }; @@ -40,7 +40,7 @@ function useDeprecatedProps( { elevation, isElevated, ...otherProps } ) { } /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props */ export function useCard( props ) { const { diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx index 7204132d707ce..085d2f5f012b7 100644 --- a/packages/components/src/divider/component.tsx +++ b/packages/components/src/divider/component.tsx @@ -9,13 +9,16 @@ import type { Ref } from 'react'; /** * Internal dependencies */ -import { contextConnect, useContextSystem } from '../ui/context'; -import type { PolymorphicComponentProps } from '../ui/context'; +import { + contextConnect, + useContextSystem, + WordPressComponentProps, +} from '../ui/context'; import { DividerView } from './styles'; import type { Props } from './types'; function Divider( - props: PolymorphicComponentProps< Props, 'hr', false >, + props: WordPressComponentProps< Props, 'hr', false >, forwardedRef: Ref< any > ) { const contextProps = useContextSystem( props, 'Divider' ); diff --git a/packages/components/src/elevation/hook.js b/packages/components/src/elevation/hook.js index 24f31fef0f753..9256a2b2d99ba 100644 --- a/packages/components/src/elevation/hook.js +++ b/packages/components/src/elevation/hook.js @@ -30,7 +30,7 @@ export function getBoxShadow( value ) { } /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export function useElevation( props ) { const { diff --git a/packages/components/src/flex/flex-block/hook.js b/packages/components/src/flex/flex-block/hook.js index 82d0e2abb6e9d..deed81d8f28f7 100644 --- a/packages/components/src/flex/flex-block/hook.js +++ b/packages/components/src/flex/flex-block/hook.js @@ -5,7 +5,7 @@ import { useContextSystem } from '../../ui/context'; import { useFlexItem } from '../flex-item'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexBlockProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props */ export function useFlexBlock( props ) { const otherProps = useContextSystem( props, 'FlexBlock' ); diff --git a/packages/components/src/flex/flex-item/hook.js b/packages/components/src/flex/flex-item/hook.js index 136661aa7dcfb..2c38e550db32c 100644 --- a/packages/components/src/flex/flex-item/hook.js +++ b/packages/components/src/flex/flex-item/hook.js @@ -12,7 +12,7 @@ import * as styles from '../styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexItemProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props */ export function useFlexItem( props ) { const { diff --git a/packages/components/src/flex/flex/component.js b/packages/components/src/flex/flex/component.js index 70c4e448985e0..31983e0bc4871 100644 --- a/packages/components/src/flex/flex/component.js +++ b/packages/components/src/flex/flex/component.js @@ -7,8 +7,8 @@ import { FlexContext } from './../context'; import { View } from '../../view'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function Flex( props, forwardedRef ) { const { children, isColumn, ...otherProps } = useFlex( props ); diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index 35c3c7b10de23..d0826099ec112 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -20,8 +20,8 @@ import { useCx, rtl } from '../../utils'; /** * - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props - * @return {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed. + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props + * @return {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed. */ function useDeprecatedProps( { isReversed, ...otherProps } ) { if ( typeof isReversed !== 'undefined' ) { @@ -39,7 +39,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) { } /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FlexProps, 'div'>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props */ export function useFlex( props ) { const { diff --git a/packages/components/src/flyout/flyout-content/component.js b/packages/components/src/flyout/flyout-content/component.js index 9c0b41124d317..943fe0d60c81f 100644 --- a/packages/components/src/flyout/flyout-content/component.js +++ b/packages/components/src/flyout/flyout-content/component.js @@ -7,8 +7,8 @@ import { contextConnect, useContextSystem } from '../../ui/context'; /** * - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').ContentProps, 'div', false>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props + * @param {import('react').Ref<any>} forwardedRef */ function FlyoutContent( props, forwardedRef ) { const { diff --git a/packages/components/src/flyout/flyout/component.js b/packages/components/src/flyout/flyout/component.js index e1d8de1388856..6d9c4a46153ea 100644 --- a/packages/components/src/flyout/flyout/component.js +++ b/packages/components/src/flyout/flyout/component.js @@ -21,8 +21,8 @@ import { useFlyout } from './hook'; /** * - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div', false>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props + * @param {import('react').Ref<any>} forwardedRef */ function Flyout( props, forwardedRef ) { const { diff --git a/packages/components/src/flyout/flyout/hook.js b/packages/components/src/flyout/flyout/hook.js index 4cdb029901975..d917c1011f4b9 100644 --- a/packages/components/src/flyout/flyout/hook.js +++ b/packages/components/src/flyout/flyout/hook.js @@ -10,7 +10,7 @@ import { usePopoverState } from 'reakit'; import { useContextSystem } from '../../ui/context'; /** - * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div', false>} props + * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props */ export function useFlyout( props ) { const { diff --git a/packages/components/src/grid/hook.js b/packages/components/src/grid/hook.js index f2c80c49bd745..b38b609f99b48 100644 --- a/packages/components/src/grid/hook.js +++ b/packages/components/src/grid/hook.js @@ -18,7 +18,7 @@ import CONFIG from '../utils/config-values'; import { useCx } from '../utils/hooks/use-cx'; /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export default function useGrid( props ) { const { diff --git a/packages/components/src/h-stack/hook.js b/packages/components/src/h-stack/hook.js index ceadb162e307b..dd4795776f953 100644 --- a/packages/components/src/h-stack/hook.js +++ b/packages/components/src/h-stack/hook.js @@ -8,7 +8,7 @@ import { getValidChildren } from '../ui/utils/get-valid-children'; /** * - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export function useHStack( props ) { const { diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index c967b9f0d4ac7..238e4e244c0f1 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -1,8 +1,7 @@ /** * Internal dependencies */ -import { useContextSystem } from '../ui/context'; -import type { PolymorphicComponentProps } from '../ui/context'; +import { useContextSystem, WordPressComponentProps } from '../ui/context'; import type { Props as TextProps } from '../text/types'; import { useText } from '../text'; import { getHeadingFontSize } from '../ui/utils/font-size'; @@ -50,7 +49,7 @@ export interface HeadingProps extends Omit< TextProps, 'size' > { } export function useHeading( - props: PolymorphicComponentProps< HeadingProps, 'h1' > + props: WordPressComponentProps< HeadingProps, 'h1' > ) { const { as: asProp, level = 2, ...otherProps } = useContextSystem( props, diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx index 02455733de03c..88596a8853e07 100644 --- a/packages/components/src/input-control/input-field.tsx +++ b/packages/components/src/input-control/input-field.tsx @@ -22,7 +22,7 @@ import { UP, DOWN, ENTER } from '@wordpress/keycodes'; /** * Internal dependencies */ -import type { PolymorphicComponentProps } from '../ui/context'; +import type { WordPressComponentProps } from '../ui/context'; import { useDragCursor } from './utils'; import { Input } from './styles/input-control-styles'; import { useInputControlStateReducer } from './reducer/reducer'; @@ -53,7 +53,7 @@ function InputField( value: valueProp, type, ...props - }: PolymorphicComponentProps< InputFieldProps, 'input', false >, + }: WordPressComponentProps< InputFieldProps, 'input', false >, ref: Ref< HTMLInputElement > ) { const { diff --git a/packages/components/src/input-control/label.tsx b/packages/components/src/input-control/label.tsx index 537c335373b5d..ea214707b012b 100644 --- a/packages/components/src/input-control/label.tsx +++ b/packages/components/src/input-control/label.tsx @@ -3,7 +3,7 @@ */ import { VisuallyHidden } from '../visually-hidden'; import { Label as BaseLabel } from './styles/input-control-styles'; -import type { PolymorphicComponentProps } from '../ui/context'; +import type { WordPressComponentProps } from '../ui/context'; import type { InputControlLabelProps } from './types'; export default function Label( { @@ -11,7 +11,7 @@ export default function Label( { hideLabelFromVision, htmlFor, ...props -}: PolymorphicComponentProps< InputControlLabelProps, 'label', false > ) { +}: WordPressComponentProps< InputControlLabelProps, 'label', false > ) { if ( ! children ) return null; if ( hideLabelFromVision ) { diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index bbd518ccb4822..c6471fa96ead5 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -9,7 +9,7 @@ import type { CSSProperties, ReactNode } from 'react'; /** * Internal dependencies */ -import type { PolymorphicComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import { Flex, FlexItem } from '../../flex'; import { Text } from '../../text'; import { COLORS, rtl } from '../../utils'; @@ -251,7 +251,7 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >` `; export const Label = ( - props: PolymorphicComponentProps< + props: WordPressComponentProps< { labelPosition?: LabelPosition; children: ReactNode }, 'label', false diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index e166ffd6219ba..971075e56a5ee 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -15,7 +15,7 @@ import type { useDrag } from 'react-use-gesture'; */ import type { StateReducer } from './reducer/state'; import type { FlexProps } from '../flex/types'; -import type { PolymorphicComponentProps } from '../ui/context'; +import type { WordPressComponentProps } from '../ui/context'; export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge'; @@ -65,9 +65,9 @@ export interface InputBaseProps extends BaseProps, FlexProps { export interface InputControlProps extends Omit< InputBaseProps, 'children' | 'isFocused' >, /** - * The `prefix` prop in `PolymorphicComponentProps< InputFieldProps, 'input', false >` comes from the + * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from - * `PolymorphicComponentProps< InputFieldProps, 'input', false >` in order that `InputBaseProps[ 'prefix' ]` + * `WordPressComponentProps< InputFieldProps, 'input', false >` in order that `InputBaseProps[ 'prefix' ]` * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up * with an unresolvable type. * @@ -75,7 +75,7 @@ export interface InputControlProps * for InputField are passed through. */ Omit< - PolymorphicComponentProps< InputFieldProps, 'input', false >, + WordPressComponentProps< InputFieldProps, 'input', false >, 'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused' > { __unstableStateReducer?: InputFieldProps[ 'stateReducer' ]; diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx index 2b77ec041e055..e58eae897658c 100644 --- a/packages/components/src/item-group/item-group/component.tsx +++ b/packages/components/src/item-group/item-group/component.tsx @@ -7,14 +7,14 @@ import type { Ref } from 'react'; /** * Internal dependencies */ -import { contextConnect, PolymorphicComponentProps } from '../../ui/context'; +import { contextConnect, WordPressComponentProps } from '../../ui/context'; import { useItemGroup } from './hook'; import { ItemGroupContext, useItemGroupContext } from '../context'; import { View } from '../../view'; import type { ItemGroupProps } from '../types'; function ItemGroup( - props: PolymorphicComponentProps< ItemGroupProps, 'div' >, + props: WordPressComponentProps< ItemGroupProps, 'div' >, forwardedRef: Ref< any > ) { const { diff --git a/packages/components/src/item-group/item-group/hook.ts b/packages/components/src/item-group/item-group/hook.ts index 90bb63bae3959..f8ec3740e721c 100644 --- a/packages/components/src/item-group/item-group/hook.ts +++ b/packages/components/src/item-group/item-group/hook.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { useContextSystem, PolymorphicComponentProps } from '../../ui/context'; +import { useContextSystem, WordPressComponentProps } from '../../ui/context'; /** * Internal dependencies @@ -11,7 +11,7 @@ import { useCx } from '../../utils/hooks/use-cx'; import type { ItemGroupProps } from '../types'; export function useItemGroup( - props: PolymorphicComponentProps< ItemGroupProps, 'div' > + props: WordPressComponentProps< ItemGroupProps, 'div' > ) { const { className, diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx index 6a0eac90a93c9..18f6ae0eb9953 100644 --- a/packages/components/src/item-group/item/component.tsx +++ b/packages/components/src/item-group/item/component.tsx @@ -9,11 +9,11 @@ import type { Ref } from 'react'; */ import type { ItemProps } from '../types'; import { useItem } from './hook'; -import { contextConnect, PolymorphicComponentProps } from '../../ui/context'; +import { contextConnect, WordPressComponentProps } from '../../ui/context'; import { View } from '../../view'; function Item( - props: PolymorphicComponentProps< ItemProps, 'div' >, + props: WordPressComponentProps< ItemProps, 'div' >, forwardedRef: Ref< any > ) { const { role, wrapperClassName, ...otherProps } = useItem( props ); diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts index ac7ad6356ceb3..2ff7574751098 100644 --- a/packages/components/src/item-group/item/hook.ts +++ b/packages/components/src/item-group/item/hook.ts @@ -7,15 +7,13 @@ import type { ElementType } from 'react'; /** * Internal dependencies */ -import { useContextSystem, PolymorphicComponentProps } from '../../ui/context'; +import { useContextSystem, WordPressComponentProps } from '../../ui/context'; import * as styles from '../styles'; import { useItemGroupContext } from '../context'; import { useCx } from '../../utils/hooks/use-cx'; import type { ItemProps } from '../types'; -export function useItem( - props: PolymorphicComponentProps< ItemProps, 'div' > -) { +export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) { const { isAction = false, as: asProp, diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js b/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js index cdd478a958ef0..87a9ae0813fd0 100644 --- a/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js +++ b/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js @@ -5,21 +5,22 @@ import { Text, Linking } from 'react-native'; /** * WordPress dependencies */ -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './styles.scss'; function FooterMessageLink( { href, value } ) { + const textStyle = usePreferredColorSchemeStyle( + styles.footerMessageLink, + styles.footerMessageLinkDark + ); return ( - <Text - style={ styles.footerMessageLink } - onPress={ () => Linking.openURL( href ) } - > + <Text style={ textStyle } onPress={ () => Linking.openURL( href ) }> { value } </Text> ); } -export default withPreferredColorScheme( FooterMessageLink ); +export default FooterMessageLink; diff --git a/packages/components/src/scrollable/hook.js b/packages/components/src/scrollable/hook.js index bcfab8ef7c927..ce8b01e14724d 100644 --- a/packages/components/src/scrollable/hook.js +++ b/packages/components/src/scrollable/hook.js @@ -12,7 +12,7 @@ import { useCx } from '../utils/hooks/use-cx'; /* eslint-disable jsdoc/valid-types */ /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ /* eslint-enable jsdoc/valid-types */ export function useScrollable( props ) { diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx index db0f7917c33d7..e3514f7b67f08 100644 --- a/packages/components/src/select-control/index.tsx +++ b/packages/components/src/select-control/index.tsx @@ -21,7 +21,7 @@ import InputBase from '../input-control/input-base'; import type { InputBaseProps, LabelPosition } from '../input-control/types'; import { Select, DownArrowWrapper } from './styles/select-control-styles'; import type { Size } from './types'; -import type { PolymorphicComponentProps } from '../ui/context'; +import type { WordPressComponentProps } from '../ui/context'; function useUniqueId( idProp?: string ) { const instanceId = useInstanceId( SelectControl ); @@ -71,7 +71,7 @@ function SelectControl( prefix, suffix, ...props - }: PolymorphicComponentProps< SelectControlProps, 'select', false >, + }: WordPressComponentProps< SelectControlProps, 'select', false >, ref: Ref< HTMLSelectElement > ) { const [ isFocused, setIsFocused ] = useState( false ); diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts index dda1a7d40cf0a..c833ec90d896a 100644 --- a/packages/components/src/spacer/hook.ts +++ b/packages/components/src/spacer/hook.ts @@ -6,8 +6,7 @@ import { css } from '@emotion/react'; /** * Internal dependencies */ -import { useContextSystem } from '../ui/context'; -import type { PolymorphicComponentProps } from '../ui/context'; +import { useContextSystem, WordPressComponentProps } from '../ui/context'; import { space } from '../ui/utils/space'; import { useCx } from '../utils/hooks/use-cx'; import type { Props } from './types'; @@ -15,7 +14,7 @@ import type { Props } from './types'; const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > => typeof o !== 'undefined' && o !== null; -export function useSpacer( props: PolymorphicComponentProps< Props, 'div' > ) { +export function useSpacer( props: WordPressComponentProps< Props, 'div' > ) { const { className, margin, diff --git a/packages/components/src/surface/hook.js b/packages/components/src/surface/hook.js index a25e6d118c6f3..65d5937a47b92 100644 --- a/packages/components/src/surface/hook.js +++ b/packages/components/src/surface/hook.js @@ -11,7 +11,7 @@ import * as styles from './styles'; import { useCx } from '../utils/hooks/use-cx'; /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export function useSurface( props ) { const { diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js index 8c3bb3f31521c..70ccee41f629a 100644 --- a/packages/components/src/text/hook.js +++ b/packages/components/src/text/hook.js @@ -23,7 +23,7 @@ import { getLineHeight } from './get-line-height'; import { useCx } from '../utils/hooks/use-cx'; /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'span'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props */ export default function useText( props ) { const { diff --git a/packages/components/src/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/component.tsx index 2ab3df7d10b63..1f6758b8e0f7c 100644 --- a/packages/components/src/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/component.tsx @@ -18,7 +18,7 @@ import { useMergeRefs, useInstanceId } from '@wordpress/compose'; import { contextConnect, useContextSystem, - PolymorphicComponentProps, + WordPressComponentProps, } from '../ui/context'; import { View } from '../view'; import BaseControl from '../base-control'; @@ -31,7 +31,7 @@ import ToggleGroupControlContext from './toggle-group-control-context'; const noop = () => {}; function ToggleGroupControl( - props: PolymorphicComponentProps< ToggleGroupControlProps, 'input' >, + props: WordPressComponentProps< ToggleGroupControlProps, 'input' >, forwardedRef: import('react').Ref< any > ) { const { diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option.tsx index 96b1f4692c732..53bc37a6462ab 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control-option.tsx @@ -10,7 +10,7 @@ import { useInstanceId } from '@wordpress/compose'; import { contextConnect, useContextSystem, - PolymorphicComponentProps, + WordPressComponentProps, } from '../ui/context'; import ToggleGroupControlButton from './toggle-group-control-button'; import type { @@ -42,7 +42,7 @@ function getShowSeparator( } function ToggleGroupControlOption( - props: PolymorphicComponentProps< ToggleGroupControlOptionProps, 'input' >, + props: WordPressComponentProps< ToggleGroupControlOptionProps, 'input' >, forwardedRef: import('react').Ref< any > ) { const toggleGroupControlContext = useToggleGroupControlContext(); diff --git a/packages/components/src/truncate/hook.js b/packages/components/src/truncate/hook.js index cd9f313da0e95..64e45c1bed5ea 100644 --- a/packages/components/src/truncate/hook.js +++ b/packages/components/src/truncate/hook.js @@ -17,7 +17,7 @@ import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils'; import { useCx } from '../utils/hooks/use-cx'; /** - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'span'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props */ export default function useTruncate( props ) { const { diff --git a/packages/components/src/ui/color-picker/component.tsx b/packages/components/src/ui/color-picker/component.tsx index 5fa862a07ef9a..977826c6ccf95 100644 --- a/packages/components/src/ui/color-picker/component.tsx +++ b/packages/components/src/ui/color-picker/component.tsx @@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n'; import { useContextSystem, contextConnect, - PolymorphicComponentProps, + WordPressComponentProps, } from '../context'; import { HStack } from '../../h-stack'; import Button from '../../button'; @@ -53,7 +53,7 @@ const getSafeColor = ( }; const ColorPicker = ( - props: PolymorphicComponentProps< ColorPickerProps, 'div', false >, + props: WordPressComponentProps< ColorPickerProps, 'div', false >, forwardedRef: Ref< any > ) => { const { diff --git a/packages/components/src/ui/context/context-connect.js b/packages/components/src/ui/context/context-connect.js index df11228b1e17e..5dcbb174dbdd0 100644 --- a/packages/components/src/ui/context/context-connect.js +++ b/packages/components/src/ui/context/context-connect.js @@ -24,12 +24,12 @@ import { getStyledClassNameFromKey } from './get-styled-class-name-from-key'; * The hope is that we can improve render performance by removing functional * component wrappers. * - * @template {import('./polymorphic-component').PolymorphicComponentProps<{}, any, any>} P + * @template {import('./wordpress-component').WordPressComponentProps<{}, any, any>} P * @param {(props: P, ref: import('react').Ref<any>) => JSX.Element | null} Component The component to register into the Context system. * @param {string} namespace The namespace to register the component under. * @param {Object} options * @param {boolean} [options.memo=false] - * @return {import('./polymorphic-component').PolymorphicComponentFromProps<P>} The connected PolymorphicComponent + * @return {import('./wordpress-component').WordPressComponentFromProps<P>} The connected WordPressComponent */ export function contextConnect( Component, namespace, options = {} ) { /* eslint-enable jsdoc/valid-types */ @@ -65,7 +65,7 @@ export function contextConnect( Component, namespace, options = {} ) { // @ts-ignore internal property WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = uniq( mergedNamespace ); - // @ts-ignore PolymorphicComponent property + // @ts-ignore WordPressComponent property WrappedComponent.selector = `.${ getStyledClassNameFromKey( namespace ) }`; // @ts-ignore diff --git a/packages/components/src/ui/context/index.js b/packages/components/src/ui/context/index.js index e19795d7b7a13..54694e47304ff 100644 --- a/packages/components/src/ui/context/index.js +++ b/packages/components/src/ui/context/index.js @@ -8,4 +8,4 @@ export { getConnectNamespace, } from './context-connect'; export { useContextSystem } from './use-context-system'; -export * from './polymorphic-component'; +export * from './wordpress-component'; diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/wordpress-component.ts similarity index 79% rename from packages/components/src/ui/context/polymorphic-component.ts rename to packages/components/src/ui/context/wordpress-component.ts index fae6cc41418db..2bf4372ec6b6e 100644 --- a/packages/components/src/ui/context/polymorphic-component.ts +++ b/packages/components/src/ui/context/wordpress-component.ts @@ -11,7 +11,7 @@ import type * as React from 'react'; * by `ComponentPropsWithRef`. The context is that components should require the `children` * prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817). */ -export type PolymorphicComponentProps< +export type WordPressComponentProps< P, T extends React.ElementType, IsPolymorphic extends boolean = true @@ -23,17 +23,17 @@ export type PolymorphicComponentProps< } : { as?: never } ); -export type PolymorphicComponent< +export type WordPressComponent< T extends React.ElementType, O, IsPolymorphic extends boolean > = { < TT extends React.ElementType >( - props: PolymorphicComponentProps< O, TT, IsPolymorphic > & + props: WordPressComponentProps< O, TT, IsPolymorphic > & ( IsPolymorphic extends true ? { as: TT } : { as: never } ) ): JSX.Element | null; ( - props: PolymorphicComponentProps< O, T, IsPolymorphic > + props: WordPressComponentProps< O, T, IsPolymorphic > ): JSX.Element | null; displayName?: string; /** @@ -47,8 +47,8 @@ export type PolymorphicComponent< selector: `.${ string }`; }; -export type PolymorphicComponentFromProps< +export type WordPressComponentFromProps< Props -> = Props extends PolymorphicComponentProps< infer P, infer T, infer I > - ? PolymorphicComponent< T, P, I > +> = Props extends WordPressComponentProps< infer P, infer T, infer I > + ? WordPressComponent< T, P, I > : never; diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js index b1b82c581cdfd..d291d436c11d4 100644 --- a/packages/components/src/ui/control-group/component.js +++ b/packages/components/src/ui/control-group/component.js @@ -11,8 +11,8 @@ import { useControlGroup } from './hook'; import { contextConnect } from '../context'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function ControlGroup( props, forwardedRef ) { const { diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js index a30b745f94b9a..bc1f5d34c08b3 100644 --- a/packages/components/src/ui/control-group/hook.js +++ b/packages/components/src/ui/control-group/hook.js @@ -8,7 +8,7 @@ import * as styles from './styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export function useControlGroup( props ) { const { diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index e376cc18f726c..c7f10444fab79 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/packages/components/src/ui/control-label/hook.js @@ -8,7 +8,7 @@ import * as styles from './styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'label'>} props + * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label'>} props */ export function useControlLabel( props ) { const { diff --git a/packages/components/src/ui/form-group/form-group-content.js b/packages/components/src/ui/form-group/form-group-content.js index a84f5fa32faab..21b95ff906823 100644 --- a/packages/components/src/ui/form-group/form-group-content.js +++ b/packages/components/src/ui/form-group/form-group-content.js @@ -12,7 +12,7 @@ import FormGroupHelp from './form-group-help'; import FormGroupLabel from './form-group-label'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupContentProps, 'label'>} props + * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label'>} props */ function FormGroupContent( { alignLabel, diff --git a/packages/components/src/ui/form-group/form-group-label.js b/packages/components/src/ui/form-group/form-group-label.js index 8d6c282018cad..01e9f9be3c51e 100644 --- a/packages/components/src/ui/form-group/form-group-label.js +++ b/packages/components/src/ui/form-group/form-group-label.js @@ -10,7 +10,7 @@ import { ControlLabel } from '../control-label'; import { VisuallyHidden } from '../../visually-hidden'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupLabelProps, 'label'>} props + * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label'>} props * @return {JSX.Element | null} The form group's label. */ function FormGroupLabel( { children, id, labelHidden = false, ...props } ) { diff --git a/packages/components/src/ui/form-group/form-group.js b/packages/components/src/ui/form-group/form-group.js index 9885aa63d2447..fc9eae01325f4 100644 --- a/packages/components/src/ui/form-group/form-group.js +++ b/packages/components/src/ui/form-group/form-group.js @@ -8,8 +8,8 @@ import FormGroupContent from './form-group-content'; import { useFormGroup } from './use-form-group'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function FormGroup( props, forwardedRef ) { const { contentProps, horizontal, ...otherProps } = useFormGroup( props ); diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js index 3b73fc69f5f4e..eebc5ae350639 100644 --- a/packages/components/src/ui/form-group/use-form-group.js +++ b/packages/components/src/ui/form-group/use-form-group.js @@ -11,7 +11,7 @@ import * as styles from './form-group-styles'; import { useCx } from '../../utils/hooks/use-cx'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupProps, 'div'>} props + * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props */ export function useFormGroup( props ) { const { diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx index 911aced391c14..f5bbb6a5d791e 100644 --- a/packages/components/src/ui/shortcut/component.tsx +++ b/packages/components/src/ui/shortcut/component.tsx @@ -7,8 +7,11 @@ import type { Ref } from 'react'; /** * Internal dependencies */ -import { useContextSystem, contextConnect } from '../context'; -import type { PolymorphicComponentProps } from '../context'; +import { + useContextSystem, + contextConnect, + WordPressComponentProps, +} from '../context'; import { View } from '../../view'; export interface ShortcutDescription { @@ -22,7 +25,7 @@ export interface Props { } function Shortcut( - props: PolymorphicComponentProps< Props, 'span' >, + props: WordPressComponentProps< Props, 'span' >, forwardedRef: Ref< any > ): JSX.Element | null { const { diff --git a/packages/components/src/ui/spinner/component.js b/packages/components/src/ui/spinner/component.js index 12cb30f0d712b..c5b45fccf0b8a 100644 --- a/packages/components/src/ui/spinner/component.js +++ b/packages/components/src/ui/spinner/component.js @@ -16,8 +16,8 @@ import { COLORS } from '../../utils/colors-values'; /** * - * @param {import('../context').PolymorphicComponentProps<Props, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../context').WordPressComponentProps<Props, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function Spinner( props, forwardedRef ) { const { diff --git a/packages/components/src/ui/tooltip/component.js b/packages/components/src/ui/tooltip/component.js index f618f4633d48f..78ab9132407e5 100644 --- a/packages/components/src/ui/tooltip/component.js +++ b/packages/components/src/ui/tooltip/component.js @@ -18,8 +18,8 @@ import TooltipContent from './content'; import { TooltipShortcut } from './styles'; /** - * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function Tooltip( props, forwardedRef ) { const { diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js index 08c51288dae23..b2d533f8288c0 100644 --- a/packages/components/src/ui/tooltip/content.js +++ b/packages/components/src/ui/tooltip/content.js @@ -17,8 +17,8 @@ const { TooltipPopoverView } = styles; /** * - * @param {import('../context').PolymorphicComponentProps<import('./types').ContentProps, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function TooltipContent( props, forwardedRef ) { const { children, className, ...otherProps } = useContextSystem( diff --git a/packages/components/src/ui/utils/create-component.tsx b/packages/components/src/ui/utils/create-component.tsx index f9bd8e6d7d3ed..8e451cffef11c 100644 --- a/packages/components/src/ui/utils/create-component.tsx +++ b/packages/components/src/ui/utils/create-component.tsx @@ -10,14 +10,14 @@ import type { As } from 'reakit-utils/types'; */ import { contextConnect } from '../context'; import type { - PolymorphicComponentProps, - PolymorphicComponentFromProps, + WordPressComponentProps, + WordPressComponentFromProps, } from '../context'; import { View } from '../../view'; interface Options< A extends As, - P extends PolymorphicComponentProps< {}, A, any > + P extends WordPressComponentProps< {}, A, any > > { as: A; name: string; @@ -37,13 +37,13 @@ interface Options< */ export const createComponent = < A extends As, - P extends PolymorphicComponentProps< {}, A, any > + P extends WordPressComponentProps< {}, A, any > >( { as, name, useHook, memo = false, -}: Options< A, P > ): PolymorphicComponentFromProps< P > => { +}: Options< A, P > ): WordPressComponentFromProps< P > => { function Component( props: P, forwardedRef: Ref< any > ) { const otherProps = useHook( props ); diff --git a/packages/components/src/ui/utils/test/create-component.js b/packages/components/src/ui/utils/test/create-component.js index 01dbd7b991797..970a774badf29 100644 --- a/packages/components/src/ui/utils/test/create-component.js +++ b/packages/components/src/ui/utils/test/create-component.js @@ -15,7 +15,7 @@ import { createComponent } from '../create-component'; describe( 'createComponent', () => { /** - * @param {import('../context').PolymorphicComponentProps<{}, 'output'>} props + * @param {import('../context').WordPressComponentProps<{}, 'output'>} props */ const useHook = ( props ) => ( { ...props, 'data-hook-test-prop': true } ); const name = 'Output'; diff --git a/packages/components/src/v-stack/hook.js b/packages/components/src/v-stack/hook.js index 0dcd4d33c739a..1852da47bad09 100644 --- a/packages/components/src/v-stack/hook.js +++ b/packages/components/src/v-stack/hook.js @@ -6,7 +6,7 @@ import { useHStack } from '../h-stack'; /** * - * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props */ export function useVStack( props ) { const { expanded = false, ...otherProps } = useContextSystem( diff --git a/packages/components/src/view/component.js b/packages/components/src/view/component.js index 095576a79e886..4d7808807bd1f 100644 --- a/packages/components/src/view/component.js +++ b/packages/components/src/view/component.js @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; * } * ``` * - * @type {import('../ui/context').PolymorphicComponent<'div', { children?: import('react').ReactNode }, true>} + * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>} */ // @ts-ignore const View = styled.div``; diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js index 01b9e65ddc511..ba0096d3a8bd8 100644 --- a/packages/components/src/visually-hidden/component.js +++ b/packages/components/src/visually-hidden/component.js @@ -6,8 +6,8 @@ import { visuallyHidden } from './styles'; import { View } from '../view'; /** - * @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props - * @param {import('react').Ref<any>} forwardedRef + * @param {import('../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef */ function VisuallyHidden( props, forwardedRef ) { const { style: styleProp, ...contextProps } = useContextSystem( diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index 32767f2877843..b6ee9fad3f1dc 100644 --- a/packages/components/src/z-stack/component.tsx +++ b/packages/components/src/z-stack/component.tsx @@ -14,7 +14,7 @@ import { isValidElement } from '@wordpress/element'; */ import { getValidChildren } from '../ui/utils/get-valid-children'; import { contextConnect, useContextSystem } from '../ui/context'; -import type { PolymorphicComponentProps } from '../ui/context'; +import type { WordPressComponentProps } from '../ui/context'; import { ZStackView, ZStackChildView } from './styles'; export interface ZStackProps { @@ -43,7 +43,7 @@ export interface ZStackProps { } function ZStack( - props: PolymorphicComponentProps< ZStackProps, 'div' >, + props: WordPressComponentProps< ZStackProps, 'div' >, forwardedRef: Ref< any > ) { const { diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js index 2fc8e51a27924..104cf63348a08 100644 --- a/packages/core-data/src/actions.js +++ b/packages/core-data/src/actions.js @@ -7,7 +7,6 @@ import { v4 as uuid } from 'uuid'; /** * WordPress dependencies */ -import { controls } from '@wordpress/data'; import { __unstableAwaitPromise } from '@wordpress/data-controls'; import triggerFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; diff --git a/packages/edit-navigation/README.md b/packages/edit-navigation/README.md index 1ee150967f869..1a405fdd4f1e2 100644 --- a/packages/edit-navigation/README.md +++ b/packages/edit-navigation/README.md @@ -41,6 +41,8 @@ Moreover, when the navigation is rendered on the front of the site the system co ### Block-based Mode +**Important**: block-based mode has been temporarily ***disabled*** until it becomes stable. So, if a theme declares support for the `block-nav-menus` feature it will not affect the frontend. + If desired, themes are able to opt into _rendering_ complete block-based menus using the Navigation Editor. This allows for arbitrarily complex navigation block structures to be used in an existing theme whilst still ensuring the navigation data is still _saved_ to the existing (post type powered) Menus system. Themes can opt into this behaviour by declaring: diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index ba883f330ea26..81a809dbf4bee 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -6,6 +6,7 @@ import { get, find, forEach, camelCase, isString } from 'lodash'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; +import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks'; /** * Internal dependencies */ @@ -91,13 +92,6 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { return getPresetMetadataFromStyleProperty.MAP[ styleProperty ]; } -const PATHS_WITH_MERGE = { - 'color.gradients': true, - 'color.palette': true, - 'typography.fontFamilies': true, - 'typography.fontSizes': true, -}; - export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 8c9d7f8089bcf..470a8fdf729ef 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -89,10 +89,15 @@ class NativeEditorProvider extends Component { } componentDidMount() { - const { capabilities, updateSettings } = this.props; + const { + capabilities, + updateSettings, + galleryWithImageBlocks, + } = this.props; updateSettings( { ...capabilities, + ...{ __unstableGalleryWithImageBlocks: galleryWithImageBlocks }, ...this.getThemeColors( this.props ), } ); @@ -142,8 +147,13 @@ class NativeEditorProvider extends Component { this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings( ( editorSettings ) => { - const themeColors = this.getThemeColors( editorSettings ); - updateSettings( themeColors ); + updateSettings( { + ...{ + __unstableGalleryWithImageBlocks: + editorSettings.galleryWithImageBlocks, + }, + ...this.getThemeColors( editorSettings ), + } ); } ); diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle index 7eb7ed9b71f62..674620ad78035 100644 --- a/packages/react-native-aztec/android/build.gradle +++ b/packages/react-native-aztec/android/build.gradle @@ -1,7 +1,5 @@ buildscript { ext { - gradlePluginVersion = '4.0.2' - kotlinVersion = '1.5.20' supportLibVersion = '29.0.2' tagSoupVersion = '1.2.1' glideVersion = '3.7.0' @@ -14,30 +12,14 @@ buildscript { aztecVersion = 'v1.3.45' willPublishReactNativeAztecBinary = properties["willPublishReactNativeAztecBinary"]?.toBoolean() ?: false } - - repositories { - maven { - url 'https://a8c-libs.s3.amazonaws.com/android' - content { - includeGroup 'com.automattic.android' - } - } - jcenter() - google() - } - - dependencies { - classpath "com.android.tools.build:gradle:$gradlePluginVersion" - classpath 'com.github.dcendents:android-maven-gradle-plugin:2.1' - classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" - classpath 'com.automattic.android:publish-to-s3:0.6.1' - } } -apply plugin: 'com.android.library' -apply plugin: 'kotlin-android' -apply plugin: 'com.github.dcendents.android-maven' -apply plugin: 'com.automattic.android.publish-to-s3' +plugins { + id "com.android.library" + id "org.jetbrains.kotlin.android" + id "maven-publish" + id "com.automattic.android.publish-to-s3" +} // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' @@ -105,8 +87,6 @@ dependencies { api "com.github.wordpress-mobile.WordPress-Aztec-Android:glide-loader:$aztecVersion" implementation "org.wordpress:utils:$wordpressUtilsVersion" - implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion" - implementation 'androidx.legacy:legacy-support-v4:1.0.0' implementation 'androidx.gridlayout:gridlayout:1.0.0' implementation 'androidx.cardview:cardview:1.0.0' diff --git a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar index 5c2d1cf016b38..f3d88b1c2faf2 100644 Binary files a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar differ diff --git a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties index 4e1cc9db6b597..af7be50b1015c 100644 --- a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties +++ b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties @@ -1,5 +1,5 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-all.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists diff --git a/packages/react-native-aztec/android/gradlew b/packages/react-native-aztec/android/gradlew index 8e25e6c19d574..2fe81a7d95e4f 100755 --- a/packages/react-native-aztec/android/gradlew +++ b/packages/react-native-aztec/android/gradlew @@ -125,8 +125,8 @@ if $darwin; then GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" fi -# For Cygwin, switch paths to Windows format before running java -if $cygwin ; then +# For Cygwin or MSYS, switch paths to Windows format before running java +if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then APP_HOME=`cygpath --path --mixed "$APP_HOME"` CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` JAVACMD=`cygpath --unix "$JAVACMD"` @@ -154,19 +154,19 @@ if $cygwin ; then else eval `echo args$i`="\"$arg\"" fi - i=$((i+1)) + i=`expr $i + 1` done case $i in - (0) set -- ;; - (1) set -- "$args0" ;; - (2) set -- "$args0" "$args1" ;; - (3) set -- "$args0" "$args1" "$args2" ;; - (4) set -- "$args0" "$args1" "$args2" "$args3" ;; - (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; - (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; - (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; - (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; - (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + 0) set -- ;; + 1) set -- "$args0" ;; + 2) set -- "$args0" "$args1" ;; + 3) set -- "$args0" "$args1" "$args2" ;; + 4) set -- "$args0" "$args1" "$args2" "$args3" ;; + 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; esac fi @@ -175,14 +175,9 @@ save () { for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done echo " " } -APP_ARGS=$(save "$@") +APP_ARGS=`save "$@"` # Collect all arguments for the java command, following the shell quoting and substitution rules eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" -# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong -if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then - cd "$(dirname "$0")" -fi - exec "$JAVACMD" "$@" diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle index b589da9e83838..afe8958a55e2a 100644 --- a/packages/react-native-aztec/android/settings.gradle +++ b/packages/react-native-aztec/android/settings.gradle @@ -1,2 +1,22 @@ -rootProject.name = '@wordpress_react-native-aztec' +pluginManagement { + gradle.ext.kotlinVersion = '1.5.20' + + plugins { + id "com.android.library" version "4.2.2" + id "org.jetbrains.kotlin.android" version gradle.ext.kotlinVersion + id "com.automattic.android.publish-to-s3" version "0.6.1" + } + repositories { + maven { + url 'https://a8c-libs.s3.amazonaws.com/android' + content { + includeGroup "com.automattic.android" + includeGroup "com.automattic.android.publish-to-s3" + } + } + gradlePluginPortal() + google() + } +} +rootProject.name = '@wordpress_react-native-aztec' diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index b9a6fc0612e9b..560c66362615f 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -2,14 +2,11 @@ buildscript { ext { willPublishReactNativeBridgeBinary = properties["willPublishReactNativeBridgeBinary"]?.toBoolean() ?: false } - repositories { - jcenter() - google() - } +} - dependencies { - classpath 'com.android.tools.build:gradle:4.0.2' - } +plugins { + id "com.android.library" apply false + id "org.jetbrains.kotlin.android" apply false } allprojects { diff --git a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar index 5c2d1cf016b38..f3d88b1c2faf2 100644 Binary files a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar differ diff --git a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties index 4e1cc9db6b597..af7be50b1015c 100644 --- a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties +++ b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties @@ -1,5 +1,5 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-all.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists diff --git a/packages/react-native-bridge/android/gradlew b/packages/react-native-bridge/android/gradlew index 8e25e6c19d574..2fe81a7d95e4f 100755 --- a/packages/react-native-bridge/android/gradlew +++ b/packages/react-native-bridge/android/gradlew @@ -125,8 +125,8 @@ if $darwin; then GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" fi -# For Cygwin, switch paths to Windows format before running java -if $cygwin ; then +# For Cygwin or MSYS, switch paths to Windows format before running java +if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then APP_HOME=`cygpath --path --mixed "$APP_HOME"` CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` JAVACMD=`cygpath --unix "$JAVACMD"` @@ -154,19 +154,19 @@ if $cygwin ; then else eval `echo args$i`="\"$arg\"" fi - i=$((i+1)) + i=`expr $i + 1` done case $i in - (0) set -- ;; - (1) set -- "$args0" ;; - (2) set -- "$args0" "$args1" ;; - (3) set -- "$args0" "$args1" "$args2" ;; - (4) set -- "$args0" "$args1" "$args2" "$args3" ;; - (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; - (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; - (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; - (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; - (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + 0) set -- ;; + 1) set -- "$args0" ;; + 2) set -- "$args0" "$args1" ;; + 3) set -- "$args0" "$args1" "$args2" ;; + 4) set -- "$args0" "$args1" "$args2" "$args3" ;; + 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; esac fi @@ -175,14 +175,9 @@ save () { for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done echo " " } -APP_ARGS=$(save "$@") +APP_ARGS=`save "$@"` # Collect all arguments for the java command, following the shell quoting and substitution rules eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" -# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong -if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then - cd "$(dirname "$0")" -fi - exec "$JAVACMD" "$@" diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle index 70068e4484d0b..efd431242f302 100644 --- a/packages/react-native-bridge/android/react-native-bridge/build.gradle +++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle @@ -1,28 +1,10 @@ -buildscript { - ext.kotlinVersion = '1.5.20' - - repositories { - maven { - url 'https://a8c-libs.s3.amazonaws.com/android' - content { - includeGroup "com.automattic.android" - } - } - jcenter() - google() - } - - dependencies { - classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" - classpath 'com.android.tools.build:gradle:4.0.2' - classpath 'com.automattic.android:publish-to-s3:0.6.1' - } +plugins { + id "com.android.library" + id "org.jetbrains.kotlin.android" + id "maven-publish" + id "com.automattic.android.publish-to-s3" } -apply plugin: 'com.android.library' -apply plugin: 'kotlin-android' -apply plugin: 'com.automattic.android.publish-to-s3' - // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' @@ -39,8 +21,6 @@ android { defaultConfig { minSdkVersion 21 targetSdkVersion 29 - versionCode 1 - versionName "1.0" buildConfigField "boolean", "SHOULD_ATTACH_JS_BUNDLE", willPublishReactNativeBridgeBinary.toString() } @@ -66,15 +46,14 @@ android { } repositories { - google() - jcenter() - maven { url "https://jitpack.io" } maven { url "https://a8c-libs.s3.amazonaws.com/android" } maven { url "https://a8c-libs.s3.amazonaws.com/android/hermes-mirror" } + maven { url "https://jitpack.io" } + google() + jcenter() } dependencies { - implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlinVersion" // For animated GIF support implementation 'com.facebook.fresco:animated-gif:2.0.0' implementation 'com.google.android.material:material:1.2.1' @@ -98,7 +77,6 @@ dependencies { implementation "com.github.wordpress-mobile:react-native-prompt-android:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-prompt-android', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-webview:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-webview', 'dependencies')}" runtimeOnly "org.wordpress-mobile:hermes-release-mirror:0.64.0" - } else { api 'com.facebook.react:react-native:+' api project(':@wordpress_react-native-aztec') diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt index a08225d57d422..5b35db5335f8d 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt @@ -41,6 +41,10 @@ data class GutenbergProps @JvmOverloads constructor( ?.let { putSerializable(PROP_STYLES, it) } theme.getSerializable(PROP_FEATURES) ?.let { putSerializable(PROP_FEATURES, it) } + theme.getSerializable(PROP_IS_FSE_THEME) + ?.let { putSerializable(PROP_IS_FSE_THEME, it) } + theme.getSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS) + ?.let { putSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS, it) } } } @@ -77,6 +81,8 @@ data class GutenbergProps @JvmOverloads constructor( private const val PROP_GRADIENTS = "gradients" private const val PROP_STYLES = "rawStyles" private const val PROP_FEATURES = "rawFeatures" + private const val PROP_IS_FSE_THEME = "isFSETheme" + private const val PROP_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks" const val PROP_CAPABILITIES = "capabilities" const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock" diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_check_24px.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_check_24px.xml index 4c1cdcec4b516..a9d291df5f4a4 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_check_24px.xml +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_check_24px.xml @@ -4,6 +4,6 @@ android:viewportWidth="24" android:viewportHeight="24"> <path - android:fillColor="@color/white" + android:fillColor="@android:color/white" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/> </vector> diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_close_24px.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_close_24px.xml index a922efedc06eb..a20716a20f105 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_close_24px.xml +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ic_close_24px.xml @@ -4,6 +4,6 @@ android:viewportWidth="24" android:viewportHeight="24"> <path - android:fillColor="@color/white" + android:fillColor="@android:color/white" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/> </vector> diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml index 2dcf133412d64..bd8c8503f89d0 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml @@ -17,7 +17,7 @@ android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/status_bar_color" - app:titleTextColor="@color/white" + app:titleTextColor="@android:color/white" app:contentInsetEnd="@dimen/toolbar_content_offset_end" app:contentInsetLeft="@dimen/toolbar_content_offset" app:contentInsetRight="@dimen/toolbar_content_offset_end" @@ -36,7 +36,7 @@ android:id="@+id/foreground_view" android:layout_width="match_parent" android:layout_height="match_parent" - android:background="@color/white" + android:background="@android:color/white" android:gravity="center" android:paddingStart="@dimen/foreground_view_padding_large" android:paddingEnd="@dimen/foreground_view_padding_large" @@ -49,7 +49,7 @@ android:layout_marginBottom="@dimen/foreground_view_padding_medium" android:layout_marginTop="@dimen/foreground_view_padding_medium" android:src="@drawable/ube_failed" - android:contentDescription="@null" + android:contentDescription="@null" android:visibility="gone" /> <TextView diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle index 842a451eebb2c..3af9320c3d3b1 100644 --- a/packages/react-native-bridge/android/settings.gradle +++ b/packages/react-native-bridge/android/settings.gradle @@ -1,3 +1,24 @@ +pluginManagement { + gradle.ext.kotlinVersion = '1.5.20' + + plugins { + id "com.android.library" version "4.2.2" + id "org.jetbrains.kotlin.android" version gradle.ext.kotlinVersion + id "com.automattic.android.publish-to-s3" version "0.6.1" + } + repositories { + maven { + url 'https://a8c-libs.s3.amazonaws.com/android' + content { + includeGroup "com.automattic.android" + includeGroup "com.automattic.android.publish-to-s3" + } + } + gradlePluginPortal() + google() + } +} + rootProject.name = '@wordpress_react-native-bridge' include ':react-native-bridge' @@ -36,4 +57,3 @@ if (hasProperty("willPublishReactNativeBridgeBinary")) { include ':react-native-webview' project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-webview/android') } - diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift index 778967c66685b..b926c36cb3bf3 100644 --- a/packages/react-native-bridge/ios/Gutenberg.swift +++ b/packages/react-native-bridge/ios/Gutenberg.swift @@ -199,6 +199,7 @@ public class Gutenberg: NSObject { private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] { var settingsUpdates = [String : Any]() settingsUpdates["isFSETheme"] = editorSettings?.isFSETheme ?? false + settingsUpdates["galleryWithImageBlocks"] = editorSettings?.galleryWithImageBlocks ?? false if let rawStyles = editorSettings?.rawStyles { settingsUpdates["rawStyles"] = rawStyles diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift index 166b257fd3319..d2cb398a36bc9 100644 --- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift +++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift @@ -77,6 +77,7 @@ public extension GutenbergBridgeDataSource { public protocol GutenbergEditorSettings { var isFSETheme: Bool { get } + var galleryWithImageBlocks: Bool { get } var rawStyles: String? { get } var rawFeatures: String? { get } var colors: [[String: String]]? { get } diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 663f41c835aed..0d8aec88a78d5 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,7 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased - +- [**] Enable embed preview for a list of providers (for now only YouTube and Twitter) [#34446] ## 1.60.1 - [*] RNmobile: Fix the cancel button on Block Variation Picker / Columns Block. [#34249] - [*] Column block: Fix Android close button alignment. [#34332] diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle index 363a59321690c..e05a9dc625f31 100644 --- a/packages/react-native-editor/android/build.gradle +++ b/packages/react-native-editor/android/build.gradle @@ -1,6 +1,6 @@ buildscript { ext { - gradlePluginVersion = '4.0.2' + gradlePluginVersion = '4.2.2' kotlinVersion = '1.5.20' buildToolsVersion = "29.0.3" minSdkVersion = 21 diff --git a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar index 5c2d1cf016b38..f3d88b1c2faf2 100644 Binary files a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar differ diff --git a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties index 4e1cc9db6b597..af7be50b1015c 100644 --- a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties +++ b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties @@ -1,5 +1,5 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-all.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists diff --git a/packages/react-native-editor/android/gradlew.bat b/packages/react-native-editor/android/gradlew.bat index 9109989e3cbf6..24467a141f791 100644 --- a/packages/react-native-editor/android/gradlew.bat +++ b/packages/react-native-editor/android/gradlew.bat @@ -29,9 +29,6 @@ if "%DIRNAME%" == "" set DIRNAME=. set APP_BASE_NAME=%~n0 set APP_HOME=%DIRNAME% -@rem Resolve any "." and ".." in APP_HOME to make it shorter. -for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi - @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index d3c62ed83f649..b98ae5b1ac0b4 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -31,8 +31,8 @@ "dependencies": { "@babel/runtime": "^7.13.10", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp", - "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#v0.1.11-wp-1", + "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#v3.0.2-wp-1", "@react-navigation/core": "5.12.0", "@react-navigation/native": "5.7.0", "@react-navigation/routers": "5.4.9", @@ -55,23 +55,23 @@ "jsdom-jscore-rn": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800", "node-fetch": "^2.6.0", "react-native": "0.64.0", - "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-2", - "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#1.10.1-wp-3", + "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#v1.4.0-wp-1", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", - "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker#v1.0.1-wp", + "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker#v1.0.1-wp-1", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#v0.8.8-wp", - "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp", + "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#v2.5.6-wp-1", "react-native-modal": "^11.10.0", - "react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp", - "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp", + "react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#v1.0.0-wp-1", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#1.9.0-wp-1", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#v3.2.0-wp-1", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp", - "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#2.9.0-wp-1", + "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#v9.13.7-wp-1", "react-native-url-polyfill": "^1.1.2", - "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp", - "react-native-webview": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp" + "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#5.0.2-wp-1", + "react-native-webview": "git+https://github.com/wordpress-mobile/react-native-webview.git#v11.6.5-wp-1" }, "publishConfig": { "access": "public" diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js index c8b8fd8b152ab..3fd18a1674648 100644 --- a/packages/react-native-editor/src/index.js +++ b/packages/react-native-editor/src/index.js @@ -83,6 +83,7 @@ const setupInitHooks = () => { gradients, rawStyles, rawFeatures, + galleryWithImageBlocks, } = props; if ( initialData === undefined && __DEV__ ) { @@ -110,6 +111,7 @@ const setupInitHooks = () => { gradients, rawStyles, rawFeatures, + galleryWithImageBlocks, }; } ); diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index adaf85dc90af5..3ff2f06c87ae3 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- Bring back support for SVG files in CSS ([#34394](https://github.com/WordPress/gutenberg/pull/34394)). It wasn't correctly migrated when integrating webpack v5. + ## 18.0.0 (2021-08-23) ### Breaking Changes diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 86ed99807d881..5bbc0a43e18b9 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -184,9 +184,15 @@ const config = { }, { test: /\.svg$/, + issuer: /\.jsx?$/, use: [ '@svgr/webpack', 'url-loader' ], type: 'javascript/auto', }, + { + test: /\.svg$/, + issuer: /\.(sc|sa|c)ss$/, + type: 'asset/inline', + }, { test: /\.(bmp|png|jpe?g|gif)$/i, type: 'asset/resource',