From 073e57e07ede1f286ab21419505eb6276a194999 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 08:19:52 +0200 Subject: [PATCH 01/16] TRY: Letter-spacing --- lib/block-supports/typography.php | 13 +++- lib/class-wp-theme-json.php | 5 ++ lib/experimental-default-theme.json | 1 + packages/block-editor/src/components/index.js | 1 + .../letter-spacing-control/index.js | 75 +++++++++++++++++++ .../block-editor/src/hooks/letter-spacing.js | 73 ++++++++++++++++++ packages/block-editor/src/hooks/typography.js | 8 ++ .../block-library/src/site-tagline/block.json | 3 +- .../block-library/src/site-title/block.json | 3 +- packages/blocks/src/api/constants.js | 4 + 10 files changed, 183 insertions(+), 3 deletions(-) create mode 100644 packages/block-editor/src/components/letter-spacing-control/index.js create mode 100644 packages/block-editor/src/hooks/letter-spacing.js diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 6ad07caae3487..4412f929d0652 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -21,13 +21,15 @@ function gutenberg_register_typography_support( $block_type ) { $has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false ); $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); + $has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false ); $has_typography_support = $has_font_size_support || $has_font_weight_support || $has_font_style_support || $has_line_height_support || $has_text_transform_support - || $has_text_decoration_support; + || $has_text_decoration_support + || $has_letter_spacing_support; if ( ! $block_type->attributes ) { $block_type->attributes = array(); @@ -71,6 +73,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false ); $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false ); $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); + $has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false ); // Font Size. if ( $has_font_size_support ) { @@ -145,6 +148,14 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } + // Letter-spacing. + if ( $has_letter_spacing_support ) { + $letter_spacing_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' ); + if ( $letter_spacing_style ) { + $styles[] = $letter_spacing_style; + } + } + $attributes = array(); if ( ! empty( $classes ) ) { $attributes['class'] = implode( ' ', $classes ); diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index bc22890793ac0..1ec295a06dc77 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -92,6 +92,7 @@ class WP_Theme_JSON { 'lineHeight' => null, 'textDecoration' => null, 'textTransform' => null, + 'letterSpacing' => null, ), ); @@ -124,6 +125,7 @@ class WP_Theme_JSON { 'customFontWeight' => null, 'customTextDecorations' => null, 'customTextTransforms' => null, + 'customLetterSpacing' => null, ), 'custom' => null, 'layout' => null, @@ -269,6 +271,9 @@ class WP_Theme_JSON { 'text-transform' => array( 'value' => array( 'typography', 'textTransform' ), ), + 'letter-spacing' => array( + 'value' => array( 'typography', 'letterSpacing' ), + ), ); /** diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 15cb1fc256702..052e396aa734f 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -180,6 +180,7 @@ "customFontWeight": true, "customTextTransforms": true, "customTextDecorations": true, + "customLetterSpacing": true, "fontSizes": [ { "name": "Small", diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 758b92dcc37ed..a4cb37e658505 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -44,6 +44,7 @@ export { default as __experimentalGradientPickerControl } from './gradient-picke export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel'; export { default as __experimentalFontAppearanceControl } from './font-appearance-control'; export { default as __experimentalFontFamilyControl } from './font-family'; +export { default as __experimentalLetterSpacingControl } from './letter-spacing-control'; export { default as __experimentalColorGradientControl } from './colors-gradients/control'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; export { default as __experimentalImageSizeControl } from './image-size-control'; diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js new file mode 100644 index 0000000000000..31e6ee087b9bf --- /dev/null +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -0,0 +1,75 @@ +/** + * WordPress dependencies + */ +import { + Button, + Flex, + FlexItem, + FlexBlock, + BaseControl, + __experimentalUnitControl as UnitControl +} from '@wordpress/components'; +import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +const isWeb = Platform.OS === 'web'; + +const CSS_UNITS = [ + { + value: 'px', + label: isWeb ? 'px' : __( 'Pixels (px)' ), + default: '2', + }, + { + value: 'em', + label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ), + default: '.2', + }, + { + value: 'rem', + label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ), + default: '.2', + }, +]; + +/** + * Control for letter-spacing. + * + * @param {Object} props Component props. + * @param {string} props.value Currently selected letter-spacing. + * @param {Function} props.onChange Handles change in letter-spacing selection. + * @return {WPElement} Letter-spacing control. + */ +export default function LetterSpacingControl( { value, onChange } ) { + return ( + + + + + + + + + + + ); +} diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js new file mode 100644 index 0000000000000..0b4b2d844fab0 --- /dev/null +++ b/packages/block-editor/src/hooks/letter-spacing.js @@ -0,0 +1,73 @@ +/** + * WordPress dependencies + */ +import { hasBlockSupport } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import LetterSpacingControl from '../components/letter-spacing-control'; +import useEditorFeature from '../components/use-editor-feature'; +import { cleanEmptyObject } from './utils'; + +/** + * Key within block settings' supports array indicating support for letter-spacing + * e.g. settings found in `block.json`. + */ +export const LETTER_SPACING_SUPPORT_KEY = '__experimentalLetterSpacing'; + +/** + * Inspector control panel containing the letter-spacing options. + * + * @param {Object} props Block properties. + * @return {WPElement} Letter-spacing edit element. + */ +export function LetterSpacingEdit( props ) { + const { + attributes: { style }, + setAttributes, + } = props; + + const isDisabled = useIsLetterSpacingDisabled( props ); + + if ( isDisabled ) { + return null; + } + + function onChange( newSpacing ) { + setAttributes( { + style: cleanEmptyObject( { + ...style, + typography: { + ...style?.typography, + letterSpacing: newSpacing, + }, + } ), + } ); + } + + return ( + + ); +} + +/** + * Checks if letter-spacing settings have been disabled. + * + * @param {string} name Name of the block. + * @return {boolean} Whether or not the setting is disabled. + */ +export function useIsLetterSpacingDisabled( { name: blockName } = {} ) { + const notSupported = ! hasBlockSupport( + blockName, + LETTER_SPACING_SUPPORT_KEY + ); + const hasLetterSpacing = useEditorFeature( + 'typography.customLetterSpacing' + ); + + return notSupported || ! hasLetterSpacing; +} diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 5edc061a0220f..95cc42ee9c7d9 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -47,6 +47,11 @@ import { TEXT_TRANSFORM_SUPPORT_KEY, useIsTextTransformDisabled, } from './text-transform'; +import { + LETTER_SPACING_SUPPORT_KEY, + LetterSpacingEdit, + useIsLetterSpacingDisabled, +} from './letter-spacing'; export const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, @@ -56,6 +61,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ FONT_FAMILY_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, + LETTER_SPACING_SUPPORT_KEY, ]; export function TypographyPanel( props ) { @@ -75,6 +81,7 @@ export function TypographyPanel( props ) { + @@ -98,6 +105,7 @@ function useIsTypographyDisabled( props = {} ) { useIsFontFamilyDisabled( props ), useIsTextDecorationDisabled( props ), useIsTextTransformDisabled( props ), + useIsLetterSpacingDisabled( props ), ]; return configs.filter( Boolean ).length === configs.length; diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index 8fab35dfc364a..5f67eb381a0fd 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -18,6 +18,7 @@ "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, - "__experimentalTextTransform": true + "__experimentalTextTransform": true, + "__experimentalLetterSpacing": true } } diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index d0c03447e1460..1ee582e8a006a 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -22,6 +22,7 @@ "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, - "__experimentalTextTransform": true + "__experimentalTextTransform": true, + "__experimentalLetterSpacing": true } } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 4215022da6659..616673ef6d1b3 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -78,4 +78,8 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'typography', 'textTransform' ], support: [ '__experimentalTextTransform' ], }, + letterSpacing: { + value: [ 'typography', 'letterSpacing' ], + support: [ '__experimentalLetterSpacing' ], + }, }; From 76581c36e69f612aa42885627bef40b8738bcd23 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 08:44:05 +0200 Subject: [PATCH 02/16] Linting --- packages/block-editor/src/hooks/typography.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 95cc42ee9c7d9..92186f5e87621 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -81,7 +81,7 @@ export function TypographyPanel( props ) { - + From bad38ce3bf95aeea68f7fac20dba5eb4995096a9 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 09:22:24 +0200 Subject: [PATCH 03/16] Change to VisualLabel --- .../src/components/letter-spacing-control/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 31e6ee087b9bf..66f061268e4bc 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -7,7 +7,7 @@ import { FlexItem, FlexBlock, BaseControl, - __experimentalUnitControl as UnitControl + __experimentalUnitControl as UnitControl, } from '@wordpress/components'; import { Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -44,8 +44,10 @@ export default function LetterSpacingControl( { value, onChange } ) { return ( + + { __( 'Letter-spacing' ) } + Date: Fri, 23 Apr 2021 09:41:17 +0200 Subject: [PATCH 04/16] More linting --- .../src/components/letter-spacing-control/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 66f061268e4bc..9f4954900171d 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -42,11 +42,9 @@ const CSS_UNITS = [ */ export default function LetterSpacingControl( { value, onChange } ) { return ( - + - { __( 'Letter-spacing' ) } + { __( 'Letter-spacing' ) } From 6c369c1f84fc0c0c1aae61cdb37cebfbe721a178 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 10:41:29 +0200 Subject: [PATCH 05/16] Update the site editor typography panel --- .../components/sidebar/typography-panel.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 766a738a42cd2..a54a03d2323e7 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -5,6 +5,7 @@ import { LineHeightControl, __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, + __experimentalLetterSpacingControl as LetterSpacingControl, } from '@wordpress/block-editor'; import { PanelBody, FontSizePicker } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -17,8 +18,9 @@ import { useEditorFeature } from '../editor/utils'; export function useHasTypographyPanel( { supports, name } ) { const hasLineHeight = useHasLineHeightControl( { supports, name } ); const hasFontAppearance = useHasAppearanceControl( { supports, name } ); + const hasLetterSpacing = useHasLetterSpacingControl( { supports, name } ); return ( - hasLineHeight || hasFontAppearance || supports.includes( 'fontSize' ) + hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes( 'fontSize' ) ); } @@ -39,6 +41,13 @@ function useHasAppearanceControl( { supports, name } ) { return hasFontStyles || hasFontWeights; } +function useHasLetterSpacingControl( { supports, name } ) { + return ( + useEditorFeature( 'typography.customLetterSpacing', name ) && + supports.includes( 'letterSpacing' ) + ); +} + export default function TypographyPanel( { context: { supports, name }, getStyle, @@ -58,6 +67,7 @@ export default function TypographyPanel( { supports.includes( 'fontWeight' ); const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } ); const hasAppearanceControl = useHasAppearanceControl( { supports, name } ); + const hasLetterSpacingControl = useHasLetterSpacingControl( { supports, name } ); return ( @@ -102,6 +112,14 @@ export default function TypographyPanel( { hasFontWeights={ hasFontWeights } /> ) } + { hasLetterSpacingControl && ( + + setStyle( name, 'letterSpacing', value ) + } + /> + )} ); } From c4ab98e4338ab89a108090493837a0045b3a5091 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 11:02:34 +0200 Subject: [PATCH 06/16] Linting --- .../src/components/sidebar/typography-panel.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index a54a03d2323e7..d42ae61e22fec 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -20,7 +20,10 @@ export function useHasTypographyPanel( { supports, name } ) { const hasFontAppearance = useHasAppearanceControl( { supports, name } ); const hasLetterSpacing = useHasLetterSpacingControl( { supports, name } ); return ( - hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes( 'fontSize' ) + hasLineHeight || + hasFontAppearance || + hasLetterSpacing || + supports.includes( 'fontSize' ) ); } @@ -67,7 +70,10 @@ export default function TypographyPanel( { supports.includes( 'fontWeight' ); const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } ); const hasAppearanceControl = useHasAppearanceControl( { supports, name } ); - const hasLetterSpacingControl = useHasLetterSpacingControl( { supports, name } ); + const hasLetterSpacingControl = useHasLetterSpacingControl( { + supports, + name + } ); return ( @@ -119,7 +125,7 @@ export default function TypographyPanel( { setStyle( name, 'letterSpacing', value ) } /> - )} + ) } ); } From 264959f969eb53c2a59e72e1c0daf9c1a49b8959 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 23 Apr 2021 11:20:32 +0200 Subject: [PATCH 07/16] This is embarassing, I really need Prettier to work locally --- packages/edit-site/src/components/sidebar/typography-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index d42ae61e22fec..ea45ad02dda8d 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -72,7 +72,7 @@ export default function TypographyPanel( { const hasAppearanceControl = useHasAppearanceControl( { supports, name } ); const hasLetterSpacingControl = useHasLetterSpacingControl( { supports, - name + name, } ); return ( From f2046849ac54f51482272e3d7299f45856b0240e Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 3 May 2021 16:50:14 +0200 Subject: [PATCH 08/16] Sync with trunk (#31427) --- .github/CODEOWNERS | 7 +- .github/workflows/end2end-test.yml | 1 + .github/workflows/static-checks.yml | 4 +- .github/workflows/storybook-pages.yml | 1 + .github/workflows/unit-test.yml | 1 + .prettierignore | 8 + bin/packages/build.js | 12 + bin/packages/watch.js | 35 +- bin/plugin/commands/common.js | 1 + changelog.txt | 398 ++--- docs/contributors/code/release.md | 6 +- docs/contributors/documentation/README.md | 37 +- .../full-site-editing-templates.md | 12 +- docs/getting-started/faq.md | 2 +- docs/getting-started/full-site-editing.md | 61 + docs/getting-started/glossary.md | 2 +- .../block-based-themes-2-adding-blocks.md | 53 - docs/how-to-guides/themes/README.md | 11 +- ...ased-themes.md => block-theme-overview.md} | 22 +- .../create-block-theme.md} | 36 +- docs/how-to-guides/themes/theme-json.md | 24 +- docs/how-to-guides/themes/theme-support.md | 2 +- docs/manifest.json | 70 +- .../block-api/block-metadata.md | 27 +- .../block-api/block-patterns.md | 100 +- .../block-api/block-supports.md | 44 +- .../data/data-core-block-editor.md | 30 +- docs/toc.json | 16 +- gutenberg.php | 2 +- lib/block-editor.php | 24 +- lib/block-patterns.php | 25 +- lib/block-supports/border.php | 38 +- lib/block-supports/typography.php | 4 +- lib/blocks.php | 12 +- lib/class-wp-rest-widget-types-controller.php | 71 +- lib/class-wp-theme-json.php | 10 +- lib/compat.php | 19 +- lib/editor-settings.php | 4 + lib/full-site-editing/edit-site-page.php | 2 +- lib/full-site-editing/page-templates.php | 9 +- lib/full-site-editing/template-loader.php | 16 +- lib/full-site-editing/template-parts.php | 6 + lib/init.php | 3 +- lib/widgets-page.php | 15 +- package-lock.json | 508 ++----- package.json | 4 +- packages/a11y/CHANGELOG.md | 5 + packages/a11y/README.md | 2 +- packages/a11y/package.json | 5 +- packages/annotations/CHANGELOG.md | 5 + packages/annotations/README.md | 2 +- packages/annotations/package.json | 5 +- packages/api-fetch/CHANGELOG.md | 11 +- packages/api-fetch/README.md | 2 +- packages/api-fetch/package.json | 5 +- packages/autop/CHANGELOG.md | 5 + packages/autop/README.md | 2 +- packages/autop/package.json | 3 + packages/babel-preset-default/CHANGELOG.md | 5 + packages/babel-preset-default/index.js | 4 +- packages/babel-preset-default/package.json | 2 +- .../test/__snapshots__/index.js.snap | 70 +- packages/base-styles/_colors.scss | 1 + packages/base-styles/_z-index.scss | 2 +- packages/base-styles/package.json | 2 +- packages/blob/CHANGELOG.md | 5 + packages/blob/package.json | 3 + packages/block-directory/CHANGELOG.md | 5 + packages/block-directory/README.md | 2 +- packages/block-directory/package.json | 5 +- packages/block-editor/CHANGELOG.md | 5 + packages/block-editor/README.md | 14 +- packages/block-editor/package.json | 5 +- .../src/components/block-controls/fill.js | 35 +- .../block-list/block-wrapper-elements.js | 26 - .../components/block-list/block-wrapper.js | 31 - .../block-list/block-wrapper.native.js | 11 - .../src/components/block-list/index.js | 66 +- .../components/block-list/insertion-point.js | 419 ------ .../src/components/block-list/style.scss | 321 +--- .../block-list/use-block-props/index.js | 10 +- .../use-block-props/use-block-nodes.js | 61 - .../use-block-props/use-block-refs.js | 101 ++ .../use-block-props/use-focus-handler.js | 56 + .../use-block-props/use-multi-selection.js | 209 +++ .../use-block-props/use-nav-mode-exit.js | 30 +- ...s => use-selected-block-event-handlers.js} | 72 +- .../block-list/use-in-between-inserter.js | 150 ++ .../block-actions-menu.native.js | 53 +- .../components/block-navigation/dropdown.js | 3 +- .../src/components/block-navigation/index.js | 2 +- .../components/block-pattern-setup/index.js | 9 +- .../components/block-pattern-setup/style.scss | 1 - .../block-settings-menu-controls/index.js | 25 +- .../block-contextual-toolbar.js | 0 .../block-popover.js | 36 +- .../block-selection-button.js | 0 .../src/components/block-tools/index.js | 14 + .../components/block-tools/insertion-point.js | 264 ++++ .../src/components/block-tools/style.scss | 321 ++++ .../default-block-appender/index.js | 49 +- .../default-block-appender/style.scss | 42 +- .../test/__snapshots__/index.js.snap | 45 +- .../default-block-appender/test/index.js | 8 +- .../src/components/iframe/index.js | 2 +- packages/block-editor/src/components/index.js | 1 - .../src/components/index.native.js | 3 +- .../inserter-draggable-blocks/index.js | 1 + .../inserter/hooks/use-insertion-point.js | 58 +- .../src/components/inserter/menu.js | 3 + .../src/components/inserter/quick-inserter.js | 16 +- .../src/components/inserter/search-results.js | 2 + .../inspector-advanced-controls/index.js | 11 +- .../components/inspector-controls/index.js | 11 +- .../components/line-height-control/README.md | 2 +- .../test/__snapshots__/index.js.snap | 2 +- .../provider/block-refs-provider.js | 16 + .../src/components/provider/index.js | 3 +- .../skip-to-selected-block/index.js | 9 +- .../components/spacing-panel-control/index.js | 23 - .../src/components/writing-flow/index.js | 157 +- .../writing-flow/use-multi-selection.js | 182 +-- .../block-editor/src/hooks/color-panel.js | 10 +- packages/block-editor/src/hooks/font-size.js | 46 +- packages/block-editor/src/hooks/index.js | 2 + .../block-editor/src/hooks/index.native.js | 1 + packages/block-editor/src/hooks/padding.js | 32 +- packages/block-editor/src/hooks/spacing.js | 90 ++ packages/block-editor/src/hooks/style.js | 51 +- packages/block-editor/src/hooks/test/style.js | 4 + .../src/hooks/use-border-props.js | 73 + packages/block-editor/src/index.js | 3 + packages/block-editor/src/store/actions.js | 43 +- packages/block-editor/src/store/reducer.js | 58 +- packages/block-editor/src/store/selectors.js | 21 +- .../block-editor/src/store/test/actions.js | 21 - .../block-editor/src/store/test/reducer.js | 80 +- .../block-editor/src/store/test/selectors.js | 11 +- packages/block-editor/src/style.scss | 1 + packages/block-editor/src/utils/dom.js | 33 - packages/block-library/CHANGELOG.md | 5 + packages/block-library/README.md | 2 +- packages/block-library/package.json | 5 +- .../block-library/src/archives/block.json | 3 + packages/block-library/src/archives/index.js | 3 - packages/block-library/src/audio/block.json | 4 + packages/block-library/src/audio/edit.js | 5 +- packages/block-library/src/audio/index.js | 9 - packages/block-library/src/block/block.json | 3 + .../block-library/src/block/edit.native.js | 110 +- .../src/block/editor.native.scss | 4 +- packages/block-library/src/block/index.js | 9 - packages/block-library/src/button/block.json | 8 + packages/block-library/src/button/index.js | 11 +- packages/block-library/src/button/style.scss | 8 +- packages/block-library/src/buttons/block.json | 4 + packages/block-library/src/buttons/index.js | 7 +- .../block-library/src/calendar/block.json | 4 + packages/block-library/src/calendar/index.js | 4 - .../block-library/src/categories/block.json | 3 + .../block-library/src/categories/index.js | 3 - packages/block-library/src/code/block.json | 3 + packages/block-library/src/code/index.js | 6 +- packages/block-library/src/column/block.json | 3 + packages/block-library/src/column/index.js | 3 - packages/block-library/src/columns/block.json | 3 + packages/block-library/src/columns/index.js | 6 +- packages/block-library/src/cover/block.json | 3 + packages/block-library/src/cover/index.js | 6 +- packages/block-library/src/embed/block.json | 3 + packages/block-library/src/embed/edit.js | 8 +- packages/block-library/src/embed/index.js | 9 - packages/block-library/src/file/block.json | 4 + packages/block-library/src/file/index.js | 4 - .../block-library/src/freeform/block.json | 3 + packages/block-library/src/freeform/index.js | 3 - packages/block-library/src/gallery/block.json | 4 + packages/block-library/src/gallery/index.js | 4 - packages/block-library/src/group/block.json | 4 + packages/block-library/src/group/index.js | 10 +- packages/block-library/src/heading/block.json | 4 + packages/block-library/src/heading/index.js | 7 +- packages/block-library/src/html/block.json | 4 + packages/block-library/src/html/index.js | 5 +- packages/block-library/src/image/block.json | 12 + packages/block-library/src/image/index.js | 17 +- packages/block-library/src/index.js | 8 +- packages/block-library/src/index.native.js | 14 +- .../src/latest-comments/block.json | 4 + .../src/latest-comments/index.js | 4 - .../block-library/src/latest-posts/block.json | 4 + .../block-library/src/latest-posts/index.js | 4 - .../src/legacy-widget/block.json | 3 + .../edit/convert-to-blocks-button.js | 34 + .../src/legacy-widget/edit/form.js | 140 +- .../src/legacy-widget/edit/index.js | 149 +- .../src/legacy-widget/edit/inspector-card.js | 10 +- .../src/legacy-widget/edit/no-preview.js | 13 + .../src/legacy-widget/edit/preview.js | 95 +- .../src/legacy-widget/edit/use-form.js | 128 ++ .../src/legacy-widget/editor.scss | 64 +- .../block-library/src/legacy-widget/index.js | 3 - packages/block-library/src/list/block.json | 4 + packages/block-library/src/list/index.js | 8 - .../block-library/src/loginout/block.json | 4 + packages/block-library/src/loginout/index.js | 4 - .../block-library/src/media-text/block.json | 4 + .../block-library/src/media-text/index.js | 5 +- packages/block-library/src/missing/block.json | 3 + packages/block-library/src/missing/index.js | 3 - packages/block-library/src/more/block.json | 4 + packages/block-library/src/more/index.js | 6 - .../src/navigation-link/block.json | 3 + .../src/navigation-link/editor.scss | 9 +- .../src/navigation-link/index.js | 6 +- .../src/navigation-link/style.scss | 219 +-- .../block-library/src/navigation/block.json | 4 + .../block-library/src/navigation/editor.scss | 23 - .../block-library/src/navigation/index.js | 7 +- .../block-library/src/navigation/style.scss | 282 ++++ .../block-library/src/nextpage/block.json | 4 + packages/block-library/src/nextpage/index.js | 4 - .../block-library/src/page-list/block.json | 4 + packages/block-library/src/page-list/index.js | 4 - .../block-library/src/paragraph/block.json | 4 + packages/block-library/src/paragraph/index.js | 5 +- .../block-library/src/post-author/block.json | 3 + .../block-library/src/post-author/index.js | 7 - .../src/post-comment-author/block.json | 4 + .../src/post-comment-author/index.js | 8 - .../src/post-comment-content/block.json | 4 + .../src/post-comment-content/index.js | 4 - .../src/post-comment-date/block.json | 4 + .../src/post-comment-date/index.js | 4 - .../block-library/src/post-comment/block.json | 3 + .../block-library/src/post-comment/index.js | 3 - .../src/post-comments-count/block.json | 3 + .../src/post-comments-count/index.js | 3 - .../src/post-comments-form/block.json | 3 + .../src/post-comments-form/index.js | 3 - .../src/post-comments-link/block.json | 8 +- .../src/post-comments-link/index.js | 5 +- .../src/post-comments/block.json | 3 + .../block-library/src/post-comments/index.js | 3 - .../block-library/src/post-content/block.json | 3 + .../block-library/src/post-content/index.js | 3 - .../block-library/src/post-date/block.json | 3 + packages/block-library/src/post-date/edit.js | 9 +- packages/block-library/src/post-date/index.js | 3 - .../block-library/src/post-excerpt/block.json | 3 + .../block-library/src/post-excerpt/index.js | 3 - .../src/post-featured-image/block.json | 3 + .../src/post-featured-image/index.js | 3 - .../src/post-hierarchical-terms/block.json | 3 + .../src/post-hierarchical-terms/index.js | 6 - .../src/post-navigation-link/block.json | 3 + .../src/post-navigation-link/index.js | 12 - .../block-library/src/post-tags/block.json | 3 + packages/block-library/src/post-tags/index.js | 3 - .../block-library/src/post-title/block.json | 3 + .../block-library/src/post-title/index.js | 5 - .../block-library/src/preformatted/block.json | 3 + .../block-library/src/preformatted/index.js | 6 +- .../block-library/src/pullquote/block.json | 11 + packages/block-library/src/pullquote/index.js | 15 +- .../block-library/src/pullquote/shared.js | 3 +- .../block-library/src/query-loop/block.json | 4 + packages/block-library/src/query-loop/edit.js | 7 +- .../block-library/src/query-loop/index.js | 3 - .../src/query-pagination-next/block.json | 4 + .../src/query-pagination-next/index.js | 4 - .../src/query-pagination-numbers/block.json | 4 + .../src/query-pagination-numbers/index.js | 4 - .../src/query-pagination-previous/block.json | 4 + .../src/query-pagination-previous/index.js | 4 - .../src/query-pagination/block.json | 5 + .../src/query-pagination/index.js | 6 - .../block-library/src/query-title/block.json | 3 + .../block-library/src/query-title/index.js | 7 - packages/block-library/src/query/block.json | 4 + .../block-library/src/query/deprecated.js | 47 + packages/block-library/src/query/index.js | 5 +- packages/block-library/src/query/save.js | 8 +- packages/block-library/src/quote/block.json | 12 + packages/block-library/src/quote/index.js | 15 +- packages/block-library/src/rss/block.json | 4 + packages/block-library/src/rss/index.js | 4 - packages/block-library/src/search/block.json | 4 + .../block-library/src/search/edit.native.js | 108 +- packages/block-library/src/search/index.js | 4 - .../test/__snapshots__/edit.native.js.snap | 36 +- .../block-library/src/separator/block.json | 9 + packages/block-library/src/separator/index.js | 11 - .../block-library/src/shortcode/block.json | 3 + packages/block-library/src/shortcode/index.js | 5 - .../block-library/src/site-logo/block.json | 11 + packages/block-library/src/site-logo/index.js | 13 - .../block-library/src/site-tagline/block.json | 4 + .../block-library/src/site-tagline/index.js | 8 - .../block-library/src/site-title/block.json | 6 + .../block-library/src/site-title/index.js | 5 - .../block-library/src/social-link/block.json | 3 + .../block-library/src/social-link/index.js | 5 - .../block-library/src/social-links/block.json | 9 + .../block-library/src/social-links/index.js | 11 - packages/block-library/src/spacer/block.json | 3 + packages/block-library/src/spacer/index.js | 5 - .../src/table-of-contents/block.json | 4 + .../src/table-of-contents/index.js | 10 - packages/block-library/src/table/block.json | 24 +- .../block-library/src/table/deprecated.js | 250 +++- packages/block-library/src/table/edit.js | 59 +- packages/block-library/src/table/index.js | 12 +- packages/block-library/src/table/save.js | 26 +- packages/block-library/src/table/style.scss | 32 + .../block-library/src/tag-cloud/block.json | 3 + packages/block-library/src/tag-cloud/index.js | 3 - .../src/template-part/block.json | 3 + .../template-part/edit/advanced-controls.js | 33 +- .../edit/get-tag-based-on-area.js | 9 - .../src/template-part/edit/index.js | 20 +- .../template-part/edit/placeholder/index.js | 143 +- .../edit/placeholder/patterns-setup.js | 33 + .../src/template-part/editor.scss | 4 +- .../block-library/src/template-part/index.js | 9 +- .../block-library/src/template-part/index.php | 14 +- .../src/template-part/variations.js | 102 +- .../src/term-description/block.json | 3 + .../src/term-description/index.js | 5 - .../block-library/src/text-columns/block.json | 3 + .../block-library/src/text-columns/index.js | 9 - packages/block-library/src/verse/block.json | 4 + packages/block-library/src/verse/index.js | 7 +- packages/block-library/src/video/block.json | 4 + packages/block-library/src/video/edit.js | 5 +- packages/block-library/src/video/index.js | 7 +- .../CHANGELOG.md | 5 + .../README.md | 2 +- .../package.json | 3 + .../CHANGELOG.md | 5 + .../package.json | 5 +- packages/blocks/CHANGELOG.md | 9 + packages/blocks/README.md | 24 +- packages/blocks/package.json | 5 +- packages/blocks/src/api/i18n-block.json | 17 + packages/blocks/src/api/index.js | 1 + packages/blocks/src/api/registration.js | 115 ++ packages/blocks/src/api/test/registration.js | 124 +- packages/browserslist-config/CHANGELOG.md | 5 + packages/browserslist-config/index.js | 1 - packages/components/CHANGELOG.md | 14 + packages/components/README.md | 2 +- packages/components/package.json | 11 +- packages/components/src/box-control/index.js | 2 +- packages/components/src/button/index.js | 3 +- packages/components/src/button/next.js | 79 - .../components/src/card/styles/card-styles.js | 2 +- .../test/__snapshots__/index.js.snap | 74 +- packages/components/src/flex/README.md | 98 -- packages/components/src/flex/block.js | 30 - packages/components/src/flex/context.ts | 12 + .../components/src/flex/flex-block/README.md | 17 + .../flex-block/component.js} | 4 +- .../flex-block/hook.js} | 10 +- .../components/src/flex/flex-block/index.js | 2 + .../components/src/flex/flex-item/README.md | 23 + .../flex-item/component.js} | 4 +- .../flex-item/hook.js} | 13 +- .../components/src/flex/flex-item/index.js | 2 + .../src/{ui => flex}/flex/README.md | 21 +- .../components/src/flex/flex/component.js | 60 + .../flex/use-flex.js => flex/flex/hook.js} | 55 +- packages/components/src/flex/flex/index.js | 2 + packages/components/src/flex/index.js | 67 +- packages/components/src/flex/item.js | 31 - packages/components/src/flex/next.js | 75 - packages/components/src/flex/stories/index.js | 244 +--- .../components/src/flex/stories/style.css | 7 - .../components/src/{ui => }/flex/styles.js | 2 +- .../components/src/flex/styles/flex-styles.js | 98 -- .../src/flex/test/__snapshots__/index.js.snap | 149 ++ .../src/{ui => }/flex/test/index.js | 6 +- .../components/src/{ui => }/flex/types.ts | 14 +- .../styles/focal-point-picker-style.js | 2 +- .../components/src/font-size-picker/index.js | 70 +- .../components/src/font-size-picker/next.js | 26 - .../src/font-size-picker/style.scss | 14 + .../components/src/{ui => }/heading/README.md | 6 +- .../src/{ui => }/heading/component.ts | 2 +- .../components/src/{ui => }/heading/hook.ts | 19 +- packages/components/src/heading/index.ts | 2 + .../src/{ui => }/heading/stories/index.js | 6 +- .../heading/test/__snapshots__/index.js.snap | 57 + .../src/{ui => }/heading/test/index.js | 2 +- packages/components/src/index.js | 8 +- packages/components/src/index.native.js | 1 + .../styles/input-control-styles.js | 4 +- .../navigation/styles/navigation-styles.js | 2 +- .../styles/resize-tooltip.styles.js | 5 +- .../src/resizable-box/resize-tooltip/utils.js | 3 +- .../components/src/style-provider/index.js | 6 +- .../src/style-provider/index.native.js | 3 + packages/components/src/style.scss | 1 - packages/components/src/text/README.md | 253 +++- .../components/src/{ui => }/text/component.js | 4 +- .../components/src/text/get-line-height.ts | 39 + packages/components/src/{ui => }/text/hook.js | 64 +- packages/components/src/text/index.js | 23 +- packages/components/src/text/next.js | 37 - packages/components/src/text/stories/index.js | 63 +- .../components/src/{ui => }/text/styles.js | 20 +- .../components/src/text/styles/emotion-css.js | 6 - .../components/src/text/styles/font-family.js | 2 - .../{text-mixins.js => text-mixins.native.js} | 0 .../src/text/test/__snapshots__/index.js.snap | 47 + packages/components/src/text/test/index.js | 191 ++- .../components/src/{ui => }/text/types.ts | 0 .../components/src/{ui => }/text/utils.js | 3 - .../src/{ui => }/truncate/README.md | 8 +- .../src/{ui => }/truncate/component.js | 4 +- .../components/src/{ui => }/truncate/hook.js | 6 +- .../components/src/{ui => }/truncate/index.js | 0 .../src/{ui => }/truncate/stories/index.js | 0 .../src/{ui => }/truncate/styles.js | 2 +- .../truncate.js => truncate/test/index.js} | 0 .../components/src/{ui => }/truncate/types.ts | 0 .../components/src/{ui => }/truncate/utils.js | 0 .../src/ui/__storybook-utils/example-grid.js | 22 +- .../src/ui/__storybook-utils/page.js | 18 +- .../src/ui/base-button/component.js | 166 --- .../components/src/ui/base-button/hook.js | 126 -- .../components/src/ui/base-button/index.js | 3 - .../src/ui/base-button/loading-overlay.js | 22 - .../components/src/ui/base-button/styles.js | 243 ---- .../test/__snapshots__/index.js.snap | 243 ---- .../src/ui/base-button/test/index.js | 16 - .../components/src/ui/base-button/types.ts | 156 -- .../components/src/ui/button-group/README.md | 40 - .../src/ui/button-group/component.js | 124 -- .../components/src/ui/button-group/context.js | 10 - .../components/src/ui/button-group/index.js | 2 - .../src/ui/button-group/stories/index.js | 36 - .../components/src/ui/button-group/styles.js | 18 - .../test/__snapshots__/index.js.snap | 487 ------- .../src/ui/button-group/test/index.js | 23 - .../components/src/ui/button-group/types.ts | 56 - packages/components/src/ui/button/README.md | 159 -- .../components/src/ui/button/component.js | 146 -- packages/components/src/ui/button/index.js | 1 - .../components/src/ui/button/stories/index.js | 67 - packages/components/src/ui/button/styles.js | 305 ---- .../button/test/__snapshots__/index.js.snap | 689 --------- .../components/src/ui/button/test/index.js | 155 -- packages/components/src/ui/card/README.md | 3 +- packages/components/src/ui/card/body.js | 6 +- packages/components/src/ui/card/component.js | 18 +- packages/components/src/ui/card/footer.js | 8 +- packages/components/src/ui/card/header.js | 8 +- packages/components/src/ui/card/hook.js | 6 +- packages/components/src/ui/card/inner-body.js | 6 +- .../components/src/ui/card/stories/index.js | 11 +- packages/components/src/ui/card/styles.js | 37 +- .../ui/card/test/__snapshots__/index.js.snap | 351 +---- .../src/ui/context/context-connect.js | 18 +- .../context/get-styled-class-name-from-key.ts | 18 + packages/components/src/ui/context/index.js | 7 +- .../src/ui/context/polymorphic-component.ts | 7 +- .../context-system-provider.js.snap | 6 +- .../src/ui/context/use-context-system.js | 44 +- .../src/ui/control-group/component.js | 6 +- .../components/src/ui/control-group/hook.js | 8 +- .../src/ui/control-group/stories/index.js | 49 - .../components/src/ui/control-group/styles.js | 2 +- .../test/__snapshots__/index.js.snap | 1293 +---------------- .../src/ui/control-group/test/index.js | 15 +- .../components/src/ui/control-group/types.ts | 2 +- .../components/src/ui/control-label/hook.js | 10 +- .../src/ui/control-label/stories/index.js | 2 +- .../components/src/ui/control-label/styles.js | 16 +- .../test/__snapshots__/index.js.snap | 148 +- .../components/src/ui/control-label/types.ts | 2 +- .../components/src/ui/divider/component.tsx | 16 +- packages/components/src/ui/divider/styles.ts | 9 +- .../divider/test/__snapshots__/index.js.snap | 25 +- packages/components/src/ui/elevation/hook.js | 25 +- .../src/ui/elevation/stories/index.js | 12 +- .../components/src/ui/elevation/styles.js | 2 +- .../test/__snapshots__/index.js.snap | 236 +-- packages/components/src/ui/flex/flex.js | 38 - packages/components/src/ui/flex/index.js | 7 - .../components/src/ui/flex/stories/index.js | 30 - .../ui/flex/test/__snapshots__/index.js.snap | 243 ---- .../src/ui/font-size-control/README.md | 5 - .../ui/font-size-control/font-size-control.js | 78 - .../src/ui/font-size-control/index.js | 2 - .../src/ui/font-size-control/select.js | 100 -- .../src/ui/font-size-control/slider.js | 55 - .../src/ui/font-size-control/styles.js | 11 - .../use-font-size-control.js | 113 -- .../src/ui/font-size-control/utils.js | 105 -- .../src/ui/form-group/form-group-content.js | 13 +- .../src/ui/form-group/form-group-help.js | 9 +- .../src/ui/form-group/form-group-label.js | 4 +- .../src/ui/form-group/form-group-styles.js | 2 +- .../src/ui/form-group/form-group.js | 8 +- .../src/ui/form-group/stories/index.js | 4 +- .../test/__snapshots__/index.js.snap | 156 +- .../src/ui/form-group/use-form-group.js | 6 +- packages/components/src/ui/grid/hook.js | 10 +- packages/components/src/ui/grid/test/grid.js | 6 +- .../components/src/ui/h-stack/component.js | 2 +- packages/components/src/ui/h-stack/hook.js | 24 +- .../h-stack/test/__snapshots__/index.js.snap | 198 +-- packages/components/src/ui/h-stack/types.ts | 2 +- packages/components/src/ui/h-stack/utils.js | 2 +- packages/components/src/ui/heading/index.ts | 3 - .../heading/test/__snapshots__/index.js.snap | 87 -- packages/components/src/ui/index.js | 5 - .../components/src/ui/popover/component.js | 10 +- packages/components/src/ui/popover/content.js | 6 +- .../src/ui/popover/stories/index.js | 6 +- packages/components/src/ui/popover/styles.js | 11 +- .../popover/test/__snapshots__/index.js.snap | 235 +-- .../components/src/ui/popover/test/index.js | 2 +- packages/components/src/ui/portal/README.md | 17 - .../components/src/ui/portal/component.js | 37 - packages/components/src/ui/portal/index.js | 1 - .../components/src/ui/portal/test/index.js | 33 - packages/components/src/ui/scrollable/hook.js | 6 +- .../src/ui/scrollable/stories/index.js | 4 +- .../components/src/ui/scrollable/styles.js | 12 +- .../test/__snapshots__/index.js.snap | 56 +- .../components/src/ui/shortcut/component.tsx | 9 +- .../shortcut/test/__snapshots__/index.js.snap | 6 +- packages/components/src/ui/spinner/README.md | 2 +- .../components/src/ui/spinner/component.js | 14 +- packages/components/src/ui/spinner/styles.js | 6 +- .../spinner/test/__snapshots__/index.js.snap | 128 +- packages/components/src/ui/surface/README.md | 2 +- .../components/src/ui/surface/component.js | 2 +- packages/components/src/ui/surface/hook.js | 20 +- .../src/ui/surface/stories/index.js | 19 +- packages/components/src/ui/surface/styles.js | 145 +- .../surface/test/__snapshots__/index.js.snap | 86 +- packages/components/src/ui/text/README.md | 237 --- packages/components/src/ui/text/index.js | 2 - .../components/src/ui/text/stories/index.js | 53 - .../ui/text/test/__snapshots__/text.js.snap | 99 -- packages/components/src/ui/text/test/text.js | 144 -- .../src/ui/tooltip-button/README.md | 24 - .../src/ui/tooltip-button/component.tsx | 95 -- .../components/src/ui/tooltip-button/index.js | 2 - .../src/ui/tooltip-button/stories/index.js | 74 - .../src/ui/tooltip-button/test/index.js | 32 - .../components/src/ui/tooltip/component.js | 4 +- packages/components/src/ui/tooltip/content.js | 6 +- .../src/ui/tooltip/stories/index.js | 2 +- packages/components/src/ui/tooltip/styles.js | 16 +- .../tooltip/test/__snapshots__/index.js.snap | 63 +- .../components/src/ui/tooltip/test/index.js | 2 +- .../src/ui/utils/create-component.js | 44 - .../src/ui/utils/create-component.tsx | 61 + packages/components/src/ui/utils/font-size.ts | 70 + .../components/src/ui/utils/get-high-dpi.ts | 19 + .../src/ui/utils/get-valid-children.ts | 25 + packages/components/src/ui/utils/space.ts | 16 + .../src/ui/utils/test/create-component.js | 5 +- packages/components/src/ui/utils/types.ts | 13 - .../src/ui/utils/use-responsive-value.ts | 76 + packages/components/src/ui/v-stack/hook.js | 8 +- .../v-stack/test/__snapshots__/index.js.snap | 201 +-- packages/components/src/ui/view/component.js | 4 +- .../ui/view/test/__snapshots__/index.js.snap | 139 +- .../src/ui/visually-hidden/README.md | 17 - .../src/ui/visually-hidden/index.js | 2 - .../src/ui/visually-hidden/stories/index.js | 42 - .../test/__snapshots__/index.js.snap | 68 - .../components/src/utils/colors-values.js | 1 + .../components/src/utils/config-values.js | 54 + packages/components/src/utils/config.js | 2 +- packages/components/src/utils/style-mixins.js | 2 + packages/components/src/utils/z-index.js | 2 + .../components/src/visually-hidden/README.md | 14 +- .../src/{ui => }/visually-hidden/component.js | 6 +- .../src/{ui => }/visually-hidden/hook.js | 8 +- .../components/src/visually-hidden/index.js | 48 +- .../components/src/visually-hidden/next.js | 31 - .../src/visually-hidden/stories/index.js | 2 +- .../components/src/visually-hidden/style.scss | 30 - .../src/{ui => }/visually-hidden/styles.js | 9 +- .../test/__snapshots__/index.js.snap | 45 + .../{ui => }/visually-hidden/test/index.js | 2 +- .../components/src/visually-hidden/utils.js | 31 - packages/components/tsconfig.json | 1 + packages/compose/CHANGELOG.md | 5 + packages/compose/README.md | 31 +- packages/compose/package.json | 5 +- .../src/higher-order/if-condition/index.js | 26 - .../src/higher-order/if-condition/index.tsx | 39 + .../compose/src/higher-order/pure/index.js | 46 - .../compose/src/higher-order/pure/index.tsx | 50 + .../compose/src/hooks/use-ref-effect/index.js | 6 +- .../create-higher-order-component/index.js | 36 - .../create-higher-order-component/index.ts | 48 + packages/compose/tsconfig.json | 12 + packages/core-data/CHANGELOG.md | 8 + packages/core-data/README.md | 2 +- packages/core-data/package.json | 5 +- packages/core-data/src/actions.js | 43 + packages/core-data/src/entities.js | 12 + packages/core-data/src/resolvers.js | 2 +- packages/core-data/src/test/resolvers.js | 56 +- packages/create-block/CHANGELOG.md | 2 + .../lib/templates/es5/index.js.mustache | 4 +- .../templates/esnext/src/index.js.mustache | 4 +- packages/create-block/package.json | 2 +- packages/customize-widgets/CHANGELOG.md | 2 +- packages/customize-widgets/README.md | 2 +- packages/customize-widgets/package.json | 3 + .../components/sidebar-block-editor/index.js | 18 +- packages/data-controls/CHANGELOG.md | 5 + packages/data-controls/README.md | 2 +- packages/data-controls/package.json | 5 +- packages/data/CHANGELOG.md | 12 + packages/data/README.md | 4 +- packages/data/package.json | 7 +- packages/data/src/redux-store/test/index.js | 4 +- packages/date/CHANGELOG.md | 5 + packages/date/README.md | 2 +- packages/date/package.json | 3 + packages/deprecated/CHANGELOG.md | 5 + packages/deprecated/README.md | 4 +- packages/deprecated/package.json | 5 +- packages/docgen/CHANGELOG.md | 6 +- packages/docgen/lib/get-jsdoc-from-token.js | 2 + packages/docgen/lib/markdown/formatter.js | 4 +- packages/docgen/package.json | 2 +- .../test/get-intermediate-representation.js | 8 + packages/dom-ready/CHANGELOG.md | 5 + packages/dom-ready/README.md | 2 +- packages/dom-ready/package.json | 3 + packages/dom/CHANGELOG.md | 9 +- packages/dom/README.md | 12 + packages/dom/package.json | 5 +- .../dom/src/dom/get-rectangle-from-range.js | 40 +- packages/dom/src/dom/index.js | 1 + packages/dom/src/dom/is-edge.js | 6 +- packages/dom/src/dom/is-rtl.js | 15 + .../src/dom/place-caret-at-horizontal-edge.js | 5 +- packages/e2e-test-utils/README.md | 13 + packages/e2e-test-utils/package.json | 2 +- packages/e2e-test-utils/src/get-all-blocks.js | 20 +- packages/e2e-test-utils/src/wp-data-select.js | 11 + packages/e2e-tests/experimental-features.js | 52 +- .../fixtures/blocks/core__query.html | 4 +- .../fixtures/blocks/core__query.json | 2 +- .../fixtures/blocks/core__query.parsed.json | 6 +- .../blocks/core__query.serialized.html | 4 +- .../blocks/core__query__deprecated-1.html | 1 + .../blocks/core__query__deprecated-1.json | 29 + .../core__query__deprecated-1.parsed.json | 9 + .../core__query__deprecated-1.serialized.html | 3 + .../blocks/core__table__deprecated-1.html | 6 +- .../blocks/core__table__deprecated-1.json | 10 +- .../core__table__deprecated-1.parsed.json | 8 +- .../core__table__deprecated-1.serialized.html | 4 +- .../blocks/core__table__deprecated-2.html | 3 + .../blocks/core__table__deprecated-2.json | 145 ++ .../core__table__deprecated-2.parsed.json | 11 + .../core__table__deprecated-2.serialized.html | 3 + packages/e2e-tests/package.json | 4 +- .../specs/editor/blocks/list.test.js | 1 + .../editor/various/font-size-picker.test.js | 1 + .../specs/editor/various/undo.test.js | 10 +- .../experiments/customizing-widgets.test.js | 427 ++++++ .../experiments/multi-entity-saving.test.js | 31 + .../specs/widgets/adding-widgets.test.js | 93 +- packages/edit-navigation/CHANGELOG.md | 2 + packages/edit-navigation/README.md | 2 +- packages/edit-navigation/package.json | 3 + .../src/components/editor/style.scss | 4 +- .../inspector-additions/delete-menu.js | 4 +- .../components/inspector-additions/index.js | 17 +- .../components/inspector-additions/style.scss | 2 +- packages/edit-navigation/src/store/actions.js | 4 +- packages/edit-post/CHANGELOG.md | 5 + packages/edit-post/README.md | 4 +- packages/edit-post/package.json | 5 +- .../header/fullscreen-mode-close/style.scss | 3 +- .../components/header/header-toolbar/index.js | 7 +- .../header/header-toolbar/index.native.js | 28 +- .../src/components/layout/actions-panel.js | 7 +- .../edit-post/src/components/layout/index.js | 12 +- .../src/components/layout/style.scss | 6 +- .../sidebar/settings-sidebar/index.js | 7 +- .../components/visual-editor/header.native.js | 3 +- .../src/components/visual-editor/style.scss | 14 +- .../src/hooks/validate-multiple-use/index.js | 8 +- packages/edit-post/src/store/actions.js | 8 +- packages/edit-post/src/store/reducer.js | 8 +- packages/edit-post/src/store/selectors.js | 14 +- packages/edit-site/CHANGELOG.md | 7 +- packages/edit-site/README.md | 2 +- packages/edit-site/package.json | 5 +- .../block-editor/block-inspector-button.js | 63 + .../src/components/block-editor/index.js | 26 +- .../editor/global-styles-provider.js | 26 +- .../editor/global-styles-renderer.js | 8 +- .../edit-site/src/components/editor/index.js | 45 +- .../src/components/editor/style.scss | 10 + .../edit-site/src/components/editor/utils.js | 8 +- .../header/document-actions/index.js | 22 +- .../edit-site/src/components/header/index.js | 5 + .../src/components/header/undo-redo/redo.js | 11 +- .../src/components/header/undo-redo/undo.js | 11 +- .../components/keyboard-shortcuts/index.js | 39 + .../content-navigation-item.js | 11 +- .../edit-site/src/components/notices/index.js | 24 - .../src/components/notices/style.scss | 9 - .../secondary-sidebar/inserter-sidebar.js | 15 +- .../src/components/sidebar/spacing-panel.js | 59 +- .../src/components/template-details/index.js | 6 +- .../convert-to-regular.js | 9 +- packages/edit-site/src/store/actions.js | 16 +- packages/edit-site/src/store/reducer.js | 16 +- packages/edit-site/src/store/selectors.js | 14 +- packages/edit-site/src/style.scss | 1 - packages/edit-widgets/CHANGELOG.md | 7 +- packages/edit-widgets/README.md | 2 +- packages/edit-widgets/package.json | 5 +- .../src/components/header/index.js | 3 +- .../src/components/header/undo-redo/redo.js | 11 +- .../src/components/header/undo-redo/undo.js | 11 +- .../src/components/sidebar/index.js | 12 +- .../style.scss | 1 + .../use-widget-library-insertion-point.js | 3 +- packages/edit-widgets/src/store/actions.js | 8 +- packages/edit-widgets/src/store/reducer.js | 8 +- packages/edit-widgets/src/store/selectors.js | 2 +- packages/edit-widgets/src/style.scss | 2 +- packages/editor/CHANGELOG.md | 5 + packages/editor/README.md | 2 +- packages/editor/package.json | 5 +- .../src/components/document-outline/check.js | 3 +- .../src/components/document-outline/index.js | 3 +- .../src/components/editor-history/redo.js | 15 +- .../src/components/editor-history/undo.js | 15 +- .../entity-record-item.js | 7 +- .../entities-saved-states/entity-type-list.js | 8 +- .../components/entities-saved-states/index.js | 103 +- .../components/post-featured-image/index.js | 8 +- .../test/__snapshots__/index.js.snap | 8 +- .../editor/src/components/post-title/index.js | 5 +- .../src/components/provider/index.native.js | 5 +- .../src/components/table-of-contents/index.js | 3 +- .../src/components/table-of-contents/panel.js | 3 +- .../template-validation-notice/index.js | 5 +- packages/editor/src/store/selectors.js | 13 +- packages/editor/src/store/test/selectors.js | 10 +- .../src/store/utils/get-template-part-icon.js | 15 +- packages/element/CHANGELOG.md | 5 + packages/element/README.md | 2 +- packages/element/package.json | 5 +- packages/env/CHANGELOG.md | 2 + packages/env/lib/download-sources.js | 4 +- packages/env/package.json | 2 +- packages/escape-html/CHANGELOG.md | 5 + packages/escape-html/README.md | 2 +- packages/escape-html/package.json | 3 + packages/eslint-plugin/package.json | 2 +- packages/format-library/CHANGELOG.md | 5 + packages/format-library/README.md | 2 +- packages/format-library/package.json | 5 +- .../format-library/src/text-color/inline.js | 3 +- packages/hooks/CHANGELOG.md | 5 + packages/hooks/README.md | 2 +- packages/hooks/package.json | 5 +- packages/html-entities/CHANGELOG.md | 5 + packages/html-entities/README.md | 2 +- packages/html-entities/package.json | 3 + packages/i18n/CHANGELOG.md | 11 +- packages/i18n/README.md | 2 +- packages/i18n/package.json | 5 +- packages/icons/CHANGELOG.md | 5 + packages/icons/README.md | 2 +- packages/icons/package.json | 5 +- packages/interface/CHANGELOG.md | 5 + packages/interface/README.md | 2 +- packages/interface/package.json | 5 +- packages/is-shallow-equal/CHANGELOG.md | 5 + packages/is-shallow-equal/package.json | 5 +- packages/keyboard-shortcuts/CHANGELOG.md | 5 + packages/keyboard-shortcuts/README.md | 4 +- packages/keyboard-shortcuts/package.json | 5 +- packages/keycodes/CHANGELOG.md | 5 + packages/keycodes/README.md | 14 +- packages/keycodes/package.json | 5 +- packages/lazy-import/README.md | 2 +- packages/list-reusable-blocks/CHANGELOG.md | 5 + packages/list-reusable-blocks/README.md | 2 +- packages/list-reusable-blocks/package.json | 5 +- packages/media-utils/CHANGELOG.md | 5 + packages/media-utils/README.md | 2 +- packages/media-utils/package.json | 5 +- packages/notices/CHANGELOG.md | 5 + packages/notices/README.md | 2 +- packages/notices/package.json | 5 +- packages/nux/CHANGELOG.md | 5 + packages/nux/README.md | 2 +- packages/nux/package.json | 5 +- packages/plugins/CHANGELOG.md | 5 + packages/plugins/README.md | 2 +- packages/plugins/package.json | 5 +- packages/postcss-plugins-preset/CHANGELOG.md | 2 + packages/postcss-plugins-preset/package.json | 2 +- packages/postcss-themes/CHANGELOG.md | 2 + packages/postcss-themes/package.json | 2 +- packages/primitives/CHANGELOG.md | 5 + packages/primitives/README.md | 2 +- packages/primitives/package.json | 5 +- packages/priority-queue/CHANGELOG.md | 5 + packages/priority-queue/README.md | 2 +- packages/priority-queue/package.json | 3 + .../package.json | 2 +- packages/react-i18n/CHANGELOG.md | 12 + packages/react-i18n/README.md | 2 +- packages/react-i18n/package.json | 5 +- .../react-native-aztec/android/build.gradle | 58 +- .../android/settings.gradle | 6 - packages/react-native-aztec/package.json | 2 +- .../react-native-bridge/android/build.gradle | 4 - .../android/publish-aztec-and-bridge.sh | 17 +- .../android/react-native-bridge/build.gradle | 60 +- .../android/settings.gradle | 6 - packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/CHANGELOG.md | 5 + .../gutenberg-editor-search.test.js | 179 +++ .../__device-tests__/helpers/test-data.js | 2 + .../__device-tests__/pages/editor-page.js | 74 + .../android/app/build.gradle | 2 +- packages/react-native-editor/ios/Podfile.lock | 8 +- packages/react-native-editor/package.json | 4 +- packages/redux-routine/CHANGELOG.md | 5 + packages/redux-routine/package.json | 3 + packages/reusable-blocks/CHANGELOG.md | 5 + packages/reusable-blocks/README.md | 2 +- packages/reusable-blocks/package.json | 5 +- .../reusable-blocks-menu-items/index.js | 3 +- .../reusable-blocks-manage-button.js | 7 +- .../reusable-blocks/src/store/controls.js | 13 +- packages/rich-text/CHANGELOG.md | 5 + packages/rich-text/README.md | 4 +- packages/rich-text/package.json | 5 +- packages/rich-text/src/component/index.js | 129 +- .../src/component/use-format-boundaries.js | 144 ++ packages/scripts/CHANGELOG.md | 18 + packages/scripts/README.md | 2 +- packages/scripts/config/.prettierignore | 2 + packages/scripts/config/jest-e2e.config.js | 4 + .../jest-environment-puppeteer/index.js | 4 +- .../config/jest-github-actions-reporter.js | 64 + packages/scripts/config/jest-unit.config.js | 5 + packages/scripts/package.json | 5 +- packages/scripts/scripts/format.js | 8 +- packages/server-side-render/CHANGELOG.md | 5 + packages/server-side-render/README.md | 2 +- packages/server-side-render/package.json | 5 +- packages/shortcode/CHANGELOG.md | 5 + packages/shortcode/README.md | 2 +- packages/shortcode/package.json | 3 + packages/token-list/CHANGELOG.md | 5 + packages/token-list/README.md | 2 +- packages/token-list/package.json | 5 +- packages/url/CHANGELOG.md | 5 + packages/url/README.md | 2 +- packages/url/package.json | 3 + packages/viewport/CHANGELOG.md | 5 + packages/viewport/README.md | 4 +- packages/viewport/package.json | 5 +- packages/warning/CHANGELOG.md | 5 + packages/warning/README.md | 2 +- packages/warning/package.json | 3 + packages/wordcount/CHANGELOG.md | 5 + packages/wordcount/README.md | 2 +- packages/wordcount/package.json | 3 + ...lass-rest-widget-types-controller-test.php | 40 + phpunit/class-wp-theme-json-test.php | 246 +--- readme.txt | 2 +- test/unit/jest.config.js | 4 + 889 files changed, 10226 insertions(+), 14930 deletions(-) create mode 100644 .prettierignore create mode 100644 docs/getting-started/full-site-editing.md delete mode 100644 docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md rename docs/how-to-guides/themes/{block-based-themes.md => block-theme-overview.md} (76%) rename docs/how-to-guides/{block-based-theme/README.md => themes/create-block-theme.md} (79%) delete mode 100644 packages/block-editor/src/components/block-list/block-wrapper-elements.js delete mode 100644 packages/block-editor/src/components/block-list/block-wrapper.js delete mode 100644 packages/block-editor/src/components/block-list/block-wrapper.native.js delete mode 100644 packages/block-editor/src/components/block-list/insertion-point.js delete mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js rename packages/block-editor/src/components/block-list/use-block-props/{use-event-handlers.js => use-selected-block-event-handlers.js} (51%) create mode 100644 packages/block-editor/src/components/block-list/use-in-between-inserter.js rename packages/block-editor/src/components/{block-list => block-tools}/block-contextual-toolbar.js (100%) rename packages/block-editor/src/components/{block-list => block-tools}/block-popover.js (92%) rename packages/block-editor/src/components/{block-list => block-tools}/block-selection-button.js (100%) create mode 100644 packages/block-editor/src/components/block-tools/index.js create mode 100644 packages/block-editor/src/components/block-tools/insertion-point.js create mode 100644 packages/block-editor/src/components/block-tools/style.scss create mode 100644 packages/block-editor/src/components/provider/block-refs-provider.js delete mode 100644 packages/block-editor/src/components/spacing-panel-control/index.js create mode 100644 packages/block-editor/src/hooks/spacing.js create mode 100644 packages/block-editor/src/hooks/use-border-props.js create mode 100644 packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js create mode 100644 packages/block-library/src/legacy-widget/edit/no-preview.js create mode 100644 packages/block-library/src/legacy-widget/edit/use-form.js create mode 100644 packages/block-library/src/query/deprecated.js delete mode 100644 packages/block-library/src/template-part/edit/get-tag-based-on-area.js create mode 100644 packages/block-library/src/template-part/edit/placeholder/patterns-setup.js create mode 100644 packages/blocks/src/api/i18n-block.json delete mode 100644 packages/components/src/button/next.js delete mode 100644 packages/components/src/flex/README.md delete mode 100644 packages/components/src/flex/block.js create mode 100644 packages/components/src/flex/context.ts create mode 100644 packages/components/src/flex/flex-block/README.md rename packages/components/src/{ui/flex/flex-block.js => flex/flex-block/component.js} (79%) rename packages/components/src/{ui/flex/use-flex-block.js => flex/flex-block/hook.js} (50%) create mode 100644 packages/components/src/flex/flex-block/index.js create mode 100644 packages/components/src/flex/flex-item/README.md rename packages/components/src/{ui/flex/flex-item.js => flex/flex-item/component.js} (79%) rename packages/components/src/{ui/flex/use-flex-item.js => flex/flex-item/hook.js} (53%) create mode 100644 packages/components/src/flex/flex-item/index.js rename packages/components/src/{ui => flex}/flex/README.md (76%) create mode 100644 packages/components/src/flex/flex/component.js rename packages/components/src/{ui/flex/use-flex.js => flex/flex/hook.js} (54%) create mode 100644 packages/components/src/flex/flex/index.js delete mode 100644 packages/components/src/flex/item.js delete mode 100644 packages/components/src/flex/next.js delete mode 100644 packages/components/src/flex/stories/style.css rename packages/components/src/{ui => }/flex/styles.js (94%) delete mode 100644 packages/components/src/flex/styles/flex-styles.js create mode 100644 packages/components/src/flex/test/__snapshots__/index.js.snap rename packages/components/src/{ui => }/flex/test/index.js (90%) rename packages/components/src/{ui => }/flex/types.ts (92%) delete mode 100644 packages/components/src/font-size-picker/next.js rename packages/components/src/{ui => }/heading/README.md (73%) rename packages/components/src/{ui => }/heading/component.ts (90%) rename packages/components/src/{ui => }/heading/hook.ts (77%) create mode 100644 packages/components/src/heading/index.ts rename packages/components/src/{ui => }/heading/stories/index.js (81%) create mode 100644 packages/components/src/heading/test/__snapshots__/index.js.snap rename packages/components/src/{ui => }/heading/test/index.js (97%) create mode 100644 packages/components/src/style-provider/index.native.js rename packages/components/src/{ui => }/text/component.js (80%) create mode 100644 packages/components/src/text/get-line-height.ts rename packages/components/src/{ui => }/text/hook.js (70%) delete mode 100644 packages/components/src/text/next.js rename packages/components/src/{ui => }/text/styles.js (56%) delete mode 100644 packages/components/src/text/styles/emotion-css.js delete mode 100644 packages/components/src/text/styles/font-family.js rename packages/components/src/text/styles/{text-mixins.js => text-mixins.native.js} (100%) create mode 100644 packages/components/src/text/test/__snapshots__/index.js.snap rename packages/components/src/{ui => }/text/types.ts (100%) rename packages/components/src/{ui => }/text/utils.js (98%) rename packages/components/src/{ui => }/truncate/README.md (90%) rename packages/components/src/{ui => }/truncate/component.js (85%) rename packages/components/src/{ui => }/truncate/hook.js (86%) rename packages/components/src/{ui => }/truncate/index.js (100%) rename packages/components/src/{ui => }/truncate/stories/index.js (100%) rename packages/components/src/{ui => }/truncate/styles.js (80%) rename packages/components/src/{ui/truncate/test/truncate.js => truncate/test/index.js} (100%) rename packages/components/src/{ui => }/truncate/types.ts (100%) rename packages/components/src/{ui => }/truncate/utils.js (100%) delete mode 100644 packages/components/src/ui/base-button/component.js delete mode 100644 packages/components/src/ui/base-button/hook.js delete mode 100644 packages/components/src/ui/base-button/index.js delete mode 100644 packages/components/src/ui/base-button/loading-overlay.js delete mode 100644 packages/components/src/ui/base-button/styles.js delete mode 100644 packages/components/src/ui/base-button/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/base-button/test/index.js delete mode 100644 packages/components/src/ui/base-button/types.ts delete mode 100644 packages/components/src/ui/button-group/README.md delete mode 100644 packages/components/src/ui/button-group/component.js delete mode 100644 packages/components/src/ui/button-group/context.js delete mode 100644 packages/components/src/ui/button-group/index.js delete mode 100644 packages/components/src/ui/button-group/stories/index.js delete mode 100644 packages/components/src/ui/button-group/styles.js delete mode 100644 packages/components/src/ui/button-group/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/button-group/test/index.js delete mode 100644 packages/components/src/ui/button-group/types.ts delete mode 100644 packages/components/src/ui/button/README.md delete mode 100644 packages/components/src/ui/button/component.js delete mode 100644 packages/components/src/ui/button/index.js delete mode 100644 packages/components/src/ui/button/stories/index.js delete mode 100644 packages/components/src/ui/button/styles.js delete mode 100644 packages/components/src/ui/button/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/button/test/index.js create mode 100644 packages/components/src/ui/context/get-styled-class-name-from-key.ts delete mode 100644 packages/components/src/ui/control-group/stories/index.js delete mode 100644 packages/components/src/ui/flex/flex.js delete mode 100644 packages/components/src/ui/flex/index.js delete mode 100644 packages/components/src/ui/flex/stories/index.js delete mode 100644 packages/components/src/ui/flex/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/font-size-control/README.md delete mode 100755 packages/components/src/ui/font-size-control/font-size-control.js delete mode 100644 packages/components/src/ui/font-size-control/index.js delete mode 100755 packages/components/src/ui/font-size-control/select.js delete mode 100755 packages/components/src/ui/font-size-control/slider.js delete mode 100755 packages/components/src/ui/font-size-control/styles.js delete mode 100755 packages/components/src/ui/font-size-control/use-font-size-control.js delete mode 100755 packages/components/src/ui/font-size-control/utils.js delete mode 100644 packages/components/src/ui/heading/index.ts delete mode 100644 packages/components/src/ui/heading/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/ui/portal/README.md delete mode 100644 packages/components/src/ui/portal/component.js delete mode 100644 packages/components/src/ui/portal/index.js delete mode 100644 packages/components/src/ui/portal/test/index.js delete mode 100644 packages/components/src/ui/text/README.md delete mode 100644 packages/components/src/ui/text/index.js delete mode 100644 packages/components/src/ui/text/stories/index.js delete mode 100644 packages/components/src/ui/text/test/__snapshots__/text.js.snap delete mode 100644 packages/components/src/ui/text/test/text.js delete mode 100644 packages/components/src/ui/tooltip-button/README.md delete mode 100644 packages/components/src/ui/tooltip-button/component.tsx delete mode 100644 packages/components/src/ui/tooltip-button/index.js delete mode 100644 packages/components/src/ui/tooltip-button/stories/index.js delete mode 100644 packages/components/src/ui/tooltip-button/test/index.js delete mode 100644 packages/components/src/ui/utils/create-component.js create mode 100644 packages/components/src/ui/utils/create-component.tsx create mode 100644 packages/components/src/ui/utils/font-size.ts create mode 100644 packages/components/src/ui/utils/get-high-dpi.ts create mode 100644 packages/components/src/ui/utils/get-valid-children.ts create mode 100644 packages/components/src/ui/utils/space.ts create mode 100644 packages/components/src/ui/utils/use-responsive-value.ts delete mode 100644 packages/components/src/ui/visually-hidden/README.md delete mode 100644 packages/components/src/ui/visually-hidden/index.js delete mode 100644 packages/components/src/ui/visually-hidden/stories/index.js delete mode 100644 packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/utils/z-index.js rename packages/components/src/{ui => }/visually-hidden/component.js (76%) rename packages/components/src/{ui => }/visually-hidden/hook.js (63%) delete mode 100644 packages/components/src/visually-hidden/next.js delete mode 100644 packages/components/src/visually-hidden/style.scss rename packages/components/src/{ui => }/visually-hidden/styles.js (77%) create mode 100644 packages/components/src/visually-hidden/test/__snapshots__/index.js.snap rename packages/components/src/{ui => }/visually-hidden/test/index.js (92%) delete mode 100644 packages/components/src/visually-hidden/utils.js delete mode 100644 packages/compose/src/higher-order/if-condition/index.js create mode 100644 packages/compose/src/higher-order/if-condition/index.tsx delete mode 100644 packages/compose/src/higher-order/pure/index.js create mode 100644 packages/compose/src/higher-order/pure/index.tsx delete mode 100644 packages/compose/src/utils/create-higher-order-component/index.js create mode 100644 packages/compose/src/utils/create-higher-order-component/index.ts create mode 100644 packages/compose/tsconfig.json create mode 100644 packages/dom/src/dom/is-rtl.js create mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.serialized.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.serialized.html create mode 100644 packages/e2e-tests/specs/experiments/customizing-widgets.test.js create mode 100644 packages/edit-site/src/components/block-editor/block-inspector-button.js delete mode 100644 packages/edit-site/src/components/notices/index.js delete mode 100644 packages/edit-site/src/components/notices/style.scss create mode 100644 packages/react-i18n/CHANGELOG.md create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js create mode 100644 packages/rich-text/src/component/use-format-boundaries.js create mode 100644 packages/scripts/config/.prettierignore create mode 100644 packages/scripts/config/jest-github-actions-reporter.js diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index d7fd45936bc35..50df1242ebdfb 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -15,7 +15,12 @@ /packages/block-library/src/gallery @mkevins /packages/block-library/src/social-links @mkaz /packages/block-library/src/social-link @mkaz -/packages/block-library/src/image @ajlende + +# Duotone +/lib/block-supports/duotone.php @ajlende +/packages/block-editor/src/components/duotone-control @ajlende +/packages/block-editor/src/hooks/duotone.js @ajlende +/packages/components/src/duotone-picker @ajlende # Editor /packages/annotations @atimmer diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 9552175c283ff..97faf7f5a183d 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -5,6 +5,7 @@ on: push: branches: - trunk + - 'release/**' - 'wp/**' jobs: diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index ba66847963df7..a5bc053d4c8e2 100644 --- a/.github/workflows/static-checks.yml +++ b/.github/workflows/static-checks.yml @@ -5,6 +5,7 @@ on: push: branches: - trunk + - 'release/**' - 'wp/**' jobs: @@ -42,9 +43,6 @@ jobs: - name: Lint JavaScript and Styles run: npm run lint - - name: Lint ES5 built files (IE11) - run: npx eslint --parser-options=ecmaVersion:5 --no-eslintrc --no-ignore ./build/**/*.js - - name: Type checking run: npm run build:package-types diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 50eb5351225bf..7084b8d964230 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -39,3 +39,4 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./storybook/build + force_orphan: true diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index b1d0bb6278bb4..87a598a1646e4 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -7,6 +7,7 @@ on: push: branches: - trunk + - 'release/**' - 'wp/**' jobs: diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000000..39d3acb571b21 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +.cache +build +build-module +build-types +packages/block-serialization-spec-parser/parser.js +packages/e2e-tests/plugins +packages/react-native-editor/bundle +vendor diff --git a/bin/packages/build.js b/bin/packages/build.js index 397a136ba7246..ff26c904fd884 100755 --- a/bin/packages/build.js +++ b/bin/packages/build.js @@ -114,6 +114,18 @@ function createStyleEntryTransform() { const entries = await glob( path.resolve( PACKAGES_DIR, packageName, 'src/*.scss' ) ); + + // Account for the specific case where block styles in + // block-library package also need rebuilding. + if ( + packageName === 'block-library' && + [ 'style.scss', 'editor.scss' ].includes( + path.basename( file ) + ) + ) { + entries.push( file ); + } + entries.forEach( ( entry ) => this.push( entry ) ); // Find other stylesheets that need to be rebuilt because diff --git a/bin/packages/watch.js b/bin/packages/watch.js index 404d45dd0309e..c0e8ca1586dae 100644 --- a/bin/packages/watch.js +++ b/bin/packages/watch.js @@ -31,6 +31,20 @@ function exists( filename ) { return false; } +/** + * Is the path name a directory? + * + * @param {string} pathname + * + * @return {boolean} True if the given path is a directory. + */ +function isDirectory( pathname ) { + try { + return fs.statSync( pathname ).isDirectory(); + } catch ( e ) {} + return false; +} + /** * Determine if a file is source code. * @@ -43,12 +57,16 @@ function exists( filename ) { * @return {boolean} True if the file a source file. */ function isSourceFile( filename ) { + // Only run this regex on the relative path, otherwise we might run + // into some false positives when eg. the project directory contains `src` + const relativePath = path.relative( process.cwd(), filename ); + return ( - /\/src\/.+\.(js|json|scss)$/.test( filename ) && + /\/src\/.+\.(js|json|scss)$/.test( relativePath ) && ! [ /\/(benchmark|__mocks__|__tests__|test|storybook|stories)\/.+/, /.\.(spec|test)\.js$/, - ].some( ( regex ) => regex.test( filename ) ) + ].some( ( regex ) => regex.test( relativePath ) ) ); } @@ -77,6 +95,13 @@ function isModulePackage( filename ) { * @return {boolean | symbol} True if the file should be watched. */ function isWatchableFile( filename, skip ) { + // Recursive file watching is not available on a Linux-based OS. If this is the case, + // the watcher library falls back to watching changes in the subdirectories + // and passes the directories to this filter callback instead. + if ( isDirectory( filename ) ) { + return true; + } + return isSourceFile( filename ) && isModulePackage( filename ) ? true : skip; @@ -147,6 +172,12 @@ watch( PACKAGES_DIR, { recursive: true, delay: 500, filter: isWatchableFile }, ( event, filename ) => { + // Double check whether we're dealing with a file that needs watching, to accomodate for + // the inability to watch recursively on linux-based operating systems. + if ( ! isSourceFile( filename ) || ! isModulePackage( filename ) ) { + return; + } + switch ( event ) { case 'update': updateBuildFile( event, filename ); diff --git a/bin/plugin/commands/common.js b/bin/plugin/commands/common.js index 57326be7205bf..4f3e0bb065243 100644 --- a/bin/plugin/commands/common.js +++ b/bin/plugin/commands/common.js @@ -116,6 +116,7 @@ function calculateVersionBumpFromChangelog( if ( lineNormalized.startsWith( '### deprecation' ) || lineNormalized.startsWith( '### enhancement' ) || + lineNormalized.startsWith( '### new api' ) || lineNormalized.startsWith( '### new feature' ) ) { versionBump = 'minor'; diff --git a/changelog.txt b/changelog.txt index 87ff18257b265..fadf7aa370632 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,203 +1,255 @@ == Changelog == -= 10.5.0-rc.1 = += 10.5.3 = +## Bug Fixes + - Fix the stylesheet loading order for non FSE themes. + + += 10.5.2 = + +## Bug Fixes + + - Include new API for useSelect to prevent the global editor white screen. -### Features -- File Block: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857)) += 10.5.1 = + + + +### Bug Fixes + +- Plugin: Fix "Undefined variable: $image_default_size". ([31324](https://github.com/WordPress/gutenberg/pull/31324)) +- Select mode: Fix navigate by pointer. ([31321](https://github.com/WordPress/gutenberg/pull/31321)) +- Fix Inserter Drag and Drop. ([31319](https://github.com/WordPress/gutenberg/pull/31319)) + +### Code Quality + +- Plugin: Unregister only registered block patterns. ([31325](https://github.com/WordPress/gutenberg/pull/31325)) + + + + += 10.5.0 = ### Enhancements -- [Block Library - Site Title]: Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999)) -- docgen: Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971)) -- Add placeholder attribute to the list block. ([30958](https://github.com/WordPress/gutenberg/pull/30958)) -- Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954)) -- Widget Customizer: Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952)) -- Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900)) -- Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896)) -- Button Block: Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870)) -- Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869)) -- Add uploading state to video block. ([30837](https://github.com/WordPress/gutenberg/pull/30837)) -- RN: Add segment controls to mobile editor. ([30822](https://github.com/WordPress/gutenberg/pull/30822)) -- Query Block Patterns: Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817)) -- Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808)) -- Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802)) -- Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731)) -- BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606)) -- Block Library - Buttons: Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394)) -- Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248)) -- Post Schedule: Show post events. ([29716](https://github.com/WordPress/gutenberg/pull/29716)) +- Block Library: + - Buttons: + - Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394)) + - Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525)) + - Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870)) + - Columns: Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248)) + - File: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857)) + - List: Add placeholder attribute. ([30958](https://github.com/WordPress/gutenberg/pull/30958)) + - Post Comments Link: New block added. ([29564](https://github.com/WordPress/gutenberg/pull/29564)) + - Site Logo: + - Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909)) + - Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907)) + - Site Title: + - Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999)) + - Normalize the toolbar (II). ([31032](https://github.com/WordPress/gutenberg/pull/31032)) + - Social Links: + - Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851)) + - Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721)) + - Template Part: Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731)) + - Term Description: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564)) + - Verse: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736)) + - Video: Add uploading state. ([30837](https://github.com/WordPress/gutenberg/pull/30837)) +- Block Patterns: + - Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973)) + - Small adjustments to bundled block patterns. ([31105](https://github.com/WordPress/gutenberg/pull/31105)) + - Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469)) + - Query Patterns: + - Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763)) + - Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817)) +- Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509)) +- Design Tools: + - Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124)) + - BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606)) + - Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869)) +- General Interface: + - Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802)) + - Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808)) + - Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075)) + - Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900)) + - Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339)) +- Icons: Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673)) +- i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419)) +- Publishing Flow: Show post events in the post schedule calendar. ([29716](https://github.com/WordPress/gutenberg/pull/29716)) +- Template Editing Mode: + - Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438)) + - Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860)) + - Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793)) + - Updates the template mode canvas padding and adds a backlink. ([30658](https://github.com/WordPress/gutenberg/pull/30658)) +- Site Editor: + - Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395)) + - Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345)) + - Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336)) + - Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668)) + - Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599)) +- Writing Flow: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924)) + ### Bug Fixes -- Block Editor: Fix the position of vertical add new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035)) -- [Block Library - Site Title]: Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996)) -- block-library: Duplicate media types to avoid bad import. ([30973](https://github.com/WordPress/gutenberg/pull/30973)) -- Block Editor: Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955)) -- Fixes broken github links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875)) -- Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873)) -- Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864)) -- Image Block: Disable media buttons in uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863)) -- Hide the template selector and template mode from non viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861)) -- Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823)) -- Fix post date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790)) -- Widgets API: Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713)) -- Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709)) -- docgen: Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681)) -- docgen: Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675)) -- fix(RadioControl): Checked style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670)) -- Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667)) -- Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654)) -- Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639)) -- Fix crash from non-adjustable unit RangeCell a11y activation. ([30636](https://github.com/WordPress/gutenberg/pull/30636)) -- Site Editor: Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552)) -- Components: Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298)) -- docgen: Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945)) -- Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938)) - API Fetch: Make preloaded OPTIONS requests use `parse` setting. ([28862](https://github.com/WordPress/gutenberg/pull/28862)) +- Block Library: + - Duplicate media types to avoid bad imports. ([30973](https://github.com/WordPress/gutenberg/pull/30973)) + - Image Block: Disable media buttons in the uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863)) + - Query: Fix max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757)) + - Post Title: Fix warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666)) + - Site Title Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996)) +- Block Editor: + - Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955)) + - Fix the position of vertical add a new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035)) + - Template part: Fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928)) +- Components: + - Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010)) + - Apply a StyleProvider around fills that can be used inside the iframe. ([31073](https://github.com/WordPress/gutenberg/pull/31073)) + - Fix "RadioControl: checked" style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670)) + - Fix Post Date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790)) + - Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298)) + - Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667)) +- General Interface: Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823)) +- Inserter: Stop event propagation for the select element's onBlur to fix the behavior in iOS when selecting a pattern category. ([30717](https://github.com/WordPress/gutenberg/pull/30717)) +- Site Editor: + - Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873)) + - Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552)) +- Template Editing Mode: Hide the template selector and template mode from non-viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861)) ### Experiments -- Handbook: Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039)) -- Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015)) -- Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010)) -- Widgets: Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989)) -- Template part block - fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928)) -- Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909)) -- Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907)) -- Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860)) -- Widgets REST API: Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853)) -- Global Styles: Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830)) -- Widget editor: Add toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826)) -- Fix nav placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824)) -- GlobalStyles: Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809)) -- Global Styles: Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801)) -- Use theme locations description instead of slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797)) -- Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793)) -- Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763)) -- Try: Add max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757)) -- Block Library: Fix Post Title warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666)) -- Updates the template mode canvas padding and adds a back link. ([30658](https://github.com/WordPress/gutenberg/pull/30658)) -- Global Styles: Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610)) -- Global Styles: Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605)) -- Global Styles: Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604)) -- theme.json: Add util to transfrom from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600)) -- Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599)) -- Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469)) -- Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441)) -- Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438)) -- Widgets: Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429)) -- Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345)) -- Site Editor: Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336)) -- Block Editor: Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245)) -- Navigation Link: Limit Nesting Depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199)) -- Block Supports: Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124)) -- Navigation: Nav created drafts should not render on frontend. ([29692](https://github.com/WordPress/gutenberg/pull/29692)) -- Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668)) -- New block: Post comments link. ([29564](https://github.com/WordPress/gutenberg/pull/29564)) -- Verse Block: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736)) +- Block-based Widgets: + - API: + - Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429)) + - Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713)) + - Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853)) + - Customizer Integration: + - Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954)) + - Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896)) + - Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952)) + - Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654)) + - Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864)) + - Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431)) + - Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709)) + - Widget editor: + - Add a toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826)) + - Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989)) +- Navigation Editor and Block: + - Fix navigation placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824)) + - Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441)) + - Limit navigation nesting depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199)) + - Nav-created drafts should not render on the front end. ([29692](https://github.com/WordPress/gutenberg/pull/29692)) + - Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390)) + - Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351)) + - Use theme locations description instead of the slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797)) +- Global Styles: + - Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610)) + - Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830)) + - Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809)) + - Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015)) + - Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604)) + - Only remove the default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895)) + - Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801)) + - Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605)) + - theme.json: Add util to transform from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600)) ### Documentation -- Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050)) -- Update Gutenberg mobile v1.51.0 changelog. ([31006](https://github.com/WordPress/gutenberg/pull/31006)) -- Docs: Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980)) -- Docs: Add fix to suggested prefixes of branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953)) -- Handbook: Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911)) -- Handbook: Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819)) -- Docs: Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818)) -- Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796)) -- Handbook: Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792)) -- Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733)) -- docs: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704)) -- Docs: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611)) -- Handbook: Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569)) -- Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501)) -- Handbook: Fixed a type and made the whole explaination more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487)) -- Docs: Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447)) +- docgen: + - Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971)) + - Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681)) + - Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675)) + - Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945)) +- Handbook: + - Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039)) + - Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040)) + - Add fix to suggested prefixes of the branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953)) + - Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911)) + - Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569)) + - Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819)) + - Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818)) + - Fixed a type and made the whole explanation more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487)) + - Fixes broken GitHub links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875)) + - Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946)) + - Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792)) + - Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980)) + - Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733)) + - Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447)) +- Libs: + - Blocks: Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050)) + - Query Utils: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611)) +- License: Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383)) +- Packages: + - Block Library - Social Links: Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652)) + - Components: Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796)) + - Core Data: Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639)) + - Block Editor: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704)) + - Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501)) ### Code Quality -- Block Editor: Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036)) -- Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998)) -- Chore: Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977)) -- Gutenberg Plugin: Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894)) -- dom: Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841)) -- dom: Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807)) -- Gutenberg Plugin: Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794)) -- Remove unnecessary semicolons in PHP. ([30780](https://github.com/WordPress/gutenberg/pull/30780)) -- dom: Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774)) -- dom: Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752)) -- dom: Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750)) -- Gutenberg Plugin: Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715)) -- Gutenberg Plugin: Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714)) +- Block Editor: + - Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036)) + - Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245)) +- Block Library: + - Button Block: Use hook-based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194)) + - Cover: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435)) + - Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977)) +- Block Patterns: Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998)) +- Components: Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048)) +- dom: + - Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750)) + - Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386)) + - Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546)) + - Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774)) + - Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752)) + - Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807)) + - Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841)) +- Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310)) +- Gutenberg Plugin: + - Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894)) + - Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715)) + - Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714)) + - Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794)) + - Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938)) - Improve get_merged_data() code. ([30612](https://github.com/WordPress/gutenberg/pull/30612)) -- dom: Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546)) +- Remove unnecessary semicolons in PHP. ([30780](https://github.com/WordPress/gutenberg/pull/30780)) - Replace older-style PHP type conversion functions with typecasts. ([30531](https://github.com/WordPress/gutenberg/pull/30531)) -- Cover block: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435)) -- dom: Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386)) -- Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310)) ### Tools -- Editor: Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984)) -- Testing: Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981)) -- wp-env: Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882)) -- Packages: Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868)) -- Packages: Use conistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866)) -- Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813)) -- Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748)) -- wp-env: Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692)) -- wp-env: Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651)) -- wp-env: Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646)) -- wp-env: Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638)) -- Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629)) -- Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628)) -- Build Tooling: Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347)) -- Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341)) -- Add Cover block edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270)) -- Scripts: Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240)) -- wp-env: Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053)) -- wp-env.json: Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045)) -- Scripts: Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182)) -- Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808)) -- Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449)) - -### Various - -- Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048)) -- Handbook: Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040)) -- [Block Library - Site Title]: Fix Site Title toolbar normalization. ([31032](https://github.com/WordPress/gutenberg/pull/31032)) -- Documentation: Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946)) -- Block editor: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924)) -- Only remove default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895)) -- Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721)) -- Pattern Categories Select: Stop event propagation for the select element's onBlur to fix behaviour in iOS. ([30717](https://github.com/WordPress/gutenberg/pull/30717)) -- RNMobile: Truncate rangecell screenreader decimals. ([30678](https://github.com/WordPress/gutenberg/pull/30678)) -- Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673)) -- Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652)) -- RNMobile: Use the default div tagName on native for the Quote block. ([30645](https://github.com/WordPress/gutenberg/pull/30645)) -- Plugin Build Workflow: Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615)) -- Remove unnecessary space in HTML tags. ([30585](https://github.com/WordPress/gutenberg/pull/30585)) -- Term Description block: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564)) -- Try: Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525)) -- Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509)) -- Widgets: Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431)) -- i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419)) -- Site Editor: Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395)) -- Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390)) -- Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383)) -- Nav Block: Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351)) -- Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339)) -- Add Cover block replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306)) -- Button Block: Use hook based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194)) -- Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075)) -- Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973)) -- Social Links: Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851)) - - +- Testing: + - Block Library - Cover Block: + - Add edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270)) + - Replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306)) + - Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449)) + - Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813)) + - Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748)) + - Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981)) + - Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984)) +- wp-env: + - Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882)) + - Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045)) + - Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651)) + - Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053)) + - Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692)) + - Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638)) + - Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808)) + - Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646)) +- Build Tooling: + - Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629)) + - Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341)) + - Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628)) + - Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615)) + - Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868)) + - Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347)) + - Use consistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866)) +- Scripts: + - Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182)) + - Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240)) = 10.4.1 = diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index bc6c0e4272cf9..07bee7bd6f7a2 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -2,7 +2,7 @@ This Repository is used to perform several types of releases. This document serves as a checklist for each one of these. It is helpful if you'd like to understand the different workflows. -To release a stable version of the Gutenberg plugin, you need approval from a member of the [`gutenberg-core` team](https://github.com/orgs/WordPress/teams/gutenberg-core) for the final step of the release process (upload to the WordPress.org plugin repo -- see below). If you aren't a member yourself, make sure to contact one ahead of time so they'll be around at the time of the release. +To release a stable version of the Gutenberg plugin, you need approval from a member of the Gutenberg Core team for the final step of the release process (upload to the WordPress.org plugin repo -- see below). If you aren't a member yourself, make sure to contact one ahead of time so they'll be around at the time of the release. You can ping in the [#core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7). To release Gutenberg's npm packages, you need to be part of the [WordPress organization at npm](https://www.npmjs.com/org/wordpress). 🙂 @@ -41,7 +41,7 @@ Only once you're happy with the shape of the release notes should you press the 1. Use the release notes that you just edited to update `changelog.txt`, and 2. upload the new plugin version to the WordPress.org plugin repository (SVN) (only if you're releasing a stable version). -The latter step needs approval by a member of the [`gutenberg-core` team](https://github.com/orgs/WordPress/teams/gutenberg-core). Locate the ["Upload Gutenberg plugin to WordPress.org plugin repo" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job). +The latter step needs approval by a member of the Gutenberg Core team. Locate the ["Upload Gutenberg plugin to WordPress.org plugin repo" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job). This will cause the new version to be available to users of WordPress all over the globe! 💃 You should check that folks are able to install the new version from their Dashboard. @@ -67,7 +67,7 @@ You should also include a performance audit at the end of the release post. You Compile this to a draft post on [make.wordpress.org/core](https://make.wordpress.org/core/); this post should be published after the actual release. -If you don't have access to [make.wordpress.org/core](https://make.wordpress.org/core/), ping [someone on the Gutenberg Core team](https://github.com/orgs/WordPress/teams/gutenberg-core) in the [WordPress #core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7) to publish the post. +If you don't have access to [make.wordpress.org/core](https://make.wordpress.org/core/), ping someone on the Gutenberg Core team in the [WordPress #core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7) to publish the post. ### Creating Release Candidate Patches (done via `git cherry-pick`) diff --git a/docs/contributors/documentation/README.md b/docs/contributors/documentation/README.md index e3033c3c8f88e..569e3073dc070 100644 --- a/docs/contributors/documentation/README.md +++ b/docs/contributors/documentation/README.md @@ -94,6 +94,37 @@ The preferred format for code examples is ESNext, this should be the default vie **Note:** it is not required to include ES5 code examples. The guidance is to include `ES5` code for beginner tutorials, but the majority of code in Gutenberg packages and across the larger React and JavaScript ecosystem is in ESNext. +### Callout Notices + +The Block Editor handbook supports the same [notice styles as other WordPress handbooks](https://make.wordpress.org/docs/handbook/documentation-team-handbook/handbooks-style-and-formatting-guide/#formatting). However, the shortcode implementation is not ideal with the different locations the block editor handbook documentation is published (npm, GitHub). + +The recommended way to implement in markdown is to use the raw HTML and `callout callout-LEVEL` classes. For example: + +```html +
+ This is an **info** callout. +
+``` + +The following classes are available: `info`, `tip`, `alert`, `warning` + +
+This is a **tip** callout. +
+ +
+This is an **info** callout. +
+ +
+This is an **alert** callout. +
+ +
+This is a **warning** callout. +
+ + ### Editor Config You should configure your editor to use Prettier to auto-format markdown documents. See the [Getting Started documentation](/docs/contributors/code/getting-started-with-code-contribution.md) for complete details. @@ -101,12 +132,16 @@ You should configure your editor to use Prettier to auto-format markdown documen An example config for using Visual Studio Code and the Prettier extensions: ```json -"\[markdown\]": { +"[[markdown]]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, ``` +
+ Note: depending on where you are viewing this document, the brackets may show as double, the proper format is just a single bracket. +
+ ## Resources - [Copy Guidelines](/docs/contributors/copy-guide.md) for writing instructions, documentations, or other contributions to Gutenberg project. diff --git a/docs/explanations/architecture/full-site-editing-templates.md b/docs/explanations/architecture/full-site-editing-templates.md index 10f1ac3d537ad..dac115ef92ce8 100644 --- a/docs/explanations/architecture/full-site-editing-templates.md +++ b/docs/explanations/architecture/full-site-editing-templates.md @@ -2,13 +2,15 @@ ## Template and template part flows -> This is the documentation for the current implementation of the block-based templates and template parts themes. This is part of the Full Site Editing project. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors, and theme authors. +
+This is the documentation for the current implementation of the block templates and template parts themes. This is part of the Full Site Editing project. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors, and theme authors. +
-This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend. For an introduction about block-based themes and Full site editing templates, refer to the [block-based themes documentation](/docs/how-to-guides/themes/block-based-themes.md). +This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend. For an introduction about block themes and Full site editing templates, refer to the [block theme documentation](/docs/how-to-guides/themes/block-theme-overview.md). ## Storage -Just like the regular templates, the block-based templates live initially as files in the theme folder but the main difference is that the user can edit these templates in the UI in the Site Editor. +Just like the regular templates, the block templates live initially as files in the theme folder but the main difference is that the user can edit these templates in the UI in the Site Editor. When a user edits a template (or template-part), the initial theme template file is kept as is but a forked version of the template is saved to the `wp_template` custom post type (or `wp_template_part` for template parts). @@ -30,11 +32,11 @@ The synchronization is important for two different flows: - When editing the template and template parts, the site editor frontend fetches the edited and available templates through the REST API. This means that for all `GET` API requests performed to the `wp-templates` and `wp-template-parts` endpoint synchronization is required. - When rendering a template (sometimes referred to as "resolving a template"): this is the algorithm that WordPress follows to traverse the template hierarchy and find the right template to render for the current page being loaded. -- When exporting a block-based theme, we need to export all its templates back as files. The synchronization is required to simplify the operation and only export the CPT templates. +- When exporting a block theme, we need to export all its templates back as files. The synchronization is required to simplify the operation and only export the CPT templates. ## Switching themes -Since block-based themes make use of templates that can refer to each other and that can be saved to a custom post type, it becomes possible to mix templates and template parts from different themes. For example: +Since block themes make use of templates that can refer to each other and that can be saved to a custom post type, it becomes possible to mix templates and template parts from different themes. For example: - A user might like the "header" template part of theme A and would like to use it in theme B. - A user might like the "contact" template from theme A and would like to use it in theme B. diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 5a685ce6053b7..87ac239e03190 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -320,7 +320,7 @@ Blocks are able to provide base structural CSS styles, and themes can add styles Other features, like the new _wide_ and _full-wide_ alignment options, are simply CSS classes applied to blocks that offer this alignment. We are looking at how a theme can opt in to this feature, for example using `add_theme_support`. -This is currently a work in progress and we recommend reviewing the [block based theme documentation](/docs/how-to-guides/block-based-theme/README.md) to learn more. +This is currently a work in progress and we recommend reviewing the [block based theme documentation](/docs/how-to-guides/themes/block-theme-overview.md) to learn more. ## What are block variations? Are they the same as block styles? diff --git a/docs/getting-started/full-site-editing.md b/docs/getting-started/full-site-editing.md new file mode 100644 index 0000000000000..2ce234362af2a --- /dev/null +++ b/docs/getting-started/full-site-editing.md @@ -0,0 +1,61 @@ +# Full Site Editing + +At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551): + +- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more. +- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses. +- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below. +- Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications). +- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block). +- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc. +- Navigation Block: a new block that allows you to edit a site's navigation menu, both in terms of structure and design. +- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality. + +There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places. + +**Jump in:** + +The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/), it is listed in the theme diretory and our development reference theme. You can find other themes in the directory using the [full-site-editing feature tag](https://wordpress.org/themes/tags/full-site-editing/). + +## Get Involved + +An ongoing [FSE Outreach program](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/) is in place with calls for testing and is a great way to get involved and learn about the new features. + +- Join in on [WordPress Slack](https://make.wordpress.org/chat/) at [#fse-outreach-experiment](https://wordpress.slack.com/archives/C015GUFFC00) +- Participate in the [Calls for Testing](https://make.wordpress.org/test/tag/fse-testing-call/) by testing and giving feedback. +- See detailed [How to Test FSE instructions](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/how-to-test-fse/) to get setup to test FSE features. + +## Block Themes + +If you are using the Gutenberg plugin you can run, test, and develop block themes. Block themes are themes built using templates composed using blocks. See [block theme overview](/docs/how-to-guides/themes/block-theme-overview.md) for additional details. + +- See the [Create a Block Theme](/docs/how-to-guides/themes/create-block-theme.md) tutorial for a walk-through of the pieces of a block theme. + +- For examples, see the [WordPress/theme-experiments](https://github.com/WordPress/theme-experiments/) repository with several block themes there including the source for the above mentioned TT1 Blocks. + +- Use the `empty-theme.php` script from theme-experiments repo to generate a starter block theme, it will prompt you with a few questions and create a theme. + +``` +❯ git clone https://github.com/WordPress/theme-experiments +❯ cd theme-experiments +❯ php new-empty-theme.php +Please provide the following information: +Theme name: TestTheme +Description: A theme to test +Author: Marcus Kazmierczak +Theme URI: https://github.com/mkaz + +Your new theme is ready! +``` + +You can then copy the generated directory to your `wp-content/themes` directory and start playing with the Site Editor to build and extend the theme. + +### Template and Template Parts + +See the [architecture document on templates](/docs/explanations/architecture/full-site-editing-templates.md) for an explanation on the internals of how templates and templates parts are rendered in the frontend and edited in the backend. + +### theme.json + +Instead of the proliferation of theme support flags or alternative methods, a new `theme.json` file is being used to define theme settings. **NOTE:** This feature is still experimental and changing, so the interim file name is `experimental-theme.json` + +See [documentation for theme.json](/docs/how-to-guides/themes/theme-json.md). diff --git a/docs/getting-started/glossary.md b/docs/getting-started/glossary.md index 02327c0eb36e0..6518868b09856 100644 --- a/docs/getting-started/glossary.md +++ b/docs/getting-started/glossary.md @@ -11,7 +11,7 @@
The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
Block Based Theme
-
A theme built in block forward way that allows Full Site Editing to work. The core of a block-based theme are its block templates and block template parts. To date, block-based theme templates have been HTML files of block markup that map to templates from the standard WordPress template hierarchy.
+
A theme built in block forward way that allows Full Site Editing to work. The core of a block theme are its block templates and block template parts. To date, block theme templates have been HTML files of block markup that map to templates from the standard WordPress template hierarchy.
Block categories
These are not a WordPress taxonomy, but instead used internally to sort blocks in the Block Library.
diff --git a/docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md b/docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md deleted file mode 100644 index f377eac9d180c..0000000000000 --- a/docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md +++ /dev/null @@ -1,53 +0,0 @@ -# Adding blocks to your theme - -Each template or template part contains the [block grammar](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks), the HTML, for the selected blocks. - -There is more than one way to add blocks to the theme files: - -- Adding and editing blocks in the site editor and exporting the theme. -- Adding block HTML and comments to the HTML files manually. - -## Working with blocks and templates in the site editor - -The beta site editor is available from the WordPress admin area when full site editing is enabled. To use the site editor, a full site editing theme must be installed and active. - -The site editor is similar to the block editor, but is used for the site layout instead of the post and page content. - -Two new menus have been added to the top toolbar of the editor: - -One that shows a list of posts, pages and categories, and indicates the item that is used as the front page. - -![Site editor toolbar page menu](https://wordpress.org/gutenberg/files/2020/07/block-based-themes-page-menu.png) - -And a list of templates and template parts, that indicates the item that is being edited. Hovering over the parts will show a preview. - -![Site editor toolbar template menu](https://wordpress.org/gutenberg/files/2020/07/block-based-themes-template-menu.png) - -Template parts can be selected and edited directly in the site editor, like other blocks: - -![A selected template part is highlighted. When selected, the template part has a limited set of alignment controls in the block toolbar](https://wordpress.org/gutenberg/files/2020/07/block-based-themes-editor-template-part.png) - -Select the header template part in the menu to view and edit it individually. Add the blocks that you would like in your header, for example a site title block, a navigation block, and an image. - -Next, select the footer template part and add some content, for example widget blocks. - -Select the index template again to view the template parts together in the page context. - -To add a post loop to the index template, add a **query** block. The query block includes the query loop and the query pagination. The default loop displays the post title and post content. The query loop and query pagination are also available as individual blocks. - -## Saving templates and template parts - -When you have made your changes, click on the **update design** button in the upper right corner, -where you normally publish and update your content. - -Select the templates and template parts that you want to save: - -![The save menu displays a list of templates and template parts with checkboxes](https://wordpress.org/gutenberg/files/2020/07/block-based-themes-save.png) - -When you save changes in the site editor, the files in the active theme are not updated. Instead, the templates and template parts are saved as custom post types, that are accessed via the appearance menu. - -![The template parts view in the admin area displays a list of all saved template parts](https://wordpress.org/gutenberg/files/2020/07/block-based-themes-appearance-template-parts.png) - -## Exporting changes - -Saved templates and template parts can be exported as a partial theme from the Tools menu in the site editor. The block HTML code can then be copied to the theme that you are editing. diff --git a/docs/how-to-guides/themes/README.md b/docs/how-to-guides/themes/README.md index 26609e7cf3f98..b92293a5f00a1 100644 --- a/docs/how-to-guides/themes/README.md +++ b/docs/how-to-guides/themes/README.md @@ -1,5 +1,10 @@ -# Theming for the Block Editor +# Themes -The new editor provides a number of options for theme designers and developers, including theme-defined color settings, font size control, and much more. +The block editor provides a number of options for theme designers and developers, including theme-defined color settings, font size control, and much more. -In this section, you'll learn about the ways that themes can customize the editor. +**Contents** + +- [Block Theme Overview](/docs/how-to-guides/themes/block-theme-overview.md) +- [Create a Block Theme](/docs/how-to-guides/themes/create-block-theme.md) +- [Global Settings (theme.json)](/docs/how-to-guides/themes/theme-json.md) +- [Theme Support](/docs/how-to-guides/themes/theme-support.md) diff --git a/docs/how-to-guides/themes/block-based-themes.md b/docs/how-to-guides/themes/block-theme-overview.md similarity index 76% rename from docs/how-to-guides/themes/block-based-themes.md rename to docs/how-to-guides/themes/block-theme-overview.md index 6eb8608b0e02f..9098cb76930ea 100644 --- a/docs/how-to-guides/themes/block-based-themes.md +++ b/docs/how-to-guides/themes/block-theme-overview.md @@ -1,18 +1,18 @@ -# Block-based Themes (Experimental) +# Block Theme -> This is the documentation for the current implementation of block-based themes, also known as Full Site Editing or Block Content Areas. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors and theme authors. +
+These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors and theme authors. -> Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. You can provide feedback in the weekly #core-editor chats where the latest progress of this effort will be shared and discussed, or async via Github issues. - -**Note:** To use these features, activate a theme that includes a `block-templates/index.html` file. This will signal to the block editor that the theme should use full-site editing features. +Documentation is shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. You can provide feedback in the weekly #core-editor chats, or #fse-outreach-experiment channels, or async via Github issues. +
-## What is a block-based theme? +## What is a block theme? -A block-based theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, ...), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc. +A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, ...), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc. -## What is the structure of a block-based theme? +## What is the structure of a block theme? -A very simple block-based theme is structured like so: +A very simple block theme is structured like so: ``` theme @@ -96,7 +96,7 @@ Note that it won't take precedence over any of your theme's templates with highe ## Theme Blocks -Some blocks have been made specifically for block-based themes. For example, you'll most likely use the **Site Title** block in your site's header while your **single** block template will most likely include a **Post Title** and a **Post Content** block. +Some blocks have been made specifically for block themes. For example, you'll most likely use the **Site Title** block in your site's header while your **single** block template will most likely include a **Post Title** and a **Post Content** block. As we're still early in the process, the number of blocks specifically dedicated to these block templates is relatively small but more will be added as we move forward with the project. As of Gutenberg 8.5, the following blocks are currently available: @@ -137,4 +137,4 @@ remove_theme_support( 'block-templates' ); ## Resources - [Full Site Editing](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing) label. -- [Theme Experiments](https://github.com/WordPress/theme-experiments) repository, full of block-based theme examples created by the WordPress community. +- [Theme Experiments](https://github.com/WordPress/theme-experiments) repository, full of block theme examples created by the WordPress community. diff --git a/docs/how-to-guides/block-based-theme/README.md b/docs/how-to-guides/themes/create-block-theme.md similarity index 79% rename from docs/how-to-guides/block-based-theme/README.md rename to docs/how-to-guides/themes/create-block-theme.md index d39dd3b0caaa4..86797bc2424e0 100644 --- a/docs/how-to-guides/block-based-theme/README.md +++ b/docs/how-to-guides/themes/create-block-theme.md @@ -1,10 +1,8 @@ -# Creating a block-based theme +# Create a block theme -The purpose of this tutorial is to show how to create a basic block based theme -and help theme developers transition to full site editing. +The purpose of this tutorial is to show how to create a block theme and help theme developers transition to full site editing. -You will learn about the required files, how to combine templates and template parts, -how to add presets for global styles, and how to add blocks and export the templates in the site editor. +You will learn about the required files, how to combine templates and template parts, how to add presets for global styles, and how to add blocks and export the templates in the site editor. Full site editing is an experimental feature and the workflow in this tutorial is likely to change. @@ -12,25 +10,22 @@ This tutorial is up to date as of Gutenberg version 9.1. ## Table of Contents -1. [What is needed to create a block-based theme?](/docs/how-to-guides/block-based-themes/README.md#what-is-needed-to-create-a-block-based-theme) -2. [Creating the theme](/docs/how-to-guides/block-based-themes/README.md#creating-the-theme) -3. [Creating the templates and template parts](/docs/how-to-guides/block-based-themes/README.md#creating-the-templates-and-template-parts) -4. [experimental-theme.json - Global styles](/docs/how-to-guides/block-based-themes/README.md#experimental-theme-json-global-styles) -5. [Adding blocks](/docs/how-to-guides/block-based-themes/block-based-themes-2-adding-blocks.md) +1. [What is needed to create a block-theme?](#what-is-needed-to-create-a-block-theme) +2. [Creating the theme](#creating-the-theme) +3. [Creating the templates and template parts](#creating-the-templates-and-template-parts) +4. [experimental-theme.json - Global styles](#experimental-theme-json-global-styles) -## What is needed to create a block-based theme? +## What is needed to create a block theme? -To use a block based theme you need to have Gutenberg installed and full site editing must be enabled. +To use a block theme you need to use the Gutenberg plugin. -Full site editing can be enabled from the Gutenberg experiments menu in the WordPress admin area. +A block theme is built using HTML templates and template parts. Templates are the main files used in the [template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/), for example index, single or archive. Templates can optionally include structural template parts, for example a header, footer or sidebar. -A block-based theme is built using HTML templates and template parts. Templates are the main files used in the [template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/), for example index, single or archive. Templates can optionally include structural template parts, for example a header, footer or sidebar. - -Each template or template part contains the [block grammar](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks), the HTML, for the selected blocks. The block HTML is generated in and exported from the **site editor**. It can also be added to the theme's HTML files manually. +Each template or template part contains the [block grammar](/docs/explanations/architecture/key-concepts/), the HTML, for the selected blocks. The block HTML is generated in and exported from the **site editor**. It can also be added to the theme's HTML files manually. ### Required files and file structure -A block based theme requires an `index.php` file, an index template file, a `style.css` file, and a `functions.php` file. +A block theme requires an `index.php` file, an index template file, a `style.css` file, and a `functions.php` file. The theme may optionally include an [experimental-theme.json file](/docs/how-to-guides/themes/theme-json.md) to manage global styles. You decide what additional templates and template parts to include in your theme. @@ -90,7 +85,7 @@ _You no longer need to add theme support for the title tag. It is already enable https://developer.wordpress.org/themes/basics/theme-functions/#what-is-functions-php -https://developer.wordpress.org/block-editor/developers/themes/theme-support/ +https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/ ```php **These features are still experimental**. “Experimental” means this is an early implementation subject to drastic and breaking changes. -> -> Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. Please, be welcomed to share yours in the weekly #core-editor chats as well as async via the Github issues and Pull Requests. +
+These features are still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. + +Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. Please share your feedback in the weekly #core-editor or #fse-outreach-experiment channels in Slack, or async in GitHub issues. +
This is documentation for the current direction and work in progress about how themes can hook into the various sub-systems that the Block Editor provides. @@ -58,7 +60,7 @@ There are some areas of styling that would benefit from having shared values tha To address this need, we've started to experiment with CSS Custom Properties, aka CSS Variables, in some places: -- **Presets**: [color palettes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes), [font sizes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), or [gradients](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors. +- **Presets**: [color palettes](/docs/how-to-guides/themes/theme-support.md#block-color-palettes), [font sizes](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or [gradients](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors. {% codetabs %} {% Input %} @@ -89,7 +91,7 @@ To address this need, we've started to experiment with CSS Custom Properties, ak {% Output %} ```css -:root { +body { --wp--preset--color--black: #000000; --wp--preset--color--white: #ffffff; } @@ -120,7 +122,7 @@ To address this need, we've started to experiment with CSS Custom Properties, ak {% Output %} ```css -:root { +body { --wp--custom--line-height--body: 1.7; --wp--custom--line-height--heading: 1.3; } @@ -290,7 +292,7 @@ For example: {% Output %} ```css -:root { +body { --wp--preset--color--strong-magenta: #a156b4; --wp--preset--color--very-dark-gray: #444; --wp--preset--font-size--big: 32; @@ -342,7 +344,7 @@ For example: {% Output %} ```css -:root { +body { --wp--custom--base-font: 16; --wp--custom--line-height--small: 1.2; --wp--custom--line-height--medium: 1.4; @@ -432,7 +434,7 @@ For example: {% Output %} ```css -:root { +body { color: var( --wp--preset--color--primary ); } h1 { @@ -547,7 +549,7 @@ For example: {% Output %} ```css -:root { +body { --wp--custom--line-height--body: 1.7; --wp--custom--font-primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; } diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index 404647d6004ae..9f8f9baa9f368 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/docs/how-to-guides/themes/theme-support.md @@ -397,7 +397,7 @@ Using the Gutenberg plugin (version 8.3 or later), link color control is availab add_theme_support('experimental-link-color'); ``` -If a theme opts in, it should [define default link colors](https://developer.wordpress.org/block-editor/developers/themes/theme-json/#color-properties) in `experimental-theme.json` (or in its theme styles if no `experimental-theme.json` is present). For example: +If a theme opts in, it should [define default link colors](/docs/how-to-guides/themes/theme-json.md#color-properties) in `experimental-theme.json` (or in its theme styles if no `experimental-theme.json` is present). For example: ```css { diff --git a/docs/manifest.json b/docs/manifest.json index 208231d556a1d..73995624c75e1 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -71,6 +71,12 @@ "markdown_source": "../docs/getting-started/tutorials/create-block/submitting-to-block-directory.md", "parent": "create-block" }, + { + "title": "Full Site Editing", + "slug": "full-site-editing", + "markdown_source": "../docs/getting-started/full-site-editing.md", + "parent": "handbook" + }, { "title": "Glossary", "slug": "glossary", @@ -288,40 +294,40 @@ "parent": "block-tutorial" }, { - "title": "Feature Flags", - "slug": "feature-flags", - "markdown_source": "../docs/how-to-guides/feature-flags.md", - "parent": "how-to-guides" - }, - { - "title": "Theming for the Block Editor", + "title": "Themes", "slug": "themes", "markdown_source": "../docs/how-to-guides/themes/README.md", "parent": "how-to-guides" }, { - "title": "Theme Support", - "slug": "theme-support", - "markdown_source": "../docs/how-to-guides/themes/theme-support.md", + "title": "Block Theme", + "slug": "block-theme-overview", + "markdown_source": "../docs/how-to-guides/themes/block-theme-overview.md", "parent": "themes" }, { - "title": "Themes & Block Editor: experimental theme.json", + "title": "Create a block theme", + "slug": "create-block-theme", + "markdown_source": "../docs/how-to-guides/themes/create-block-theme.md", + "parent": "themes" + }, + { + "title": "Global Settings (theme.json)", "slug": "theme-json", "markdown_source": "../docs/how-to-guides/themes/theme-json.md", "parent": "themes" }, { - "title": "Creating a block-based theme", - "slug": "block-based-theme", - "markdown_source": "../docs/how-to-guides/block-based-theme/README.md", - "parent": "how-to-guides" + "title": "Theme Support", + "slug": "theme-support", + "markdown_source": "../docs/how-to-guides/themes/theme-support.md", + "parent": "themes" }, { - "title": "Adding blocks to your theme", - "slug": "block-based-themes-2-adding-blocks", - "markdown_source": "../docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md", - "parent": "block-based-theme" + "title": "Feature Flags", + "slug": "feature-flags", + "markdown_source": "../docs/how-to-guides/feature-flags.md", + "parent": "how-to-guides" }, { "title": "Backward Compatibility", @@ -773,10 +779,22 @@ "markdown_source": "../packages/components/src/external-link/README.md", "parent": "components" }, + { + "title": "FlexBlock", + "slug": "flex-block", + "markdown_source": "../packages/components/src/flex/flex-block/README.md", + "parent": "components" + }, + { + "title": "FlexItem", + "slug": "flex-item", + "markdown_source": "../packages/components/src/flex/flex-item/README.md", + "parent": "components" + }, { "title": "Flex", "slug": "flex", - "markdown_source": "../packages/components/src/flex/README.md", + "markdown_source": "../packages/components/src/flex/flex/README.md", "parent": "components" }, { @@ -821,6 +839,12 @@ "markdown_source": "../packages/components/src/guide/README.md", "parent": "components" }, + { + "title": "Heading", + "slug": "heading", + "markdown_source": "../packages/components/src/heading/README.md", + "parent": "components" + }, { "title": "NavigateRegions", "slug": "navigate-regions", @@ -1121,6 +1145,12 @@ "markdown_source": "../packages/components/src/tree-select/README.md", "parent": "components" }, + { + "title": "Truncate", + "slug": "truncate", + "markdown_source": "../packages/components/src/truncate/README.md", + "parent": "components" + }, { "title": "UnitControl", "slug": "unit-control", diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index 35e014595b0c8..6a4160906ba3b 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -438,7 +438,7 @@ return array( ## Internationalization -WordPress string discovery automatically will translate fields marked in the documentation as translatable using the `textdomain` property when specified in the `block.json` file. In that case, localized properties will be automatically wrapped in `_x` function calls on the backend of WordPress when executing `register_block_type_from_metadata`. These translations are added as an inline script to the `wp-block-library` script handle in WordPress core or to the plugin's script handle. +WordPress string discovery system can automatically translate fields marked in this document as translatable. First, you need to set the `textdomain` property in the `block.json` file that provides block metadata. **Example:** @@ -451,19 +451,40 @@ WordPress string discovery automatically will translate fields marked in the doc } ``` -The way `register_block_type_from_metadata` processes translatable values is roughly equivalent to: +### PHP + +In PHP, localized properties will be automatically wrapped in `_x` function calls on the backend of WordPress when executing `register_block_type_from_metadata`. These translations get added as an inline script to the plugin's script handle or to the `wp-block-library` script handle in WordPress core. + +The way `register_block_type_from_metadata` processes translatable values is roughly equivalent to the following code snippet: ```php _x( 'My block', 'block title', 'my-plugin' ), 'description' => _x( 'My block is fantastic!', 'block description', 'my-plugin' ), - 'keywords' => array( _x( 'fantastic', 'block keywords', 'my-plugin' ) ), + 'keywords' => array( _x( 'fantastic', 'block keyword', 'my-plugin' ) ), ); ``` Implementation follows the existing [get_plugin_data](https://codex.wordpress.org/Function_Reference/get_plugin_data) function which parses the plugin contents to retrieve the plugin’s metadata, and it applies translations dynamically. +### JavaScript + +In JavaScript, you need to use `registerBlockTypeFromMetadata` method from `@wordpress/blocks` package to process loaded block metadata. All localized properties get automatically wrapped in `_x` (from `@wordpress/i18n` package) function calls similar to how it works in PHP. + +**Example:** + +```js +import { registerBlockTypeFromMetadata } from '@wordpress/blocks'; +import Edit from './edit'; +import metadata from './block.json'; + +registerBlockTypeFromMetadata( metadata, { + edit: Edit, + // ...other client-side settings +} ); +``` + ## Backward Compatibility The existing registration mechanism (both server side and frontend) will continue to work, it will serve as low-level implementation detail for the `block.json` based registration. diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md index 4122651b7713a..52b30fcb9b20a 100644 --- a/docs/reference-guides/block-api/block-patterns.md +++ b/docs/reference-guides/block-api/block-patterns.md @@ -1,23 +1,33 @@ # Patterns -Block Patterns are predefined block layouts, ready to insert and tweak. +Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. -## Block Patterns Registration +In this Document: +* [`register_block_pattern`](#register_block_pattern) +* [`unregister_block_pattern`](#unregister_block_pattern) +* [`register_block_pattern_category`](#register_block_pattern_category) +* [`unregister_block_pattern_category`](#unregister_block_pattern_category) + +## Block Patterns ### register_block_pattern -The editor comes with a list of built-in block patterns. Theme and plugin authors can register addition custom block patterns using the `register_block_pattern` function. +The editor comes with several core block patterns. Theme and plugin authors can register additional custom block patterns using the `register_block_pattern` helper function. -The `register_block_pattern` function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument. +The `register_block_pattern` helper function receives two arguments. +- `title`: A machine-readable title with a naming convention of `namespace/title`. +- `properties`: An array describing properties of the pattern. -The properties of the block pattern include: +The properties available for block patterns are: - `title` (required): A human-readable title for the pattern. -- `content` (required): Raw HTML content for the pattern. -- `description`: A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. -- `categories`: An array of pattern categories used to group block patterns. Block patterns can be shown on multiple categories. -- `keywords`: An array of aliases or keywords that help users discover the pattern while searching. -- `viewportWidth`: An integer specifying the width of the pattern in the inserter. +- `content` (required): Block HTML Markup for the pattern. +- `description` (optional): A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. The description will help users discover the pattern while searching. +- `categories` (optional): An array of registered pattern categories used to group block patterns. Block patterns can be shown on multiple categories. A category must be registered separately in order to be used here. +- `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching. +- `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter. + +The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern': ```php register_block_pattern( @@ -27,33 +37,62 @@ register_block_pattern( 'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ), 'content' => "\n
\n
" . esc_html__( 'Button One', 'my-plugin' ) . "
\n\n\n\n
" . esc_html__( 'Button Two', 'my-plugin' ) . "
\n
\n", ) -); +); ``` -### unregister_block_pattern +_Note:_ -`unregister_block_pattern` allows unregistering a pattern previously registered on the server using `register_block_pattern`. +`register_block_pattern()` should be called from a handler attached to the init hook. -The function's argument is the registered name of the pattern. +```php +function my_plugin_register_my_patterns() { + register_block_pattern( ... ); +} + +add_action( 'init', 'my_plugin_register_my_patterns' ); +``` -The following code sample unregisters the style named 'my-plugin/my-awesome-pattern': +## Unregistering Block Patterns + +### unregister_block_pattern + +The `unregister_block_pattern` helper function allows for a previously registered block pattern to be unregistered from a theme or plugin and receives one argument. +- `title`: The name of the block pattern to be unregistered. + +The following code sample unregisters the block pattern named 'my-plugin/my-awesome-pattern': ```php unregister_block_pattern( 'my-plugin/my-awesome-pattern' ); ``` +_Note:_ + +`unregister_block_pattern()` should be called from a handler attached to the init hook. + +```php +function my_plugin_unregister_my_patterns() { + unregister_block_pattern( ... ); +} + +add_action( 'init', 'my_plugin_unregister_my_patterns' ); +``` + ## Block Pattern Categories -Block patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom block patterns. You can also register your own pattern categories. +Block patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom block patterns. You can also register your own block pattern categories. ### register_block_pattern_category -The `register_block_pattern_category` function receives the name of the category as the first argument and an array describing properties of the category as the second argument. +The `register_block_pattern_category` helper function receives two arguments. +- `title`: A machine-readable title for the block pattern category. +- `properties`: An array describing properties of the pattern category. The properties of the pattern categories include: - `label` (required): A human-readable label for the pattern category. +The following code sample registers the category named 'hero': + ```php register_block_pattern_category( 'hero', @@ -61,14 +100,39 @@ register_block_pattern_category( ); ``` +_Note:_ + +`register_block_pattern_category()` should be called from a handler attached to the init hook. + +```php +function my_plugin_register_my_pattern_categories() { + register_block_pattern_category( ... ); +} + +add_action( 'init', 'my_plugin_register_my_pattern_categories' ); +``` + ### unregister_block_pattern_category `unregister_block_pattern_category` allows unregistering a pattern category. -The function's argument is the name of the pattern category to unregister. +The `unregister_block_pattern_category` helper function allows for a previously registered block pattern category to be unregistered from a theme or plugin and receives one argument. +- `title`: The name of the block pattern category to be unregistered. The following code sample unregisters the category named 'hero': ```php unregister_block_pattern_category( 'hero' ); ``` + +_Note:_ + +`unregister_block_pattern_category()` should be called from a handler attached to the init hook. + +```php +function my_plugin_unregister_my_pattern_categories() { + unregister_block_pattern_category( ... ); +} + +add_action( 'init', 'my_plugin_unregister_my_pattern_categories' ); +``` \ No newline at end of file diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 97ee464b7fa1d..1f5ab06e7b7b1 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -143,7 +143,7 @@ When the block declares support for `color.background`, the attributes definitio When a user chooses from the list of preset background colors, the preset slug is stored in the `backgroundColor` attribute. - Background color presets are sourced from the `editor-color-palette` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes). + Background color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes). The block can apply a default preset background color by specifying its own attribute with a default e.g.: @@ -157,7 +157,7 @@ When the block declares support for `color.background`, the attributes definitio ``` - `style`: attribute of `object` type with no default assigned. - + When a custom background color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.background` attribute. The block can apply a default custom background color by specifying its own attribute with a default e.g.: @@ -194,7 +194,7 @@ supports: { } ``` -Duotone presets are sourced from `color.duotone` in [theme.json](https://developer.wordpress.org/block-editor/developers/themes/theme-json/). +Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/theme-json.md). When the block declares support for `color.duotone`, the attributes definition is extended to include the attribute `style`: @@ -234,7 +234,7 @@ supports: { } ``` -Gradient presets are sourced from `editor-gradient-presets` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets). +Gradient presets are sourced from `editor-gradient-presets` [theme support](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets). When the block declares support for `color.gradient`, the attributes definition is extended to include two new attributes: `gradient` and `style`: @@ -244,7 +244,7 @@ When the block declares support for `color.gradient`, the attributes definition When a user chooses from the list of preset gradients, the preset slug is stored in the `gradient` attribute. The block can apply a default preset gradient by specifying its own attribute with a default e.g.: - + ```js attributes: { gradient: { @@ -255,9 +255,9 @@ When the block declares support for `color.gradient`, the attributes definition ``` - `style`: attribute of `object` type with no default assigned. - + When a custom gradient is selected (i.e. using the custom gradient picker), the custom gradient value is stored in the `style.color.gradient` attribute. - + The block can apply a default custom gradient by specifying its own attribute with a default e.g.: ```js @@ -296,15 +296,15 @@ supports: { } ``` -Text color presets are sourced from the `editor-color-palette` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes). - +Text color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes). + When the block declares support for `color.text`, the attributes definition is extended to include two new attributes: `textColor` and `style`: - `textColor`: attribute of `string` type with no default assigned. When a user chooses from the list of preset text colors, the preset slug is stored in the `textColor` attribute. - + The block can apply a default preset text color by specifying its own attribute with a default e.g.: ```js @@ -317,9 +317,9 @@ When the block declares support for `color.text`, the attributes definition is e ``` - `style`: attribute of `object` type with no default assigned. - + When a custom text color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.text` attribute. - + The block can apply a default custom text color by specifying its own attribute with a default e.g.: ```js @@ -370,7 +370,7 @@ supports: { This value signals that a block supports the font-size CSS style property. When it does, the block editor will show an UI control for the user to set its value. -The values shown in this control are the ones declared by the theme via the `editor-font-sizes` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), or the default ones if none is provided. +The values shown in this control are the ones declared by the theme via the `editor-font-sizes` [theme support](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or the default ones if none is provided. ```js supports: { @@ -497,16 +497,28 @@ supports: { - Type: `Object` - Default value: null - Subproperties: - - `padding`: type `boolean`, default value `false` + - `padding`: type `boolean` or `array`, default value `false` -This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md##cover-block-padding). +This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md#cover-block-padding). ```js supports: { - padding: true, // Enable padding color UI control. + spacing: { + padding: true, // Enable padding UI control. + } } ``` When the block declares support for a specific spacing property, the attributes definition is extended to include the `style` attribute. - `style`: attribute of `object` type with no default assigned. This is added when `padding` support is declared. It stores the custom values set by the user. + +```js +supports: { + spacing: { + padding: [ 'top', 'bottom' ], // Enable padding for arbitrary sides. + } +} +``` + +A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. \ No newline at end of file diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index bf14e51671995..97011bcce9105 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -160,22 +160,16 @@ _Returns_ # **getBlockInsertionPoint** -Returns the insertion point. This will be: - -1. The insertion point manually set using setInsertionPoint() or - showInsertionPoint(); or -2. The point after the current block selection, if there is a selection; or -3. The point at the end of the block list. - -Components like will default to inserting blocks at this point. +Returns the insertion point, the index at which the new inserted block would +be placed. Defaults to the last index. _Parameters_ -- _state_ `Object`: Global application state. +- _state_ `Object`: Editor state. _Returns_ -- `Object`: Insertion point object with `rootClientId` and `index`. +- `Object`: Insertion point object with `rootClientId`, `index`. # **getBlockListSettings** @@ -853,8 +847,7 @@ _Returns_ # **isBlockInsertionPointVisible** -Whether or not the insertion point should be shown to users. This is set -using showInsertionPoint() or hideInsertionPoint(). +Returns true if we should show the block insertion point. _Parameters_ @@ -862,7 +855,7 @@ _Parameters_ _Returns_ -- `?boolean`: Whether the insertion point should be shown. +- `?boolean`: Whether the insertion point is visible or not. # **isBlockMultiSelected** @@ -1090,7 +1083,7 @@ _Parameters_ # **hideInsertionPoint** -Hides the insertion point for users. +Returns an action object hiding the insertion point. _Returns_ @@ -1406,14 +1399,13 @@ _Returns_ # **showInsertionPoint** -Sets the insertion point and shows it to users. - -Components like will default to inserting blocks at this point. +Returns an action object used in signalling that the insertion point should +be shown. _Parameters_ -- _rootClientId_ `?string`: Root client ID of block list in which to insert. Use `undefined` for the root block list. -- _index_ `number`: Index at which block should be inserted. +- _rootClientId_ `?string`: Optional root client ID of block list on which to insert. +- _index_ `?number`: Index at which block should be inserted. _Returns_ diff --git a/docs/toc.json b/docs/toc.json index 8d62894fb4bf0..d9f66b3d63555 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -37,6 +37,7 @@ } ] }, + { "docs/getting-started/full-site-editing.md": [] }, { "docs/getting-started/glossary.md": [] }, { "docs/getting-started/faq.md": [] }, { "docs/getting-started/history.md": [] }, @@ -128,20 +129,15 @@ } ] }, - { "docs/how-to-guides/feature-flags.md": [] }, { "docs/how-to-guides/themes/README.md": [ - { "docs/how-to-guides/themes/theme-support.md": [] }, - { "docs/how-to-guides/themes/theme-json.md": [] } - ] - }, - { - "docs/how-to-guides/block-based-theme/README.md": [ - { - "docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md": [] - } + { "docs/how-to-guides/themes/block-theme-overview.md": [] }, + { "docs/how-to-guides/themes/create-block-theme.md": [] }, + { "docs/how-to-guides/themes/theme-json.md": [] }, + { "docs/how-to-guides/themes/theme-support.md": [] } ] }, + { "docs/how-to-guides/feature-flags.md": [] }, { "docs/how-to-guides/backward-compatibility/README.md": [ { diff --git a/gutenberg.php b/gutenberg.php index ceb19d706a38d..f7c2e057cb79a 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the new block editor in core. * Requires at least: 5.6 * Requires PHP: 5.6 - * Version: 10.5.0-rc.1 + * Version: 10.5.3 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/lib/block-editor.php b/lib/block-editor.php index 372da86eafa3b..4497a20d559b4 100644 --- a/lib/block-editor.php +++ b/lib/block-editor.php @@ -23,37 +23,37 @@ function gutenberg_get_default_block_categories() { return array( array( 'slug' => 'text', - 'title' => _x( 'Text', 'block category' ), + 'title' => _x( 'Text', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'media', - 'title' => _x( 'Media', 'block category' ), + 'title' => _x( 'Media', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'design', - 'title' => _x( 'Design', 'block category' ), + 'title' => _x( 'Design', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'widgets', - 'title' => _x( 'Widgets', 'block category' ), + 'title' => _x( 'Widgets', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'theme', - 'title' => _x( 'Theme', 'block category' ), + 'title' => _x( 'Theme', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'embed', - 'title' => _x( 'Embeds', 'block category' ), + 'title' => _x( 'Embeds', 'block category', 'gutenberg' ), 'icon' => null, ), array( 'slug' => 'reusable', - 'title' => _x( 'Reusable Blocks', 'block category' ), + 'title' => _x( 'Reusable Blocks', 'block category', 'gutenberg' ), 'icon' => null, ), ); @@ -175,10 +175,10 @@ function gutenberg_get_default_block_editor_settings() { $image_size_names = apply_filters( 'image_size_names_choose', array( - 'thumbnail' => __( 'Thumbnail' ), - 'medium' => __( 'Medium' ), - 'large' => __( 'Large' ), - 'full' => __( 'Full Size' ), + 'thumbnail' => __( 'Thumbnail', 'gutenberg' ), + 'medium' => __( 'Medium', 'gutenberg' ), + 'large' => __( 'Large', 'gutenberg' ), + 'full' => __( 'Full Size', 'gutenberg' ), ) ); @@ -191,7 +191,7 @@ function gutenberg_get_default_block_editor_settings() { } $default_size = get_option( 'image_default_size', 'large' ); - $image_default_size = in_array( $default_size, array_keys( $image_size_names ), true ) ? $image_default_size : 'large'; + $image_default_size = in_array( $default_size, array_keys( $image_size_names ), true ) ? $default_size : 'large'; $image_dimensions = array(); $all_sizes = wp_get_registered_image_subsizes(); diff --git a/lib/block-patterns.php b/lib/block-patterns.php index d0ac6e9c081e9..8d0c4b025a0ca 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -16,6 +16,7 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' +
@@ -25,6 +26,7 @@ +
', ) ); @@ -36,6 +38,7 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' +
@@ -47,6 +50,7 @@
+
', ) ); @@ -58,6 +62,7 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' +
@@ -68,6 +73,7 @@
+
', ) ); @@ -79,6 +85,7 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' +
@@ -86,6 +93,7 @@
+ ', ) ); @@ -98,7 +106,7 @@ 'categories' => array( 'query' ), 'content' => '
- +
@@ -112,7 +120,7 @@
- +
', ) @@ -128,26 +136,26 @@
- +
- +
- +
- +
@@ -213,7 +221,10 @@ function() { } foreach ( $core_block_patterns as $core_block_pattern ) { - unregister_block_pattern( 'core/' . $core_block_pattern ); + $name = 'core/' . $core_block_pattern; + if ( WP_Block_Patterns_Registry::get_instance()->is_registered( $name ) ) { + unregister_block_pattern( $name ); + } } foreach ( $new_core_block_patterns as $core_block_pattern ) { diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index 3bdc2253534c9..e400a89fc0119 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -14,7 +14,7 @@ function gutenberg_register_border_support( $block_type ) { // Determine if any border related features are supported. $has_border_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder' ) ); - $has_border_color_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) ); + $has_border_color_support = gutenberg_has_border_feature_support( $block_type, 'color' ); // Setup attributes and styles within that if needed. if ( ! $block_type->attributes ) { @@ -53,7 +53,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border radius. if ( - gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ) ) && + gutenberg_has_border_feature_support( $block_type, 'radius' ) && isset( $block_attributes['style']['border']['radius'] ) ) { $border_radius = (int) $block_attributes['style']['border']['radius']; @@ -62,7 +62,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border style. if ( - gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'style' ) ) && + gutenberg_has_border_feature_support( $block_type, 'style' ) && isset( $block_attributes['style']['border']['style'] ) ) { $border_style = $block_attributes['style']['border']['style']; @@ -71,7 +71,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border width. if ( - gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'width' ) ) && + gutenberg_has_border_feature_support( $block_type, 'width' ) && isset( $block_attributes['style']['border']['width'] ) ) { $border_width = intval( $block_attributes['style']['border']['width'] ); @@ -79,7 +79,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { } // Border color. - if ( gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) ) ) { + if ( gutenberg_has_border_feature_support( $block_type, 'color' ) ) { $has_named_border_color = array_key_exists( 'borderColor', $block_attributes ); $has_custom_border_color = isset( $block_attributes['style']['border']['color'] ); @@ -125,6 +125,34 @@ function gutenberg_skip_border_serialization( $block_type ) { $border_support['__experimentalSkipSerialization']; } +/** + * Checks whether the current block type supports the border feature requested. + * + * If the `__experimentalBorder` support flag is a boolean `true` all border + * support features are available. Otherwise, the specific feature's support + * flag nested under `experimentalBorder` must be enabled for the feature + * to be opted into. + * + * @param WP_Block_Type $block_type Block type to check for support. + * @param string $feature Name of the feature to check support for. + * @param mixed $default Fallback value for feature support, defaults to false. + * + * @return boolean Whether or not the feature is supported. + */ +function gutenberg_has_border_feature_support( $block_type, $feature, $default = false ) { + // Check if all border support features have been opted into via `"__experimentalBorder": true`. + if ( + property_exists( $block_type, 'supports' ) && + ( true === _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), $default ) ) + ) { + return true; + } + + // Check if the specific feature has been opted into individually + // via nested flag under `__experimentalBorder`. + return gutenberg_block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default ); +} + // Register the block support. WP_Block_Supports::get_instance()->register( 'border', diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 4412f929d0652..27b00ae6bf232 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -75,8 +75,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); $has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false ); + $skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false ); + // Font Size. - if ( $has_font_size_support ) { + if ( $has_font_size_support && ! $skip_font_size_support_serialization ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); diff --git a/lib/blocks.php b/lib/blocks.php index 6cfc53c85d765..2800e4df6b238 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -144,7 +144,7 @@ function gutenberg_reregister_core_block_types() { gutenberg_register_core_block_styles( $block_name ); } - require $blocks_dir . $file; + require_once $blocks_dir . $file; } } } @@ -253,15 +253,21 @@ function( $a, $b ) { $style['css'] = file_get_contents( $style['path'] ); // Set `src` to `false` and add styles inline. - $wp_styles->registered[ $style['handle'] ]->src = false; - $wp_styles->registered[ $style['handle'] ]->extra['after'][] = $style['css']; + $wp_styles->registered[ $style['handle'] ]->src = false; + if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) { + $wp_styles->registered[ $style['handle'] ]->extra['after'] = array(); + } + array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] ); // Add the styles size to the $total_inline_size var. $total_inline_size += (int) $style['size']; } } } +// Run for styles enqueued in . add_action( 'wp_head', 'gutenberg_maybe_inline_styles', 1 ); +// Run for late-loaded styles in the footer. +add_action( 'wp_footer', 'gutenberg_maybe_inline_styles', 1 ); /** * Complements the implementation of block type `core/social-icon`, whether it diff --git a/lib/class-wp-rest-widget-types-controller.php b/lib/class-wp-rest-widget-types-controller.php index 61612e30c785c..75b00e455cd59 100644 --- a/lib/class-wp-rest-widget-types-controller.php +++ b/lib/class-wp-rest-widget-types-controller.php @@ -456,6 +456,58 @@ public function encode_form_data( $request ) { ); } + $serialized_instance = serialize( $instance ); + + $response = array( + 'form' => trim( + $this->get_widget_form( + $widget_object, + $instance + ) + ), + 'preview' => trim( + $this->get_widget_preview( + $widget_object, + $instance + ) + ), + 'instance' => array( + 'encoded' => base64_encode( $serialized_instance ), + 'hash' => wp_hash( $serialized_instance ), + ), + ); + + if ( ! empty( $widget_object->show_instance_in_rest ) ) { + // Use new stdClass so that JSON result is {} and not []. + $response['instance']['raw'] = empty( $instance ) ? new stdClass : $instance; + } + + return rest_ensure_response( $response ); + } + + /** + * Returns the output of WP_Widget::widget() when called with the provided + * instance. Used by encode_form_data() to preview a widget. + + * @param WP_Widget $widget_object Widget object to call widget() on. + * @param array $instance Widget instance settings. + * @return string + */ + private function get_widget_preview( $widget_object, $instance ) { + ob_start(); + the_widget( get_class( $widget_object ), $instance ); + return ob_get_clean(); + } + + /** + * Returns the output of WP_Widget::form() when called with the provided + * instance. Used by encode_form_data() to preview a widget's form. + * + * @param WP_Widget $widget_object Widget object to call widget() on. + * @param array $instance Widget instance settings. + * @return string + */ + private function get_widget_form( $widget_object, $instance ) { ob_start(); /** This filter is documented in wp-includes/class-wp-widget.php */ @@ -475,24 +527,7 @@ public function encode_form_data( $request ) { ); } - $form = ob_get_clean(); - - $serialized_instance = serialize( $instance ); - - $response = array( - 'form' => trim( $form ), - 'instance' => array( - 'encoded' => base64_encode( $serialized_instance ), - 'hash' => wp_hash( $serialized_instance ), - ), - ); - - if ( ! empty( $widget_object->show_instance_in_rest ) ) { - // Use new stdClass so that JSON result is {} and not []. - $response['instance']['raw'] = empty( $instance ) ? new stdClass : $instance; - } - - return rest_ensure_response( $response ); + return ob_get_clean(); } /** diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index 1ec295a06dc77..e44eb0cc520cd 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -39,7 +39,7 @@ class WP_Theme_JSON { * * @var string */ - const ALL_BLOCKS_SELECTOR = ':root'; + const ALL_BLOCKS_SELECTOR = 'body'; /** * How to address the root block @@ -54,7 +54,7 @@ class WP_Theme_JSON { * * @var string */ - const ROOT_BLOCK_SELECTOR = ':root'; + const ROOT_BLOCK_SELECTOR = 'body'; const VALID_TOP_LEVEL_KEYS = array( 'customTemplates', @@ -361,7 +361,7 @@ private static function to_property( $css_name ) { * * { * 'root': { - * 'selector': ':root' + * 'selector': 'body' * }, * 'core/heading/h1': { * 'selector': 'h1' @@ -962,7 +962,7 @@ public function get_template_parts() { * * @return array */ - public static function get_style_nodes( $theme_json, $selectors = array() ) { + private static function get_style_nodes( $theme_json, $selectors = array() ) { $nodes = array(); if ( ! isset( $theme_json['styles'] ) ) { return $nodes; @@ -1001,7 +1001,7 @@ public static function get_style_nodes( $theme_json, $selectors = array() ) { * * @return array */ - public static function get_setting_nodes( $theme_json, $selectors = array() ) { + private static function get_setting_nodes( $theme_json, $selectors = array() ) { $nodes = array(); if ( ! isset( $theme_json['settings'] ) ) { return $nodes; diff --git a/lib/compat.php b/lib/compat.php index 84956857c262d..674412ee400ef 100644 --- a/lib/compat.php +++ b/lib/compat.php @@ -14,7 +14,7 @@ * @return bool */ function gutenberg_should_load_separate_block_assets() { - $load_separate_styles = gutenberg_supports_block_templates(); + $load_separate_styles = gutenberg_is_fse_theme(); /** * Determine if separate styles will be loaded for blocks on-render or not. * @@ -141,23 +141,6 @@ function gutenberg_inject_default_block_context( $args ) { add_filter( 'register_block_type_args', 'gutenberg_inject_default_block_context' ); -/** - * Amends the paths to preload when initializing edit post. - * - * @see https://core.trac.wordpress.org/ticket/50606 - * - * @since 8.4.0 - * - * @param array $preload_paths Default path list that will be preloaded. - * @return array Modified path list to preload. - */ -function gutenberg_preload_edit_post( $preload_paths ) { - $additional_paths = array( '/?context=edit' ); - return array_merge( $preload_paths, $additional_paths ); -} - -add_filter( 'block_editor_preload_paths', 'gutenberg_preload_edit_post' ); - /** * Override post type labels for Reusable Block custom post type. * The labels are different from the ones in Core. diff --git a/lib/editor-settings.php b/lib/editor-settings.php index 9a3b91c69a9f7..e5d0ce8e53cbd 100644 --- a/lib/editor-settings.php +++ b/lib/editor-settings.php @@ -24,6 +24,10 @@ function gutenberg_extend_post_editor_settings( $settings ) { $settings['imageDefaultSize'] = in_array( $image_default_size, $image_sizes, true ) ? $image_default_size : 'large'; $settings['__unstableEnableFullSiteEditingBlocks'] = gutenberg_supports_block_templates(); + if ( gutenberg_is_fse_theme() ) { + $settings['defaultTemplatePartAreas'] = gutenberg_get_allowed_template_part_areas(); + } + return $settings; } add_filter( 'block_editor_settings', 'gutenberg_extend_post_editor_settings' ); diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index 8d9f09878cce8..d8df5d1301bfe 100644 --- a/lib/full-site-editing/edit-site-page.php +++ b/lib/full-site-editing/edit-site-page.php @@ -109,7 +109,7 @@ function gutenberg_edit_site_init( $hook ) { array( 'preload_paths' => array( array( '/wp/v2/media', 'OPTIONS' ), - '/?context=edit', + '/', '/wp/v2/types?context=edit', '/wp/v2/taxonomies?context=edit', '/wp/v2/pages?context=edit', diff --git a/lib/full-site-editing/page-templates.php b/lib/full-site-editing/page-templates.php index e868d963e5aaf..caac07dc98481 100644 --- a/lib/full-site-editing/page-templates.php +++ b/lib/full-site-editing/page-templates.php @@ -8,13 +8,10 @@ /** * Load the page templates in Gutenberg. * - * @param array $templates Page templates. - * @param WP_Theme $theme WP_Theme instance. - * @param WP_Post $post The post being edited, provided for context, or null. - * @param string $post_type Post type to get the templates for. + * @param array $templates Page templates. * @return array (Maybe) modified page templates array. */ -function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_type ) { +function gutenberg_load_block_page_templates( $templates ) { if ( ! gutenberg_supports_block_templates() ) { return $templates; } @@ -27,4 +24,4 @@ function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_t return $templates; } -add_filter( 'theme_templates', 'gutenberg_load_block_page_templates', 10, 4 ); +add_filter( 'theme_templates', 'gutenberg_load_block_page_templates' ); diff --git a/lib/full-site-editing/template-loader.php b/lib/full-site-editing/template-loader.php index 6f96427812aa6..98f9f6b1394fe 100644 --- a/lib/full-site-editing/template-loader.php +++ b/lib/full-site-editing/template-loader.php @@ -20,6 +20,7 @@ function gutenberg_add_template_loader_filters() { add_filter( str_replace( '-', '', $template_type ) . '_template', 'gutenberg_override_query_template', 20, 3 ); } } + add_action( 'wp_loaded', 'gutenberg_add_template_loader_filters' ); /** @@ -69,6 +70,19 @@ function gutenberg_override_query_template( $template, $type, array $templates = $current_template_slug = basename( $template, '.php' ); $current_block_template_slug = is_object( $current_template ) ? $current_template->slug : false; foreach ( $templates as $template_item ) { + + // if the theme is a child theme we want to check if a php template exists + // and that a corresponding block template from the theme and not the parent doesn't exist. + $has_php_template = file_exists( get_stylesheet_directory() . '/' . $type . '.php' ); + $has_block_template = false; + $block_template = _gutenberg_get_template_file( 'wp_template', $type ); + if ( null !== $block_template && wp_get_theme()->get_stylesheet() === $block_template['theme'] ) { + $has_block_template = true; + } + if ( is_child_theme() && ( $has_php_template && ! $has_block_template ) ) { + return $template; + } + $template_item_slug = gutenberg_strip_php_suffix( $template_item ); // Break the loop if the block-template matches the template slug. @@ -129,7 +143,7 @@ function gutenberg_override_query_template( $template, $type, array $templates = } /** - * Return the correct 'wp_template' to render fot the request template type. + * Return the correct 'wp_template' to render for the request template type. * * Accepts an optional $template_hierarchy argument as a hint. * diff --git a/lib/full-site-editing/template-parts.php b/lib/full-site-editing/template-parts.php index e3e0609a99710..6212c190d5bf3 100644 --- a/lib/full-site-editing/template-parts.php +++ b/lib/full-site-editing/template-parts.php @@ -176,6 +176,8 @@ function gutenberg_get_allowed_template_part_areas() { 'General templates often perform a specific role like displaying post content, and are not tied to any particular area.', 'gutenberg' ), + 'icon' => 'layout', + 'area_tag' => 'div', ), array( 'area' => WP_TEMPLATE_PART_AREA_HEADER, @@ -184,6 +186,8 @@ function gutenberg_get_allowed_template_part_areas() { 'The Header template defines a page area that typically contains a title, logo, and main navigation.', 'gutenberg' ), + 'icon' => 'header', + 'area_tag' => 'header', ), array( 'area' => WP_TEMPLATE_PART_AREA_FOOTER, @@ -192,6 +196,8 @@ function gutenberg_get_allowed_template_part_areas() { 'The Footer template defines a page area that typically contains site credits, social links, or any other combination of blocks.', 'gutenberg' ), + 'icon' => 'footer', + 'area_tag' => 'footer', ), ); diff --git a/lib/init.php b/lib/init.php index d320d3bffaf24..880fe852c6fad 100644 --- a/lib/init.php +++ b/lib/init.php @@ -36,7 +36,8 @@ function gutenberg_menu() { __( 'Widgets', 'gutenberg' ), 'edit_theme_options', 'gutenberg-widgets', - 'the_gutenberg_widgets' + 'the_gutenberg_widgets', + 2 ); remove_submenu_page( 'themes.php', 'widgets.php' ); } diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 891153bcd72b2..7fc01d2133910 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -41,6 +41,8 @@ function gutenberg_widgets_init( $hook ) { return; } + add_filter( 'admin_body_class', 'gutenberg_widgets_editor_add_admin_body_classes' ); + $settings = array_merge( gutenberg_get_default_block_editor_settings(), gutenberg_get_legacy_widget_settings() @@ -91,14 +93,15 @@ function gutenberg_widgets_editor_load_block_editor_scripts_and_styles( $is_bloc add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_widgets_editor_load_block_editor_scripts_and_styles' ); /** - * Show responsive embeds correctly on the widgets screen by adding the wp-embed-responsive class. + * Adds admin classes necessary for the block-based widgets screen. + * + * - Adds `block-editor-page` editor body class to allow directly styling the admin pages that are based on the block editor. + * - Shows responsive embeds correctly on the widgets screen by adding the `wp-embed-responsive` class. * * @param string $classes existing admin body classes. * - * @return string admin body classes including the wp-embed-responsive class. + * @return string admin body classes including the `block-editor-page` and `wp-embed-responsive` classes. */ -function gutenberg_widgets_editor_add_responsive_embed_body_class( $classes ) { - return "$classes wp-embed-responsive"; +function gutenberg_widgets_editor_add_admin_body_classes( $classes ) { + return "$classes block-editor-page wp-embed-responsive"; } - -add_filter( 'admin_body_class', 'gutenberg_widgets_editor_add_responsive_embed_body_class' ); diff --git a/package-lock.json b/package-lock.json index 27a6e5816877c..cd0bad87a00b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "10.5.0-rc.1", + "version": "10.5.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1496,6 +1496,7 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz", "integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==", + "dev": true, "requires": { "commander": "^2.15.1" }, @@ -1503,7 +1504,8 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true } } }, @@ -2328,11 +2330,6 @@ "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==", "dev": true }, - "@itsjonq/is": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@itsjonq/is/-/is-0.0.2.tgz", - "integrity": "sha512-P0Ug+chfjCV1JV8MUxAGPz0BM76yDlR76AIfPwRZ6mAJW56k6b9j0s2cIcEsEAu0gNj/RJD1STw777AQyBN3CQ==" - }, "@jest/console": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz", @@ -7724,12 +7721,6 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, - "caniuse-lite": { - "version": "1.0.30001208", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz", - "integrity": "sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==", - "dev": true - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -11919,7 +11910,8 @@ "@types/node": { "version": "14.14.22", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz", - "integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==" + "integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==", + "dev": true }, "@types/node-fetch": { "version": "2.5.10", @@ -13341,7 +13333,6 @@ "@emotion/cache": "^10.0.27", "@emotion/core": "^10.1.1", "@emotion/css": "^10.0.22", - "@emotion/hash": "^0.8.0", "@emotion/native": "^10.0.22", "@emotion/styled": "^10.0.23", "@wordpress/a11y": "file:packages/a11y", @@ -13358,10 +13349,6 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", - "@wp-g2/components": "^0.0.160", - "@wp-g2/context": "^0.0.160", - "@wp-g2/styles": "^0.0.160", - "@wp-g2/utils": "^0.0.160", "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", @@ -13543,7 +13530,7 @@ "is-promise": "^4.0.0", "lodash": "^4.17.19", "memize": "^1.1.0", - "redux": "^4.0.0", + "redux": "^4.1.0", "turbo-combine-reducers": "^1.0.2", "use-memo-one": "^1.1.1" } @@ -13638,7 +13625,7 @@ "chalk": "^4.0.0", "expect-puppeteer": "^4.4.0", "lodash": "^4.17.19", - "puppeteer-testing-library": "^0.3.1", + "puppeteer-testing-library": "^0.4.0", "uuid": "^8.3.0" } }, @@ -14361,9 +14348,10 @@ "mini-css-extract-plugin": "^1.3.9", "minimist": "^1.2.0", "npm-package-json-lint": "^5.0.0", + "postcss": "^8.2.2", "postcss-loader": "^4.2.0", "prettier": "npm:wp-prettier@2.2.1-beta-1", - "puppeteer-core": "^5.5.0", + "puppeteer-core": "^9.0.0", "read-pkg-up": "^1.0.1", "resolve-bin": "^0.4.0", "sass": "^1.26.11", @@ -14378,16 +14366,6 @@ "webpack-cli": "^3.3.11", "webpack-livereload-plugin": "^2.3.0", "webpack-sources": "^2.2.0" - }, - "dependencies": { - "puppeteer-testing-library": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.0.tgz", - "integrity": "sha512-iLD2zaz+d+GYUhZ8DgBL3wyg1KsWUOXUMRQEYgRnjmR6uPJJn6XfZRohQUIqExu2D0rPFNA3PDyqgXHDqeqc6w==", - "requires": { - "jest-diff": "^26.6.2" - } - } } }, "@wordpress/server-side-render": { @@ -14457,136 +14435,6 @@ "lodash": "^4.17.19" } }, - "@wp-g2/components": { - "version": "0.0.160", - "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.160.tgz", - "integrity": "sha512-44qUtiF5Nl/srD7Vzbpcd0im/EIej04fOdDfa0lfDxXJDNK3RRtSSEwCRhok/M5SKCmvYbZKRUx2K0ugXNqK0Q==", - "requires": { - "@popperjs/core": "^2.5.4", - "@wp-g2/context": "^0.0.160", - "@wp-g2/styles": "^0.0.160", - "@wp-g2/utils": "^0.0.160", - "csstype": "^3.0.3", - "downshift": "^6.0.15", - "framer-motion": "^2.1.0", - "highlight-words-core": "^1.2.2", - "history": "^4.9.0", - "lodash": "^4.17.19", - "path-to-regexp": "^1.7.0", - "react-colorful": "4.4.4", - "react-textarea-autosize": "^8.2.0", - "react-use-gesture": "^9.0.0", - "reakit": "^1.3.4" - }, - "dependencies": { - "csstype": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" - }, - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, - "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "requires": { - "isarray": "0.0.1" - } - } - } - }, - "@wp-g2/context": { - "version": "0.0.160", - "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.160.tgz", - "integrity": "sha512-50wSQCZkdZEexP88Ljutskn7/klT2Id1ks4GpzKDSBM8kadrfNdr2iabjgJdFLIH33S+r4dzEnzLs9SFtqUgwg==", - "requires": { - "@wp-g2/create-styles": "^0.0.160", - "@wp-g2/styles": "^0.0.160", - "@wp-g2/utils": "^0.0.160", - "lodash": "^4.17.19" - } - }, - "@wp-g2/create-styles": { - "version": "0.0.160", - "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.160.tgz", - "integrity": "sha512-2/q8jcB9wIyfxkoCfNhz+9otRmAbDwfgk3nSEFhyz9ExR+OCqNUWqmITE3TZ4hYaSsV8E/gUUO4JjnPPy989bA==", - "requires": { - "@emotion/core": "^10.1.1", - "@emotion/hash": "^0.8.0", - "@emotion/is-prop-valid": "^0.8.8", - "@wp-g2/utils": "^0.0.160", - "create-emotion": "^10.0.27", - "emotion": "^10.0.27", - "emotion-theming": "^10.0.27", - "lodash": "^4.17.19", - "mitt": "^2.1.0", - "rtlcss": "^2.6.2", - "styled-griddie": "^0.1.3" - }, - "dependencies": { - "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "requires": { - "@emotion/memoize": "0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" - } - } - }, - "@wp-g2/styles": { - "version": "0.0.160", - "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.160.tgz", - "integrity": "sha512-o91jxb0ZwEDRJrtVVjnqn3qTAXjnxZ1fX5KF3Q7oz776lMZPHsyfC0hvqnOz0w7zqaZZpdWtVQRShgrYXN6JHw==", - "requires": { - "@wp-g2/create-styles": "^0.0.160", - "@wp-g2/utils": "^0.0.160" - } - }, - "@wp-g2/utils": { - "version": "0.0.160", - "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.160.tgz", - "integrity": "sha512-4FhezjKyeYVb+3PZahW1kmqXpCvVvuJM97EcGqkKf+u4Qf66J3n1niHgfnRbn8aNydYK6EFze+6/UL48U35z1w==", - "requires": { - "copy-to-clipboard": "^3.3.1", - "create-emotion": "^10.0.27", - "deepmerge": "^4.2.2", - "fast-deep-equal": "^3.1.3", - "hoist-non-react-statics": "^3.3.2", - "json2mq": "^0.2.0", - "lodash": "^4.17.19", - "memize": "^1.1.0", - "react-merge-refs": "^1.1.0", - "react-resize-aware": "^3.1.0", - "tinycolor2": "^1.4.2", - "use-enhanced-state": "^0.0.13", - "use-isomorphic-layout-effect": "^1.0.0" - }, - "dependencies": { - "fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - }, - "hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "requires": { - "react-is": "^16.7.0" - } - } - } - }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -23670,12 +23518,6 @@ "node-releases": "^1.1.70" } }, - "caniuse-lite": { - "version": "1.0.30001202", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz", - "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==", - "dev": true - }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -24914,41 +24756,26 @@ } }, "browserslist": { - "version": "4.15.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.15.0.tgz", - "integrity": "sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==", + "version": "4.16.5", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.5.tgz", + "integrity": "sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==", "requires": { - "caniuse-lite": "^1.0.30001164", - "colorette": "^1.2.1", - "electron-to-chromium": "^1.3.612", + "caniuse-lite": "^1.0.30001214", + "colorette": "^1.2.2", + "electron-to-chromium": "^1.3.719", "escalade": "^3.1.1", - "node-releases": "^1.1.67" + "node-releases": "^1.1.71" }, "dependencies": { - "caniuse-lite": { - "version": "1.0.30001165", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz", - "integrity": "sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==" - }, "colorette": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", - "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==" + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==" }, "electron-to-chromium": { - "version": "1.3.619", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.619.tgz", - "integrity": "sha512-WFGatwtk7Fw0QcKCZzfGD72hvbcXV8kLY8aFuj0Ip0QRnOtyLYMsc+wXbSjb2w4lk1gcAeNU1/lQ20A+tvuypQ==" - }, - "escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" - }, - "node-releases": { - "version": "1.1.67", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz", - "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==" + "version": "1.3.720", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.720.tgz", + "integrity": "sha512-B6zLTxxaOFP4WZm6DrvgRk8kLFYWNhQ5TrHMC0l5WtkMXhU5UbnvWoTfeEwqOruUSlNMhVLfYak7REX6oC5Yfw==" } } }, @@ -25297,10 +25124,9 @@ } }, "caniuse-lite": { - "version": "1.0.30000998", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000998.tgz", - "integrity": "sha512-8Tj5sPZR9kMHeDD9SZXIVr5m9ofufLLCG2Y4QwQrH18GIwG+kCc+zYdlR036ZRkuKjVVetyxeAgGA1xF7XdmzQ==", - "dev": true + "version": "1.0.30001214", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz", + "integrity": "sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg==" }, "capture-exit": { "version": "2.0.0", @@ -25332,6 +25158,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz", "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==", + "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -25341,6 +25168,7 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, "requires": { "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" @@ -25350,6 +25178,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "requires": { "color-name": "~1.1.4" } @@ -25357,17 +25186,20 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true }, "supports-color": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "dev": true, "requires": { "has-flag": "^4.0.0" } @@ -26810,6 +26642,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "dev": true, "requires": { "toggle-selection": "^1.0.6" } @@ -26954,11 +26787,6 @@ "node-releases": "^1.1.70" } }, - "caniuse-lite": { - "version": "1.0.30001204", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz", - "integrity": "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==" - }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -28112,7 +27940,8 @@ "deepmerge": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", - "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==" + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "dev": true }, "defaults": { "version": "1.0.3", @@ -28428,9 +28257,9 @@ } }, "devtools-protocol": { - "version": "0.0.818844", - "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.818844.tgz", - "integrity": "sha512-AD1hi7iVJ8OD0aMLQU5VK0XH9LDlA1+BcPIgrAxPfaibx2DbWucuyOhc4oyQCbnvDDO68nN6/LcKfqTP343Jjg==", + "version": "0.0.869402", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz", + "integrity": "sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==", "dev": true }, "dezalgo": { @@ -28456,7 +28285,8 @@ "diff-sequences": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz", - "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==" + "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==", + "dev": true }, "diffie-hellman": { "version": "5.0.3", @@ -28814,19 +28644,11 @@ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", "dev": true }, - "emotion": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz", - "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==", - "requires": { - "babel-plugin-emotion": "^10.0.27", - "create-emotion": "^10.0.27" - } - }, "emotion-theming": { "version": "10.0.27", "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz", "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==", + "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/weak-memoize": "0.2.5", @@ -28837,6 +28659,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, "requires": { "react-is": "^16.7.0" } @@ -32587,34 +32410,6 @@ "map-cache": "^0.2.2" } }, - "framer-motion": { - "version": "2.9.5", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-2.9.5.tgz", - "integrity": "sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg==", - "requires": { - "@emotion/is-prop-valid": "^0.8.2", - "framesync": "^4.1.0", - "hey-listen": "^1.0.8", - "popmotion": "9.0.0-rc.20", - "style-value-types": "^3.1.9", - "tslib": "^1.10.0" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - }, - "framesync": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz", - "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==", - "requires": { - "hey-listen": "^1.0.5" - } - }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -34106,19 +33901,6 @@ "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==", "dev": true }, - "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "requires": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -36937,6 +36719,7 @@ "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz", "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==", + "dev": true, "requires": { "chalk": "^4.0.0", "diff-sequences": "^26.6.2", @@ -36948,6 +36731,7 @@ "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==", + "dev": true, "requires": { "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", @@ -36960,6 +36744,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz", "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==", + "dev": true, "requires": { "@types/istanbul-lib-report": "*" } @@ -36967,12 +36752,14 @@ "ansi-regex": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", + "dev": true }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -36981,6 +36768,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "requires": { "color-name": "~1.1.4" } @@ -36988,17 +36776,20 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "jest-get-type": { "version": "26.3.0", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz", - "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==" + "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==", + "dev": true }, "pretty-format": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz", "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==", + "dev": true, "requires": { "@jest/types": "^26.6.2", "ansi-regex": "^5.0.0", @@ -37009,7 +36800,8 @@ "react-is": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", - "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" + "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==", + "dev": true } } }, @@ -40380,14 +40172,6 @@ "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", "dev": true }, - "json2mq": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", - "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", - "requires": { - "string-convert": "^0.2.0" - } - }, "json2php": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.4.tgz", @@ -43814,11 +43598,6 @@ } } }, - "mitt": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", - "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" - }, "mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -46323,24 +46102,6 @@ "@babel/runtime": "^7.12.5" } }, - "popmotion": { - "version": "9.0.0-rc.20", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-rc.20.tgz", - "integrity": "sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==", - "requires": { - "framesync": "^4.1.0", - "hey-listen": "^1.0.8", - "style-value-types": "^3.1.9", - "tslib": "^1.10.0" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", @@ -49546,19 +49307,19 @@ "dev": true }, "puppeteer-core": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz", - "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-9.0.0.tgz", + "integrity": "sha512-cgrnFLg5td0ciW3seGmLPlAf7e2jlIEjZlBOij/byS4iD3DRMHxItzVHv5OwEntkC1eamZqt8+WJJpAaGk6zPw==", "dev": true, "requires": { "debug": "^4.1.0", - "devtools-protocol": "0.0.818844", + "devtools-protocol": "0.0.869402", "extract-zip": "^2.0.0", - "https-proxy-agent": "^4.0.0", + "https-proxy-agent": "^5.0.0", "node-fetch": "^2.6.1", "pkg-dir": "^4.2.0", "progress": "^2.0.1", - "proxy-from-env": "^1.0.0", + "proxy-from-env": "^1.1.0", "rimraf": "^3.0.2", "tar-fs": "^2.0.0", "unbzip2-stream": "^1.3.3", @@ -49566,10 +49327,13 @@ }, "dependencies": { "agent-base": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", - "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==", - "dev": true + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "dev": true, + "requires": { + "debug": "4" + } }, "debug": { "version": "4.3.1", @@ -49612,12 +49376,12 @@ } }, "https-proxy-agent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz", - "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", + "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", "dev": true, "requires": { - "agent-base": "5", + "agent-base": "6", "debug": "4" } }, @@ -49688,9 +49452,9 @@ } }, "puppeteer-testing-library": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.1.tgz", - "integrity": "sha512-k2hRLIPEL+BKBHFncEfs1SSICKa9gfEzdxGa5wO3jHofMszJJnIRg9rNEFVx3+K7OOU8gZEqd+zFGICMZNQ9QA==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.4.0.tgz", + "integrity": "sha512-7G2hZO/JbOgeZppEhh6jLP8J7y1cDExGZT2YtLAczgcDSXBWYz42aUGhVCUADU6BGj8ozp3vfiInWj/KrGUqIw==", "dev": true, "requires": { "jest-diff": "^26.6.2" @@ -49961,11 +49725,6 @@ "prop-types": "^15.5.6" } }, - "react-colorful": { - "version": "4.4.4", - "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-4.4.4.tgz", - "integrity": "sha512-01V2/6rr6sa1vaZntWZJXZxnU7ew02NG2rqq0eoVp4d3gFU5Ug9lDzNMbr+8ns0byXsJbBR8LbwQTlAjz6x7Kg==" - }, "react-dates": { "version": "17.2.0", "resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz", @@ -50063,12 +49822,6 @@ "node-releases": "^1.1.61" } }, - "caniuse-lite": { - "version": "1.0.30001208", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz", - "integrity": "sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==", - "dev": true - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -50629,11 +50382,6 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "dev": true }, - "react-merge-refs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", - "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==" - }, "react-moment-proptypes": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz", @@ -51841,6 +51589,7 @@ "version": "8.3.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.0.tgz", "integrity": "sha512-3GLWFAan2pbwBeoeNDoqGmSbrShORtgWfaWX0RJDivsUrpShh01saRM5RU/i4Zmf+whpBVEY5cA90Eq8Ub1N3w==", + "dev": true, "requires": { "@babel/runtime": "^7.10.2", "use-composed-ref": "^1.0.0", @@ -52121,12 +51870,11 @@ } }, "redux": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz", - "integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", + "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", "requires": { - "loose-envify": "^1.1.0", - "symbol-observable": "^1.2.0" + "@babel/runtime": "^7.9.2" } }, "redux-multi": { @@ -53082,11 +52830,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, - "resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -53193,6 +52936,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz", "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==", + "dev": true, "requires": { "@choojs/findup": "^0.2.1", "chalk": "^2.4.2", @@ -53205,6 +52949,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -53215,6 +52960,7 @@ "version": "6.0.23", "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, "requires": { "chalk": "^2.4.1", "source-map": "^0.6.1", @@ -53224,7 +52970,8 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true } } }, @@ -54605,11 +54352,6 @@ "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", "dev": true }, - "string-convert": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", - "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" - }, "string-length": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz", @@ -55464,7 +55206,8 @@ "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "dev": true }, "strip-outer": { "version": "1.0.1", @@ -55586,27 +55329,6 @@ "inline-style-parser": "0.1.1" } }, - "style-value-types": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz", - "integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==", - "requires": { - "hey-listen": "^1.0.8", - "tslib": "^1.10.0" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - }, - "styled-griddie": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/styled-griddie/-/styled-griddie-0.1.3.tgz", - "integrity": "sha512-RjsiiADJrRpdPTF8NR26nlZutnvkrX78tiM5/za/E+ftVdpjD8ZBb2iOzrIzfix80uDcHYQbg3iIR0lOGaYmEQ==" - }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -55786,12 +55508,6 @@ "fill-range": "^7.0.1" } }, - "caniuse-lite": { - "version": "1.0.30001173", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001173.tgz", - "integrity": "sha512-R3aqmjrICdGCTAnSXtNyvWYMK3YtV5jwudbq0T7nN9k4kmE4CBuwPqyJ+KBzepSTh0huivV2gLbSMEzTTmfeYw==", - "dev": true - }, "chalk": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", @@ -56496,7 +56212,8 @@ "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", + "dev": true }, "symbol-tree": { "version": "3.2.4", @@ -56859,12 +56576,6 @@ "tar-stream": "^2.1.4" }, "dependencies": { - "chownr": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", - "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", - "dev": true - }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -57591,11 +57302,6 @@ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==" }, - "tiny-invariant": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", - "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" - }, "tiny-lr": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz", @@ -57610,11 +57316,6 @@ "qs": "^6.4.0" } }, - "tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", @@ -57691,7 +57392,8 @@ "toggle-selection": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=", + "dev": true }, "toidentifier": { "version": "1.0.0", @@ -57790,7 +57492,8 @@ "ts-essentials": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", - "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==", + "dev": true }, "ts-pnp": { "version": "1.2.0", @@ -58458,28 +58161,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==", + "dev": true, "requires": { "ts-essentials": "^2.0.3" } }, - "use-enhanced-state": { - "version": "0.0.13", - "resolved": "https://registry.npmjs.org/use-enhanced-state/-/use-enhanced-state-0.0.13.tgz", - "integrity": "sha512-RCtUQdhfUXu/0GAQqLnKPetUt3BheYFpOTogppHe9x1XGwluiu6DQLKVNnc3yMfj0HM3IOVBgw5nVJJuZS5TWQ==", - "requires": { - "@itsjonq/is": "0.0.2", - "tiny-warning": "^1.0.3" - } - }, "use-isomorphic-layout-effect": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.0.tgz", - "integrity": "sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==" + "integrity": "sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==", + "dev": true }, "use-latest": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", + "dev": true, "requires": { "use-isomorphic-layout-effect": "^1.0.0" } @@ -58603,11 +58300,6 @@ "builtins": "^1.0.3" } }, - "value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "vargs": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz", diff --git a/package.json b/package.json index 3534b6195bfa8..9fc689abff35b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "10.5.0-rc.1", + "version": "10.5.3", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", @@ -150,7 +150,7 @@ "babel-plugin-react-native-platform-specific-extensions": "1.1.1", "babel-plugin-transform-remove-console": "6.9.4", "benchmark": "2.1.4", - "browserslist": "4.15.0", + "browserslist": "4.16.5", "chalk": "4.0.0", "commander": "4.1.0", "concurrently": "3.5.0", diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index f12bda946e1fc..9d8a3eb09d38e 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.15.0 (2021-03-17) ## 2.9.0 (2020-04-15) diff --git a/packages/a11y/README.md b/packages/a11y/README.md index 46cf83291fd30..5f44a3d22cf39 100644 --- a/packages/a11y/README.md +++ b/packages/a11y/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/a11y --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/a11y/package.json b/packages/a11y/package.json index cbf1633fcc9ec..24e5d95d159a2 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/a11y", - "version": "2.15.2", + "version": "2.15.3", "description": "Accessibility (a11y) utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,6 +20,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md index dad14cc38f45d..225ec2a9fb7cd 100644 --- a/packages/annotations/CHANGELOG.md +++ b/packages/annotations/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.25.0 (2021-03-17) ## 1.24.0 (2020-12-17) diff --git a/packages/annotations/README.md b/packages/annotations/README.md index af3a2263d1175..5c3f3b59d6d7c 100644 --- a/packages/annotations/README.md +++ b/packages/annotations/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/annotations --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Getting Started diff --git a/packages/annotations/package.json b/packages/annotations/package.json index 7e34e9b075484..63e6e28008518 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/annotations", - "version": "1.25.2", + "version": "1.25.3", "description": "Annotate content in the Gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md index 9169fafa457b7..edfb5152a961d 100644 --- a/packages/api-fetch/CHANGELOG.md +++ b/packages/api-fetch/CHANGELOG.md @@ -2,9 +2,16 @@ ## Unreleased -### Breaking changes +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + +## 4.0.0 (2021-04-29) + +### Breaking Changes -- `OPTIONS` requests which are handled by the preloading middleware are no longer resolved as unparsed responses unless you explicitly set `parse: false`, for consistency with other request methods. If you expect an unparsed response, add `{ parse: false }` to your request options to preserve the previous behavior. +- `OPTIONS` requests which are handled by the preloading middleware are no longer resolved as unparsed responses unless you explicitly set `parse: false`, for consistency with other request methods. If you expect an unparsed response, add `{ parse: false }` to your request options to preserve the previous behavior. ## 3.23.1 (2021-04-15) diff --git a/packages/api-fetch/README.md b/packages/api-fetch/README.md index 3fd2db8605ec9..eb1882a9d6e2d 100644 --- a/packages/api-fetch/README.md +++ b/packages/api-fetch/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/api-fetch --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json index 86f3135080228..ab7ea085eb85f 100644 --- a/packages/api-fetch/package.json +++ b/packages/api-fetch/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/api-fetch", - "version": "3.23.1", + "version": "4.0.0", "description": "Utility to make WordPress REST API requests.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md index b6ba6555736ff..3f3e26ee7dbe7 100644 --- a/packages/autop/CHANGELOG.md +++ b/packages/autop/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.12.0 (2021-03-17) ## 2.7.0 (2020-04-15) diff --git a/packages/autop/README.md b/packages/autop/README.md index 882affe18946e..43d6a0ca123d1 100644 --- a/packages/autop/README.md +++ b/packages/autop/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/autop --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ### API diff --git a/packages/autop/package.json b/packages/autop/package.json index c00b9249ee493..43ea2f97d0fde 100644 --- a/packages/autop/package.json +++ b/packages/autop/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 46433925ebad5..b244eb598c18d 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 5.2.0 (2021-04-06) ### Enhancements diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 73ebfe5512560..3e82a7d088be1 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -16,7 +16,9 @@ module.exports = ( api ) => { } ); const getPresetEnv = () => { - const opts = {}; + const opts = { + include: [ 'proposal-nullish-coalescing-operator' ], + }; if ( isTestEnv ) { opts.targets = { diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index 906a695164113..4cd0ca046ae92 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/babel-preset-default", - "version": "5.2.1", + "version": "5.2.2", "description": "Default Babel preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/babel-preset-default/test/__snapshots__/index.js.snap b/packages/babel-preset-default/test/__snapshots__/index.js.snap index 667e2b6594813..249a42b95537c 100644 --- a/packages/babel-preset-default/test/__snapshots__/index.js.snap +++ b/packages/babel-preset-default/test/__snapshots__/index.js.snap @@ -1,67 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Babel preset default transpilation works properly 1`] = ` -"import _asyncToGenerator from \\"@babel/runtime/helpers/asyncToGenerator\\"; -import _awaitAsyncGenerator from \\"@babel/runtime/helpers/awaitAsyncGenerator\\"; -import _wrapAsyncGenerator from \\"@babel/runtime/helpers/wrapAsyncGenerator\\"; -import _regeneratorRuntime from \\"@babel/runtime/regenerator\\"; -describe('Babel preset default', function () { - function foo() { - return _foo.apply(this, arguments); +"describe('Babel preset default', () => { + async function* foo() { + await 1; + yield 2; } - function _foo() { - _foo = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() { - return _regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - _context.next = 2; - return _awaitAsyncGenerator(1); - - case 2: - _context.next = 4; - return 2; - - case 4: - case \\"end\\": - return _context.stop(); - } - } - }, _callee); - })); - return _foo.apply(this, arguments); - } - - test('support for async generator functions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() { - var generator; - return _regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - generator = foo(); - _context2.t0 = expect; - _context2.next = 4; - return generator.next(); - - case 4: - _context2.t1 = _context2.sent; - (0, _context2.t0)(_context2.t1).toEqual({ - done: false, - value: 2 - }); - - case 6: - case \\"end\\": - return _context2.stop(); - } - } - }, _callee2); - }))); - test('support for optional chaining', function () { + test('support for async generator functions', async () => { + const generator = foo(); + expect(await generator.next()).toEqual({ + done: false, + value: 2 + }); + }); + test('support for optional chaining', () => { var _obj$foo, _obj$foo2; - var obj = { + const obj = { foo: { bar: 42 } diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index 792672ba66ddc..03f6bfbdd566d 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -5,6 +5,7 @@ // WordPress grays. $black: #000; // Use only when you truly need pure black. For UI, use $gray-900. $gray-900: #1e1e1e; +$gray-800: #2f2f2f; $gray-700: #757575; // Meets 4.6:1 text contrast against white. $gray-600: #949494; // Meets 3:1 UI or large text contrast against white. $gray-400: #ccc; diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 8baf03c3fa61b..92efe18d7ecdb 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -84,7 +84,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".interface-interface-skeleton__sidebar": 100000, - ".edit-post-layout__toogle-sidebar-panel": 100000, + ".edit-post-layout__toggle-sidebar-panel": 100000, ".edit-site-sidebar": 100000, ".edit-widgets-sidebar": 100000, ".edit-post-layout .edit-post-post-publish-panel": 100001, diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 9da5878f25728..7f5fa45fdc4be 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/base-styles", - "version": "3.4.2", + "version": "3.4.3", "description": "Base SCSS utilities and variables for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md index bd12b7a03757e..ab8fe8c1444cd 100644 --- a/packages/blob/CHANGELOG.md +++ b/packages/blob/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.13.0 (2021-03-17) ## 2.11.0 (2020-10-19) diff --git a/packages/blob/package.json b/packages/blob/package.json index aae6bf44d7f61..c2b981825dc13 100644 --- a/packages/blob/package.json +++ b/packages/blob/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index 9255db7059ea9..a9ea77993ec9e 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.19.0 (2021-03-17) ## 1.18.0 (2020-12-17) diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index f43474acffb7a..a0c5ea8cd7b0d 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -12,7 +12,7 @@ Install the module npm install @wordpress/block-directory --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index f6ff0734026c4..55128781cf4fe 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-directory", - "version": "1.19.2", + "version": "1.19.3", "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 5b420e088ea02..c762040248204 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 5.3.0 (2021-03-17) - Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere. diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 814eb12c18b76..2c895c1f286ac 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/block-editor --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage @@ -194,6 +194,14 @@ _Related_ - +_Parameters_ + +- _props_ `Object`: Fill props. + +_Returns_ + +- `WPElement`: Element. + # **BlockTitle** Renders the block's configured title as a string, or empty if the title @@ -533,7 +541,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **storeConfig** @@ -545,7 +553,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **ToolSelector** diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 231b7062a1b86..007f1982ce641 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-editor", - "version": "5.3.2", + "version": "5.3.3", "description": "Generic block editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js index f66636e2a6265..2392c3d07ee3a 100644 --- a/packages/block-editor/src/components/block-controls/fill.js +++ b/packages/block-editor/src/components/block-controls/fill.js @@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { + __experimentalStyleProvider as StyleProvider, __experimentalToolbarContext as ToolbarContext, ToolbarGroup, } from '@wordpress/components'; @@ -28,21 +29,23 @@ export default function BlockControlsFill( { const Fill = groups[ group ].Fill; return ( - - { ( fillProps ) => { - // Children passed to BlockControlsFill will not have access to any - // React Context whose Provider is part of the BlockControlsSlot tree. - // So we re-create the Provider in this subtree. - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - { group === 'default' && ( - - ) } - { children } - - ); - } } - + + + { ( fillProps ) => { + // Children passed to BlockControlsFill will not have access to any + // React Context whose Provider is part of the BlockControlsSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + { group === 'default' && ( + + ) } + { children } + + ); + } } + + ); } diff --git a/packages/block-editor/src/components/block-list/block-wrapper-elements.js b/packages/block-editor/src/components/block-list/block-wrapper-elements.js deleted file mode 100644 index ce8eb456c9772..0000000000000 --- a/packages/block-editor/src/components/block-list/block-wrapper-elements.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * HTML elements that can be used as a block wrapper. - */ -const ELEMENTS = [ - 'p', - 'div', - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'ol', - 'ul', - 'li', - 'figure', - 'nav', - 'pre', - 'header', - 'section', - 'aside', - 'footer', - 'main', -]; - -export default ELEMENTS; diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js deleted file mode 100644 index a06a644320cda..0000000000000 --- a/packages/block-editor/src/components/block-list/block-wrapper.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * WordPress dependencies - */ -import { forwardRef } from '@wordpress/element'; -import deprecated from '@wordpress/deprecated'; - -/** - * Internal dependencies - */ -import ELEMENTS from './block-wrapper-elements'; -import { useBlockProps } from './use-block-props'; - -const BlockComponent = forwardRef( - ( { children, tagName: TagName = 'div', ...props }, ref ) => { - deprecated( 'wp.blockEditor.__experimentalBlock', { - since: '5.6', - alternative: 'wp.blockEditor.useBlockProps', - } ); - const blockProps = useBlockProps( { ...props, ref } ); - return { children }; - } -); - -const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => { - acc[ element ] = forwardRef( ( props, ref ) => { - return ; - } ); - return acc; -}, BlockComponent ); - -export const Block = ExtendedBlockComponent; diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js deleted file mode 100644 index 507e17bb982ec..0000000000000 --- a/packages/block-editor/src/components/block-list/block-wrapper.native.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Internal dependencies - */ -import ELEMENTS from './block-wrapper-elements'; - -const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => { - acc[ element ] = element; - return acc; -}, String ); - -export const Block = ExtendedBlockComponent; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 352df1fd8a4f3..4d866a6994ec6 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -7,7 +7,6 @@ import classnames from 'classnames'; * WordPress dependencies */ import { AsyncModeProvider, useSelect } from '@wordpress/data'; -import { useRef, createContext, useState } from '@wordpress/element'; import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; /** @@ -16,21 +15,13 @@ import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; import useBlockDropZone from '../use-block-drop-zone'; -import useInsertionPoint from './insertion-point'; -import BlockPopover from './block-popover'; +import { useInBetweenInserter } from './use-in-between-inserter'; +import BlockTools from '../block-tools'; import { store as blockEditorStore } from '../../store'; import { usePreParsePatterns } from '../../utils/pre-parse-patterns'; import { LayoutProvider, defaultLayout } from './layout'; -export const BlockNodes = createContext(); -export const SetBlockNodes = createContext(); - -export default function BlockList( { className, __experimentalLayout } ) { - const ref = useRef(); - const [ blockNodes, setBlockNodes ] = useState( {} ); - const insertionPoint = useInsertionPoint( ref ); - usePreParsePatterns(); - +function Root( { className, children } ) { const isLargeViewport = useViewportMatch( 'medium' ); const { isTyping, @@ -51,31 +42,36 @@ export default function BlockList( { className, __experimentalLayout } ) { isNavigationMode: _isNavigationMode(), }; }, [] ); + return ( +
+ { children } +
+ ); +} +export default function BlockList( { className, __experimentalLayout } ) { + usePreParsePatterns(); return ( - - { insertionPoint } - -
- - - -
- + + + + + ); } diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js deleted file mode 100644 index c209c48f513a6..0000000000000 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ /dev/null @@ -1,419 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { - useState, - useEffect, - useCallback, - useRef, - useMemo, -} from '@wordpress/element'; -import { Popover } from '@wordpress/components'; -import { isRTL } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import Inserter from '../inserter'; -import { getBlockDOMNode } from '../../utils/dom'; -import { store as blockEditorStore } from '../../store'; - -function InsertionPointInserter( { - clientId, - rootClientId, - setIsInserterForced, -} ) { - return ( -
- setIsInserterForced( false ) } - /> -
- ); -} - -function InsertionPointPopover( { - clientId, - selectedRootClientId, - isInserterShown, - isInserterForced, - setIsInserterForced, - containerRef, - showInsertionPoint, -} ) { - const { selectBlock } = useDispatch( blockEditorStore ); - const ref = useRef(); - - const { - previousElement, - nextElement, - orientation, - isHidden, - nextClientId, - rootClientId, - } = useSelect( - ( select ) => { - const { - getBlockOrder, - getBlockRootClientId, - getBlockListSettings, - getMultiSelectedBlockClientIds, - getSelectedBlockClientId, - hasMultiSelection, - getSettings, - } = select( blockEditorStore ); - const { ownerDocument } = containerRef.current; - const targetRootClientId = clientId - ? getBlockRootClientId( clientId ) - : selectedRootClientId; - const blockOrder = getBlockOrder( targetRootClientId ); - if ( ! blockOrder.length ) { - return {}; - } - const previous = clientId - ? clientId - : blockOrder[ blockOrder.length - 1 ]; - const isLast = previous === blockOrder[ blockOrder.length - 1 ]; - const next = isLast - ? null - : blockOrder[ blockOrder.indexOf( previous ) + 1 ]; - const { hasReducedUI } = getSettings(); - const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); - const selectedBlockClientId = getSelectedBlockClientId(); - const blockOrientation = - getBlockListSettings( targetRootClientId )?.orientation || - 'vertical'; - - return { - previousElement: getBlockDOMNode( previous, ownerDocument ), - nextElement: getBlockDOMNode( next, ownerDocument ), - nextClientId: next, - isHidden: - hasReducedUI || - ( hasMultiSelection() - ? next && multiSelectedBlockClientIds.includes( next ) - : next && - blockOrientation === 'vertical' && - next === selectedBlockClientId ), - orientation: blockOrientation, - rootClientId: targetRootClientId, - }; - }, - [ clientId, selectedRootClientId ] - ); - - const style = useMemo( () => { - if ( ! previousElement ) { - return {}; - } - const previousRect = previousElement.getBoundingClientRect(); - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - - if ( orientation === 'vertical' ) { - return { - width: previousElement.offsetWidth, - height: nextRect ? nextRect.top - previousRect.bottom : 0, - }; - } - - let width = 0; - if ( nextElement ) { - width = isRTL() - ? previousRect.left - nextRect.right - : nextRect.left - previousRect.right; - } - - return { - width, - height: previousElement.offsetHeight, - }; - }, [ previousElement, nextElement ] ); - - const getAnchorRect = useCallback( () => { - const previousRect = previousElement.getBoundingClientRect(); - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - if ( orientation === 'vertical' ) { - if ( isRTL() ) { - return { - top: previousRect.bottom, - left: previousRect.right, - right: previousRect.left, - bottom: nextRect ? nextRect.top : previousRect.bottom, - }; - } - - return { - top: previousRect.bottom, - left: previousRect.left, - right: previousRect.right, - bottom: nextRect ? nextRect.top : previousRect.bottom, - }; - } - - if ( isRTL() ) { - return { - top: previousRect.top, - left: nextRect ? nextRect.right : previousRect.left, - right: previousRect.left, - bottom: previousRect.bottom, - }; - } - - return { - top: previousRect.top, - left: previousRect.right, - right: nextRect ? nextRect.left : previousRect.right, - bottom: previousRect.bottom, - }; - }, [ previousElement, nextElement ] ); - - if ( ! previousElement ) { - return null; - } - - const className = classnames( - 'block-editor-block-list__insertion-point', - 'is-' + orientation - ); - - function onClick( event ) { - if ( event.target === ref.current && nextClientId ) { - selectBlock( nextClientId, -1 ); - } - } - - function onFocus( event ) { - // Only handle click on the wrapper specifically, and not an event - // bubbled from the inserter itself. - if ( event.target !== ref.current ) { - setIsInserterForced( true ); - } - } - - // Only show the inserter when there's a `nextElement` (a block after the - // insertion point). At the end of the block list the trailing appender - // should serve the purpose of inserting blocks. - const showInsertionPointInserter = - ! isHidden && nextElement && ( isInserterShown || isInserterForced ); - - // Show the indicator if the insertion point inserter is visible, or if - // the `showInsertionPoint` state is `true`. The latter is generally true - // when hovering blocks for insertion in the block library. - const showInsertionPointIndicator = - showInsertionPointInserter || ( ! isHidden && showInsertionPoint ); - - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ - // While ideally it would be enough to capture the - // bubbling focus event from the Inserter, due to the - // characteristics of click focusing of `button`s in - // Firefox and Safari, it is not reliable. - // - // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus - return ( - -
- { showInsertionPointIndicator && ( -
- ) } - { showInsertionPointInserter && ( - - ) } -
- - ); - /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ -} - -export default function useInsertionPoint( ref ) { - const [ isInserterShown, setIsInserterShown ] = useState( false ); - const [ isInserterForced, setIsInserterForced ] = useState( false ); - const [ inserterClientId, setInserterClientId ] = useState( null ); - const { - isMultiSelecting, - isInserterVisible, - selectedClientId, - selectedRootClientId, - } = useSelect( ( select ) => { - const { - isMultiSelecting: _isMultiSelecting, - isBlockInsertionPointVisible, - getBlockInsertionPoint, - getBlockOrder, - } = select( blockEditorStore ); - - const insertionPoint = getBlockInsertionPoint(); - const order = getBlockOrder( insertionPoint.rootClientId ); - - return { - isMultiSelecting: _isMultiSelecting(), - isInserterVisible: isBlockInsertionPointVisible(), - selectedClientId: order[ insertionPoint.index - 1 ], - selectedRootClientId: insertionPoint.rootClientId, - }; - }, [] ); - const { getBlockListSettings } = useSelect( blockEditorStore ); - - const onMouseMove = useCallback( - ( event ) => { - if ( - ! event.target.classList.contains( - 'block-editor-block-list__layout' - ) - ) { - if ( isInserterShown ) { - setIsInserterShown( false ); - } - return; - } - - let rootClientId; - if ( ! event.target.classList.contains( 'is-root-container' ) ) { - const blockElement = !! event.target.getAttribute( - 'data-block' - ) - ? event.target - : event.target.closest( '[data-block]' ); - rootClientId = blockElement.getAttribute( 'data-block' ); - } - - const orientation = - getBlockListSettings( rootClientId )?.orientation || 'vertical'; - const rect = event.target.getBoundingClientRect(); - const offsetTop = event.clientY - rect.top; - const offsetLeft = event.clientX - rect.left; - - const children = Array.from( event.target.children ); - const nextElement = children.find( ( blockEl ) => { - return ( - ( blockEl.classList.contains( 'wp-block' ) && - orientation === 'vertical' && - blockEl.offsetTop > offsetTop ) || - ( blockEl.classList.contains( 'wp-block' ) && - orientation === 'horizontal' && - blockEl.offsetLeft > offsetLeft ) - ); - } ); - - let element = nextElement - ? children[ children.indexOf( nextElement ) - 1 ] - : children[ children.length - 1 ]; - - if ( ! element ) { - return; - } - - // The block may be in an alignment wrapper, so check the first direct - // child if the element has no ID. - if ( ! element.id ) { - element = element.firstElementChild; - - if ( ! element ) { - return; - } - } - - const clientId = element.id.slice( 'block-'.length ); - - if ( ! clientId ) { - return; - } - - const elementRect = element.getBoundingClientRect(); - - if ( - ( orientation === 'horizontal' && - ( event.clientY > elementRect.bottom || - event.clientY < elementRect.top ) ) || - ( orientation === 'vertical' && - ( event.clientX > elementRect.right || - event.clientX < elementRect.left ) ) - ) { - if ( isInserterShown ) { - setIsInserterShown( false ); - } - return; - } - - setIsInserterShown( true ); - setInserterClientId( clientId ); - }, - [ isInserterShown, setIsInserterShown, setInserterClientId ] - ); - - const enableMouseMove = ! isInserterForced && ! isMultiSelecting; - - useEffect( () => { - if ( ! enableMouseMove ) { - return; - } - - ref.current.addEventListener( 'mousemove', onMouseMove ); - - return () => { - ref.current.removeEventListener( 'mousemove', onMouseMove ); - }; - }, [ enableMouseMove, onMouseMove ] ); - - const isVisible = isInserterShown || isInserterForced || isInserterVisible; - - return ( - ! isMultiSelecting && - isVisible && ( - { - setIsInserterForced( value ); - if ( ! value ) { - setIsInserterShown( value ); - } - } } - containerRef={ ref } - showInsertionPoint={ isInserterVisible } - /> - ) - ); -} diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 16422a98d9376..ebe5d59097395 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -266,7 +266,7 @@ left: $border-width; right: $border-width; bottom: $border-width; - box-shadow: 0 0 0 $border-width $gray-900; + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius. } } @@ -275,7 +275,7 @@ cursor: unset; &::after { - box-shadow: 0 0 0 $border-width $gray-900; // Selected not focussed + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); // Selected not focussed. top: $border-width; left: $border-width; right: $border-width; @@ -341,113 +341,6 @@ cursor: grab; } -.block-editor-block-list__insertion-point { - position: absolute; -} - -.block-editor-block-list__insertion-point-indicator { - position: absolute; - background: var(--wp-admin-theme-color); - - // Provide a muted animation that isn't too noisy. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - - .block-editor-block-list__insertion-point.is-vertical > & { - top: 50%; - right: 0; - left: 0; - height: $border-width; - } - - .block-editor-block-list__insertion-point.is-horizontal > & { - top: 0; - right: 0; - left: 50%; - height: 100%; - width: $border-width; - } -} - -// This is the clickable plus. -.block-editor-block-list__insertion-point-inserter { - // Don't show on mobile. - display: none; - position: absolute; - @include break-mobile() { - display: flex; - } - - justify-content: center; - - top: calc(50% - #{ $button-size-small / 2 }); - left: calc(50% - #{ $button-size-small / 2 }); -} - -.block-editor-block-list__block-popover-inserter { - position: absolute; - top: -9999em; - margin-bottom: $block-padding; - - &.is-visible { - position: static; - } -} - -// Sibling inserter / "inbetweenserter". -.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender, -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button.has-icon { - // Basic look - background: $gray-900; - border-radius: $radius-block-ui; - color: $white; - padding: 0; - - // Special dimensions for this button. - min-width: $button-size-small; - height: $button-size-small; - - &:hover { - color: $white; - background: var(--wp-admin-theme-color); - } - } -} - -.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { - background: var(--wp-admin-theme-color); - &:hover { - background: $gray-900; - } -} - - -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button { - // Fade it in after a delay. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - } -} - -@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { - 0% { - opacity: 0; - } - 60% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - @keyframes block-editor-inserter__toggle__fade-in-animation { from { opacity: 0; @@ -497,133 +390,6 @@ } -/** - * Block Toolbar when contextual. - */ - -.block-editor-block-contextual-toolbar { - // Block UI appearance. - border: $border-width solid $gray-900; - border-radius: $radius-block-ui; - background-color: $white; - - .block-editor-block-toolbar .components-toolbar-group, - .block-editor-block-toolbar .components-toolbar { - border-right-color: $gray-900; - } - - .block-editor-block-mover-button { - overflow: hidden; - } - - // Extra specificity to override standard toolbar button styles. - .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { - min-width: $block-toolbar-height/2; - width: $block-toolbar-height/2; - - svg { - min-width: $block-toolbar-height/2; - } - } -} - -// Position mover arrows for both toolbars. -.block-editor-block-contextual-toolbar, -.edit-post-header-toolbar__block-toolbar, -.edit-site-header-toolbar__block-toolbar, -.edit-navigation-layout__block-toolbar, -.edit-widgets-header__block-toolbar { - - .block-editor-block-mover:not(.is-horizontal) { - // Position SVGs. - .block-editor-block-mover-button { - &:focus::before { - left: 0 !important; - min-width: 0; - width: 100%; - } - } - - @include break-small() { - .block-editor-block-mover-button.is-up-button svg { - top: 5px; - } - - .block-editor-block-mover-button.is-down-button svg { - bottom: 5px; - } - } - } -} - - -/** - * Block Label for Navigation/Selection Mode - */ - -.block-editor-block-list__block-selection-button { - display: inline-flex; - padding: 0 ( $grid-unit-15 + $border-width ); - z-index: z-index(".block-editor-block-list__block-selection-button"); - - // Dark block UI appearance. - border-radius: $radius-block-ui; - background-color: $gray-900; - - font-size: $default-font-size; - height: $block-toolbar-height; - - .block-editor-block-list__block-selection-button__content { - margin: auto; - display: inline-flex; - align-items: center; - - > .components-flex__item { - margin-right: $grid-unit-15 / 2; - } - } - .components-button.has-icon.block-selection-button_drag-handle { - cursor: grab; - padding: 0; - height: $grid-unit-30; - min-width: $grid-unit-30; - - // Drag handle is smaller than the others. - svg { - min-width: 18px; - min-height: 18px; - } - } - - .block-editor-block-icon { - font-size: $default-font-size; - color: $white; - height: $block-toolbar-height; - } - - // The button here has a special style to appear as a toolbar. - .components-button { - min-width: $button-size; - color: $white; - height: $block-toolbar-height; - - // When button is focused, it receives a box-shadow instead of the border. - &:focus { - box-shadow: none; - border: none; - } - - &:active { - color: $white; - } - display: flex; - } - .block-selection-button_select-button.components-button { - padding: 0; - } -} - - /** * Warnings. */ @@ -641,86 +407,3 @@ margin-bottom: auto; } } - - -/** - * Popovers. - */ - -.block-editor-block-list__insertion-point-popover.is-without-arrow { - z-index: z-index(".block-editor-block-list__insertion-point-popover"); - position: absolute; - pointer-events: none; - - * { - pointer-events: none; - } - - .is-with-inserter { - pointer-events: all; - - * { - pointer-events: all; - } - } - - .components-popover__content.components-popover__content { // Needs specificity. - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - margin-left: 0; - } -} - -// Hide the popover block editor list while dragging. -// Using a hacky animation to delay hiding the element. -// It's needed because if we hide the element immediately upon dragging, -// the dragging will end immediately since there are no elements to be dragged anymore. -// Fortunately, we only have to keep it visible for a frame immediately after dragging, -// after that, we can safely hide it altogether. -@keyframes hide-during-dragging { - to { - position: fixed; - transform: translate(9999px, 9999px); - } -} - -.components-popover.block-editor-block-list__block-popover { - z-index: z-index(".block-editor-block-list__block-popover"); - position: absolute; - - .components-popover__content { - margin: 0 !important; - min-width: auto; - width: max-content; - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - - // Allow clicking through the toolbar holder. - pointer-events: none; - - > * { - pointer-events: all; - } - - // Position the block toolbar. - .block-editor-block-list__block-selection-button, - .block-editor-block-contextual-toolbar { - margin-bottom: $grid-unit-15; - } - } - - .is-dragging-components-draggable & { - opacity: 0; - // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. - // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. - animation: hide-during-dragging 1ms linear forwards; - } -} - -.is-dragging-components-draggable .components-tooltip { - display: none; -} diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 91c27c025b4a6..517a0a080cedc 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -26,10 +26,12 @@ import { useBlockClassNames } from './use-block-class-names'; import { useBlockDefaultClassName } from './use-block-default-class-name'; import { useBlockCustomClassName } from './use-block-custom-class-name'; import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names'; -import { useEventHandlers } from './use-event-handlers'; +import { useFocusHandler } from './use-focus-handler'; +import { useEventHandlers } from './use-selected-block-event-handlers'; import { useNavModeExit } from './use-nav-mode-exit'; -import { useBlockNodes } from './use-block-nodes'; import { useScrollIntoView } from './use-scroll-into-view'; +import { useBlockRefProvider } from './use-block-refs'; +import { useMultiSelection } from './use-multi-selection'; import { store as blockEditorStore } from '../../../store'; /** @@ -105,7 +107,9 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useFocusFirstElement( clientId ), // Must happen after focus because we check for focus in the block. useScrollIntoView( clientId ), - useBlockNodes( clientId ), + useBlockRefProvider( clientId ), + useFocusHandler( clientId ), + useMultiSelection( clientId ), useEventHandlers( clientId ), useNavModeExit( clientId ), useIsHovered(), diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js deleted file mode 100644 index 49542364e2cfe..0000000000000 --- a/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * External dependencies - */ -import { omit } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useContext } from '@wordpress/element'; -import { useRefEffect } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { SetBlockNodes } from '../'; -import { store as blockEditorStore } from '../../../store'; - -export function useBlockNodes( clientId ) { - const setBlockNodes = useContext( SetBlockNodes ); - // Provide the selected node, or the first and last nodes of a multi- - // selection, so it can be used to position the contextual block toolbar. - // We only provide what is necessary, and remove the nodes again when they - // are no longer selected. - const isNodeNeeded = useSelect( - ( select ) => { - const { - isBlockSelected, - isFirstMultiSelectedBlock, - getLastMultiSelectedBlockClientId, - } = select( blockEditorStore ); - return ( - isBlockSelected( clientId ) || - isFirstMultiSelectedBlock( clientId ) || - getLastMultiSelectedBlockClientId() === clientId - ); - } - // To do: figure out why tests are failing when dependencies are added. - // This data was originally retrieved with `withSelect` in `block.js`. - // For some reason, adding `clientId` as a dependency results in - // `toolbar-roving-tabindex.test.js` e2e test failures. - ); - - return useRefEffect( - ( node ) => { - if ( ! isNodeNeeded ) { - return; - } - - setBlockNodes( ( nodes ) => ( { - ...nodes, - [ clientId ]: node, - } ) ); - - return () => { - setBlockNodes( ( nodes ) => omit( nodes, clientId ) ); - }; - }, - [ isNodeNeeded, clientId, setBlockNodes ] - ); -} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js new file mode 100644 index 0000000000000..50794c611f1f6 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js @@ -0,0 +1,101 @@ +/** + * WordPress dependencies + */ +import { + useCallback, + useContext, + useLayoutEffect, + useMemo, + useRef, + useState, +} from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { BlockRefs } from '../../provider/block-refs-provider'; + +/** @typedef {import('@wordpress/element').RefCallback} RefCallback */ +/** @typedef {import('@wordpress/element').RefObject} RefObject */ + +/** + * Provides a ref to the BlockRefs context. + * + * @param {string} clientId The client ID of the element ref. + * + * @return {RefCallback} Ref callback. + */ +export function useBlockRefProvider( clientId ) { + const { refs, callbacks } = useContext( BlockRefs ); + const ref = useRef(); + useLayoutEffect( () => { + refs.set( clientId, ref ); + return () => { + refs.delete( clientId ); + }; + }, [] ); + return useCallback( ( element ) => { + // Update the ref in the provider. + ref.current = element; + // Call any update functions. + callbacks.forEach( ( id, setElement ) => { + if ( clientId === id ) { + setElement( element ); + } + } ); + }, [] ); +} + +/** + * Gets a ref pointing to the current block element. Continues to return a + * stable ref even if the block client ID changes. + * + * @param {string} clientId The client ID to get a ref for. + * + * @return {RefObject} A ref containing the element. + */ +function useBlockRef( clientId ) { + const { refs } = useContext( BlockRefs ); + const freshClientId = useRef(); + freshClientId.current = clientId; + // Always return an object, even if no ref exists for a given client ID, so + // that `current` works at a later point. + return useMemo( + () => ( { + get current() { + return refs.get( freshClientId.current )?.current || null; + }, + } ), + [] + ); +} + +/** + * Return the element for a given client ID. Updates whenever the element + * changes, becomes available, or disappears. + * + * @param {string} clientId The client ID to an element for. + * + * @return {Element|null} The block's wrapper element. + */ +function useBlockElement( clientId ) { + const { callbacks } = useContext( BlockRefs ); + const ref = useBlockRef( clientId ); + const [ element, setElement ] = useState( null ); + + useLayoutEffect( () => { + if ( ! clientId ) { + return; + } + + callbacks.set( setElement, clientId ); + return () => { + callbacks.delete( setElement ); + }; + }, [ clientId ] ); + + return ref.current || element; +} + +export { useBlockRef as __unstableUseBlockRef }; +export { useBlockElement as __unstableUseBlockElement }; diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js new file mode 100644 index 0000000000000..4946cc40a26c9 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useRefEffect } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { isInsideRootBlock } from '../../../utils/dom'; +import { store as blockEditorStore } from '../../../store'; + +/** + * Selects the block if it receives focus. + * + * @param {string} clientId Block client ID. + */ +export function useFocusHandler( clientId ) { + const { isBlockSelected } = useSelect( blockEditorStore ); + const { selectBlock } = useDispatch( blockEditorStore ); + + return useRefEffect( + ( node ) => { + /** + * Marks the block as selected when focused and not already + * selected. This specifically handles the case where block does not + * set focus on its own (via `setFocus`), typically if there is no + * focusable input in the block. + * + * @param {FocusEvent} event Focus event. + */ + function onFocus( event ) { + // Check synchronously because a non-selected block might be + // getting data through `useSelect` asynchronously. + if ( isBlockSelected( clientId ) ) { + return; + } + + // If an inner block is focussed, that block is resposible for + // setting the selected block. + if ( ! isInsideRootBlock( node, event.target ) ) { + return; + } + + selectBlock( clientId ); + } + + node.addEventListener( 'focusin', onFocus ); + + return () => { + node.removeEventListener( 'focusin', onFocus ); + }; + }, + [ isBlockSelected, selectBlock ] + ); +} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js new file mode 100644 index 0000000000000..221191a412ae0 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js @@ -0,0 +1,209 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useRefEffect } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../../store'; +import { getBlockClientId } from '../../../utils/dom'; + +function toggleRichText( container, toggle ) { + Array.from( + container + .closest( '.is-root-container' ) + .querySelectorAll( '.rich-text' ) + ).forEach( ( node ) => { + if ( toggle ) { + node.setAttribute( 'contenteditable', true ); + } else { + node.removeAttribute( 'contenteditable' ); + } + } ); +} + +/** + * Sets a multi-selection based on the native selection across blocks. + * + * @param {string} clientId Block client ID. + */ +export function useMultiSelection( clientId ) { + const { + startMultiSelect, + stopMultiSelect, + multiSelect, + selectBlock, + } = useDispatch( blockEditorStore ); + const { + isSelectionEnabled, + isBlockSelected, + getBlockParents, + getBlockSelectionStart, + hasMultiSelection, + } = useSelect( blockEditorStore ); + return useRefEffect( + ( node ) => { + const { ownerDocument } = node; + const { defaultView } = ownerDocument; + + let anchorElement; + let rafId; + + function onSelectionChange( { isSelectionEnd } ) { + const selection = defaultView.getSelection(); + + // If no selection is found, end multi selection and enable all rich + // text areas. + if ( ! selection.rangeCount || selection.isCollapsed ) { + toggleRichText( node, true ); + return; + } + + const endClientId = getBlockClientId( selection.focusNode ); + const isSingularSelection = clientId === endClientId; + + if ( isSingularSelection ) { + selectBlock( clientId ); + + // If the selection is complete (on mouse up), and no + // multiple blocks have been selected, set focus back to the + // anchor element. if the anchor element contains the + // selection. Additionally, rich text elements that were + // previously disabled can now be enabled again. + if ( isSelectionEnd ) { + toggleRichText( node, true ); + + if ( selection.rangeCount ) { + const { + commonAncestorContainer, + } = selection.getRangeAt( 0 ); + + if ( + anchorElement.contains( + commonAncestorContainer + ) + ) { + anchorElement.focus(); + } + } + } + } else { + const startPath = [ + ...getBlockParents( clientId ), + clientId, + ]; + const endPath = [ + ...getBlockParents( endClientId ), + endClientId, + ]; + const depth = + Math.min( startPath.length, endPath.length ) - 1; + + multiSelect( startPath[ depth ], endPath[ depth ] ); + } + } + + function onSelectionEnd() { + ownerDocument.removeEventListener( + 'selectionchange', + onSelectionChange + ); + // Equivalent to attaching the listener once. + defaultView.removeEventListener( 'mouseup', onSelectionEnd ); + // The browser selection won't have updated yet at this point, + // so wait until the next animation frame to get the browser + // selection. + rafId = defaultView.requestAnimationFrame( () => { + onSelectionChange( { isSelectionEnd: true } ); + stopMultiSelect(); + } ); + } + + function onMouseLeave( { buttons } ) { + // The primary button must be pressed to initiate selection. + // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + if ( buttons !== 1 ) { + return; + } + + if ( ! isSelectionEnabled() || ! isBlockSelected( clientId ) ) { + return; + } + + anchorElement = ownerDocument.activeElement; + startMultiSelect(); + + // `onSelectionStart` is called after `mousedown` and + // `mouseleave` (from a block). The selection ends when + // `mouseup` happens anywhere in the window. + ownerDocument.addEventListener( + 'selectionchange', + onSelectionChange + ); + defaultView.addEventListener( 'mouseup', onSelectionEnd ); + + // Removing the contenteditable attributes within the block + // editor is essential for selection to work across editable + // areas. The edible hosts are removed, allowing selection to be + // extended outside the DOM element. `startMultiSelect` sets a + // flag in the store so the rich text components are updated, + // but the rerender may happen very slowly, especially in Safari + // for the blocks that are asynchonously rendered. To ensure the + // browser instantly removes the selection boundaries, we remove + // the contenteditable attributes manually. + toggleRichText( node, false ); + } + + function onMouseDown( event ) { + // The main button. + // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + if ( ! isSelectionEnabled() || event.button !== 0 ) { + return; + } + + if ( event.shiftKey ) { + const blockSelectionStart = getBlockSelectionStart(); + if ( blockSelectionStart !== clientId ) { + toggleRichText( node, false ); + multiSelect( blockSelectionStart, clientId ); + event.preventDefault(); + } + } else if ( hasMultiSelection() ) { + // Allow user to escape out of a multi-selection to a + // singular selection of a block via click. This is handled + // here since focus handling excludes blocks when there is + // multiselection, as focus can be incurred by starting a + // multiselection (focus moved to first block's multi- + // controls). + selectBlock( clientId ); + } + } + + node.addEventListener( 'mousedown', onMouseDown ); + node.addEventListener( 'mouseleave', onMouseLeave ); + + return () => { + node.removeEventListener( 'mousedown', onMouseDown ); + node.removeEventListener( 'mouseleave', onMouseLeave ); + ownerDocument.removeEventListener( + 'selectionchange', + onSelectionChange + ); + defaultView.removeEventListener( 'mouseup', onSelectionEnd ); + defaultView.cancelAnimationFrame( rafId ); + }; + }, + [ + clientId, + startMultiSelect, + stopMultiSelect, + multiSelect, + selectBlock, + isSelectionEnabled, + isBlockSelected, + getBlockParents, + ] + ); +} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js index a051d1cce1bc4..7289751f515ae 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js @@ -15,22 +15,24 @@ import { store as blockEditorStore } from '../../../store'; * @param {string} clientId Block client ID. */ export function useNavModeExit( clientId ) { - const isEnabled = useSelect( ( select ) => { - const { isNavigationMode, isBlockSelected } = select( - blockEditorStore - ); - return isNavigationMode() && isBlockSelected( clientId ); - }, [] ); - const { setNavigationMode } = useDispatch( blockEditorStore ); - + const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore ); + const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore ); return useRefEffect( ( node ) => { - if ( ! isEnabled ) { - return; - } + function onMouseDown( event ) { + // Don't select a block if it's already handled by a child + // block. + if ( isNavigationMode() && ! event.defaultPrevented ) { + // Prevent focus from moving to the block. + event.preventDefault(); - function onMouseDown() { - setNavigationMode( false ); + // When clicking on a selected block, exit navigation mode. + if ( isBlockSelected( clientId ) ) { + setNavigationMode( false ); + } else { + selectBlock( clientId ); + } + } } node.addEventListener( 'mousedown', onMouseDown ); @@ -39,6 +41,6 @@ export function useNavModeExit( clientId ) { node.addEventListener( 'mousedown', onMouseDown ); }; }, - [ isEnabled ] + [ clientId, isNavigationMode, isBlockSelected, setNavigationMode ] ); } diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js similarity index 51% rename from packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js rename to packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js index 844a6862fd8eb..8f3d5a5ec3953 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useContext } from '@wordpress/element'; import { isTextField } from '@wordpress/dom'; import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -10,68 +9,30 @@ import { useRefEffect } from '@wordpress/compose'; /** * Internal dependencies */ -import { isInsideRootBlock } from '../../../utils/dom'; -import { SelectionStart } from '../../writing-flow'; import { store as blockEditorStore } from '../../../store'; /** * Adds block behaviour: - * - Selects the block if it receives focus. * - Removes the block on BACKSPACE. * - Inserts a default block on ENTER. - * - Initiates selection start for multi-selection. * - Disables dragging of block contents. * * @param {string} clientId Block client ID. */ export function useEventHandlers( clientId ) { - const onSelectionStart = useContext( SelectionStart ); - const { isSelected, rootClientId, index } = useSelect( - ( select ) => { - const { - isBlockSelected, - getBlockRootClientId, - getBlockIndex, - } = select( blockEditorStore ); - - return { - isSelected: isBlockSelected( clientId ), - rootClientId: getBlockRootClientId( clientId ), - index: getBlockIndex( clientId ), - }; - }, + const isSelected = useSelect( + ( select ) => select( blockEditorStore ).isBlockSelected( clientId ), [ clientId ] ); - const { insertDefaultBlock, removeBlock, selectBlock } = useDispatch( + const { getBlockRootClientId, getBlockIndex } = useSelect( blockEditorStore ); + const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore ); return useRefEffect( ( node ) => { if ( ! isSelected ) { - /** - * Marks the block as selected when focused and not already - * selected. This specifically handles the case where block does not - * set focus on its own (via `setFocus`), typically if there is no - * focusable input in the block. - * - * @param {FocusEvent} event Focus event. - */ - function onFocus( event ) { - // If an inner block is focussed, that block is resposible for - // setting the selected block. - if ( ! isInsideRootBlock( node, event.target ) ) { - return; - } - - selectBlock( clientId ); - } - - node.addEventListener( 'focusin', onFocus ); - - return () => { - node.removeEventListener( 'focusin', onFocus ); - }; + return; } /** @@ -101,20 +62,16 @@ export function useEventHandlers( clientId ) { event.preventDefault(); if ( keyCode === ENTER ) { - insertDefaultBlock( {}, rootClientId, index + 1 ); + insertDefaultBlock( + {}, + getBlockRootClientId( clientId ), + getBlockIndex( clientId ) + 1 + ); } else { removeBlock( clientId ); } } - function onMouseLeave( { buttons } ) { - // The primary button must be pressed to initiate selection. - // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons - if ( buttons === 1 ) { - onSelectionStart( clientId ); - } - } - /** * Prevents default dragging behavior within a block. To do: we must * handle this in the future and clean up the drag target. @@ -126,23 +83,20 @@ export function useEventHandlers( clientId ) { } node.addEventListener( 'keydown', onKeyDown ); - node.addEventListener( 'mouseleave', onMouseLeave ); node.addEventListener( 'dragstart', onDragStart ); return () => { - node.removeEventListener( 'mouseleave', onMouseLeave ); node.removeEventListener( 'keydown', onKeyDown ); node.removeEventListener( 'dragstart', onDragStart ); }; }, [ + clientId, isSelected, - rootClientId, - index, - onSelectionStart, + getBlockRootClientId, + getBlockIndex, insertDefaultBlock, removeBlock, - selectBlock, ] ); } diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js new file mode 100644 index 0000000000000..0dfdab359d7a7 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -0,0 +1,150 @@ +/** + * WordPress dependencies + */ +import { useRefEffect } from '@wordpress/compose'; + +import { useSelect, useDispatch } from '@wordpress/data'; +import { useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import { InsertionPointOpenRef } from '../block-tools/insertion-point'; + +export function useInBetweenInserter() { + const openRef = useContext( InsertionPointOpenRef ); + const { + getBlockListSettings, + getBlockRootClientId, + getBlockIndex, + isBlockInsertionPointVisible, + isMultiSelecting, + } = useSelect( blockEditorStore ); + const { showInsertionPoint, hideInsertionPoint } = useDispatch( + blockEditorStore + ); + + return useRefEffect( + ( node ) => { + function onMouseMove( event ) { + if ( openRef.current ) { + return; + } + + if ( isMultiSelecting() ) { + return; + } + + if ( + ! event.target.classList.contains( + 'block-editor-block-list__layout' + ) + ) { + if ( isBlockInsertionPointVisible() ) { + hideInsertionPoint(); + } + return; + } + + let rootClientId; + if ( + ! event.target.classList.contains( 'is-root-container' ) + ) { + const blockElement = !! event.target.getAttribute( + 'data-block' + ) + ? event.target + : event.target.closest( '[data-block]' ); + rootClientId = blockElement.getAttribute( 'data-block' ); + } + + const orientation = + getBlockListSettings( rootClientId )?.orientation || + 'vertical'; + const rect = event.target.getBoundingClientRect(); + const offsetTop = event.clientY - rect.top; + const offsetLeft = event.clientX - rect.left; + + const children = Array.from( event.target.children ); + let element = children.find( ( blockEl ) => { + return ( + ( blockEl.classList.contains( 'wp-block' ) && + orientation === 'vertical' && + blockEl.offsetTop > offsetTop ) || + ( blockEl.classList.contains( 'wp-block' ) && + orientation === 'horizontal' && + blockEl.offsetLeft > offsetLeft ) + ); + } ); + + if ( ! element ) { + return; + } + + // The block may be in an alignment wrapper, so check the first direct + // child if the element has no ID. + if ( ! element.id ) { + element = element.firstElementChild; + + if ( ! element ) { + return; + } + } + + const clientId = element.id.slice( 'block-'.length ); + + if ( ! clientId ) { + return; + } + + const elementRect = element.getBoundingClientRect(); + + if ( + ( orientation === 'horizontal' && + ( event.clientY > elementRect.bottom || + event.clientY < elementRect.top ) ) || + ( orientation === 'vertical' && + ( event.clientX > elementRect.right || + event.clientX < elementRect.left ) ) + ) { + if ( isBlockInsertionPointVisible() ) { + hideInsertionPoint(); + } + return; + } + + const index = getBlockIndex( clientId, rootClientId ); + + // Don't show the in-between inserter before the first block in + // the list (preserves the original behaviour). + if ( index === 0 ) { + if ( isBlockInsertionPointVisible() ) { + hideInsertionPoint(); + } + return; + } + + showInsertionPoint( rootClientId, index, { + __unstableWithInserter: true, + } ); + } + + node.addEventListener( 'mousemove', onMouseMove ); + + return () => { + node.removeEventListener( 'mousemove', onMouseMove ); + }; + }, + [ + openRef, + getBlockListSettings, + getBlockRootClientId, + getBlockIndex, + isBlockInsertionPointVisible, + isMultiSelecting, + showInsertionPoint, + hideInsertionPoint, + ] + ); +} diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js index 0c2e3bfc82133..acfd59b8db8c5 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js @@ -19,6 +19,7 @@ import { rawHandler, createBlock, isUnmodifiedDefaultBlock, + isReusableBlock, } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; @@ -26,6 +27,9 @@ import { withInstanceId, compose } from '@wordpress/compose'; import { moreHorizontalMobile } from '@wordpress/icons'; import { useRef, useState } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; +import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; +import { store as coreStore } from '@wordpress/core-data'; + /** * Internal dependencies */ @@ -41,11 +45,14 @@ const BlockActionsMenu = ( { isEmptyDefaultBlock, isFirst, isLast, + isReusableBlockType, + reusableBlock, rootClientId, selectedBlockClientId, selectedBlockPossibleTransformations, // Dispatch createSuccessNotice, + convertToRegularBlocks, duplicateBlock, onMoveDown, onMoveUp, @@ -175,6 +182,21 @@ const BlockActionsMenu = ( { ); }, }, + convertToRegularBlocks: { + id: 'convertToRegularBlocksOption', + label: __( 'Convert to regular blocks' ), + value: 'convertToRegularBlocksOption', + onSelect: () => { + createSuccessNotice( + sprintf( + /* translators: %s: name of the reusable block */ + __( '%s converted to regular blocks' ), + reusableBlock?.title?.raw || blockTitle + ) + ); + convertToRegularBlocks(); + }, + }, }; const options = compact( [ @@ -187,6 +209,7 @@ const BlockActionsMenu = ( { allOptions.cutButton, isPasteEnabled && allOptions.pasteButton, allOptions.duplicateButton, + isReusableBlockType && allOptions.convertToRegularBlocks, allOptions.delete, ] ); @@ -297,6 +320,15 @@ export default compose( ? getBlockTransformItems( [ selectedBlock ], rootClientId ) : []; + const isReusableBlockType = block ? isReusableBlock( block ) : false; + const reusableBlock = isReusableBlockType + ? select( coreStore ).getEntityRecord( + 'postType', + 'wp_block', + block?.attributes.ref + ) + : undefined; + return { blockTitle, canInsertBlockType, @@ -305,13 +337,19 @@ export default compose( isEmptyDefaultBlock, isFirst: firstIndex === 0, isLast: lastIndex === blockOrder.length - 1, + isReusableBlockType, + reusableBlock, rootClientId, selectedBlockClientId, selectedBlockPossibleTransformations, }; } ), withDispatch( - ( dispatch, { clientIds, rootClientId, currentIndex }, { select } ) => { + ( + dispatch, + { clientIds, rootClientId, currentIndex, selectedBlockClientId }, + { select } + ) => { const { moveBlocksDown, moveBlocksUp, @@ -319,6 +357,7 @@ export default compose( removeBlocks, insertBlock, replaceBlocks, + clearSelectedBlock, } = dispatch( blockEditorStore ); const { openGeneralSidebar } = dispatch( 'core/edit-post' ); const { getBlockSelectionEnd, getBlock } = select( @@ -326,8 +365,20 @@ export default compose( ); const { createSuccessNotice } = dispatch( noticesStore ); + const { + __experimentalConvertBlockToStatic: convertBlockToStatic, + } = dispatch( reusableBlocksStore ); + return { createSuccessNotice, + convertToRegularBlocks() { + clearSelectedBlock(); + // Convert action is executed at the end of the current JavaScript execution block + // to prevent issues related to undo/redo actions. + setImmediate( () => + convertBlockToStatic( selectedBlockClientId ) + ); + }, duplicateBlock() { return duplicateBlocks( clientIds ); }, diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index b72d879d6762e..6ffe00fc93f8d 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -80,9 +80,8 @@ function BlockNavigationDropdown( isEnabled={ isEnabled } /> ) } - renderContent={ ( { onClose } ) => ( + renderContent={ () => ( ) } diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index daeba32bae54d..48c20ae9ae144 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -32,7 +32,7 @@ export default function BlockNavigation( { const _selectedBlockClientId = getSelectedBlockClientId(); const _rootBlocks = __unstableGetClientIdsTree(); const _rootBlock = - selectedBlockClientId && ! isArray( selectedBlockClientId ) + _selectedBlockClientId && ! isArray( _selectedBlockClientId ) ? __unstableGetClientIdWithClientIdsTree( getBlockHierarchyRootClientId( _selectedBlockClientId diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 26c5533be8c84..2fa25326a5c9c 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -134,6 +134,7 @@ const BlockPatternSetup = ( { blockName, filterPatternsFn, startBlankComponent, + onBlockPatternSelect, } ) => { const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel ); const [ activeSlide, setActiveSlide ] = useState( 0 ); @@ -145,10 +146,12 @@ const BlockPatternSetup = ( { return startBlankComponent; } - const onBlockPatternSelect = ( blocks ) => { + const onBlockPatternSelectDefault = ( blocks ) => { const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); replaceBlock( clientId, clonedBlocks ); }; + const onPatternSelectCallback = + onBlockPatternSelect || onBlockPatternSelectDefault; return (
active - 1 ); } } onBlockPatternSelect={ () => { - onBlockPatternSelect( patterns[ activeSlide ].blocks ); + onPatternSelectCallback( patterns[ activeSlide ].blocks ); } } onStartBlank={ () => { setShowBlank( true ); @@ -175,7 +178,7 @@ const BlockPatternSetup = ( { viewMode={ viewMode } activeSlide={ activeSlide } patterns={ patterns } - onBlockPatternSelect={ onBlockPatternSelect } + onBlockPatternSelect={ onPatternSelectCallback } />
); diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index a1876fd5c6022..17bcf3b8191d6 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -84,7 +84,6 @@ .carousel-container { overflow: hidden; - text-align: center; position: relative; padding: 0; margin: 0; diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 4242983c192d5..4279b307f7e80 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -6,7 +6,11 @@ import { compact, map } from 'lodash'; /** * WordPress dependencies */ -import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { + createSlotFill, + MenuGroup, + __experimentalStyleProvider as StyleProvider, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; /** @@ -18,9 +22,7 @@ import { } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill( - 'BlockSettingsMenuControls' -); +const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { const selectedBlocks = useSelect( @@ -62,9 +64,20 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { ); }; -BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; - /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md + * + * @param {Object} props Fill props. + * @return {WPElement} Element. */ +function BlockSettingsMenuControls( { ...props } ) { + return ( + + + + ); +} + +BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; + export default BlockSettingsMenuControls; diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js similarity index 100% rename from packages/block-editor/src/components/block-list/block-contextual-toolbar.js rename to packages/block-editor/src/components/block-tools/block-contextual-toolbar.js diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js similarity index 92% rename from packages/block-editor/src/components/block-list/block-popover.js rename to packages/block-editor/src/components/block-tools/block-popover.js index 91f44d2df09f8..822a942308b23 100644 --- a/packages/block-editor/src/components/block-list/block-popover.js +++ b/packages/block-editor/src/components/block-tools/block-popover.js @@ -7,13 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - useState, - useCallback, - useContext, - useRef, - useEffect, -} from '@wordpress/element'; +import { useState, useCallback, useRef, useEffect } from '@wordpress/element'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { Popover } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -27,9 +21,8 @@ import { getScrollContainer } from '@wordpress/dom'; import BlockSelectionButton from './block-selection-button'; import BlockContextualToolbar from './block-contextual-toolbar'; import Inserter from '../inserter'; -import { BlockNodes } from './'; -import { getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; function selector( select ) { const { @@ -71,7 +64,6 @@ function BlockPopover( { const isLargeViewport = useViewportMatch( 'medium' ); const [ isToolbarForced, setIsToolbarForced ] = useState( false ); const [ isInserterShown, setIsInserterShown ] = useState( false ); - const blockNodes = useContext( BlockNodes ); const { stopTyping } = useDispatch( blockEditorStore ); // Controls when the side inserter on empty lines should @@ -115,11 +107,9 @@ function BlockPopover( { // to it when re-mounting. const initialToolbarItemIndexRef = useRef(); - useEffect( () => { - // Resets the index whenever the active block changes so this is not - // persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169 - initialToolbarItemIndexRef.current = undefined; - }, [ clientId ] ); + const selectedElement = useBlockElement( clientId ); + const lastSelectedElement = useBlockElement( lastClientId ); + const capturingElement = useBlockElement( capturingClientId ); if ( ! shouldShowBreadcrumb && @@ -130,32 +120,28 @@ function BlockPopover( { return null; } - let node = blockNodes[ clientId ]; + let node = selectedElement; if ( ! node ) { return null; } - const { ownerDocument } = node; - if ( capturingClientId ) { - node = getBlockDOMNode( capturingClientId, ownerDocument ); + node = capturingElement; } let anchorRef = node; if ( hasMultiSelection ) { - const bottomNode = blockNodes[ lastClientId ]; - // Wait to render the popover until the bottom reference is available // as well. - if ( ! bottomNode ) { + if ( ! lastSelectedElement ) { return null; } anchorRef = { top: node, - bottom: bottomNode, + bottom: lastSelectedElement, }; } @@ -174,6 +160,7 @@ function BlockPopover( { const popoverPosition = showEmptyBlockSideInserter ? 'top left right' : 'top right left'; + const { ownerDocument } = node; const stickyBoundaryElement = showEmptyBlockSideInserter ? undefined : // The sticky boundary element should be the boundary at which the @@ -235,6 +222,9 @@ function BlockPopover( { __experimentalOnIndexChange={ ( index ) => { initialToolbarItemIndexRef.current = index; } } + // Resets the index whenever the active block changes so + // this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169 + key={ clientId } /> ) } { shouldShowBreadcrumb && ( diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js similarity index 100% rename from packages/block-editor/src/components/block-list/block-selection-button.js rename to packages/block-editor/src/components/block-tools/block-selection-button.js diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js new file mode 100644 index 0000000000000..14aaf661c001e --- /dev/null +++ b/packages/block-editor/src/components/block-tools/index.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import InsertionPoint from './insertion-point'; +import BlockPopover from './block-popover'; + +export default function BlockTools( { children } ) { + return ( + + + { children } + + ); +} diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js new file mode 100644 index 0000000000000..b462565d8f95b --- /dev/null +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -0,0 +1,264 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { + useCallback, + useRef, + useMemo, + createContext, + useContext, +} from '@wordpress/element'; +import { Popover } from '@wordpress/components'; +import { isRTL } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Inserter from '../inserter'; +import { store as blockEditorStore } from '../../store'; +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; + +export const InsertionPointOpenRef = createContext(); + +function InsertionPointPopover() { + const { selectBlock } = useDispatch( blockEditorStore ); + const openRef = useContext( InsertionPointOpenRef ); + const ref = useRef(); + const { + orientation, + isHidden, + previousClientId, + nextClientId, + rootClientId, + isInserterShown, + } = useSelect( ( select ) => { + const { + getBlockOrder, + getBlockListSettings, + getMultiSelectedBlockClientIds, + getSelectedBlockClientId, + hasMultiSelection, + getSettings, + getBlockInsertionPoint, + } = select( blockEditorStore ); + const insertionPoint = getBlockInsertionPoint(); + const order = getBlockOrder( insertionPoint.rootClientId ); + const targetClientId = order[ insertionPoint.index - 1 ]; + const targetRootClientId = insertionPoint.rootClientId; + const blockOrder = getBlockOrder( targetRootClientId ); + if ( ! blockOrder.length ) { + return {}; + } + const previous = targetClientId + ? targetClientId + : blockOrder[ blockOrder.length - 1 ]; + const isLast = previous === blockOrder[ blockOrder.length - 1 ]; + const next = isLast + ? null + : blockOrder[ blockOrder.indexOf( previous ) + 1 ]; + const { hasReducedUI } = getSettings(); + const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); + const selectedBlockClientId = getSelectedBlockClientId(); + const blockOrientation = + getBlockListSettings( targetRootClientId )?.orientation || + 'vertical'; + + return { + previousClientId: previous, + nextClientId: next, + isHidden: + hasReducedUI || + ( hasMultiSelection() + ? next && multiSelectedBlockClientIds.includes( next ) + : next && + blockOrientation === 'vertical' && + next === selectedBlockClientId ), + orientation: blockOrientation, + clientId: targetClientId, + rootClientId: targetRootClientId, + isInserterShown: insertionPoint?.__unstableWithInserter, + }; + }, [] ); + const previousElement = useBlockElement( previousClientId ); + const nextElement = useBlockElement( nextClientId ); + const style = useMemo( () => { + if ( ! previousElement ) { + return {}; + } + const previousRect = previousElement.getBoundingClientRect(); + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + + if ( orientation === 'vertical' ) { + return { + width: previousElement.offsetWidth, + height: nextRect ? nextRect.top - previousRect.bottom : 0, + }; + } + + let width = 0; + if ( nextElement ) { + width = isRTL() + ? previousRect.left - nextRect.right + : nextRect.left - previousRect.right; + } + + return { + width, + height: previousElement.offsetHeight, + }; + }, [ previousElement, nextElement ] ); + + const getAnchorRect = useCallback( () => { + const previousRect = previousElement.getBoundingClientRect(); + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + if ( orientation === 'vertical' ) { + if ( isRTL() ) { + return { + top: previousRect.bottom, + left: previousRect.right, + right: previousRect.left, + bottom: nextRect ? nextRect.top : previousRect.bottom, + }; + } + + return { + top: previousRect.bottom, + left: previousRect.left, + right: previousRect.right, + bottom: nextRect ? nextRect.top : previousRect.bottom, + }; + } + + if ( isRTL() ) { + return { + top: previousRect.top, + left: nextRect ? nextRect.right : previousRect.left, + right: previousRect.left, + bottom: previousRect.bottom, + }; + } + + return { + top: previousRect.top, + left: previousRect.right, + right: nextRect ? nextRect.left : previousRect.right, + bottom: previousRect.bottom, + }; + }, [ previousElement, nextElement ] ); + + if ( ! previousElement ) { + return null; + } + + const className = classnames( + 'block-editor-block-list__insertion-point', + 'is-' + orientation + ); + + function onClick( event ) { + if ( event.target === ref.current && nextClientId ) { + selectBlock( nextClientId, -1 ); + } + } + + function onFocus( event ) { + // Only handle click on the wrapper specifically, and not an event + // bubbled from the inserter itself. + if ( event.target !== ref.current ) { + openRef.current = true; + } + } + + // Only show the inserter when there's a `nextElement` (a block after the + // insertion point). At the end of the block list the trailing appender + // should serve the purpose of inserting blocks. + const showInsertionPointInserter = + ! isHidden && nextElement && isInserterShown; + + // Show the indicator if the insertion point inserter is visible, or if + // the `showInsertionPoint` state is `true`. The latter is generally true + // when hovering blocks for insertion in the block library. + const showInsertionPointIndicator = + showInsertionPointInserter || ! isHidden; + + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ + // While ideally it would be enough to capture the + // bubbling focus event from the Inserter, due to the + // characteristics of click focusing of `button`s in + // Firefox and Safari, it is not reliable. + // + // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + return ( + +
+ { showInsertionPointIndicator && ( +
+ ) } + { showInsertionPointInserter && ( +
+ { + openRef.current = isOpen; + } } + onSelectOrClose={ () => { + openRef.current = false; + } } + /> +
+ ) } +
+ + ); + /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ +} + +export default function InsertionPoint( { children } ) { + const isVisible = useSelect( ( select ) => { + const { isMultiSelecting, isBlockInsertionPointVisible } = select( + blockEditorStore + ); + + return isBlockInsertionPointVisible() && ! isMultiSelecting(); + }, [] ); + + return ( + + { isVisible && } + { children } + + ); +} diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss new file mode 100644 index 0000000000000..013f24b784e13 --- /dev/null +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -0,0 +1,321 @@ +/** + * Insertion Point. + */ + +.block-editor-block-list__insertion-point { + position: absolute; +} + +.block-editor-block-list__insertion-point-indicator { + position: absolute; + background: var(--wp-admin-theme-color); + + // Provide a muted animation that isn't too noisy. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + + .block-editor-block-list__insertion-point.is-vertical > & { + top: 50%; + right: 0; + left: 0; + height: $border-width; + } + + .block-editor-block-list__insertion-point.is-horizontal > & { + top: 0; + right: 0; + left: 50%; + height: 100%; + width: $border-width; + } +} + +// This is the clickable plus. +.block-editor-block-list__insertion-point-inserter { + // Don't show on mobile. + display: none; + position: absolute; + @include break-mobile() { + display: flex; + } + + justify-content: center; + + top: calc(50% - #{ $button-size-small / 2 }); + left: calc(50% - #{ $button-size-small / 2 }); +} + +.block-editor-block-list__block-popover-inserter { + position: absolute; + top: -9999em; + margin-bottom: $block-padding; + + &.is-visible { + position: static; + } +} + +// Sibling inserter / "inbetweenserter". +.block-editor-block-list__empty-block-inserter, +.block-editor-default-block-appender, +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button.has-icon { + // Basic look + background: $gray-900; + border-radius: $radius-block-ui; + color: $white; + padding: 0; + + // Special dimensions for this button. + min-width: $button-size-small; + height: $button-size-small; + + &:hover { + color: $white; + background: var(--wp-admin-theme-color); + } + } +} + +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { + background: var(--wp-admin-theme-color); + &:hover { + background: $gray-900; + } +} + +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button { + // Fade it in after a delay. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } +} + +@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { + 0% { + opacity: 0; + } + 60% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +/** + * Block Toolbar when contextual. + */ + +.block-editor-block-contextual-toolbar { + // Block UI appearance. + border: $border-width solid $gray-900; + border-radius: $radius-block-ui; + background-color: $white; + + .block-editor-block-toolbar .components-toolbar-group, + .block-editor-block-toolbar .components-toolbar { + border-right-color: $gray-900; + } + + .block-editor-block-mover-button { + overflow: hidden; + } + + // Extra specificity to override standard toolbar button styles. + .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { + min-width: $block-toolbar-height/2; + width: $block-toolbar-height/2; + + svg { + min-width: $block-toolbar-height/2; + } + } +} + +// Position mover arrows for both toolbars. +.block-editor-block-contextual-toolbar, +.edit-post-header-toolbar__block-toolbar, +.edit-site-header-toolbar__block-toolbar, +.edit-navigation-layout__block-toolbar, +.edit-widgets-header__block-toolbar { + .block-editor-block-mover:not(.is-horizontal) { + // Position SVGs. + .block-editor-block-mover-button { + &:focus::before { + left: 0 !important; + min-width: 0; + width: 100%; + } + } + + @include break-small() { + .block-editor-block-mover-button.is-up-button svg { + top: 5px; + } + + .block-editor-block-mover-button.is-down-button svg { + bottom: 5px; + } + } + } +} + + +/** + * Block Label for Navigation/Selection Mode + */ + +.block-editor-block-list__block-selection-button { + display: inline-flex; + padding: 0 ( $grid-unit-15 + $border-width ); + z-index: z-index(".block-editor-block-list__block-selection-button"); + + // Dark block UI appearance. + border-radius: $radius-block-ui; + background-color: $gray-900; + + font-size: $default-font-size; + height: $block-toolbar-height; + + .block-editor-block-list__block-selection-button__content { + margin: auto; + display: inline-flex; + align-items: center; + + > .components-flex__item { + margin-right: $grid-unit-15 / 2; + } + } + .components-button.has-icon.block-selection-button_drag-handle { + cursor: grab; + padding: 0; + height: $grid-unit-30; + min-width: $grid-unit-30; + + // Drag handle is smaller than the others. + svg { + min-width: 18px; + min-height: 18px; + } + } + + .block-editor-block-icon { + font-size: $default-font-size; + color: $white; + height: $block-toolbar-height; + } + + // The button here has a special style to appear as a toolbar. + .components-button { + min-width: $button-size; + color: $white; + height: $block-toolbar-height; + + // When button is focused, it receives a box-shadow instead of the border. + &:focus { + box-shadow: none; + border: none; + } + + &:active { + color: $white; + } + display: flex; + } + .block-selection-button_select-button.components-button { + padding: 0; + } +} + + +/** + * Popovers. + */ + +.block-editor-block-list__insertion-point-popover.is-without-arrow { + z-index: z-index(".block-editor-block-list__insertion-point-popover"); + position: absolute; + pointer-events: none; + + * { + pointer-events: none; + } + + .is-with-inserter { + pointer-events: all; + + * { + pointer-events: all; + } + } + + .components-popover__content.components-popover__content { // Needs specificity. + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + margin-left: 0; + } +} + +// Hide the popover block editor list while dragging. +// Using a hacky animation to delay hiding the element. +// It's needed because if we hide the element immediately upon dragging, +// the dragging will end immediately since there are no elements to be dragged anymore. +// Fortunately, we only have to keep it visible for a frame immediately after dragging, +// after that, we can safely hide it altogether. +@keyframes hide-during-dragging { + to { + position: fixed; + transform: translate(9999px, 9999px); + } +} + +.components-popover.block-editor-block-list__block-popover { + z-index: z-index(".block-editor-block-list__block-popover"); + position: absolute; + + .components-popover__content { + margin: 0 !important; + min-width: auto; + width: max-content; + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + + // Allow clicking through the toolbar holder. + pointer-events: none; + + .block-editor-block-list__block-selection-button, + .block-editor-block-contextual-toolbar, + .block-editor-block-list__empty-block-inserter { + pointer-events: all; + } + + // Position the block toolbar. + .block-editor-block-list__block-selection-button, + .block-editor-block-contextual-toolbar { + margin-top: $grid-unit-15; + margin-bottom: $grid-unit-15; + } + } + + .is-dragging-components-draggable & { + opacity: 0; + // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. + // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. + animation: hide-during-dragging 1ms linear forwards; + } +} + +.is-dragging-components-draggable .components-tooltip { + display: none; +} diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index db1f249d393bf..5f3b52bcb2881 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import TextareaAutosize from 'react-autosize-textarea'; - /** * WordPress dependencies */ @@ -18,6 +13,12 @@ import { withSelect, withDispatch } from '@wordpress/data'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; +/** + * Zero width non-breaking space, used as padding for the paragraph when it is + * empty. + */ +export const ZWNBSP = '\ufeff'; + export function DefaultBlockAppender( { isLocked, isVisible, @@ -33,34 +34,30 @@ export function DefaultBlockAppender( { const value = decodeEntities( placeholder ) || __( 'Type / to choose a block' ); - // The appender "button" is in-fact a text field so as to support - // transitions by WritingFlow occurring by arrow key press. WritingFlow - // only supports tab transitions into text fields and to the block focus - // boundary. - // - // See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658 - // - // If it were ever to be made to be a proper `button` element, it is - // important to note that `onFocus` alone would not be sufficient to - // capture click events, notably in Firefox. - // - // See: https://gist.github.com/cvrebert/68659d0333a578d75372 - - // The wp-block className is important for editor styles. - return (
- + > + { showPrompt ? value : ZWNBSP } +

- + suppressContentEditableWarning={true} + tabIndex="0" + > + Type / to choose a block +

- + suppressContentEditableWarning={true} + tabIndex="0" + > + Type / to choose a block +

- + suppressContentEditableWarning={true} + tabIndex="0" + > +  +

{ const expectOnAppendCalled = ( onAppend ) => { @@ -35,7 +35,7 @@ describe( 'DefaultBlockAppender', () => { ); - wrapper.find( 'ForwardRef' ).simulate( 'focus' ); + wrapper.find( 'p' ).simulate( 'focus' ); expect( wrapper ).toMatchSnapshot(); @@ -51,9 +51,9 @@ describe( 'DefaultBlockAppender', () => { showPrompt={ false } /> ); - const input = wrapper.find( 'ForwardRef' ); + const input = wrapper.find( 'p' ); - expect( input.prop( 'value' ) ).toEqual( '' ); + expect( input.prop( 'children' ) ).toEqual( ZWNBSP ); expect( wrapper ).toMatchSnapshot(); } ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 40e677aedd228..2485c35347033 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -185,7 +185,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) { > { iframeDocument && createPortal( - + { children } , iframeDocument.body diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index a4cb37e658505..dfa5b794ed7db 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -95,7 +95,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas'; export { default as BlockInspector } from './block-inspector'; export { default as BlockList } from './block-list'; export { useBlockProps } from './block-list/use-block-props'; -export { Block as __experimentalBlock } from './block-list/block-wrapper'; export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout'; export { default as BlockMover } from './block-mover'; export { default as BlockPreview } from './block-preview'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 29449bb0a0843..bb6175c5ffe93 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -50,6 +50,8 @@ export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; export { default as __experimentalUseEditorFeature } from './use-editor-feature'; +export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders'; +export { default as Warning } from './warning'; export { BottomSheetSettings, @@ -68,7 +70,6 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; export { useBlockProps } from './block-list/use-block-props'; -export { Block as __experimentalBlock } from './block-list/block-wrapper'; export { default as FloatingToolbar } from './floating-toolbar'; // State Related Components diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js index 5d01ecc02515b..f2f4dd81438fb 100644 --- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -15,6 +15,7 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => { return ( diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 02ef1c0571107..fec66c1ef0913 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -38,7 +38,7 @@ import { store as blockEditorStore } from '../../../store'; * @return {Array} Insertion Point State (rootClientID, onInsertBlocks and onToggle). */ function useInsertionPoint( { - rootClientId, + rootClientId = '', insertionIndex, clientId, isAppender, @@ -49,40 +49,38 @@ function useInsertionPoint( { const { destinationRootClientId, destinationIndex } = useSelect( ( select ) => { const { + getSelectedBlockClientId, + getBlockRootClientId, getBlockIndex, getBlockOrder, - getBlockInsertionPoint, } = select( blockEditorStore ); - - let _destinationRootClientId, _destinationIndex; - - if ( rootClientId || insertionIndex || clientId || isAppender ) { - // If any of these arguments are set, we're in "manual mode" - // meaning the insertion point is set by the caller. - - _destinationRootClientId = rootClientId; - - if ( insertionIndex ) { - // Insert into a specific index. - _destinationIndex = insertionIndex; - } else if ( clientId ) { - // Insert after a specific client ID. - _destinationIndex = getBlockIndex( - clientId, - _destinationRootClientId - ); - } else { - // Insert at the end of the list. - _destinationIndex = getBlockOrder( + const selectedBlockClientId = getSelectedBlockClientId(); + + let _destinationRootClientId = rootClientId; + let _destinationIndex; + + if ( insertionIndex ) { + // Insert into a specific index. + _destinationIndex = insertionIndex; + } else if ( clientId ) { + // Insert after a specific client ID. + _destinationIndex = getBlockIndex( + clientId, + _destinationRootClientId + ); + } else if ( ! isAppender && selectedBlockClientId ) { + _destinationRootClientId = getBlockRootClientId( + selectedBlockClientId + ); + _destinationIndex = + getBlockIndex( + selectedBlockClientId, _destinationRootClientId - ).length; - } + ) + 1; } else { - // Otherwise, we're in "auto mode" where the insertion point is - // decided by getBlockInsertionPoint(). - const insertionPoint = getBlockInsertionPoint(); - _destinationRootClientId = insertionPoint.rootClientId; - _destinationIndex = insertionPoint.index; + // Insert at the end of the list. + _destinationIndex = getBlockOrder( _destinationRootClientId ) + .length; } return { diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d18973d1d37db..13dda883f5b94 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -190,6 +190,9 @@ function InserterMenu( { rootClientId={ rootClientId } clientId={ clientId } isAppender={ isAppender } + __experimentalInsertionIndex={ + __experimentalInsertionIndex + } showBlockDirectory shouldFocusBlock={ shouldFocusBlock } /> diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index d880b2b448067..ca4ff4c2fa274 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -52,13 +52,16 @@ export default function QuickInserter( { ( showPatterns && patterns.length > SEARCH_THRESHOLD ) || blockTypes.length > SEARCH_THRESHOLD; - const { setInserterIsOpened, blockIndex } = useSelect( + const { setInserterIsOpened, insertionIndex } = useSelect( ( select ) => { - const { getSettings, getBlockIndex } = select( blockEditorStore ); + const { getSettings, getBlockIndex, getBlockCount } = select( + blockEditorStore + ); + const index = getBlockIndex( clientId, rootClientId ); return { setInserterIsOpened: getSettings() .__experimentalSetIsInserterOpened, - blockIndex: getBlockIndex( clientId, rootClientId ), + insertionIndex: index === -1 ? getBlockCount() : index, }; }, [ clientId, rootClientId ] @@ -70,13 +73,10 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); - const { __unstableSetInsertionPoint } = useDispatch( blockEditorStore ); - // When clicking Browse All select the appropriate block so as // the insertion point can work as expected const onBrowseAll = () => { - __unstableSetInsertionPoint( rootClientId, blockIndex ); - setInserterIsOpened( true ); + setInserterIsOpened( { rootClientId, insertionIndex } ); }; return ( diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 03bf7b7c2da99..b29015ee763dc 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -33,6 +33,7 @@ function InserterSearchResults( { rootClientId, clientId, isAppender, + __experimentalInsertionIndex, maxBlockPatterns, maxBlockTypes, showBlockDirectory = false, @@ -46,6 +47,7 @@ function InserterSearchResults( { rootClientId, clientId, isAppender, + insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); const [ diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js index 304a118315444..4ed9b6341142d 100644 --- a/packages/block-editor/src/components/inspector-advanced-controls/index.js +++ b/packages/block-editor/src/components/inspector-advanced-controls/index.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { + createSlotFill, + __experimentalStyleProvider as StyleProvider, +} from '@wordpress/components'; /** * Internal dependencies @@ -13,7 +16,11 @@ const { Fill, Slot } = createSlotFill( name ); function InspectorAdvancedControls( { children } ) { const { isSelected } = useBlockEditContext(); - return isSelected ? { children } : null; + return isSelected ? ( + + { children } + + ) : null; } InspectorAdvancedControls.slotName = name; diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 8db793f10ec39..9a6cb7bab61a7 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { + __experimentalStyleProvider as StyleProvider, + createSlotFill, +} from '@wordpress/components'; /** * Internal dependencies @@ -11,7 +14,11 @@ import useDisplayBlockControls from '../use-display-block-controls'; const { Fill, Slot } = createSlotFill( 'InspectorControls' ); function InspectorControls( { children } ) { - return useDisplayBlockControls() ? { children } : null; + return useDisplayBlockControls() ? ( + + { children } + + ) : null; } InspectorControls.Slot = Slot; diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md index ca61544e9c541..806d181e180b7 100644 --- a/packages/block-editor/src/components/line-height-control/README.md +++ b/packages/block-editor/src/components/line-height-control/README.md @@ -4,7 +4,7 @@ The `LineHeightControl` component adds a lineHeight attribute to the core Paragr ![Line height control in a paragraph block](https://make.wordpress.org/core/files/2020/09/line-height-for-paragraph-block.png) -_Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#supporting-custom-line-heights) before it'll be available. +_Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available. ## Table of contents diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index dd0bc6f80877c..25950cca507de 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; diff --git a/packages/block-editor/src/components/provider/block-refs-provider.js b/packages/block-editor/src/components/provider/block-refs-provider.js new file mode 100644 index 0000000000000..e98e0f4d25c9d --- /dev/null +++ b/packages/block-editor/src/components/provider/block-refs-provider.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { createContext, useMemo } from '@wordpress/element'; + +export const BlockRefs = createContext(); + +export function BlockRefsProvider( { children } ) { + const value = useMemo( + () => ( { refs: new Map(), callbacks: new Map() } ), + [] + ); + return ( + { children } + ); +} diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js index 157cd72d1f237..8851a2b9b47a1 100644 --- a/packages/block-editor/src/components/provider/index.js +++ b/packages/block-editor/src/components/provider/index.js @@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element'; import withRegistryProvider from './with-registry-provider'; import useBlockSync from './use-block-sync'; import { store as blockEditorStore } from '../../store'; +import { BlockRefsProvider } from './block-refs-provider'; /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */ @@ -24,7 +25,7 @@ function BlockEditorProvider( props ) { // Syncs the entity provider with changes in the block-editor store. useBlockSync( props ); - return children; + return { children }; } export default withRegistryProvider( BlockEditorProvider ); diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js index e5c54524dc46e..61e7e3f8fd05d 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/index.js +++ b/packages/block-editor/src/components/skip-to-selected-block/index.js @@ -8,16 +8,13 @@ import { Button } from '@wordpress/components'; /** * Internal dependencies */ -import { getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; +import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; const SkipToSelectedBlock = ( { selectedBlockClientId } ) => { + const ref = useBlockRef( selectedBlockClientId ); const onClick = () => { - const selectedBlockElement = getBlockDOMNode( - selectedBlockClientId, - document - ); - selectedBlockElement.focus(); + ref.current.focus(); }; return selectedBlockClientId ? ( diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js deleted file mode 100644 index aafdbb94151d2..0000000000000 --- a/packages/block-editor/src/components/spacing-panel-control/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import InspectorControls from '../inspector-controls'; -import useEditorFeature from '../use-editor-feature'; - -export default function SpacingPanelControl( { children, ...props } ) { - const isSpacingEnabled = useEditorFeature( 'spacing.customPadding' ); - - if ( ! isSpacingEnabled ) return null; - - return ( - - { children } - - ); -} diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 1d46debeb567a..09025eeec5407 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -6,7 +6,7 @@ import { find, reverse, first, last } from 'lodash'; /** * WordPress dependencies */ -import { useRef, useEffect, createContext } from '@wordpress/element'; +import { useRef, useEffect } from '@wordpress/element'; import { computeCaretRect, focus, @@ -15,6 +15,7 @@ import { placeCaretAtHorizontalEdge, placeCaretAtVerticalEdge, isEntirelySelected, + isRTL, } from '@wordpress/dom'; import { UP, @@ -31,22 +32,16 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { isInSameBlock, getBlockClientId } from '../../utils/dom'; +import { isInSameBlock } from '../../utils/dom'; import useMultiSelection from './use-multi-selection'; import { store as blockEditorStore } from '../../store'; -export const SelectionStart = createContext(); - /** * Useful for positioning an element within the viewport so focussing the * element does not scroll the page. */ const PREVENT_SCROLL_ON_FOCUS = { position: 'fixed' }; -function getComputedStyle( node ) { - return node.ownerDocument.defaultView.getComputedStyle( node ); -} - function isFormElement( element ) { const { tagName } = element; return ( @@ -149,51 +144,6 @@ export function getClosestTabbable( return find( focusableNodes, isTabCandidate ); } -function selector( select ) { - const { - getSelectedBlockClientId, - getMultiSelectedBlocksStartClientId, - getMultiSelectedBlocksEndClientId, - getPreviousBlockClientId, - getNextBlockClientId, - getFirstMultiSelectedBlockClientId, - getLastMultiSelectedBlockClientId, - hasMultiSelection, - getBlockOrder, - isSelectionEnabled, - getBlockSelectionStart, - isMultiSelecting, - getSettings, - isNavigationMode, - } = select( blockEditorStore ); - - const selectedBlockClientId = getSelectedBlockClientId(); - const selectionStartClientId = getMultiSelectedBlocksStartClientId(); - const selectionEndClientId = getMultiSelectedBlocksEndClientId(); - const blocks = getBlockOrder(); - - return { - selectedBlockClientId, - selectionStartClientId, - selectionBeforeEndClientId: getPreviousBlockClientId( - selectionEndClientId || selectedBlockClientId - ), - selectionAfterEndClientId: getNextBlockClientId( - selectionEndClientId || selectedBlockClientId - ), - selectedFirstClientId: getFirstMultiSelectedBlockClientId(), - selectedLastClientId: getLastMultiSelectedBlockClientId(), - hasMultiSelection: hasMultiSelection(), - firstBlock: first( blocks ), - lastBlock: last( blocks ), - isSelectionEnabled: isSelectionEnabled(), - blockSelectionStart: getBlockSelectionStart(), - isMultiSelecting: isMultiSelecting(), - keepCaretInsideBlock: getSettings().keepCaretInsideBlock, - isNavigationMode: isNavigationMode(), - }; -} - /** * Handles selection and navigation across blocks. This component should be * wrapped around BlockList. @@ -218,57 +168,46 @@ export default function WritingFlow( { children } ) { // browser behaviour across blocks. const verticalRect = useRef(); + const { hasMultiSelection, isMultiSelecting, isNavigationMode } = useSelect( + ( select ) => { + const selectors = select( blockEditorStore ); + return { + hasMultiSelection: selectors.hasMultiSelection(), + isMultiSelecting: selectors.isMultiSelecting(), + isNavigationMode: selectors.isNavigationMode(), + }; + }, + [] + ); const { - selectedBlockClientId, - selectionStartClientId, - selectionBeforeEndClientId, - selectionAfterEndClientId, - selectedFirstClientId, - selectedLastClientId, - hasMultiSelection, - firstBlock, - lastBlock, - isSelectionEnabled, - blockSelectionStart, - isMultiSelecting, - keepCaretInsideBlock, - isNavigationMode, - } = useSelect( selector, [] ); + getSelectedBlockClientId, + getMultiSelectedBlocksStartClientId, + getMultiSelectedBlocksEndClientId, + getPreviousBlockClientId, + getNextBlockClientId, + getFirstMultiSelectedBlockClientId, + getLastMultiSelectedBlockClientId, + getBlockOrder, + getSettings, + } = useSelect( blockEditorStore ); const { multiSelect, selectBlock, setNavigationMode } = useDispatch( blockEditorStore ); - function onMouseDown( event ) { + function onMouseDown() { verticalRect.current = null; - - // Multi-select blocks when Shift+clicking. - if ( - isSelectionEnabled && - // The main button. - // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button - event.button === 0 - ) { - const clientId = getBlockClientId( event.target ); - - if ( clientId ) { - if ( event.shiftKey ) { - if ( blockSelectionStart !== clientId ) { - multiSelect( blockSelectionStart, clientId ); - event.preventDefault(); - } - // Allow user to escape out of a multi-selection to a singular - // selection of a block via click. This is handled here since - // focus handling excludes blocks when there is multiselection, - // as focus can be incurred by starting a multiselection (focus - // moved to first block's multi-controls). - } else if ( hasMultiSelection ) { - selectBlock( clientId ); - } - } - } } function expandSelection( isReverse ) { + const selectedBlockClientId = getSelectedBlockClientId(); + const selectionStartClientId = getMultiSelectedBlocksStartClientId(); + const selectionEndClientId = getMultiSelectedBlocksEndClientId(); + const selectionBeforeEndClientId = getPreviousBlockClientId( + selectionEndClientId || selectedBlockClientId + ); + const selectionAfterEndClientId = getNextBlockClientId( + selectionEndClientId || selectedBlockClientId + ); const nextSelectionEndClientId = isReverse ? selectionBeforeEndClientId : selectionAfterEndClientId; @@ -282,6 +221,8 @@ export default function WritingFlow( { children } ) { } function moveSelection( isReverse ) { + const selectedFirstClientId = getFirstMultiSelectedBlockClientId(); + const selectedLastClientId = getLastMultiSelectedBlockClientId(); const focusedBlockClientId = isReverse ? selectedFirstClientId : selectedLastClientId; @@ -342,6 +283,7 @@ export default function WritingFlow( { children } ) { const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge; const { ownerDocument } = container.current; const { defaultView } = ownerDocument; + const selectedBlockClientId = getSelectedBlockClientId(); // In Edit mode, Tab should focus the first tabbable element after the // content, which is normally the sidebar (with block controls) and @@ -411,7 +353,8 @@ export default function WritingFlow( { children } ) { ? entirelySelected.current : isEntirelySelected( target ) ) { - multiSelect( firstBlock, lastBlock ); + const blocks = getBlockOrder(); + multiSelect( first( blocks ), last( blocks ) ); event.preventDefault(); } @@ -437,10 +380,18 @@ export default function WritingFlow( { children } ) { // In the case of RTL scripts, right means previous and left means next, // which is the exact reverse of LTR. - const { direction } = getComputedStyle( target ); - const isReverseDir = direction === 'rtl' ? ! isReverse : isReverse; + const isReverseDir = isRTL( target ) ? ! isReverse : isReverse; + const { keepCaretInsideBlock } = getSettings(); if ( isShift ) { + const selectionEndClientId = getMultiSelectedBlocksEndClientId(); + const selectionBeforeEndClientId = getPreviousBlockClientId( + selectionEndClientId || selectedBlockClientId + ); + const selectionAfterEndClientId = getNextBlockClientId( + selectionEndClientId || selectedBlockClientId + ); + if ( // Ensure that there is a target block. ( ( isReverse && selectionBeforeEndClientId ) || @@ -484,7 +435,7 @@ export default function WritingFlow( { children } ) { isReverseDir, container.current ); - placeCaretAtHorizontalEdge( closestTabbable, isReverseDir ); + placeCaretAtHorizontalEdge( closestTabbable, isReverse ); event.preventDefault(); } } @@ -527,7 +478,7 @@ export default function WritingFlow( { children } ) { // This hook sets the selection after the user makes a multi-selection. For // some browsers, like Safari, it is important that this happens AFTER // setting focus on the multi-selection container above. - const onSelectionStart = useMultiSelection( container ); + useMultiSelection( container ); const lastFocus = useRef(); @@ -548,7 +499,7 @@ export default function WritingFlow( { children } ) { noCapture.current = null; } else if ( hasMultiSelection ) { multiSelectionContainer.current.focus(); - } else if ( selectedBlockClientId ) { + } else if ( getSelectedBlockClientId() ) { lastFocus.current.focus(); } else { setNavigationMode( true ); @@ -570,7 +521,7 @@ export default function WritingFlow( { children } ) { // bubbling events from children to determine focus transition intents. /* eslint-disable jsx-a11y/no-static-element-interactions */ return ( - + <>
- + ); /* eslint-enable jsx-a11y/no-static-element-interactions */ } diff --git a/packages/block-editor/src/components/writing-flow/use-multi-selection.js b/packages/block-editor/src/components/writing-flow/use-multi-selection.js index a6aee58da331f..7bb224d3beda5 100644 --- a/packages/block-editor/src/components/writing-flow/use-multi-selection.js +++ b/packages/block-editor/src/components/writing-flow/use-multi-selection.js @@ -1,14 +1,19 @@ +/** + * External dependencies + */ +import { first, last } from 'lodash'; + /** * WordPress dependencies */ -import { useEffect, useRef, useCallback } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import { getBlockClientId, getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; +import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; /** * Returns for the deepest node at the start or end of a container node. Ignores @@ -38,7 +43,6 @@ function getDeepestNode( node, type ) { function selector( select ) { const { - isSelectionEnabled, isMultiSelecting, getMultiSelectedBlockClientIds, hasMultiSelection, @@ -46,7 +50,6 @@ function selector( select ) { } = select( blockEditorStore ); return { - isSelectionEnabled: isSelectionEnabled(), isMultiSelecting: isMultiSelecting(), multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), hasMultiSelection: hasMultiSelection(), @@ -54,36 +57,18 @@ function selector( select ) { }; } -function toggleRichText( container, toggle ) { - Array.from( container.querySelectorAll( '.rich-text' ) ).forEach( - ( node ) => { - if ( toggle ) { - node.setAttribute( 'contenteditable', true ); - } else { - node.removeAttribute( 'contenteditable' ); - } - } - ); -} - export default function useMultiSelection( ref ) { const { - isSelectionEnabled, isMultiSelecting, multiSelectedBlockClientIds, hasMultiSelection, selectedBlockClientId, } = useSelect( selector, [] ); - const { getBlockParents } = useSelect( blockEditorStore ); - const { - startMultiSelect, - stopMultiSelect, - multiSelect, - selectBlock, - } = useDispatch( blockEditorStore ); - const rafId = useRef(); - const startClientId = useRef(); - const anchorElement = useRef(); + const { selectBlock } = useDispatch( blockEditorStore ); + const selectedRef = useBlockRef( selectedBlockClientId ); + // These must be in the right DOM order. + const startRef = useBlockRef( first( multiSelectedBlockClientIds ) ); + const endRef = useBlockRef( last( multiSelectedBlockClientIds ) ); /** * When the component updates, and there is multi selection, we need to @@ -101,10 +86,7 @@ export default function useMultiSelection( ref ) { const selection = defaultView.getSelection(); if ( selection.rangeCount && ! selection.isCollapsed ) { - const blockNode = getBlockDOMNode( - selectedBlockClientId, - ownerDocument - ); + const blockNode = selectedRef.current; const { startContainer, endContainer } = selection.getRangeAt( 0 ); @@ -128,19 +110,14 @@ export default function useMultiSelection( ref ) { } // These must be in the right DOM order. - const start = multiSelectedBlockClientIds[ 0 ]; - const end = multiSelectedBlockClientIds[ length - 1 ]; - - let startNode = getBlockDOMNode( start, ownerDocument ); - let endNode = getBlockDOMNode( end, ownerDocument ); const selection = defaultView.getSelection(); const range = ownerDocument.createRange(); // The most stable way to select the whole block contents is to start // and end at the deepest points. - startNode = getDeepestNode( startNode, 'start' ); - endNode = getDeepestNode( endNode, 'end' ); + const startNode = getDeepestNode( startRef.current, 'start' ); + const endNode = getDeepestNode( endRef.current, 'end' ); range.setStartBefore( startNode ); range.setEndAfter( endNode ); @@ -154,133 +131,4 @@ export default function useMultiSelection( ref ) { selectBlock, selectedBlockClientId, ] ); - - const onSelectionChange = useCallback( - ( { isSelectionEnd } ) => { - const { ownerDocument } = ref.current; - const { defaultView } = ownerDocument; - const selection = defaultView.getSelection(); - - // If no selection is found, end multi selection and enable all rich - // text areas. - if ( ! selection.rangeCount || selection.isCollapsed ) { - toggleRichText( ref.current, true ); - return; - } - - const clientId = getBlockClientId( selection.focusNode ); - const isSingularSelection = startClientId.current === clientId; - - if ( isSingularSelection ) { - selectBlock( clientId ); - - // If the selection is complete (on mouse up), and no multiple - // blocks have been selected, set focus back to the anchor element - // if the anchor element contains the selection. Additionally, rich - // text elements that were previously disabled can now be enabled - // again. - if ( isSelectionEnd ) { - toggleRichText( ref.current, true ); - - if ( selection.rangeCount ) { - const { - commonAncestorContainer, - } = selection.getRangeAt( 0 ); - - if ( - anchorElement.current.contains( - commonAncestorContainer - ) - ) { - anchorElement.current.focus(); - } - } - } - } else { - const startPath = [ - ...getBlockParents( startClientId.current ), - startClientId.current, - ]; - const endPath = [ ...getBlockParents( clientId ), clientId ]; - const depth = Math.min( startPath.length, endPath.length ) - 1; - - multiSelect( startPath[ depth ], endPath[ depth ] ); - } - }, - [ selectBlock, getBlockParents, multiSelect ] - ); - - /** - * Handles a mouseup event to end the current mouse multi-selection. - */ - const onSelectionEnd = useCallback( () => { - const { ownerDocument } = ref.current; - const { defaultView } = ownerDocument; - ownerDocument.removeEventListener( - 'selectionchange', - onSelectionChange - ); - // Equivalent to attaching the listener once. - defaultView.removeEventListener( 'mouseup', onSelectionEnd ); - // The browser selection won't have updated yet at this point, so wait - // until the next animation frame to get the browser selection. - rafId.current = defaultView.requestAnimationFrame( () => { - onSelectionChange( { isSelectionEnd: true } ); - stopMultiSelect(); - } ); - }, [ onSelectionChange, stopMultiSelect ] ); - - // Only clean up when unmounting, these are added and cleaned up elsewhere. - useEffect( () => { - const { ownerDocument } = ref.current; - const { defaultView } = ownerDocument; - - return () => { - ownerDocument.removeEventListener( - 'selectionchange', - onSelectionChange - ); - defaultView.removeEventListener( 'mouseup', onSelectionEnd ); - defaultView.cancelAnimationFrame( rafId.current ); - }; - }, [ onSelectionChange, onSelectionEnd ] ); - - /** - * Binds event handlers to the document for tracking a pending multi-select - * in response to a mousedown event occurring in a rendered block. - */ - return useCallback( - ( clientId ) => { - if ( ! isSelectionEnabled ) { - return; - } - - const { ownerDocument } = ref.current; - const { defaultView } = ownerDocument; - - startClientId.current = clientId; - anchorElement.current = ownerDocument.activeElement; - startMultiSelect(); - - // `onSelectionStart` is called after `mousedown` and `mouseleave` - // (from a block). The selection ends when `mouseup` happens anywhere - // in the window. - ownerDocument.addEventListener( - 'selectionchange', - onSelectionChange - ); - defaultView.addEventListener( 'mouseup', onSelectionEnd ); - - // Removing the contenteditable attributes within the block editor is - // essential for selection to work across editable areas. The edible - // hosts are removed, allowing selection to be extended outside the - // DOM element. `startMultiSelect` sets a flag in the store so the rich - // text components are updated, but the rerender may happen very slowly, - // especially in Safari for the blocks that are asynchonously rendered. - // To ensure the browser instantly removes the selection boundaries, we - // remove the contenteditable attributes manually. - toggleRichText( ref.current, false ); - }, - [ isSelectionEnabled, startMultiSelect, onSelectionEnd ] - ); } diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js index 9b93203b3d265..eacc2bbbc413b 100644 --- a/packages/block-editor/src/hooks/color-panel.js +++ b/packages/block-editor/src/hooks/color-panel.js @@ -10,7 +10,7 @@ import { useState, useEffect } from '@wordpress/element'; import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings'; import ContrastChecker from '../components/contrast-checker'; import InspectorControls from '../components/inspector-controls'; -import { getBlockDOMNode } from '../utils/dom'; +import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs'; function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); @@ -23,19 +23,19 @@ export default function ColorPanel( { } ) { const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); const [ detectedColor, setDetectedColor ] = useState(); + const ref = useBlockRef( clientId ); useEffect( () => { if ( ! enableContrastChecking ) { return; } - const colorsDetectionElement = getBlockDOMNode( clientId, document ); - if ( ! colorsDetectionElement ) { + if ( ! ref.current ) { return; } - setDetectedColor( getComputedStyle( colorsDetectionElement ).color ); + setDetectedColor( getComputedStyle( ref.current ).color ); - let backgroundColorNode = colorsDetectionElement; + let backgroundColorNode = ref.current; let backgroundColor = getComputedStyle( backgroundColorNode ) .backgroundColor; while ( diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 277c413e98b0a..152f20602d65a 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -57,6 +57,12 @@ function addSaveProps( props, blockType, attributes ) { return props; } + if ( + hasBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) + ) { + return props; + } + // Use TokenList to dedupe classes. const classes = new TokenList( props.className ); classes.add( getFontSizeClass( attributes.fontSize ) ); @@ -168,30 +174,38 @@ const withFontSizeInlineStyles = createHigherOrderComponent( wrapperProps, } = props; - const newProps = { ...props }; - - // Only add inline styles if the block supports font sizes, doesn't - // already have an inline font size, and does have a class to extract - // the font size from. + // Only add inline styles if the block supports font sizes, + // doesn't skip serialization of font sizes, + // doesn't already have an inline font size, + // and does have a class to extract the font size from. if ( - hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) && - fontSize && - ! style?.typography?.fontSize + ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || + hasBlockSupport( + blockName, + '__experimentalSkipFontSizeSerialization' + ) || + ! fontSize || + style?.typography?.fontSize ) { - const fontSizeValue = getFontSize( - fontSizes, - fontSize, - style?.typography?.fontSize - ).size; + return ; + } + + const fontSizeValue = getFontSize( + fontSizes, + fontSize, + style?.typography?.fontSize + ).size; - newProps.wrapperProps = { + const newProps = { + ...props, + wrapperProps: { ...wrapperProps, style: { fontSize: fontSizeValue, ...wrapperProps?.style, }, - }; - } + }, + }; return ; }, diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index ea343c8d37773..3308b98d28169 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -12,4 +12,6 @@ import './font-size'; import './border-color'; import './layout'; +export { useCustomSides } from './spacing'; +export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 617bd51a05726..11dbe0a30e4c9 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -9,4 +9,5 @@ import './style'; import './color'; import './font-size'; +export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 113da0a5bfcce..e366ed4de53dc 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -9,11 +9,11 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ +import useEditorFeature from '../components/use-editor-feature'; +import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; -export const SPACING_SUPPORT_KEY = 'spacing'; - const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ { @@ -43,10 +43,27 @@ const CSS_UNITS = [ }, ]; -const hasPaddingSupport = ( blockName ) => { - const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); - return spacingSupport && spacingSupport.padding !== false; -}; +/** + * Determines if there is padding support. + * + * @param {string|Object} blockType Block name or Block Type object. + * @return {boolean} Whether there is support. + */ +export function hasPaddingSupport( blockType ) { + const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY ); + return !! ( true === support || support?.padding ); +} + +/** + * Custom hook that checks if padding settings have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether padding setting is disabled. + */ +export function useIsPaddingDisabled( { name: blockName } = {} ) { + const isDisabled = ! useEditorFeature( 'spacing.customPadding' ); + return ! hasPaddingSupport( blockName ) || isDisabled; +} /** * Inspector control panel containing the padding related configuration @@ -63,6 +80,7 @@ export function PaddingEdit( props ) { } = props; const units = useCustomUnits( CSS_UNITS ); + const sides = useCustomSides( blockName, 'padding' ); if ( ! hasPaddingSupport( blockName ) ) { return null; @@ -72,6 +90,7 @@ export function PaddingEdit( props ) { const newStyle = { ...style, spacing: { + ...style?.spacing, padding: next, }, }; @@ -102,6 +121,7 @@ export function PaddingEdit( props ) { onChange={ onChange } onChangeShowVisualizer={ onChangeShowVisualizer } label={ __( 'Padding' ) } + sides={ sides } units={ units } /> diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js new file mode 100644 index 0000000000000..1566f3015f39c --- /dev/null +++ b/packages/block-editor/src/hooks/spacing.js @@ -0,0 +1,90 @@ +/** + * WordPress dependencies + */ +import { PanelBody } from '@wordpress/components'; +import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { getBlockSupport } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import InspectorControls from '../components/inspector-controls'; +import { + PaddingEdit, + hasPaddingSupport, + useIsPaddingDisabled, +} from './padding'; + +export const SPACING_SUPPORT_KEY = 'spacing'; + +/** + * Inspector controls for spacing support. + * + * @param {Object} props Block props. + * @return {WPElement} Inspector controls for spacing support features. + */ +export function SpacingPanel( props ) { + const isDisabled = useIsSpacingDisabled( props ); + const isSupported = hasSpacingSupport( props.name ); + + if ( isDisabled || ! isSupported ) { + return null; + } + + return ( + + + + + + ); +} + +/** + * Determine whether there is block support for padding. + * + * @param {string} blockName Block name. + * @return {boolean} Whether there is support. + */ +export function hasSpacingSupport( blockName ) { + if ( Platform.OS !== 'web' ) { + return false; + } + + return hasPaddingSupport( blockName ); +} + +/** + * Determines whether spacing support has been disabled. + * + * @param {Object} props Block properties. + * @return {boolean} If spacing support is completely disabled. + */ +const useIsSpacingDisabled = ( props = {} ) => { + const paddingDisabled = useIsPaddingDisabled( props ); + + return paddingDisabled; +}; + +/** + * Custom hook to retrieve which padding/margin is supported + * e.g. top, right, bottom or left. + * + * Sides are opted into by default. It is only if a specific side is set to + * false that it is omitted. + * + * @param {string} blockName Block name. + * @param {string} feature The feature custom sides relate to e.g. padding or margins. + * @return {Object} Sides supporting custom margin. + */ +export function useCustomSides( blockName, feature ) { + const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); + + // Skip when setting is boolean as theme isn't setting arbitrary sides. + if ( typeof support[ feature ] === 'boolean' ) { + return; + } + + return support[ feature ]; +} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index b1c7239b2d791..e856f8e91bd82 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { capitalize, get, has, omitBy, startsWith } from 'lodash'; +import { capitalize, get, has, omit, omitBy, startsWith } from 'lodash'; /** * WordPress dependencies @@ -19,9 +19,10 @@ import { createHigherOrderComponent } from '@wordpress/compose'; */ import { BORDER_SUPPORT_KEY, BorderPanel } from './border'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; +import { FONT_SIZE_SUPPORT_KEY } from './font-size'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; -import { SPACING_SUPPORT_KEY, PaddingEdit } from './padding'; -import SpacingPanelControl from '../components/spacing-panel-control'; +import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing'; +import useDisplayBlockControls from '../components/use-display-block-controls'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, @@ -127,10 +128,19 @@ export function addSaveProps( props, blockType, attributes ) { } const { style } = attributes; - const filteredStyle = omitKeysNotToSerialize( style, { + let filteredStyle = omitKeysNotToSerialize( style, { border: getBlockSupport( blockType, BORDER_SUPPORT_KEY ), [ COLOR_SUPPORT_KEY ]: getBlockSupport( blockType, COLOR_SUPPORT_KEY ), } ); + + if ( + getBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) + ) { + filteredStyle = omit( filteredStyle, [ + [ 'typography', FONT_SIZE_SUPPORT_KEY ], + ] ); + } + props.style = { ...getInlineStyles( filteredStyle ), ...props.style, @@ -140,7 +150,7 @@ export function addSaveProps( props, blockType, attributes ) { } /** - * Filters registered block settings to extand the block edit wrapper + * Filters registered block settings to extend the block edit wrapper * to apply the desired styles and classnames properly. * * @param {Object} settings Original block settings @@ -173,24 +183,21 @@ export function addEditProps( settings ) { */ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { name: blockName } = props; - - const hasSpacingSupport = hasBlockSupport( - blockName, - SPACING_SUPPORT_KEY + const shouldDisplayControls = useDisplayBlockControls(); + + return ( + <> + { shouldDisplayControls && ( + <> + + + + + + ) } + + ); - - return [ - , - , - , - , - hasSpacingSupport && ( - - - - ), - ]; }, 'withToolbarControls' ); diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 0cd3c70d9f2b6..b6bd98eb56da6 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -23,6 +23,9 @@ describe( 'getInlineStyles', () => { style: 'dotted', color: '#21759b', }, + spacing: { + padding: { top: '10px' }, + }, } ) ).toEqual( { backgroundColor: 'black', @@ -33,6 +36,7 @@ describe( 'getInlineStyles', () => { color: 'red', lineHeight: 1.5, fontSize: 10, + paddingTop: '10px', } ); } ); } ); diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js new file mode 100644 index 0000000000000..1e8a853057eeb --- /dev/null +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { getInlineStyles } from './style'; +import { + getColorClassName, + getColorObjectByAttributeValues, +} from '../components/colors'; +import useEditorFeature from '../components/use-editor-feature'; + +// This utility is intended to assist where the serialization of the border +// block support is being skipped for a block but the border related CSS classes +// & styles still need to be generated so they can be applied to inner elements. + +const EMPTY_ARRAY = []; + +/** + * Provides the CSS class names and inline styles for a block's border support + * attributes. + * + * @param {Object} attributes Block attributes. + * @param {string} attributes.borderColor Selected named border color. + * @param {Object} attributes.style Block's styles attribute. + * + * @return {Object} Border block support derived CSS classes & styles. + */ +export function getBorderClassesAndStyles( { borderColor, style } ) { + const borderStyles = style?.border || {}; + const borderClass = getColorClassName( 'border-color', borderColor ); + + const className = classnames( { + [ borderClass ]: !! borderClass, + 'has-border-color': borderColor || style?.border?.color, + } ); + + return { + className: className || undefined, + style: getInlineStyles( { border: borderStyles } ), + }; +} + +/** + * Derives the border related props for a block from its border block support + * attributes. + * + * Inline styles are forced for named colors to ensure these selections are + * reflected when themes do not load their color stylesheets in the editor. + * + * @param {Object} attributes Block attributes. + * @return {Object} ClassName & style props from border block support. + */ +export function useBorderProps( attributes ) { + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const borderProps = getBorderClassesAndStyles( attributes ); + + // Force inline style to apply border color when themes do not load their + // color stylesheets in the editor. + if ( attributes.borderColor ) { + const borderColorObject = getColorObjectByAttributeValues( + colors, + attributes.borderColor + ); + + borderProps.style.borderColor = borderColorObject.color; + } + + return borderProps; +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index a5604c367c025..27af4c4be666b 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -8,8 +8,11 @@ import '@wordpress/rich-text'; */ import './hooks'; export { + getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, + useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, useColorProps as __experimentalUseColorProps, + useCustomSides as __experimentalUseCustomSides, } from './hooks'; export * from './components'; export * from './utils'; diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index b0144c19e4f47..69da6c75860ed 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -620,47 +620,32 @@ export function* insertBlocks( } /** - * Sets the insertion point without showing it to users. + * Returns an action object used in signalling that the insertion point should + * be shown. * - * Components like will default to inserting blocks at this point. - * - * @param {?string} rootClientId Root client ID of block list in which to - * insert. Use `undefined` for the root block - * list. - * @param {number} index Index at which block should be inserted. - * - * @return {Object} Action object. - */ -export function __unstableSetInsertionPoint( rootClientId, index ) { - return { - type: 'SET_INSERTION_POINT', - rootClientId, - index, - }; -} - -/** - * Sets the insertion point and shows it to users. - * - * Components like will default to inserting blocks at this point. - * - * @param {?string} rootClientId Root client ID of block list in which to - * insert. Use `undefined` for the root block - * list. - * @param {number} index Index at which block should be inserted. + * @param {?string} rootClientId Optional root client ID of block list on + * which to insert. + * @param {?number} index Index at which block should be inserted. + * @param {Object} __unstableOptions Wether or not to show an inserter button. * * @return {Object} Action object. */ -export function showInsertionPoint( rootClientId, index ) { +export function showInsertionPoint( + rootClientId, + index, + __unstableOptions = {} +) { + const { __unstableWithInserter } = __unstableOptions; return { type: 'SHOW_INSERTION_POINT', rootClientId, index, + __unstableWithInserter, }; } /** - * Hides the insertion point for users. + * Returns an action object hiding the insertion point. * * @return {Object} Action object. */ diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index b4349d621f776..fbc39f3905251 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1393,32 +1393,9 @@ export function blocksMode( state = {}, action ) { } /** - * A helper for resetting the insertion point state. - * - * @param {Object} state Current state. - * @param {Object} action Dispatched action. - * @param {*} defaultValue The default value for the reducer. - * - * @return {*} Either the default value if a reset is required, or the state. - */ -function resetInsertionPoint( state, action, defaultValue ) { - switch ( action.type ) { - case 'CLEAR_SELECTED_BLOCK': - case 'SELECT_BLOCK': - case 'SELECTION_CHANGE': - case 'REPLACE_INNER_BLOCKS': - case 'INSERT_BLOCKS': - case 'REMOVE_BLOCKS': - case 'REPLACE_BLOCKS': - return defaultValue; - } - - return state; -} - -/** - * Reducer returning the insertion point position, consisting of the - * rootClientId and an index. + * Reducer returning the block insertion point visibility, either null if there + * is not an explicit insertion point assigned, or an object of its `index` and + * `rootClientId`. * * @param {Object} state Current state. * @param {Object} action Dispatched action. @@ -1426,34 +1403,16 @@ function resetInsertionPoint( state, action, defaultValue ) { * @return {Object} Updated state. */ export function insertionPoint( state = null, action ) { - switch ( action.type ) { - case 'SET_INSERTION_POINT': - case 'SHOW_INSERTION_POINT': { - const { rootClientId, index } = action; - return { rootClientId, index }; - } - } - - return resetInsertionPoint( state, action, null ); -} - -/** - * Reducer returning the visibility of the insertion point. - * - * @param {Object} state Current state. - * @param {Object} action Dispatched action. - * - * @return {Object} Updated state. - */ -export function insertionPointVisibility( state = false, action ) { switch ( action.type ) { case 'SHOW_INSERTION_POINT': - return true; + const { rootClientId, index, __unstableWithInserter } = action; + return { rootClientId, index, __unstableWithInserter }; + case 'HIDE_INSERTION_POINT': - return false; + return null; } - return resetInsertionPoint( state, action, false ); + return state; } /** @@ -1764,7 +1723,6 @@ export default combineReducers( { blocksMode, blockListSettings, insertionPoint, - insertionPointVisibility, template, settings, preferences, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 7d8b9d0b4cca8..564f6bd1a8970 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1177,18 +1177,12 @@ export function isCaretWithinFormattedText( state ) { } /** - * Returns the insertion point. This will be: + * Returns the insertion point, the index at which the new inserted block would + * be placed. Defaults to the last index. * - * 1) The insertion point manually set using setInsertionPoint() or - * showInsertionPoint(); or - * 2) The point after the current block selection, if there is a selection; or - * 3) The point at the end of the block list. - * - * Components like will default to inserting blocks at this point. - * - * @param {Object} state Global application state. + * @param {Object} state Editor state. * - * @return {Object} Insertion point object with `rootClientId` and `index`. + * @return {Object} Insertion point object with `rootClientId`, `index`. */ export function getBlockInsertionPoint( state ) { let rootClientId, index; @@ -1214,15 +1208,14 @@ export function getBlockInsertionPoint( state ) { } /** - * Whether or not the insertion point should be shown to users. This is set - * using showInsertionPoint() or hideInsertionPoint(). + * Returns true if we should show the block insertion point. * * @param {Object} state Global application state. * - * @return {?boolean} Whether the insertion point should be shown. + * @return {?boolean} Whether the insertion point is visible or not. */ export function isBlockInsertionPointVisible( state ) { - return state.insertionPointVisibility; + return state.insertionPoint !== null; } /** diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index bbb47619ac28c..6433f15e6523e 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -42,7 +42,6 @@ const { resetBlocks, selectBlock, selectPreviousBlock, - __unstableSetInsertionPoint, showInsertionPoint, startMultiSelect, startTyping, @@ -741,31 +740,11 @@ describe( 'actions', () => { } ); } ); - describe( '__unstableSetInsertionPoint', () => { - it( 'should return the SET_INSERTION_POINT action', () => { - expect( __unstableSetInsertionPoint() ).toEqual( { - type: 'SET_INSERTION_POINT', - } ); - expect( __unstableSetInsertionPoint( 'rootClientId', 2 ) ).toEqual( - { - type: 'SET_INSERTION_POINT', - rootClientId: 'rootClientId', - index: 2, - } - ); - } ); - } ); - describe( 'showInsertionPoint', () => { it( 'should return the SHOW_INSERTION_POINT action', () => { expect( showInsertionPoint() ).toEqual( { type: 'SHOW_INSERTION_POINT', } ); - expect( showInsertionPoint( 'rootClientId', 2 ) ).toEqual( { - type: 'SHOW_INSERTION_POINT', - rootClientId: 'rootClientId', - index: 2, - } ); } ); } ); diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 13e6fe57ae980..b4ad1c12ec198 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -29,7 +29,6 @@ import { preferences, blocksMode, insertionPoint, - insertionPointVisibility, template, blockListSettings, lastBlockAttributesChange, @@ -2041,82 +2040,35 @@ describe( 'state', () => { } ); describe( 'insertionPoint', () => { - it( 'defaults to `null`', () => { + it( 'should default to null', () => { const state = insertionPoint( undefined, {} ); - expect( state ).toEqual( null ); + expect( state ).toBe( null ); } ); - it.each( [ 'SET_INSERTION_POINT', 'SHOW_INSERTION_POINT' ] )( - 'sets the insertion point on %s', - ( type ) => { - const original = deepFreeze( { - rootClientId: 'clientId1', - index: 0, - } ); - - const expectedNewState = { - rootClientId: 'clientId2', - index: 1, - }; - - const state = insertionPoint( original, { - type, - ...expectedNewState, - } ); - - expect( state ).toEqual( expectedNewState ); - } - ); - - it.each( [ - 'CLEAR_SELECTED_BLOCK', - 'SELECT_BLOCK', - 'REPLACE_INNER_BLOCKS', - 'INSERT_BLOCKS', - 'REMOVE_BLOCKS', - 'REPLACE_BLOCKS', - ] )( 'resets the insertion point to `null` on %s', ( type ) => { - const original = deepFreeze( { + it( 'should set insertion point', () => { + const state = insertionPoint( null, { + type: 'SHOW_INSERTION_POINT', rootClientId: 'clientId1', index: 0, } ); - const state = insertionPoint( original, { - type, - } ); - - expect( state ).toEqual( null ); - } ); - } ); - - describe( 'insertionPointVisibility', () => { - it( 'defaults to `false`', () => { - const state = insertionPointVisibility( undefined, {} ); - expect( state ).toBe( false ); - } ); - it( 'shows the insertion point', () => { - const state = insertionPointVisibility( false, { - type: 'SHOW_INSERTION_POINT', + expect( state ).toEqual( { + rootClientId: 'clientId1', + index: 0, } ); - - expect( state ).toBe( true ); } ); - it.each( [ - 'HIDE_INSERTION_POINT', - 'CLEAR_SELECTED_BLOCK', - 'SELECT_BLOCK', - 'REPLACE_INNER_BLOCKS', - 'INSERT_BLOCKS', - 'REMOVE_BLOCKS', - 'REPLACE_BLOCKS', - ] )( 'sets the insertion point on %s to `false`', ( type ) => { - const state = insertionPointVisibility( true, { - type, + it( 'should clear the insertion point', () => { + const original = deepFreeze( { + rootClientId: 'clientId1', + index: 0, + } ); + const state = insertionPoint( original, { + type: 'HIDE_INSERTION_POINT', } ); - expect( state ).toBe( false ); + expect( state ).toBe( null ); } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 78f1342fa4ce6..5339ffb49943c 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -2246,17 +2246,20 @@ describe( 'selectors', () => { } ); describe( 'isBlockInsertionPointVisible', () => { - it( 'should return false if insertion point is set to not show', () => { + it( 'should return false if no assigned insertion point', () => { const state = { - insertionPointVisibility: false, + insertionPoint: null, }; expect( isBlockInsertionPointVisible( state ) ).toBe( false ); } ); - it( 'should return true if insertion point is set to show', () => { + it( 'should return true if assigned insertion point', () => { const state = { - insertionPointVisibility: true, + insertionPoint: { + rootClientId: undefined, + index: 5, + }, }; expect( isBlockInsertionPointVisible( state ) ).toBe( true ); diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index cd83dca5fec2f..0d9b9b01cbde1 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -10,6 +10,7 @@ @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; +@import "./components/block-tools/style.scss"; @import "./components/block-list-appender/style.scss"; @import "./components/block-breadcrumb/style.scss"; @import "./components/block-card/style.scss"; diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 248587311d1d2..f99468a7e751c 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -1,36 +1,3 @@ -/** - * Given a block client ID, returns the corresponding DOM node for the block, - * if exists. As much as possible, this helper should be avoided, and used only - * in cases where isolated behaviors need remote access to a block node. - * - * @param {string} clientId Block client ID. - * @param {Document} doc Document to search. - * - * @return {Element?} Block DOM node. - */ -export function getBlockDOMNode( clientId, doc ) { - return doc.getElementById( 'block-' + clientId ); -} - -/** - * Returns the preview container DOM node for a given block client ID, or - * undefined if the container cannot be determined. - * - * @param {string} clientId Block client ID. - * @param {Document} doc Document to search. - * - * @return {Node|undefined} Preview container DOM node. - */ -export function getBlockPreviewContainerDOMNode( clientId, doc ) { - const domNode = getBlockDOMNode( clientId, doc ); - - if ( ! domNode ) { - return; - } - - return domNode.firstChild || domNode; -} - /** * Returns true if two elements are contained within the same block. * diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index f62720071c299..52e02c9762bfb 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.29.0 (2021-03-17) ### Bug Fixes diff --git a/packages/block-library/README.md b/packages/block-library/README.md index 356e4778653d1..7b500f4a3b983 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/block-library --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Building JavaScript for the browser diff --git a/packages/block-library/package.json b/packages/block-library/package.json index f36c4685759e1..03fb96d81fd90 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "2.29.2", + "version": "2.29.3", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json index d35f8b05001c4..799d050354c5f 100644 --- a/packages/block-library/src/archives/block.json +++ b/packages/block-library/src/archives/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/archives", + "title": "Archives", "category": "widgets", + "description": "Display a monthly archive of your posts.", + "textdomain": "default", "attributes": { "displayAsDropdown": { "type": "boolean", diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index 6bfdbef7abce3..e1f01f30a7187 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { archive as icon } from '@wordpress/icons'; -import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,8 +14,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Archives', 'block title' ), - description: __( 'Display a monthly archive of your posts.' ), icon, example: {}, edit, diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json index c8e6e8e19d693..969a9e7e7c29b 100644 --- a/packages/block-library/src/audio/block.json +++ b/packages/block-library/src/audio/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/audio", + "title": "Audio", "category": "media", + "description": "Embed a simple audio player.", + "keywords": [ "music", "sound", "podcast", "recording" ], + "textdomain": "default", "attributes": { "src": { "type": "string", diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 425c5ef808b73..db14dd6895bbe 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -178,10 +178,11 @@ function AudioEdit( {
{ /* - Disable the audio tag so the user clicking on it won't play the + Disable the audio tag if the block is not selected + so the user clicking on it won't play the file or change the position slider when the controls are enabled. */ } - + { ( ! RichText.isEmpty( caption ) || isSelected ) && ( diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index a06248ac24553..6ed1b116f06b2 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { audio as icon } from '@wordpress/icons'; /** @@ -18,14 +17,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Audio', 'block title' ), - description: __( 'Embed a simple audio player.' ), - keywords: [ - __( 'music' ), - __( 'sound' ), - __( 'podcast' ), - __( 'recording' ), - ], icon, transforms, deprecated, diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index aece916ab601b..006c85c0b5db6 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/block", + "title": "Reusable block", "category": "reusable", + "description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.", + "textdomain": "default", "attributes": { "ref": { "type": "number" diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index a492230e83673..074dc9ee704c8 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -13,14 +13,18 @@ import { * WordPress dependencies */ import { useState } from '@wordpress/element'; -import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data'; +import { + useEntityBlockEditor, + useEntityProp, + store as coreStore, +} from '@wordpress/core-data'; import { BottomSheet, Icon, Disabled } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { - BlockEditorProvider, - BlockList, - store as blockEditorStore, + __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, + InnerBlocks, + Warning, } from '@wordpress/block-editor'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { help } from '@wordpress/icons'; @@ -37,7 +41,9 @@ export default function ReusableBlockEdit( { clientId, isSelected, } ) { - const recordArgs = [ 'postType', 'wp_block', ref ]; + const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders( + ref + ); const [ showHelp, setShowHelp ] = useState( false ); const infoTextStyle = usePreferredColorSchemeStyle( @@ -57,30 +63,26 @@ export default function ReusableBlockEdit( { styles.spinnerDark ); - const { reusableBlock, hasResolved, isEditing, settings } = useSelect( + const { hasResolved, isEditing, isMissing } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - + const persistedBlock = select( coreStore ).getEntityRecord( + 'postType', + 'wp_block', + ref + ); + const hasResolvedBlock = select( + coreStore + ).hasFinishedResolution( 'getEntityRecord', [ + 'postType', + 'wp_block', + ref, + ] ); return { - reusableBlock: select( coreStore ).getEditedEntityRecord( - ...recordArgs - ), - hasResolved: select( coreStore ).hasFinishedResolution( - 'getEditedEntityRecord', - recordArgs - ), - isSaving: select( coreStore ).isSavingEntityRecord( - ...recordArgs - ), - canUserUpdate: select( coreStore ).canUser( - 'update', - 'blocks', - ref - ), + hasResolved: hasResolvedBlock, isEditing: select( reusableBlocksStore ).__experimentalIsEditingReusableBlock( clientId ), - settings: getSettings(), + isMissing: hasResolvedBlock && ! persistedBlock, }; }, [ ref, clientId ] @@ -92,6 +94,8 @@ export default function ReusableBlockEdit( { { id: ref } ); + const [ title ] = useEntityProp( 'postType', 'wp_block', 'title', ref ); + function openSheet() { setShowHelp( true ); } @@ -128,30 +132,36 @@ export default function ReusableBlockEdit( { ); } - if ( ! hasResolved ) { + if ( hasAlreadyRendered ) { return ( - - - + ); } - if ( ! reusableBlock ) { + if ( isMissing ) { return ( - { __( 'Block has been deleted or is unavailable.' ) } + + ); + } + + if ( ! hasResolved ) { + return ( + + + ); } - const { title } = reusableBlock; let element = ( - - - + /> ); if ( ! isEditing ) { @@ -159,18 +169,20 @@ export default function ReusableBlockEdit( { } return ( - - - { isSelected && } - { element } - { renderSheet() } - - + + + + { isSelected && } + { element } + { renderSheet() } + + + ); } diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss index e4c8dac29cd5c..d69d9ee78162f 100644 --- a/packages/block-library/src/block/editor.native.scss +++ b/packages/block-library/src/block/editor.native.scss @@ -1,7 +1,7 @@ .titleContainer { flex-direction: row; align-items: center; - padding-bottom: 12; + padding-bottom: 28; } .title { @@ -21,7 +21,7 @@ position: absolute; left: -$block-selected-to-content + $block-selected-border-width; right: -$block-selected-to-content + $block-selected-border-width; - bottom: 0; + bottom: 16; } .separatorDark { diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js index 0c6353eb1ebed..d3f536a5676ad 100644 --- a/packages/block-library/src/block/index.js +++ b/packages/block-library/src/block/index.js @@ -1,8 +1,3 @@ -/** - * WordPress dependencies - */ -import { __, _x } from '@wordpress/i18n'; - /** * Internal dependencies */ @@ -14,9 +9,5 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Reusable block', 'block title' ), - description: __( - 'Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.' - ), edit, }; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index a9b483981eccf..3cb59a7fd653e 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -1,8 +1,12 @@ { "apiVersion": 2, "name": "core/button", + "title": "Button", "category": "design", "parent": [ "core/buttons" ], + "description": "Prompt visitors to take action with a button-style link.", + "keywords": [ "link" ], + "textdomain": "default", "attributes": { "url": { "type": "string", @@ -66,6 +70,10 @@ "__experimentalFontFamily": true, "__experimentalSelector": ".wp-block-button__link" }, + "styles": [ + { "name": "fill", "label": "Fill", "isDefault": true }, + { "name": "outline", "label": "Outline" } + ], "editorStyle": "wp-block-button-editor", "style": "wp-block-button" } diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index de6f3c8e0b6d2..a62ee2180d76a 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { button as icon } from '@wordpress/icons'; /** @@ -17,12 +17,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Button', 'block title' ), - description: __( - 'Prompt visitors to take action with a button-style link.' - ), icon, - keywords: [ __( 'link' ) ], example: { attributes: { className: 'is-style-fill', @@ -30,10 +25,6 @@ export const settings = { text: __( 'Call to Action' ), }, }, - styles: [ - { name: 'fill', label: __( 'Fill' ), isDefault: true }, - { name: 'outline', label: __( 'Outline' ) }, - ], edit, save, deprecated, diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 2e0c50205a1cb..65df1b3f0d504 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -62,8 +62,12 @@ $blocks-block__margin: 0.5em; } &.wp-block-button__width-100 { - margin-right: 0; - width: 100%; + width: calc(100% - #{ $blocks-block__margin }); + + &:only-child { + margin-right: 0; + width: 100%; + } } } diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 704b3a33b29a9..74eed0a4a0a54 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/buttons", + "title": "Buttons", "category": "design", + "description": "Prompt visitors to take action with a group of button-style links.", + "keywords": [ "link" ], + "textdomain": "default", "attributes": { "contentJustification": { "type": "string" diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 9cade7c6dc2eb..2ee8ca3d371d9 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { buttons as icon } from '@wordpress/icons'; /** @@ -19,12 +19,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Buttons', 'block title' ), - description: __( - 'Prompt visitors to take action with a group of button-style links.' - ), icon, - keywords: [ __( 'link' ) ], example: { innerBlocks: [ { diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index edb73671e692a..07938927f5eba 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/calendar", + "title": "Calendar", "category": "widgets", + "description": "A calendar of your site’s posts.", + "keywords": [ "posts", "archive" ], + "textdomain": "default", "attributes": { "month": { "type": "integer" diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js index 5ad08622de378..43fb2e5000606 100644 --- a/packages/block-library/src/calendar/index.js +++ b/packages/block-library/src/calendar/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { calendar as icon } from '@wordpress/icons'; -import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,10 +14,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Calendar', 'block title' ), - description: __( 'A calendar of your site’s posts.' ), icon, - keywords: [ __( 'posts' ), __( 'archive' ) ], example: {}, edit, }; diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json index 5fe562622c83e..b238df42039e5 100644 --- a/packages/block-library/src/categories/block.json +++ b/packages/block-library/src/categories/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/categories", + "title": "Categories", "category": "widgets", + "description": "Display a list of all categories.", + "textdomain": "default", "attributes": { "displayAsDropdown": { "type": "boolean", diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index ad11522b3c567..9698dacfdaff3 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { category as icon } from '@wordpress/icons'; -import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,8 +14,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Categories', 'block title' ), - description: __( 'Display a list of all categories.' ), icon, example: {}, edit, diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json index 0f29cf33cc030..8cb922288730f 100644 --- a/packages/block-library/src/code/block.json +++ b/packages/block-library/src/code/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/code", + "title": "Code", "category": "text", + "description": "Display code snippets that respect your spacing and tabs.", + "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index ed6e65c1dffb6..8301b13d9ff57 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { code as icon } from '@wordpress/icons'; /** @@ -17,10 +17,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Code', 'block title' ), - description: __( - 'Display code snippets that respect your spacing and tabs.' - ), icon, example: { attributes: { diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index 92e76c6a5c174..e949aa4f4fcac 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -1,8 +1,11 @@ { "apiVersion": 2, "name": "core/column", + "title": "Column", "category": "text", "parent": [ "core/columns" ], + "description": "A single column within a columns block.", + "textdomain": "default", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index 955d82d8fcb2f..e935e682f45ca 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { column as icon } from '@wordpress/icons'; /** @@ -17,9 +16,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Column', 'block title' ), icon, - description: __( 'A single column within a columns block.' ), edit, save, deprecated, diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index d9f61692b7cf8..f3bc49d3d2497 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/columns", + "title": "Columns", "category": "design", + "description": "Add a block that displays content in multiple columns, then add whatever content blocks you’d like.", + "textdomain": "default", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 5e00f018d0d29..4bee7eb6bc396 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { columns as icon } from '@wordpress/icons'; /** @@ -19,11 +19,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Columns', 'block title' ), icon, - description: __( - 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' - ), variations, example: { innerBlocks: [ diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 676fb581c2b95..3b3ad5d804417 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/cover", + "title": "Cover", "category": "media", + "description": "Add an image or video with a text overlay — great for headers.", + "textdomain": "default", "attributes": { "url": { "type": "string" diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 331e2fb19c4af..89576d2ae55e1 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { cover as icon } from '@wordpress/icons'; /** @@ -18,10 +18,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Cover', 'block title' ), - description: __( - 'Add an image or video with a text overlay — great for headers.' - ), icon, example: { attributes: { diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 8c270a0c0c60e..cc0cb64c03fe6 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/embed", + "title": "Embed", "category": "embed", + "description": "Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.", + "textdomain": "default", "attributes": { "url": { "type": "string" diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 75f0cee9a9128..09b28b72338b5 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -8,8 +8,8 @@ import { getAttributesFromPreview, getEmbedInfoByProvider, } from './util'; -import { settings } from './index'; import EmbedControls from './embed-controls'; +import { embedContentIcon } from './icons'; import EmbedLoading from './embed-loading'; import EmbedPlaceholder from './embed-placeholder'; import EmbedPreview from './embed-preview'; @@ -22,7 +22,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; @@ -55,8 +55,8 @@ const EmbedEdit = ( props ) => { } = props; const defaultEmbedInfo = { - title: settings.title, - icon: settings.icon, + title: _x( 'Embed', 'block title' ), + icon: embedContentIcon, }; const { icon, title } = getEmbedInfoByProvider( providerNameSlug ) || defaultEmbedInfo; diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 3b1ed4d9bdb9c..5f0e38c1aabf2 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -9,19 +9,10 @@ import variations from './variations'; import deprecated from './deprecated'; import { embedContentIcon } from './icons'; -/** - * WordPress dependencies - */ -import { __, _x } from '@wordpress/i18n'; - const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Embed', 'block title' ), - description: __( - 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' - ), icon: embedContentIcon, edit, save, diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 530d856fa7087..4874eec3961d9 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/file", + "title": "File", "category": "media", + "description": "Add a link to a downloadable file.", + "keywords": [ "document", "pdf", "download" ], + "textdomain": "default", "attributes": { "id": { "type": "number" diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index a8e566c21eb44..6dbb7446427bd 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { file as icon } from '@wordpress/icons'; /** @@ -17,10 +16,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'File', 'block title' ), - description: __( 'Add a link to a downloadable file.' ), icon, - keywords: [ __( 'document' ), __( 'pdf' ), __( 'download' ) ], transforms, edit, save, diff --git a/packages/block-library/src/freeform/block.json b/packages/block-library/src/freeform/block.json index a18cd84635004..f3b2d45b00c48 100644 --- a/packages/block-library/src/freeform/block.json +++ b/packages/block-library/src/freeform/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/freeform", + "title": "Classic", "category": "text", + "description": "Use the classic WordPress editor.", + "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/freeform/index.js b/packages/block-library/src/freeform/index.js index 89275ee2d1ebc..b4d7cf715442b 100644 --- a/packages/block-library/src/freeform/index.js +++ b/packages/block-library/src/freeform/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { classic as icon } from '@wordpress/icons'; /** @@ -16,8 +15,6 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Classic', 'block title' ), - description: __( 'Use the classic WordPress editor.' ), icon, edit, save, diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 8beac02827f61..a87edb1eda972 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/gallery", + "title": "Gallery", "category": "media", + "description": "Display multiple images in a rich gallery.", + "keywords": [ "images", "photos" ], + "textdomain": "default", "attributes": { "images": { "type": "array", diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index 677291252e7ce..01e8a7a61502f 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { gallery as icon } from '@wordpress/icons'; /** @@ -18,10 +17,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Gallery', 'block title' ), - description: __( 'Display multiple images in a rich gallery.' ), icon, - keywords: [ __( 'images' ), __( 'photos' ) ], example: { attributes: { columns: 2, diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 429f13fb03018..b12fb400437c6 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/group", + "title": "Group", "category": "design", + "description": "Combine blocks into a group.", + "keywords": [ "container", "wrapper", "row", "section" ], + "textdomain": "default", "attributes": { "tagName": { "type": "string", diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index 5ce93ae1fd397..dac9a09b3cb1f 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import { group as icon } from '@wordpress/icons'; @@ -18,15 +18,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Group', 'block title' ), icon, - description: __( 'Combine blocks into a group.' ), - keywords: [ - __( 'container' ), - __( 'wrapper' ), - __( 'row' ), - __( 'section' ), - ], example: { attributes: { style: { diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 8d7e0fdd5c194..0e32048da4e5b 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/heading", + "title": "Heading", "category": "text", + "description": "Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.", + "keywords": [ "title", "subtitle" ], + "textdomain": "default", "attributes": { "textAlign": { "type": "string" diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 593e1eaca7fe4..989812cd46c89 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -7,7 +7,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { heading as icon } from '@wordpress/icons'; -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -23,12 +23,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Heading', 'block title' ), - description: __( - 'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.' - ), icon, - keywords: [ __( 'title' ), __( 'subtitle' ) ], example: { attributes: { content: __( 'Code is Poetry' ), diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json index 266b4511e0fe5..962db3f3684d3 100644 --- a/packages/block-library/src/html/block.json +++ b/packages/block-library/src/html/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/html", + "title": "Custom HTML", "category": "widgets", + "description": "Add custom HTML code and preview it as you edit.", + "keywords": [ "embed" ], + "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js index 43f0975f9a130..cb1fb915ee8b5 100644 --- a/packages/block-library/src/html/index.js +++ b/packages/block-library/src/html/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { html as icon } from '@wordpress/icons'; /** @@ -17,10 +17,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Custom HTML', 'block title' ), - description: __( 'Add custom HTML code and preview it as you edit.' ), icon, - keywords: [ __( 'embed' ) ], example: { attributes: { content: diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 6b9fb6443a236..9cb1901028c9d 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/image", + "title": "Image", "category": "media", + "description": "Insert an image to make a visual statement.", + "keywords": [ "img", "photo", "picture" ], + "textdomain": "default", "attributes": { "align": { "type": "string" @@ -81,6 +85,14 @@ "radius": true } }, + "styles": [ + { + "name": "default", + "label": "Default", + "isDefault": true + }, + { "name": "rounded", "label": "Rounded" } + ], "editorStyle": "wp-block-image-editor", "style": "wp-block-image" } diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index ab8f057d210a0..dcdbd4e76882c 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { image as icon } from '@wordpress/icons'; /** @@ -18,14 +18,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Image', 'block title' ), - description: __( 'Insert an image to make a visual statement.' ), icon, - keywords: [ - 'img', // "img" is not translated as it is intended to reflect the HTML tag. - __( 'photo' ), - __( 'picture' ), - ], example: { attributes: { sizeSlug: 'large', @@ -34,14 +27,6 @@ export const settings = { caption: __( 'Mont Blanc appears—still, snowy, and serene.' ), }, }, - styles: [ - { - name: 'default', - label: _x( 'Default', 'block style' ), - isDefault: true, - }, - { name: 'rounded', label: _x( 'Rounded', 'block style' ) }, - ], __experimentalLabel( attributes, { context } ) { if ( context === 'accessibility' ) { const { caption, alt, url } = attributes; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index e1b6d279acaad..22b4385b9a806 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -4,12 +4,11 @@ import '@wordpress/core-data'; import '@wordpress/block-editor'; import { - registerBlockType, + registerBlockTypeFromMetadata, setDefaultBlockName, setFreeformContentHandlerName, setUnregisteredTypeHandlerName, setGroupingBlockName, - unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase } from '@wordpress/blocks'; /** @@ -106,10 +105,7 @@ const registerBlock = ( block ) => { return; } const { metadata, settings, name } = block; - if ( metadata ) { - unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } ); - } - registerBlockType( name, settings ); + registerBlockTypeFromMetadata( { name, ...metadata }, settings ); }; /** diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index ba0d20795a111..0dffcb66269c1 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -10,6 +10,7 @@ import { sortBy } from 'lodash'; import { hasBlockSupport, registerBlockType, + registerBlockTypeFromMetadata, setDefaultBlockName, setFreeformContentHandlerName, setUnregisteredTypeHandlerName, @@ -127,10 +128,13 @@ const registerBlock = ( block ) => { return; } const { metadata, settings, name } = block; - registerBlockType( name, { - ...metadata, - ...settings, - } ); + registerBlockTypeFromMetadata( + { + name, + ...metadata, + }, + settings + ); }; /** @@ -248,7 +252,7 @@ export const registerCoreBlocks = () => { file, audio, devOnly( reusableBlock ), - devOnly( search ), + search, devOnly( embed ), ].forEach( registerBlock ); diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index 37600026f8f71..fa5aace648fef 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/latest-comments", + "title": "Latest Comments", "category": "widgets", + "description": "Display a list of your most recent comments.", + "keywords": [ "recent comments" ], + "textdomain": "default", "attributes": { "commentsToShow": { "type": "number", diff --git a/packages/block-library/src/latest-comments/index.js b/packages/block-library/src/latest-comments/index.js index 3e77c68b0198c..6497e8b5b927d 100644 --- a/packages/block-library/src/latest-comments/index.js +++ b/packages/block-library/src/latest-comments/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { comment as icon } from '@wordpress/icons'; -import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,10 +14,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Latest Comments', 'block title' ), - description: __( 'Display a list of your most recent comments.' ), icon, - keywords: [ __( 'recent comments' ) ], example: {}, edit, }; diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index 46f1c197b6c53..dfc69621f5e23 100644 --- a/packages/block-library/src/latest-posts/block.json +++ b/packages/block-library/src/latest-posts/block.json @@ -1,7 +1,11 @@ { "apiVersion": 2, "name": "core/latest-posts", + "title": "Latest Posts", "category": "widgets", + "description": "Display a list of your most recent posts.", + "keywords": [ "recent posts" ], + "textdomain": "default", "attributes": { "categories": { "type": "array", diff --git a/packages/block-library/src/latest-posts/index.js b/packages/block-library/src/latest-posts/index.js index a17d52ca76fd3..a0f8ffa74898b 100644 --- a/packages/block-library/src/latest-posts/index.js +++ b/packages/block-library/src/latest-posts/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; import { postList as icon } from '@wordpress/icons'; /** @@ -15,10 +14,7 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: _x( 'Latest Posts', 'block title' ), - description: __( 'Display a list of your most recent posts.' ), icon, - keywords: [ __( 'recent posts' ) ], example: {}, edit, deprecated, diff --git a/packages/block-library/src/legacy-widget/block.json b/packages/block-library/src/legacy-widget/block.json index 2ffbe6716a786..30b60c6448835 100644 --- a/packages/block-library/src/legacy-widget/block.json +++ b/packages/block-library/src/legacy-widget/block.json @@ -1,7 +1,10 @@ { "apiVersion": 2, "name": "core/legacy-widget", + "title": "Legacy Widget", "category": "widgets", + "description": "Display a legacy widget.", + "textdomain": "default", "attributes": { "id": { "type": "string", diff --git a/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js b/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js new file mode 100644 index 0000000000000..d9dc71062bcf9 --- /dev/null +++ b/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { ToolbarButton } from '@wordpress/components'; +import { createBlock, rawHandler } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +export default function ConvertToBlocksButton( { clientId, rawInstance } ) { + const { replaceBlocks } = useDispatch( blockEditorStore ); + + return ( + { + if ( rawInstance.title ) { + replaceBlocks( clientId, [ + createBlock( 'core/heading', { + content: rawInstance.title, + } ), + ...rawHandler( { HTML: rawInstance.text } ), + ] ); + } else { + replaceBlocks( + clientId, + rawHandler( { HTML: rawInstance.text } ) + ); + } + } } + > + { __( 'Convert to blocks' ) } + + ); +} diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js index ca2fd3baed575..32726b89d7b6c 100644 --- a/packages/block-library/src/legacy-widget/edit/form.js +++ b/packages/block-library/src/legacy-widget/edit/form.js @@ -6,28 +6,12 @@ import { debounce } from 'lodash'; /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; -import { store as noticesStore } from '@wordpress/notices'; import { __ } from '@wordpress/i18n'; -import { - useEffect, - useRef, - useState, - useCallback, - RawHTML, -} from '@wordpress/element'; -import apiFetch from '@wordpress/api-fetch'; +import { useEffect, useRef, useCallback, RawHTML } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; -export default function Form( { id, idBase, instance, setInstance } ) { - const { html, setFormData } = useForm( { - id, - idBase, - instance, - setInstance, - } ); - +export default function Form( { id, idBase, content, setFormData } ) { const setFormDataDebounced = useCallback( debounce( setFormData, 300 ), [ setFormData, ] ); @@ -36,106 +20,24 @@ export default function Form( { id, idBase, instance, setInstance } ) { ); } -function useForm( { id, idBase, instance, setInstance } ) { - const isStillMounted = useRef( false ); - const [ html, setHTML ] = useState( null ); - const [ formData, setFormData ] = useState( null ); - - useEffect( () => { - isStillMounted.current = true; - return () => ( isStillMounted.current = false ); - }, [] ); - - const { createNotice } = useDispatch( noticesStore ); - - useEffect( () => { - const performFetch = async () => { - if ( id ) { - // Updating a widget that does not extend WP_Widget. - try { - let widget; - if ( formData ) { - widget = await apiFetch( { - path: `/wp/v2/widgets/${ id }?context=edit`, - method: 'PUT', - data: { - form_data: formData, - }, - } ); - } else { - widget = await apiFetch( { - path: `/wp/v2/widgets/${ id }?context=edit`, - method: 'GET', - } ); - } - if ( isStillMounted.current ) { - setHTML( widget.rendered_form ); - } - } catch ( error ) { - createNotice( - 'error', - error?.message ?? - __( 'An error occured while updating the widget.' ) - ); - } - } else if ( idBase ) { - // Updating a widget that extends WP_Widget. - try { - const response = await apiFetch( { - path: `/wp/v2/widget-types/${ idBase }/encode`, - method: 'POST', - data: { - instance, - form_data: formData, - }, - } ); - if ( isStillMounted.current ) { - setInstance( response.instance ); - // Only set HTML the first time so that we don't cause a - // focus loss by remounting the form. - setHTML( - ( previousHTML ) => previousHTML ?? response.form - ); - } - } catch ( error ) { - createNotice( - 'error', - error?.message ?? - __( 'An error occured while updating the widget.' ) - ); - } - } - }; - performFetch(); - }, [ - id, - idBase, - setInstance, - formData, - // Do not trigger when `instance` changes so that we don't make two API - // requests when there is form input. - ] ); - - return { html, setFormData }; -} - -function Control( { id, idBase, html, onChange, onSave } ) { +function Control( { id, idBase, content, onChange, onSave } ) { const controlRef = useRef(); const formRef = useRef(); - // Trigger 'widget-added' when widget is ready and 'widget-updated' when - // widget changes. This event is what widgets' scripts use to initialize, - // attach events, etc. The event must be fired using jQuery's event bus as - // this is what widget scripts expect. If jQuery is not loaded, do nothing - - // some widgets will still work regardless. - const hasBeenAdded = useRef( false ); + // Trigger 'widget-added' when widget is ready. This event is what widgets' + // scripts use to initialize, attach events, etc. The event must be fired + // using jQuery's event bus as this is what widget scripts expect. If jQuery + // is not loaded, do nothing - some widgets will still work regardless. useEffect( () => { if ( ! window.jQuery ) { return; @@ -143,20 +45,12 @@ function Control( { id, idBase, html, onChange, onSave } ) { const { jQuery: $ } = window; - if ( html ) { - $( document ).trigger( - hasBeenAdded.current ? 'widget-updated' : 'widget-added', - [ $( controlRef.current ) ] - ); - hasBeenAdded.current = true; + if ( content ) { + $( document ).trigger( 'widget-added', [ + $( controlRef.current ), + ] ); } - }, [ - html, - // Include id and idBase in the deps so that widget-updated is triggered - // if they change. - id, - idBase, - ] ); + }, [ content ] ); // Prefer jQuery 'change' event instead of the native 'change' event because // many widgets use jQuery's event bus to trigger an update. @@ -230,7 +124,7 @@ function Control( { id, idBase, html, onChange, onSave } ) { className="add_new" value="" /> - { html } + { content } { id && (
); diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index bba4af1ea54b8..443f8a3da8490 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -142,6 +142,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) { const contexts = useMemo( () => getContexts( blockTypes ), [ blockTypes ] ); + const { __experimentalGlobalStylesBaseStyles: themeStyles } = settings; const { userStyles, mergedStyles } = useMemo( () => { let newUserStyles; try { @@ -191,11 +192,28 @@ export default function GlobalStylesProvider( { children, baseStyles } ) { setContent( JSON.stringify( newContent ) ); }, getStyle: ( context, propertyName, origin = 'merged' ) => { - const styleOrigin = - 'user' === origin ? userStyles : mergedStyles; + if ( origin === 'theme' ) { + const value = get( + themeStyles?.styles?.[ context ], + STYLE_PROPERTY[ propertyName ].value + ); + return getValueFromVariable( themeStyles, context, value ); + } + + if ( origin === 'user' ) { + const value = get( + userStyles?.styles?.[ context ], + STYLE_PROPERTY[ propertyName ].value + ); + + // We still need to use merged styles here because the + // presets used to resolve user variable may be defined a + // layer down ( core, theme, or user ). + return getValueFromVariable( mergedStyles, context, value ); + } const value = get( - styleOrigin?.styles?.[ context ], + mergedStyles?.styles?.[ context ], STYLE_PROPERTY[ propertyName ].value ); return getValueFromVariable( mergedStyles, context, value ); @@ -220,7 +238,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) { setContent( JSON.stringify( newContent ) ); }, } ), - [ content, mergedStyles ] + [ content, mergedStyles, themeStyles ] ); useEffect( () => { diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index b8bbc57cfe1ed..2b2236e58e369 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -64,14 +64,14 @@ function getBlockPresetClasses( blockSelector, blockPresets = {} ) { if ( ! classes ) { return declarations; } - classes.forEach( ( { classSuffix, propertyName } ) => { - const presets = get( blockPresets, path, [] ); - presets.forEach( ( preset ) => { + const presets = get( blockPresets, path, [] ); + presets.forEach( ( preset ) => { + classes.forEach( ( { classSuffix, propertyName } ) => { const slug = preset.slug; const value = preset[ valueKey ]; const classSelectorToUse = `.has-${ slug }-${ classSuffix }`; const selectorToUse = `${ blockSelector }${ classSelectorToUse }`; - declarations += `${ selectorToUse } {${ propertyName }: ${ value };}`; + declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`; } ); } ); return declarations; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 65701054c9f23..f02348d10f8d7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -3,7 +3,12 @@ */ import { useEffect, useState, useMemo, useCallback } from '@wordpress/element'; import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data'; -import { SlotFillProvider, Popover, Button } from '@wordpress/components'; +import { + SlotFillProvider, + Popover, + Button, + Notice, +} from '@wordpress/components'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor'; import { @@ -13,16 +18,17 @@ import { store as interfaceStore, } from '@wordpress/interface'; import { + EditorNotices, EntitiesSavedStates, UnsavedChangesWarning, store as editorStore, } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; + /** * Internal dependencies */ -import Notices from '../notices'; import Header from '../header'; import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; @@ -209,7 +215,7 @@ function Editor( { initialSettings } ) { } content={ <> - + { template && ( ) } + { ! template && + settings?.siteUrl && + entityId && ( + + { __( + "You attempted to edit an item that doesn't exist. Perhaps it was deleted?" + ) } + + ) } } actions={ <> - - { ! isEntitiesSavedStatesOpen && ( + { isEntitiesSavedStatesOpen ? ( + + ) : (
- +
); diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 0afcf1344f897..f8c4e2053b5dd 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -7,6 +7,7 @@ import { __experimentalBoxControl as BoxControl, PanelBody, } from '@wordpress/components'; +import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor'; /** * Internal dependencies @@ -42,7 +43,13 @@ const CSS_UNITS = [ }, ]; -export function useHasSpacingPanel( { supports, name } ) { +export function useHasSpacingPanel( context ) { + const hasPadding = useHasPadding( context ); + + return hasPadding; +} + +export function useHasPadding( { name, supports } ) { return ( useEditorFeature( 'spacing.customPadding', name ) && supports.includes( 'padding' ) @@ -65,29 +72,43 @@ function useCustomUnits( { units, contextName } ) { return usedUnits.length === 0 ? false : usedUnits; } -export default function SpacingPanel( { - context: { name }, - getStyle, - setStyle, -} ) { +function filterValuesBySides( values, sides ) { + if ( ! sides ) { + // If no custom side configuration all sides are opted into by default. + return values; + } + + // Only include sides opted into within filtered values. + const filteredValues = {}; + sides.forEach( ( side ) => ( filteredValues[ side ] = values[ side ] ) ); + + return filteredValues; +} + +export default function SpacingPanel( { context, getStyle, setStyle } ) { + const { name } = context; + const showPaddingControl = useHasPadding( context ); const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); + const paddingValues = getStyle( name, 'padding' ); - const setPaddingValues = ( { top, right, bottom, left } ) => { - setStyle( name, 'padding', { - top: top || paddingValues?.top, - right: right || paddingValues?.right, - bottom: bottom || paddingValues?.bottom, - left: left || paddingValues?.left, - } ); + const paddingSides = useCustomSides( name, 'padding' ); + + const setPaddingValues = ( newPaddingValues ) => { + const padding = filterValuesBySides( newPaddingValues, paddingSides ); + setStyle( name, 'padding', padding ); }; + return ( - + { showPaddingControl && ( + + ) } ); } diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js index 103c4f0e4107b..9876606c38502 100644 --- a/packages/edit-site/src/components/template-details/index.js +++ b/packages/edit-site/src/components/template-details/index.js @@ -43,11 +43,13 @@ export default function TemplateDetails( { template, onClose } ) { return ( <>
- { title } + + { title } + { description && ( { description } diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js index b5151ee554d54..cfc43db26a657 100644 --- a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js +++ b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js @@ -2,19 +2,22 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { BlockSettingsMenuControls } from '@wordpress/block-editor'; +import { + BlockSettingsMenuControls, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; export default function ConvertToRegularBlocks( { clientId } ) { const { innerBlocks } = useSelect( ( select ) => - select( 'core/block-editor' ).__unstableGetBlockWithBlockTree( + select( blockEditorStore ).__unstableGetBlockWithBlockTree( clientId ), [ clientId ] ); - const { replaceBlocks } = useDispatch( 'core/block-editor' ); + const { replaceBlocks } = useDispatch( blockEditorStore ); return ( diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 4bad708c4f913..17a0965ee7a53 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -264,15 +264,21 @@ export function setIsNavigationPanelOpened( isOpen ) { } /** - * Sets whether the block inserter panel should be open. + * Returns an action object used to open/close the inserter. * - * @param {boolean} isOpen If true, opens the inserter. If false, closes it. It - * does not toggle the state, but sets it directly. + * @param {boolean|Object} value Whether the inserter should be + * opened (true) or closed (false). + * To specify an insertion point, + * use an object. + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.insertionIndex The index to insert at. + * + * @return {Object} Action object. */ -export function setIsInserterOpened( isOpen ) { +export function setIsInserterOpened( value ) { return { type: 'SET_IS_INSERTER_OPENED', - isOpen, + value, }; } diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index 0e6c44f7bea24..01423f4f082d2 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -145,13 +145,18 @@ export function navigationPanel( menu: ! action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel. isOpen: action.isOpen, }; - case 'SET_IS_INSERTER_OPENED': case 'SET_IS_LIST_VIEW_OPENED': return { ...state, menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel. isOpen: action.isOpen ? false : state.isOpen, }; + case 'SET_IS_INSERTER_OPENED': + return { + ...state, + menu: state.isOpen && action.value ? MENU_ROOT : state.menu, // Set menu to root when closing panel. + isOpen: action.value ? false : state.isOpen, + }; } return state; } @@ -162,8 +167,8 @@ export function navigationPanel( * Note: this reducer interacts with the navigation and list view panels reducers * to make sure that only one of the three panels is open at the same time. * - * @param {Object} state Current state. - * @param {Object} action Dispatched action. + * @param {boolean|Object} state Current state. + * @param {Object} action Dispatched action. */ export function blockInserterPanel( state = false, action ) { switch ( action.type ) { @@ -173,7 +178,7 @@ export function blockInserterPanel( state = false, action ) { case 'SET_IS_LIST_VIEW_OPENED': return action.isOpen ? false : state; case 'SET_IS_INSERTER_OPENED': - return action.isOpen; + return action.value; } return state; } @@ -192,8 +197,9 @@ export function listViewPanel( state = false, action ) { case 'OPEN_NAVIGATION_PANEL_TO_MENU': return false; case 'SET_IS_NAVIGATION_PANEL_OPENED': - case 'SET_IS_INSERTER_OPENED': return action.isOpen ? false : state; + case 'SET_IS_INSERTER_OPENED': + return action.value ? false : state; case 'SET_IS_LIST_VIEW_OPENED': return action.isOpen; } diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 8543eb233fe03..16f1a711cd233 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -231,7 +231,19 @@ export function isNavigationOpened( state ) { * @return {boolean} True if the inserter panel should be open; false if closed. */ export function isInserterOpened( state ) { - return state.blockInserterPanel; + return !! state.blockInserterPanel; +} + +/** + * Get the insertion point for the inserter. + * + * @param {Object} state Global application state. + * + * @return {Object} The root client ID and index to insert at. + */ +export function __experimentalGetInsertionPoint( state ) { + const { rootClientId, insertionIndex } = state.blockInserterPanel; + return { rootClientId, insertionIndex }; } /** diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 42894cd6e4ecf..846e1673d6557 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -6,7 +6,6 @@ @import "./components/header/more-menu/style.scss"; @import "./components/navigation-sidebar/navigation-toggle/style.scss"; @import "./components/navigation-sidebar/navigation-panel/style.scss"; -@import "./components/notices/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; @import "./components/sidebar/template-card/style.scss"; diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md index 83b61d2622cd6..6563f8ec1bcd2 100644 --- a/packages/edit-widgets/CHANGELOG.md +++ b/packages/edit-widgets/CHANGELOG.md @@ -2,10 +2,15 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.3.0 (2021-03-17) ## 0.1.0 (2019-03-06) ### New Features -- Initial version of the module. +- Initial version of the package. diff --git a/packages/edit-widgets/README.md b/packages/edit-widgets/README.md index 2aec3fae4a03b..9dbada72717b5 100644 --- a/packages/edit-widgets/README.md +++ b/packages/edit-widgets/README.md @@ -16,7 +16,7 @@ Install the module npm install @wordpress/edit-widgets ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._

Code is Poetry.

diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index 34e27c08c9784..f059011ba9b75 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-widgets", - "version": "1.3.2", + "version": "1.3.3", "description": "Widgets Page module for WordPress..", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js index 6aad7c5fb54b4..29cb861346664 100644 --- a/packages/edit-widgets/src/components/header/index.js +++ b/packages/edit-widgets/src/components/header/index.js @@ -8,6 +8,7 @@ import { BlockNavigationDropdown, BlockToolbar, NavigableToolbar, + store as blockEditorStore, } from '@wordpress/block-editor'; import { PinnedItems } from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; @@ -40,7 +41,7 @@ function Header() { const { setIsWidgetAreaOpen, setIsInserterOpened } = useDispatch( editWidgetsStore ); - const { selectBlock } = useDispatch( 'core/block-editor' ); + const { selectBlock } = useDispatch( blockEditorStore ); const handleClick = () => { if ( isInserterOpened ) { // Focusing the inserter button closes the inserter popover diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js index 6fed9a11f897f..30827e9a6823e 100644 --- a/packages/edit-widgets/src/components/header/undo-redo/redo.js +++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js @@ -1,18 +1,19 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { redo as redoIcon } from '@wordpress/icons'; +import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; +import { store as coreStore } from '@wordpress/core-data'; export default function RedoButton() { - const hasRedo = useSelect( ( select ) => select( 'core' ).hasRedo() ); - const { redo } = useDispatch( 'core' ); + const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo() ); + const { redo } = useDispatch( coreStore ); return ( select( 'core' ).hasUndo() ); - const { undo } = useDispatch( 'core' ); + const hasUndo = useSelect( ( select ) => select( coreStore ).hasUndo() ); + const { undo } = useDispatch( coreStore ); return ( { getBlockSelectionEnd, getBlockOrder, getBlockIndex, - } = select( 'core/block-editor' ); + } = select( blockEditorStore ); const clientId = getBlockSelectionEnd() || firstRootId; const rootClientId = getBlockRootClientId( clientId ); diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index 9c5b86924e290..5a9d7d25e2ebc 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -299,7 +299,13 @@ export function setIsWidgetAreaOpen( clientId, isOpen ) { /** * Returns an action object used to open/close the inserter. * - * @param {boolean} value A boolean representing whether the inserter should be opened or closed. + * @param {boolean|Object} value Whether the inserter should be + * opened (true) or closed (false). + * To specify an insertion point, + * use an object. + * @param {string} value.rootClientId The root client ID to insert at. + * @param {number} value.insertionIndex The index to insert at. + * * @return {Object} Action object. */ export function setIsInserterOpened( value ) { diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js index 93e650c88769f..d6af45e611209 100644 --- a/packages/edit-widgets/src/store/reducer.js +++ b/packages/edit-widgets/src/store/reducer.js @@ -32,10 +32,10 @@ export function widgetAreasOpenState( state = {}, action ) { /** * Reducer tracking whether the inserter is open. * - * @param {boolean} state - * @param {Object} action + * @param {boolean|Object} state + * @param {Object} action */ -function isInserterOpened( state = false, action ) { +function blockInserterPanel( state = false, action ) { switch ( action.type ) { case 'SET_IS_INSERTER_OPENED': return action.value; @@ -44,6 +44,6 @@ function isInserterOpened( state = false, action ) { } export default combineReducers( { - isInserterOpened, + blockInserterPanel, widgetAreasOpenState, } ); diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js index 44d0f4614f7f9..1d8cc005148f2 100644 --- a/packages/edit-widgets/src/store/selectors.js +++ b/packages/edit-widgets/src/store/selectors.js @@ -193,5 +193,5 @@ export const getIsWidgetAreaOpen = ( state, clientId ) => { * @return {boolean} Whether the inserter is opened. */ export function isInserterOpened( state ) { - return state.isInserterOpened; + return !! state.blockInserterPanel; } diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 9036ccbab444c..525930ae66794 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -43,7 +43,7 @@ body.widgets-php { } .interface-interface-skeleton__content { - background-color: #f1f1f1; + background-color: $gray-100; } } diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 1ffd37b6f1236..a7c4bee89a714 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 9.26.0 (2021-03-17) ## 9.25.0 (2020-12-17) diff --git a/packages/editor/README.md b/packages/editor/README.md index b8345adb19dd7..46a35fd648f6c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/editor --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## How it works diff --git a/packages/editor/package.json b/packages/editor/package.json index a08239b92b129..2de282830970e 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/editor", - "version": "9.26.2", + "version": "9.26.3", "description": "Enhanced block editor for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/editor/src/components/document-outline/check.js b/packages/editor/src/components/document-outline/check.js index 84d988b0a510f..324b9380ca63a 100644 --- a/packages/editor/src/components/document-outline/check.js +++ b/packages/editor/src/components/document-outline/check.js @@ -7,6 +7,7 @@ import { filter } from 'lodash'; * WordPress dependencies */ import { withSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; function DocumentOutlineCheck( { blocks, children } ) { const headings = filter( @@ -22,5 +23,5 @@ function DocumentOutlineCheck( { blocks, children } ) { } export default withSelect( ( select ) => ( { - blocks: select( 'core/block-editor' ).getBlocks(), + blocks: select( blockEditorStore ).getBlocks(), } ) )( DocumentOutlineCheck ); diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index abd1c853fb8b8..d624f744d95c8 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { create, getTextContent } from '@wordpress/rich-text'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -144,7 +145,7 @@ export const DocumentOutline = ( { export default compose( withSelect( ( select ) => { - const { getBlocks } = select( 'core/block-editor' ); + const { getBlocks } = select( blockEditorStore ); const { getEditedPostAttribute } = select( 'core/editor' ); const { getPostType } = select( 'core' ); const postType = getPostType( getEditedPostAttribute( 'type' ) ); diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js index ae332e93b4389..f80d14646d556 100644 --- a/packages/editor/src/components/editor-history/redo.js +++ b/packages/editor/src/components/editor-history/redo.js @@ -1,24 +1,29 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; -import { redo as redoIcon } from '@wordpress/icons'; +import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; import { forwardRef } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; + function EditorHistoryRedo( props, ref ) { const hasRedo = useSelect( - ( select ) => select( 'core/editor' ).hasEditorRedo(), + ( select ) => select( editorStore ).hasEditorRedo(), [] ); - const { redo } = useDispatch( 'core/editor' ); + const { redo } = useDispatch( editorStore ); return (
@@ -129,7 +180,5 @@ function EntitiesSavedStates( { isOpen, close } ) { ); } ) }
- ) : null; + ); } - -export default withFocusReturn( EntitiesSavedStates ); diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 4bf8cf6510431..6f636bb5a98b8 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -18,7 +18,11 @@ import { } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; -import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + MediaUpload, + MediaUploadCheck, + store as blockEditorStore, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -227,7 +231,7 @@ const applyWithDispatch = withDispatch( editPost( { featured_media: image.id } ); }, onDropImage( filesList ) { - select( 'core/block-editor' ) + select( blockEditorStore ) .getSettings() .mediaUpload( { allowedTypes: [ 'image' ], diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap index 220042a8a41aa..e03484534e4ab 100644 --- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap @@ -10,11 +10,11 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] target="wp-preview-1" > Preview - (opens in a new tab) - + `; @@ -28,10 +28,10 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] = target="wp-preview-1" > Preview - (opens in a new tab) - + `; diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index b18ae57a756b0..96d2de7819118 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -15,6 +15,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { VisuallyHidden } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { pasteHandler } from '@wordpress/blocks'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -35,7 +36,7 @@ export default function PostTitle() { insertDefaultBlock, clearSelectedBlock, insertBlocks, - } = useDispatch( 'core/block-editor' ); + } = useDispatch( blockEditorStore ); const { isCleanNewPost, title, @@ -47,7 +48,7 @@ export default function PostTitle() { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost, } = select( 'core/editor' ); - const { getSettings } = select( 'core/block-editor' ); + const { getSettings } = select( blockEditorStore ); const { titlePlaceholder, focusMode, diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index d788b1a2447e3..93f589bc7d9f4 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -33,6 +33,7 @@ import { applyFilters } from '@wordpress/hooks'; import { validateThemeColors, validateThemeGradients, + store as blockEditorStore, } from '@wordpress/block-editor'; const postTypeEntities = [ @@ -291,7 +292,7 @@ export default compose( [ getBlockIndex, getSelectedBlockClientId, getGlobalBlockCount, - } = select( 'core/block-editor' ); + } = select( blockEditorStore ); const selectedBlockClientId = getSelectedBlockClientId(); return { @@ -312,7 +313,7 @@ export default compose( [ clearSelectedBlock, insertBlock, replaceBlock, - } = dispatch( 'core/block-editor' ); + } = dispatch( blockEditorStore ); const { switchEditorMode } = dispatch( 'core/edit-post' ); const { addEntities, receiveEntityRecords } = dispatch( 'core' ); const { createSuccessNotice } = dispatch( 'core/notices' ); diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index a739de193c64a..97d96efaf8473 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -6,6 +6,7 @@ import { Dropdown, Button } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { info } from '@wordpress/icons'; import { forwardRef } from '@wordpress/element'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -17,7 +18,7 @@ function TableOfContents( ref ) { const hasBlocks = useSelect( - ( select ) => !! select( 'core/block-editor' ).getBlockCount(), + ( select ) => !! select( blockEditorStore ).getBlockCount(), [] ); return ( diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js index afb40439b9a6a..48ca98c2fd04a 100644 --- a/packages/editor/src/components/table-of-contents/panel.js +++ b/packages/editor/src/components/table-of-contents/panel.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -14,7 +15,7 @@ import CharacterCount from '../character-count'; function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) { const { headingCount, paragraphCount, numberOfBlocks } = useSelect( ( select ) => { - const { getGlobalBlockCount } = select( 'core/block-editor' ); + const { getGlobalBlockCount } = select( blockEditorStore ); return { headingCount: getGlobalBlockCount( 'core/heading' ), paragraphCount: getGlobalBlockCount( 'core/paragraph' ), diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js index 9dd9a2f404ba8..584e773845cd3 100644 --- a/packages/editor/src/components/template-validation-notice/index.js +++ b/packages/editor/src/components/template-validation-notice/index.js @@ -5,6 +5,7 @@ import { Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { store as blockEditorStore } from '@wordpress/block-editor'; function TemplateValidationNotice( { isValid, ...props } ) { if ( isValid ) { @@ -49,11 +50,11 @@ function TemplateValidationNotice( { isValid, ...props } ) { export default compose( [ withSelect( ( select ) => ( { - isValid: select( 'core/block-editor' ).isValidTemplate(), + isValid: select( blockEditorStore ).isValidTemplate(), } ) ), withDispatch( ( dispatch ) => { const { setTemplateValidity, synchronizeTemplate } = dispatch( - 'core/block-editor' + blockEditorStore ); return { resetTemplateValidity: () => setTemplateValidity( true ), diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 4f9265d29cc9e..7209ff79f2224 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -27,6 +27,7 @@ import { addQueryArgs } from '@wordpress/url'; import { createRegistrySelector } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { Platform } from '@wordpress/element'; +import { layout } from '@wordpress/icons'; /** * Internal dependencies @@ -40,7 +41,7 @@ import { } from './constants'; import { getPostRawValue } from './reducer'; import { cleanForSlug } from '../utils/url'; -import { getTemplatePartIconByArea } from './utils/get-template-part-icon'; +import { getTemplatePartIcon } from './utils/get-template-part-icon'; /** * Shared reference to an empty object for cases where it is important to avoid @@ -1680,9 +1681,10 @@ export function __experimentalGetDefaultTemplateTypes( state ) { */ export const __experimentalGetDefaultTemplatePartAreas = createSelector( ( state ) => { - const areas = getEditorSettings( state )?.defaultTemplatePartAreas; + const areas = + getEditorSettings( state )?.defaultTemplatePartAreas || []; return areas?.map( ( item ) => { - return { ...item, icon: getTemplatePartIconByArea( item.area ) }; + return { ...item, icon: getTemplatePartIcon( item.icon ) }; } ); }, ( state ) => [ getEditorSettings( state )?.defaultTemplatePartAreas ] @@ -1723,7 +1725,10 @@ export function __experimentalGetTemplateInfo( state, template ) { const templateTitle = isString( title ) ? title : title?.rendered; const templateDescription = isString( excerpt ) ? excerpt : excerpt?.raw; - const templateIcon = getTemplatePartIconByArea( area ); + const templateIcon = + __experimentalGetDefaultTemplatePartAreas( state ).find( + ( item ) => area === item.area + )?.icon || layout; return { title: diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js index a81d6fa21a22c..ea8a6d5a9db97 100644 --- a/packages/editor/src/store/test/selectors.js +++ b/packages/editor/src/store/test/selectors.js @@ -193,11 +193,13 @@ const defaultTemplatePartAreas = [ area: 'header', label: 'Header', description: 'Some description of a header', + icon: 'header', }, { area: 'footer', label: 'Footer', description: 'Some description of a footer', + icon: 'footer', }, ]; @@ -2821,11 +2823,11 @@ describe( 'selectors', () => { describe( '__experimentalGetDefaultTemplatePartAreas', () => { const state = { editorSettings: { defaultTemplatePartAreas } }; - it( 'returns undefined if there are no default template part areas', () => { + it( 'returns empty array if there are no default template part areas', () => { const emptyState = { editorSettings: {} }; expect( __experimentalGetDefaultTemplatePartAreas( emptyState ) - ).toBeUndefined(); + ).toHaveLength( 0 ); } ); it( 'returns a list of default template part areas if present in state', () => { @@ -2882,7 +2884,9 @@ describe( 'selectors', () => { } ); describe( '__experimentalGetTemplateInfo', () => { - const state = { editorSettings: { defaultTemplateTypes } }; + const state = { + editorSettings: { defaultTemplateTypes, defaultTemplatePartAreas }, + }; it( 'should return an empty object if no template is passed', () => { expect( __experimentalGetTemplateInfo( state, null ) ).toEqual( diff --git a/packages/editor/src/store/utils/get-template-part-icon.js b/packages/editor/src/store/utils/get-template-part-icon.js index 523712b6ed115..e6f846519b3b2 100644 --- a/packages/editor/src/store/utils/get-template-part-icon.js +++ b/packages/editor/src/store/utils/get-template-part-icon.js @@ -1,19 +1,14 @@ /** * WordPress dependencies */ -import { layout, header, footer } from '@wordpress/icons'; - +import * as icons from '@wordpress/icons'; /** - * Helper function to find the corresponding icon for a template part's 'area'. + * Helper function to retrieve the corresponding icon by name. * - * @param {string} area The value of the template part 'area' tax term. + * @param {string} iconName The name of the icon. * * @return {Object} The corresponding icon. */ -export function getTemplatePartIconByArea( area ) { - const iconsByArea = { - footer, - header, - }; - return iconsByArea[ area ] || layout; +export function getTemplatePartIcon( iconName ) { + return icons[ iconName ] || icons.layout; } diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index b5c32cde47cd2..ccb531f10afbe 100644 --- a/packages/element/CHANGELOG.md +++ b/packages/element/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.20.0 (2021-03-17) ## 2.17.1 (2020-09-17) diff --git a/packages/element/README.md b/packages/element/README.md index d89498c1cace8..b09cca79c8afb 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -21,7 +21,7 @@ Install the module npm install @wordpress/element --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/element/package.json b/packages/element/package.json index 768c8cd1dcfe9..89e083e91c15e 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/element", - "version": "2.20.2", + "version": "2.20.3", "description": "Element React module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 86e83a4cb4753..d9159569675cb 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.0.3 (2021-04-29) + ### Bug Fix - `wp-env destroy` will now work in environments which don't include the `grep` or `awk` commands, such as Windows PowerShell. diff --git a/packages/env/lib/download-sources.js b/packages/env/lib/download-sources.js index d87cd8e821da9..537389317b058 100644 --- a/packages/env/lib/download-sources.js +++ b/packages/env/lib/download-sources.js @@ -128,7 +128,9 @@ async function downloadGitSource( source, { onProgress, spinner, debug } ) { } log( 'Fetching the specified ref.' ); - await git.fetch( 'origin', source.ref ); + await git.fetch( 'origin', source.ref, { + '--tags': null, + } ); log( 'Checking out the specified ref.' ); await git.checkout( source.ref ); diff --git a/packages/env/package.json b/packages/env/package.json index 41aeee31e5778..c9ffe3330f92d 100644 --- a/packages/env/package.json +++ b/packages/env/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/env", - "version": "4.0.2", + "version": "4.0.3", "description": "A zero-config, self contained local WordPress environment for development and testing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md index 3b41bbc97a606..2aef265d51cb5 100644 --- a/packages/escape-html/CHANGELOG.md +++ b/packages/escape-html/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.12.0 (2021-03-17) ## 1.8.0 (2020-04-15) diff --git a/packages/escape-html/README.md b/packages/escape-html/README.md index 8d9f451d3403a..2b35b9ff8daf7 100644 --- a/packages/escape-html/README.md +++ b/packages/escape-html/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/escape-html ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json index a9ab95193793a..9a00dd9a50121 100644 --- a/packages/escape-html/package.json +++ b/packages/escape-html/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 013ff948b65fd..86711610ff070 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/eslint-plugin", - "version": "9.0.3", + "version": "9.0.4", "description": "ESLint plugin for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index 1cd726bac4fb9..0d9a1a1426fca 100644 --- a/packages/format-library/CHANGELOG.md +++ b/packages/format-library/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.27.0 (2021-03-17) ## 1.8.0 (2019-08-29) diff --git a/packages/format-library/README.md b/packages/format-library/README.md index 69d6f157279d0..8615dfcfda9bf 100644 --- a/packages/format-library/README.md +++ b/packages/format-library/README.md @@ -10,6 +10,6 @@ Install the module npm install @wordpress/format-library --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._

Code is Poetry.

diff --git a/packages/format-library/package.json b/packages/format-library/package.json index d8bec03267964..8541b7193a946 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/format-library", - "version": "1.27.2", + "version": "1.27.3", "description": "Format library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index b6b38e31c509c..c4c2bc6fa50a8 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -20,6 +20,7 @@ import { getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, + store as blockEditorStore, } from '@wordpress/block-editor'; /** @@ -48,7 +49,7 @@ export function getActiveColor( formatName, formatValue, colors ) { const ColorPicker = ( { name, value, onChange } ) => { const colors = useSelect( ( select ) => { - const { getSettings } = select( 'core/block-editor' ); + const { getSettings } = select( blockEditorStore ); return get( getSettings(), [ 'colors' ], [] ); } ); const onColorChange = useCallback( diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md index 86de3fa4fbc21..3be7d6b97890a 100644 --- a/packages/hooks/CHANGELOG.md +++ b/packages/hooks/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.12.0 (2021-03-17) ### New Feature diff --git a/packages/hooks/README.md b/packages/hooks/README.md index ffc15114d387d..3b780a8dd52c7 100644 --- a/packages/hooks/README.md +++ b/packages/hooks/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/hooks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ### Usage diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 2587a53ebf13e..0a5ecb0cf54eb 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/hooks", - "version": "2.12.2", + "version": "2.12.3", "description": "WordPress hooks library.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md index 1c478dbc60083..b125a40b2ed49 100644 --- a/packages/html-entities/CHANGELOG.md +++ b/packages/html-entities/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.11.0 (2021-03-17) ## 2.7.0 (2020-04-15) diff --git a/packages/html-entities/README.md b/packages/html-entities/README.md index 562c835faf53b..f51848b18c74e 100644 --- a/packages/html-entities/README.md +++ b/packages/html-entities/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/html-entities --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index 9e1c655865b5d..85f0a6c072877 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md index 455e792603d07..23470f8298da3 100644 --- a/packages/i18n/CHANGELOG.md +++ b/packages/i18n/CHANGELOG.md @@ -2,7 +2,16 @@ ## Unreleased -- Add new `resetLocaleData` method to reset the existing Tannin locale data. +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + +## 3.20.0 (2021-04-29) + +### New Features + +- Add new `resetLocaleData` method to reset the existing Tannin locale data. ## 3.19.0 (2021-03-17) diff --git a/packages/i18n/README.md b/packages/i18n/README.md index 061dbbb0257fc..7c4982a9caa77 100644 --- a/packages/i18n/README.md +++ b/packages/i18n/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/i18n --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 95e1e932ef183..b155024d898b0 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/i18n", - "version": "3.19.2", + "version": "3.20.0", "description": "WordPress internationalization (i18n) library.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 62cee734faa8e..184f96daadf9e 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.10.0 (2021-03-17) ## 2.0.0 (2020-05-14) diff --git a/packages/icons/README.md b/packages/icons/README.md index d6f4aecf917d6..825bd1b1fc086 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/icons --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/icons/package.json b/packages/icons/package.json index 05826fc9a9468..579e400c5350c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/icons", - "version": "2.10.2", + "version": "2.10.3", "description": "WordPress Icons package, based on dashicon.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,6 +20,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index 13392b234397a..b9257a2f9ccb2 100644 --- a/packages/interface/CHANGELOG.md +++ b/packages/interface/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.0.0 (2021-04-06) ### Breaking Changes diff --git a/packages/interface/README.md b/packages/interface/README.md index e115aa6478371..8dfebc7dc842d 100644 --- a/packages/interface/README.md +++ b/packages/interface/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/interface --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API Usage diff --git a/packages/interface/package.json b/packages/interface/package.json index b18edd06ef63a..8b245bca1287e 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/interface", - "version": "2.0.1", + "version": "2.0.2", "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md index e213da1182d0e..2b98af50f65f4 100644 --- a/packages/is-shallow-equal/CHANGELOG.md +++ b/packages/is-shallow-equal/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 3.1.0 (2021-03-17) ## 3.0.0 (2020-12-17) diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json index 243d4046b05e4..9b94b18bb81b4 100644 --- a/packages/is-shallow-equal/package.json +++ b/packages/is-shallow-equal/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/is-shallow-equal", - "version": "3.1.2", + "version": "3.1.3", "description": "Test for shallow equality between two objects or arrays.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,6 +20,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "files": [ "build", "build-module", diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md index aa72fe476631c..2b74b99d026a1 100644 --- a/packages/keyboard-shortcuts/CHANGELOG.md +++ b/packages/keyboard-shortcuts/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.14.0 (2021-03-17) ## 1.13.0 (2020-12-17) diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md index 3a060fdf23af6..bb072ed81e859 100644 --- a/packages/keyboard-shortcuts/README.md +++ b/packages/keyboard-shortcuts/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/keyboard-shortcuts --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API @@ -26,7 +26,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **useShortcut** diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json index 7e31dc1a30f83..e4a0f502fedd7 100644 --- a/packages/keyboard-shortcuts/package.json +++ b/packages/keyboard-shortcuts/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keyboard-shortcuts", - "version": "1.14.2", + "version": "1.14.3", "description": "Handling keyboard shortcuts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md index 6f01d011b238f..c7e347f4f6f63 100644 --- a/packages/keycodes/CHANGELOG.md +++ b/packages/keycodes/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.19.0 (2021-03-17) ## 2.18.0 (2021-01-05) diff --git a/packages/keycodes/README.md b/packages/keycodes/README.md index 6752d99548857..036258a6fbdc2 100644 --- a/packages/keycodes/README.md +++ b/packages/keycodes/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/keycodes --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage @@ -72,7 +72,7 @@ displayShortcut.primary( 'm' ); _Type_ -- `WPModifierHandler>` Keyed map of functions to display shortcuts. +- `WPModifierHandler>`Keyed map of functions to display shortcuts. # **displayShortcutList** @@ -88,7 +88,7 @@ displayShortcutList.primary( 'm' ); _Type_ -- `WPModifierHandler>` Keyed map of functions to shortcut sequences. +- `WPModifierHandler>`Keyed map of functions to shortcut sequences. # **DOWN** @@ -121,7 +121,7 @@ isKeyboardEvent.primary( event, 'm' ); _Type_ -- `WPModifierHandler` Keyed map of functions to match events. +- `WPModifierHandler`Keyed map of functions to match events. # **LEFT** @@ -134,7 +134,7 @@ depending on platform. _Type_ -- `WPModifierHandler< ( isApple: () => boolean ) => WPModifierPart[]>` +- `WPModifierHandler< ( isApple: () => boolean ) => WPModifierPart[]>` # **rawShortcut** @@ -152,7 +152,7 @@ rawShortcut.primary( 'm' ) _Type_ -- `WPModifierHandler>` Keyed map of functions to raw shortcuts. +- `WPModifierHandler>`Keyed map of functions to raw shortcuts. # **RIGHT** @@ -177,7 +177,7 @@ shortcutAriaLabel.primary( '.' ); _Type_ -- `WPModifierHandler>` Keyed map of functions to shortcut ARIA labels. +- `WPModifierHandler>`Keyed map of functions to shortcut ARIA labels. # **SPACE** diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index e52c3bf364780..1060fd791c31b 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keycodes", - "version": "2.19.2", + "version": "2.19.3", "description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/lazy-import/README.md b/packages/lazy-import/README.md index 06a943f23ce7d..396e5cc2248e1 100644 --- a/packages/lazy-import/README.md +++ b/packages/lazy-import/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/lazy-import --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Requirements diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md index 10fcefa371267..3f807369c354c 100644 --- a/packages/list-reusable-blocks/CHANGELOG.md +++ b/packages/list-reusable-blocks/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.26.0 (2021-03-17) ## 1.1.18 (2019-01-03) diff --git a/packages/list-reusable-blocks/README.md b/packages/list-reusable-blocks/README.md index f14e9dd2e5979..5021be6b4608f 100644 --- a/packages/list-reusable-blocks/README.md +++ b/packages/list-reusable-blocks/README.md @@ -12,6 +12,6 @@ Install the module npm install @wordpress/list-reusable-blocks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._

Code is Poetry.

diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json index 0d7b6182824c4..7a4a00fddac3a 100644 --- a/packages/list-reusable-blocks/package.json +++ b/packages/list-reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/list-reusable-blocks", - "version": "1.26.2", + "version": "1.26.3", "description": "Adding Export/Import support to the reusable blocks listing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "dependencies": { diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md index a9fe18389bf11..40bb5208f71da 100644 --- a/packages/media-utils/CHANGELOG.md +++ b/packages/media-utils/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.20.0 (2021-03-17) ## 0.1.0 (2019-01-03) diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md index a80ea9ac9ca73..818d17dce6340 100644 --- a/packages/media-utils/README.md +++ b/packages/media-utils/README.md @@ -11,7 +11,7 @@ Install the module npm install @wordpress/media-utils --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json index db94b40c3f416..22d44dfa84a28 100644 --- a/packages/media-utils/package.json +++ b/packages/media-utils/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/media-utils", - "version": "1.20.2", + "version": "1.20.3", "description": "WordPress Media Upload Utils.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "dependencies": { diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md index a0a039cd6c6f6..ce7200d958f9e 100644 --- a/packages/notices/CHANGELOG.md +++ b/packages/notices/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.13.0 (2021-03-17) ## 2.12.0 (2020-12-17) diff --git a/packages/notices/README.md b/packages/notices/README.md index 9b3a591fc1abc..bce5583c71ab6 100644 --- a/packages/notices/README.md +++ b/packages/notices/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/notices ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/notices/package.json b/packages/notices/package.json index 3731b4a4637f7..2ca16b98ff75c 100644 --- a/packages/notices/package.json +++ b/packages/notices/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/notices", - "version": "2.13.2", + "version": "2.13.3", "description": "State management for notices.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md index 727006c2556b1..c90c5b88eb94f 100644 --- a/packages/nux/CHANGELOG.md +++ b/packages/nux/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 3.25.0 (2021-03-17) ## 3.24.0 (2020-12-17) diff --git a/packages/nux/README.md b/packages/nux/README.md index 5a9b14bfa9829..1c234c87350a3 100644 --- a/packages/nux/README.md +++ b/packages/nux/README.md @@ -14,7 +14,7 @@ Install the module npm install @wordpress/nux --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## DotTip diff --git a/packages/nux/package.json b/packages/nux/package.json index e2d0f3bf7e487..58eb17b82a238 100644 --- a/packages/nux/package.json +++ b/packages/nux/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/nux", - "version": "3.25.2", + "version": "3.25.3", "description": "NUX (New User eXperience) module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md index 457a3ce544d09..fbf82f47f5037 100644 --- a/packages/plugins/CHANGELOG.md +++ b/packages/plugins/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.25.0 (2021-03-17) ### New Features diff --git a/packages/plugins/README.md b/packages/plugins/README.md index dc435b4ed157c..c47c77206fb55 100644 --- a/packages/plugins/README.md +++ b/packages/plugins/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/plugins --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ### Plugins API diff --git a/packages/plugins/package.json b/packages/plugins/package.json index c6f73a4a85572..48c081536c58a 100644 --- a/packages/plugins/package.json +++ b/packages/plugins/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/plugins", - "version": "2.25.2", + "version": "2.25.3", "description": "Plugins module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md index cc06c5ef3ab02..41cdf92a91b1e 100644 --- a/packages/postcss-plugins-preset/CHANGELOG.md +++ b/packages/postcss-plugins-preset/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.0.0 (2021-04-29) + ### Breaking Changes - The bundled `autoprefixer` dependency has been updated from requiring `^9.8.6` to requiring `^10.2.5` (see [Breaking Changes](https://github.com/postcss/autoprefixer/releases/tag/10.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)). diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index f6ebaa1a7b932..41822d70016a5 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/postcss-plugins-preset", - "version": "2.1.2", + "version": "3.0.0", "description": "PostCSS sharable plugins preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md index d284f625e8c57..0c2760e1ee29e 100644 --- a/packages/postcss-themes/CHANGELOG.md +++ b/packages/postcss-themes/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.0.0 (2021-04-29) + ### Breaking Changes - The bundled `postcss` dependency requiring `^7.0.32` has been replaced with a peer dependency requiring `^8.0.0` (see [Breaking Changes](https://github.com/postcss/postcss/releases/tag/8.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)). diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json index 12b65a47c3426..ea375ad516838 100644 --- a/packages/postcss-themes/package.json +++ b/packages/postcss-themes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/postcss-themes", - "version": "3.0.3", + "version": "4.0.0", "description": "PostCSS plugin to generate theme colors.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index 54ed36be26154..f1ebf4df95e36 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.12.0 (2021-03-17) ## 1.5.0 (2020-05-14) diff --git a/packages/primitives/README.md b/packages/primitives/README.md index 66ed22d7518db..1056276d28906 100644 --- a/packages/primitives/README.md +++ b/packages/primitives/README.md @@ -27,6 +27,6 @@ const myElement = ( ); ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._

Code is Poetry.

diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 669f0816a55f3..3acc331d77d06 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/primitives", - "version": "1.12.2", + "version": "1.12.3", "description": "WordPress cross-platform primitives.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md index b8200a8672179..05aed26bd13be 100644 --- a/packages/priority-queue/CHANGELOG.md +++ b/packages/priority-queue/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.11.0 (2021-03-17) ## 1.6.0 (2020-04-15) diff --git a/packages/priority-queue/README.md b/packages/priority-queue/README.md index 600a82240cbb8..64e13011238ce 100644 --- a/packages/priority-queue/README.md +++ b/packages/priority-queue/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/priority-queue --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json index d9b8f1d7b684d..14dcc2be92c1a 100644 --- a/packages/priority-queue/package.json +++ b/packages/priority-queue/package.json @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json index 7ed9b8d335ea1..9dc47cf9e3652 100644 --- a/packages/project-management-automation/package.json +++ b/packages/project-management-automation/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/project-management-automation", - "version": "1.12.2", + "version": "1.12.3", "description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md new file mode 100644 index 0000000000000..0644a892242f9 --- /dev/null +++ b/packages/react-i18n/CHANGELOG.md @@ -0,0 +1,12 @@ + + +## Unreleased + +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + +## 1.0.0 (2021-03-17) + +- Initial version of the package. diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md index 68dbf54a7a0c5..16b9341d4180b 100644 --- a/packages/react-i18n/README.md +++ b/packages/react-i18n/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/react-i18n ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json index e78ecb2d609de..25d64bb9cc46c 100644 --- a/packages/react-i18n/package.json +++ b/packages/react-i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-i18n", - "version": "1.0.2", + "version": "1.0.3", "description": "React bindings for @wordpress/i18n.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle index 41e40c63c9e15..dbda1050272c0 100644 --- a/packages/react-native-aztec/android/build.gradle +++ b/packages/react-native-aztec/android/build.gradle @@ -27,19 +27,15 @@ buildscript { } } -plugins { - id "com.jfrog.bintray" -} - apply plugin: 'com.android.library' apply plugin: 'kotlin-android' apply plugin: 'com.github.dcendents.android-maven' -apply plugin: 'maven-publish' // this enables publishing via Bintray +apply plugin: 'maven-publish' // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' -group = 'com.github.wordpress-mobile.gutenberg-mobile' +group = 'org.wordpress-mobile.gutenberg-mobile' // The sample build uses multiple directories to // keep boilerplate and common code separate from @@ -86,6 +82,7 @@ repositories { google() maven { url "https://jitpack.io" } + maven { url "https://a8c-libs.s3.amazonaws.com/android" } if (willPublishReactNativeAztecBinary) { maven { url "https://dl.bintray.com/wordpress-mobile/react-native-mirror/" } @@ -120,37 +117,28 @@ dependencies { } if (willPublishReactNativeAztecBinary) { - bintray { - user = project.hasProperty('bintrayUser') ? project.property('bintrayUser') : System.getenv('BINTRAY_USER') - key = project.hasProperty('bintrayKey') ? project.property('bintrayKey') : System.getenv('BINTRAY_KEY') - publications = ['ReactNativeAztecPublication'] - publish = true - pkg { - repo = 'maven' - name = 'react-native-aztec' - licenses = ['GPL-2.0'] - userOrg = 'wordpress-mobile' - vcsUrl = 'https://github.com/wordpress-mobile/gutenberg-mobile.git' - version { - name = publishReactNativeAztecVersion - released = new Date() - } - } - } - project.afterEvaluate { publishing { publications { ReactNativeAztecPublication(MavenPublication) { artifact bundleReleaseAar - groupId 'com.github.wordpress-mobile.gutenberg-mobile' + groupId 'org.wordpress-mobile.gutenberg-mobile' artifactId 'react-native-aztec' version publishReactNativeAztecVersion addDependenciesToPom(pom) } } + repositories { + maven { + url "s3://a8c-libs.s3.amazonaws.com/android" + credentials(AwsCredentials) { + accessKey project.hasProperty('awsAccessKey') ? project.properties['awsAccessKey'] : System.getenv('AWS_ACCESS_KEY') + secretKey project.hasProperty('awsSecretKey') ? project.properties['awsSecretKey'] : System.getenv('AWS_SECRET_KEY') + } + } + } } } } @@ -172,3 +160,23 @@ def addDependenciesToPom(pom) { } } +tasks.register('checkIfVersionIsAlreadyPublished') { + def pomUrl = "https://a8c-libs.s3.amazonaws.com/android/org/wordpress-mobile/gutenberg-mobile/react-native-aztec/${publishReactNativeAztecVersion}/react-native-aztec-${publishReactNativeAztecVersion}.pom" + def responseCode = new URL(pomUrl).openConnection().with { connection -> + requestMethod = 'HEAD' + connect() + responseCode + } + + if (responseCode == 200) { + throw new GradleException("'$publishReactNativeAztecVersion' is already published, please use a different version name. If this happened in CI for a PR, a new commit is necessary. If this happened for a tag, the existing version needs to be manually removed from S3.") + } else if (responseCode == 403) { + // S3 returns 403 status code if a file doesn't exist, which is what we want. Proceed to publish.. + } else { + throw new GradleException("An unexpected status code ($responseCode) was received while checking if the version ($publishReactNativeAztecVersion) is already published to S3. If this issue persists, please contact Platform 9 team for help.") + } +} + +publish.dependsOn(tasks.named('checkIfVersionIsAlreadyPublished')) +publish.doLast { println "Successfully published 'react-native-aztec' version '$publishReactNativeAztecVersion'" } + diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle index 7d1b2c5a696c6..b589da9e83838 100644 --- a/packages/react-native-aztec/android/settings.gradle +++ b/packages/react-native-aztec/android/settings.gradle @@ -1,8 +1,2 @@ -pluginManagement { - plugins { - id 'com.jfrog.bintray' version '1.8.5' - } -} - rootProject.name = '@wordpress_react-native-aztec' diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index abf4de763cd95..828636de411c5 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.51.0", + "version": "1.52.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index 8cfc502b6587e..042df52e20db5 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -13,10 +13,6 @@ buildscript { } } -plugins { - id 'com.jfrog.bintray' apply false -} - allprojects { repositories { if (willPublishReactNativeBridgeBinary) { diff --git a/packages/react-native-bridge/android/publish-aztec-and-bridge.sh b/packages/react-native-bridge/android/publish-aztec-and-bridge.sh index c17ed9c4be3c1..246019de4cf9f 100755 --- a/packages/react-native-bridge/android/publish-aztec-and-bridge.sh +++ b/packages/react-native-bridge/android/publish-aztec-and-bridge.sh @@ -15,7 +15,7 @@ fi # 2. Verify the version argument is passed. We use the same version for react-native-aztec and react-native-bridge libraries. VERSION=$1 if [[ -z $VERSION ]]; then - echo "This script requires the Bintray version to be passed as an argument." + echo "This script requires the publish version to be passed as an argument." echo "Example usage: './publish-aztec-and-bridge.sh \$VERSION'" exit 1 fi @@ -30,26 +30,23 @@ if [ $? -ne 0 ]; then exit 1 fi -# 4. Publish 'react-native-aztec` library to Bintray +# 4. Publish 'react-native-aztec` library to S3 echo "Publishing 'react-native-aztec' version '$VERSION'" -./gradlew :react-native-aztec:bintrayUpload -q -PpublishReactNativeAztecVersion=$VERSION +./gradlew :react-native-aztec:publish -q -PpublishReactNativeAztecVersion=$VERSION if [ $? -eq 0 ]; then - echo "Successfully published 'react-native-aztec' version '$VERSION'." echo "Wait 30 seconds for the new 'react-native-aztec' version to be available" sleep 30 else echo "Failed to publish 'react-native-aztec' version '$VERSION'." - echo "We'll still proceed to build and publish 'react-native-bridge' since this failure might be due to this version being published already, for example when the CI task is restarted." + exit 1 fi -# 5. Publish 'react-native-bridge` library to Bintray +# 5. Publish 'react-native-bridge` library to S3 echo "Publishing react-native-bridge version '$VERSION'" -./gradlew :react-native-bridge:bintrayUpload -q -PpublishReactNativeBridgeVersion=$VERSION -PreactNativeAztecVersion=$VERSION +./gradlew :react-native-bridge:publish -q -PpublishReactNativeBridgeVersion=$VERSION -PreactNativeAztecVersion=$VERSION -if [ $? -eq 0 ]; then - echo "Successfully published 'react-native-bridge' version '$VERSION'." -else +if [ $? -ne 0 ]; then echo "Failed to publish 'react-native-bridge' version '$VERSION'." exit 1 fi 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 1e018263e3438..9fa38111e7034 100644 --- a/packages/react-native-bridge/android/react-native-bridge/build.gradle +++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle @@ -13,14 +13,10 @@ buildscript { } } -plugins { - id "com.jfrog.bintray" -} - apply plugin: 'com.android.library' apply plugin: 'com.github.dcendents.android-maven' apply plugin: 'kotlin-android' -apply plugin: 'maven-publish' // this enables publishing via Bintray +apply plugin: 'maven-publish' // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' @@ -28,7 +24,7 @@ apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80 // import the `readHashedVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/ceaf20a8e7d9b8404e4a5ff2e6c36650/raw/e1460a128e4b9863963410d719c7d44c3adefd02/readHashedVersion.gradle' -group='com.github.wordpress-mobile.gutenberg-mobile' +group='org.wordpress-mobile.gutenberg-mobile' def buildAssetsFolder = 'build/assets' @@ -55,7 +51,7 @@ android { sourceSets { main { assets.srcDirs += buildAssetsFolder - assets.srcDirs += '../../../../src/block-support' + assets.srcDirs += '../../../../../src/block-support' // Despite being in a folder called "resources", the files in // unsupported-block-editor are accessed as assets by their // consumers: the WordPressEditor library. @@ -83,7 +79,7 @@ dependencies { def rnVersion = readReactNativeVersion('../../../../package.json', 'devDependencies') println "react-native version for react-native-bridge: $rnVersion" implementation "com.facebook.react:react-native:$rnVersion" - implementation "com.github.wordpress-mobile.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion" + implementation "org.wordpress-mobile.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion" implementation "com.github.wordpress-mobile:react-native-svg:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-svg', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-video:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-video', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-linear-gradient:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-linear-gradient', 'dependencies')}" @@ -124,37 +120,28 @@ preBuild.doFirst { } if (willPublishReactNativeBridgeBinary) { - bintray { - user = project.hasProperty('bintrayUser') ? project.property('bintrayUser') : System.getenv('BINTRAY_USER') - key = project.hasProperty('bintrayKey') ? project.property('bintrayKey') : System.getenv('BINTRAY_KEY') - publications = ['ReactNativeBridgePublication'] - publish = true - pkg { - repo = 'maven' - name = 'react-native-gutenberg-bridge' - licenses = ['GPL-2.0'] - userOrg = 'wordpress-mobile' - vcsUrl = 'https://github.com/wordpress-mobile/gutenberg-mobile.git' - version { - name = publishReactNativeBridgeVersion - released = new Date() - } - } - } - project.afterEvaluate { publishing { publications { ReactNativeBridgePublication(MavenPublication) { artifact bundleReleaseAar - groupId 'com.github.wordpress-mobile.gutenberg-mobile' + groupId 'org.wordpress-mobile.gutenberg-mobile' artifactId 'react-native-gutenberg-bridge' version publishReactNativeBridgeVersion addDependenciesToPom(pom) } } + repositories { + maven { + url "s3://a8c-libs.s3.amazonaws.com/android" + credentials(AwsCredentials) { + accessKey project.hasProperty('awsAccessKey') ? project.properties['awsAccessKey'] : System.getenv('AWS_ACCESS_KEY') + secretKey project.hasProperty('awsSecretKey') ? project.properties['awsSecretKey'] : System.getenv('AWS_SECRET_KEY') + } + } + } } } } @@ -183,3 +170,22 @@ def addDependenciesToPom(pom) { } } +tasks.register('checkIfVersionIsAlreadyPublished') { + def pomUrl = "https://a8c-libs.s3.amazonaws.com/android/org/wordpress-mobile/gutenberg-mobile/react-native-bridge/${publishReactNativeBridgeVersion}/react-native-bridge-${publishReactNativeBridgeVersion}.pom" + def responseCode = new URL(pomUrl).openConnection().with { connection -> + requestMethod = 'HEAD' + connect() + responseCode + } + + if (responseCode == 200) { + throw new GradleException("'$publishReactNativeBridgeVersion' is already published, please use a different version name. If this happened in CI for a PR, a new commit is necessary. If this happened for a tag, the existing version needs to be manually removed from S3.") + } else if (responseCode == 403) { + // S3 returns 403 status code if a file doesn't exist, which is what we want. Proceed to publish.. + } else { + throw new GradleException("An unexpected status code ($responseCode) was received while checking if the version ($publishReactNativeBridgeVersion) is already published to S3. If this issue persists, please contact Platform 9 team for help.") + } +} + +publish.dependsOn(tasks.named('checkIfVersionIsAlreadyPublished')) +publish.doLast { println "Successfully published 'react-native-bridge' version '$publishReactNativeBridgeVersion'" } diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle index cbabc35ea7026..cf66a4e82d23b 100644 --- a/packages/react-native-bridge/android/settings.gradle +++ b/packages/react-native-bridge/android/settings.gradle @@ -1,9 +1,3 @@ -pluginManagement { - plugins { - id 'com.jfrog.bintray' version '1.8.5' - } -} - rootProject.name = '@wordpress_react-native-bridge' include ':react-native-bridge' diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 2b41fbc858fcd..bbc4079fad609 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.51.0", + "version": "1.52.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 3c92b6e424af6..3be2c7a79ac1f 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,11 +11,16 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +## 1.52.0 + +- [***] Search block now available on mobile! [https://github.com/WordPress/gutenberg/pull/30783] - [*] Image block: Add a "featured" banner. (Android only) [#30806] - [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546] - [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025] +## 1.51.1 +- [*] Updates relative block-support asset path [#31184] ## 1.51.0 diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js new file mode 100644 index 0000000000000..41400c8b3558c --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js @@ -0,0 +1,179 @@ +/** + * Internal dependencies + */ +import { blockNames } from './pages/editor-page'; +import testData from './helpers/test-data'; +import { isAndroid } from './helpers/utils'; + +const testIds = { + label: 'search-block-label', + input: 'search-block-input', + button: 'search-block-button', +}; + +const searchBlockHtml = ``; + +describe( 'Gutenberg Editor Search Block tests.', () => { + describe( 'Editing Search Block elements.', () => { + it( 'Add search block via HTML', async () => { + await editorPage.setHtmlContent( searchBlockHtml ); + } ); + + it( 'Able to customize label text', async () => { + await editorPage.sendTextToSearchBlockChild( + testIds.label, + testData.shortText + ); + + let actual; + let expected; + + if ( isAndroid() ) { + // Android pads the string entered into the `PlainText` component so we'll get the + // value a different way by asking for it directly. + const input = await editorPage.getSearchBlockTextElement( + testIds.label + ); + const inputValue = await input.text(); + actual = inputValue.trim(); + expected = testData.shortText; + } else { + actual = await editorPage.getHtmlContent(); + expected = `"label":"${ testData.shortText }"`; + } + + expect( actual ).toContain( expected ); + } ); + + it( 'Able to customize placeholder text', async () => { + await editorPage.sendTextToSearchBlockChild( + testIds.input, + testData.shortText + ); + + let actual; + let expected; + + if ( isAndroid() ) { + // Android pads the string entered into the `PlainText` component so we'll get the + // value a different way by asking for it directly. + const input = await editorPage.getSearchBlockTextElement( + testIds.input + ); + const inputValue = await input.text(); + actual = inputValue.trim(); + expected = testData.shortText; + } else { + actual = await editorPage.getHtmlContent(); + expected = `"placeholder":"${ testData.shortText }"`; + } + + expect( actual ).toContain( expected ); + } ); + + it( 'Able to customize button text', async () => { + await editorPage.sendTextToSearchBlockChild( + testIds.button, + testData.shortButtonText + ); + + let actual; + let expected; + + if ( isAndroid() ) { + // Android pads the string entered into the `PlainText` component so we'll get the + // value a different way by asking for it directly. + const input = await editorPage.getSearchBlockTextElement( + testIds.button + ); + const inputValue = await input.text(); + actual = inputValue.trim(); + expected = testData.shortButtonText; + } else { + actual = await editorPage.getHtmlContent(); + expected = `"buttonText":"${ testData.shortButtonText }"`; + } + + expect( actual ).toContain( expected ); + } ); + + it( 'Remove Search block', async () => { + // Remove the search block to end this suite of tests. + await editorPage.removeBlockAtPosition( blockNames.search ); + } ); + } ); + + describe( 'Changing search block settings.', () => { + it( 'Able to add the Search Block.', async () => { + await editorPage.addNewBlock( blockNames.search ); + const searchBlock = await editorPage.getBlockAtPosition( + blockNames.search + ); + + expect( searchBlock ).toBeTruthy(); + } ); + + it( 'Able to hide search block label', async () => { + const searchBlock = await editorPage.getBlockAtPosition( + blockNames.search + ); + + await editorPage.toggleHideSearchLabelSetting( searchBlock ); + await editorPage.dismissBottomSheet(); + + // switch to html and verify + const html = await editorPage.getHtmlContent(); + expect( html ).toContain( `"showLabel":false` ); + } ); + + it( 'Able to change to icon only button', async () => { + const searchBlock = await editorPage.getBlockAtPosition( + blockNames.search + ); + + await editorPage.toggleSearchIconOnlySetting( searchBlock ); + await editorPage.dismissBottomSheet(); + + // switch to html and verify + const html = await editorPage.getHtmlContent(); + expect( html ).toContain( `"buttonUseIcon":true` ); + } ); + + it( 'Able to change button position to inside', async () => { + const searchBlock = await editorPage.getBlockAtPosition( + blockNames.search + ); + + await editorPage.changeSearchButtonPositionSetting( + searchBlock, + 'Button inside' + ); + await editorPage.dismissBottomSheet(); + + // switch to html and verify + const html = await editorPage.getHtmlContent(); + expect( html ).toContain( `"buttonPosition":"button-inside"` ); + } ); + + it( 'Able change button position to no button', async () => { + const searchBlock = await editorPage.getBlockAtPosition( + blockNames.search + ); + + await editorPage.changeSearchButtonPositionSetting( + searchBlock, + 'No button' + ); + await editorPage.dismissBottomSheet(); + + // switch to html and verify + const html = await editorPage.getHtmlContent(); + expect( html ).toContain( `"buttonPosition":"no-button"` ); + } ); + + it( 'Remove search block', async () => { + // Remove the search block to end this suite of tests. + await editorPage.removeBlockAtPosition( blockNames.search ); + } ); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js index 00135400a5dce..b4c5772164ae3 100644 --- a/packages/react-native-editor/__device-tests__/helpers/test-data.js +++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js @@ -1,3 +1,5 @@ +exports.shortButtonText = 'Click Me'; + exports.shortText = `Rock music approaches at high velocity.`; exports.mediumText = `The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?`; diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 83cfd9a21ac07..80061eec35359 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -240,6 +240,19 @@ class EditorPage { } } + async openBlockSettings( block ) { + await block.click(); + + const settingsButton = await block.elementByAccessibilityId( + 'Open Settings' + ); + await settingsButton.click(); + } + + async dismissBottomSheet() { + return await swipeDown( this.driver ); + } + // ========================= // Block toolbar functions // ========================= @@ -581,6 +594,66 @@ class EditorPage { } } + // ============================= + // Search Block functions + // ============================= + + async getSearchBlockTextElement( testID ) { + const child = await this.driver.elementByAccessibilityId( testID ); + + if ( isAndroid() ) { + // Get the child EditText element of the ViewGroup returned by + // elementByAccessibilityId. + return await child.elementByClassName( 'android.widget.EditText' ); + } + + return child; + } + + async sendTextToSearchBlockChild( testID, text ) { + const textViewElement = await this.getSearchBlockTextElement( testID ); + return await typeString( this.driver, textViewElement, text ); + } + + async toggleHideSearchLabelSetting( block ) { + await this.openBlockSettings( block ); + + const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther'; + + const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Hide search heading")]`; + return await this.driver + .elementByXPath( locator ) + .click() + .sleep( isAndroid() ? 200 : 0 ); + } + + async changeSearchButtonPositionSetting( block, buttonPosition ) { + await this.openBlockSettings( block ); + + const elementName = isAndroid() ? '//*' : '//XCUIElementTypeButton'; + + const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Button position")]`; + await this.driver.elementByXPath( locator ).click(); + + const optionMenuButtonLocator = `${ elementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ buttonPosition }")]`; + return await this.driver + .elementByXPath( optionMenuButtonLocator ) + .click() + .sleep( isAndroid() ? 500 : 200 ); // sleep a little longer due to multiple menus + } + + async toggleSearchIconOnlySetting( block ) { + await this.openBlockSettings( block ); + + const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther'; + + const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Use icon button")]`; + return await this.driver + .elementByXPath( locator ) + .click() + .sleep( isAndroid() ? 200 : 0 ); + } + // ============================= // Unsupported Block functions // ============================= @@ -644,6 +717,7 @@ const blockNames = { verse: 'Verse', file: 'File', audio: 'Audio', + search: 'Search', }; module.exports = { initializeEditorPage, blockNames }; diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle index 0b7e06e295203..a74c55992616e 100644 --- a/packages/react-native-editor/android/app/build.gradle +++ b/packages/react-native-editor/android/app/build.gradle @@ -158,7 +158,7 @@ repositories { } dependencies { - implementation("com.github.wordpress-mobile.gutenberg-mobile:react-native-bridge", { + implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", { exclude group: 'org.wordpress', module: 'utils' }) implementation("org.wordpress:utils:$wordpressUtilsVersion", { diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 3ef8fd10ef7d1..937db3693a5df 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -21,7 +21,7 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - Gutenberg (1.51.0): + - Gutenberg (1.52.0): - React-Core (= 0.61.5) - React-CoreModules (= 0.61.5) - React-RCTImage (= 0.61.5) @@ -253,7 +253,7 @@ PODS: - React-Core - RNSVG (9.13.6-gb): - React-Core - - RNTAztecView (1.51.0): + - RNTAztecView (1.52.0): - React-Core - WordPress-Aztec-iOS (~> 1.19.4) - WordPress-Aztec-iOS (1.19.4) @@ -402,7 +402,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - Gutenberg: 74ef5f17bcd712fd31f4c7a666ff1ccd2c871c68 + Gutenberg: 84ebca67faec24fa0f6fdc7d07f009ee81916cb3 RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 @@ -435,7 +435,7 @@ SPEC CHECKSUMS: RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918 RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b RNSVG: 46c4b680fe18237fa01eb7d7b311d77618fde31f - RNTAztecView: af275654e1326cd8c0678c92aa16b860194155d5 + RNTAztecView: e752cfd696ff6db49be94a8aeca032d2f4a3227e WordPress-Aztec-iOS: 870c93297849072aadfc2223e284094e73023e82 Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 4c43cd05ab568..7c9d91be2770e 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.51.0", + "version": "1.52.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -23,7 +23,7 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=10", + "node": ">=12", "npm": ">=6.9" }, "main": "src/index.js", diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md index 41c526aea5525..ccf16e3dc5c59 100644 --- a/packages/redux-routine/CHANGELOG.md +++ b/packages/redux-routine/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 3.14.0 (2021-03-17) ## 3.7.0 (2020-02-04) diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json index 820bc39e9d97b..b2c6b6c02e359 100644 --- a/packages/redux-routine/package.json +++ b/packages/redux-routine/package.json @@ -20,6 +20,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md index 030bcbce7d6d5..6c0dcc88da30f 100644 --- a/packages/reusable-blocks/CHANGELOG.md +++ b/packages/reusable-blocks/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.2.0 (2021-03-17) ## 1.1.0 (2020-12-17) diff --git a/packages/reusable-blocks/README.md b/packages/reusable-blocks/README.md index 9c9c656d2dd93..20aa4982e1c34 100644 --- a/packages/reusable-blocks/README.md +++ b/packages/reusable-blocks/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/reusable-blocks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## How it works diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json index 1fea20a2a10cf..e15ffd694beac 100644 --- a/packages/reusable-blocks/package.json +++ b/packages/reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/reusable-blocks", - "version": "1.2.2", + "version": "1.2.3", "description": "Reusable blocks utilities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js index ce5883402896d..3635c0d1c3e81 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { withSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -24,7 +25,7 @@ function ReusableBlocksMenuItems( { clientIds, rootClientId } ) { } export default withSelect( ( select ) => { - const { getSelectedBlockClientIds } = select( 'core/block-editor' ); + const { getSelectedBlockClientIds } = select( blockEditorStore ); return { clientIds: getSelectedBlockClientIds(), }; diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js index ec4df75146bc0..7ac1a9e34ff30 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js @@ -5,13 +5,16 @@ import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { isReusableBlock } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { BlockSettingsMenuControls } from '@wordpress/block-editor'; +import { + BlockSettingsMenuControls, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { addQueryArgs } from '@wordpress/url'; function ReusableBlocksManageButton( { clientId } ) { const { isVisible } = useSelect( ( select ) => { - const { getBlock } = select( 'core/block-editor' ); + const { getBlock } = select( blockEditorStore ); const { canUser } = select( 'core' ); const reusableBlock = getBlock( clientId ); diff --git a/packages/reusable-blocks/src/store/controls.js b/packages/reusable-blocks/src/store/controls.js index e3e75930b5c08..373fbc698931f 100644 --- a/packages/reusable-blocks/src/store/controls.js +++ b/packages/reusable-blocks/src/store/controls.js @@ -14,6 +14,7 @@ import { } from '@wordpress/blocks'; import { createRegistryControl } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -65,7 +66,7 @@ const controls = { CONVERT_BLOCK_TO_STATIC: createRegistryControl( ( registry ) => ( { clientId } ) => { const oldBlock = registry - .select( 'core/block-editor' ) + .select( blockEditorStore ) .getBlock( clientId ); const reusableBlock = registry .select( 'core' ) @@ -81,7 +82,7 @@ const controls = { : reusableBlock.content ); registry - .dispatch( 'core/block-editor' ) + .dispatch( blockEditorStore ) .replaceBlocks( oldBlock.clientId, newBlocks ); } ), @@ -93,7 +94,7 @@ const controls = { title: title || __( 'Untitled Reusable block' ), content: serialize( registry - .select( 'core/block-editor' ) + .select( blockEditorStore ) .getBlocksByClientId( clientIds ) ), status: 'publish', @@ -107,7 +108,7 @@ const controls = { ref: updatedRecord.id, } ); registry - .dispatch( 'core/block-editor' ) + .dispatch( blockEditorStore ) .replaceBlocks( clientIds, newBlock ); registry .dispatch( reusableBlocksStore ) @@ -132,7 +133,7 @@ const controls = { // Remove any other blocks that reference this reusable block const allBlocks = registry - .select( 'core/block-editor' ) + .select( blockEditorStore ) .getBlocks(); const associatedBlocks = allBlocks.filter( ( block ) => @@ -145,7 +146,7 @@ const controls = { // Remove the parsed block. if ( associatedBlockClientIds.length ) { registry - .dispatch( 'core/block-editor' ) + .dispatch( blockEditorStore ) .removeBlocks( associatedBlockClientIds ); } diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md index b5d3675acd590..04826c21436f1 100644 --- a/packages/rich-text/CHANGELOG.md +++ b/packages/rich-text/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 3.25.0 (2021-03-17) ## 3.24.0 (2020-12-17) diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index 8f0fc331b27c8..d04817e3a8e30 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/rich-text ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API @@ -312,7 +312,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **toggleFormat** diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index f1ff5604a4363..9619520009eb0 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/rich-text", - "version": "3.25.2", + "version": "3.25.3", "description": "Rich text value and manipulation API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index 1ffd8365dda0a..c87fcf816a0af 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -9,15 +9,7 @@ import { useMemo, useLayoutEffect, } from '@wordpress/element'; -import { - BACKSPACE, - DELETE, - ENTER, - LEFT, - RIGHT, - SPACE, - ESCAPE, -} from '@wordpress/keycodes'; +import { BACKSPACE, DELETE, ENTER, SPACE, ESCAPE } from '@wordpress/keycodes'; import { getFilesFromDataTransfer } from '@wordpress/dom'; import { useMergeRefs } from '@wordpress/compose'; @@ -42,6 +34,7 @@ import { useBoundaryStyle } from './use-boundary-style'; import { useInlineWarning } from './use-inline-warning'; import { insert } from '../insert'; import { useCopyHandler } from './use-copy-handler'; +import { useFormatBoundaries } from './use-format-boundaries'; /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */ @@ -537,122 +530,6 @@ function RichText( event.preventDefault(); } - /** - * Handles horizontal keyboard navigation when no modifiers are pressed. The - * navigation is handled separately to move correctly around format - * boundaries. - * - * @param {WPSyntheticEvent} event A synthetic keyboard event. - */ - function handleHorizontalNavigation( event ) { - const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event; - - if ( - // Only override left and right keys without modifiers pressed. - shiftKey || - altKey || - metaKey || - ctrlKey || - ( keyCode !== LEFT && keyCode !== RIGHT ) - ) { - return; - } - - const { - text, - formats, - start, - end, - activeFormats: currentActiveFormats = [], - } = record.current; - const collapsed = isCollapsed( record.current ); - // To do: ideally, we should look at visual position instead. - const { direction } = getWin().getComputedStyle( ref.current ); - const reverseKey = direction === 'rtl' ? RIGHT : LEFT; - const isReverse = event.keyCode === reverseKey; - - // If the selection is collapsed and at the very start, do nothing if - // navigating backward. - // If the selection is collapsed and at the very end, do nothing if - // navigating forward. - if ( collapsed && currentActiveFormats.length === 0 ) { - if ( start === 0 && isReverse ) { - return; - } - - if ( end === text.length && ! isReverse ) { - return; - } - } - - // If the selection is not collapsed, let the browser handle collapsing - // the selection for now. Later we could expand this logic to set - // boundary positions if needed. - if ( ! collapsed ) { - return; - } - - const formatsBefore = formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS; - const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS; - - let newActiveFormatsLength = currentActiveFormats.length; - let source = formatsAfter; - - if ( formatsBefore.length > formatsAfter.length ) { - source = formatsBefore; - } - - // If the amount of formats before the caret and after the caret is - // different, the caret is at a format boundary. - if ( formatsBefore.length < formatsAfter.length ) { - if ( - ! isReverse && - currentActiveFormats.length < formatsAfter.length - ) { - newActiveFormatsLength++; - } - - if ( - isReverse && - currentActiveFormats.length > formatsBefore.length - ) { - newActiveFormatsLength--; - } - } else if ( formatsBefore.length > formatsAfter.length ) { - if ( - ! isReverse && - currentActiveFormats.length > formatsAfter.length - ) { - newActiveFormatsLength--; - } - - if ( - isReverse && - currentActiveFormats.length < formatsBefore.length - ) { - newActiveFormatsLength++; - } - } - - if ( newActiveFormatsLength === currentActiveFormats.length ) { - record.current._newActiveFormats = isReverse - ? formatsBefore - : formatsAfter; - return; - } - - event.preventDefault(); - - const newActiveFormats = source.slice( 0, newActiveFormatsLength ); - const newValue = { - ...record.current, - activeFormats: newActiveFormats, - }; - record.current = newValue; - applyRecord( newValue ); - setActiveFormats( newActiveFormats ); - } - function handleKeyDown( event ) { if ( event.defaultPrevented ) { return; @@ -661,7 +538,6 @@ function RichText( handleDelete( event ); handleEnter( event ); handleSpace( event ); - handleHorizontalNavigation( event ); } const lastHistoryValue = useRef( value ); @@ -1064,6 +940,7 @@ function RichText( forwardedRef, ref, useCopyHandler( { record, multilineTag, preserveWhiteSpace } ), + useFormatBoundaries( { record, applyRecord, setActiveFormats } ), ] ), style: defaultStyle, className: 'rich-text', diff --git a/packages/rich-text/src/component/use-format-boundaries.js b/packages/rich-text/src/component/use-format-boundaries.js new file mode 100644 index 0000000000000..0383337f95449 --- /dev/null +++ b/packages/rich-text/src/component/use-format-boundaries.js @@ -0,0 +1,144 @@ +/** + * WordPress dependencies + */ +import { useRefEffect } from '@wordpress/compose'; + +import { LEFT, RIGHT } from '@wordpress/keycodes'; + +/** + * Internal dependencies + */ +import { isCollapsed } from '../is-collapsed'; + +const EMPTY_ACTIVE_FORMATS = []; + +export function useFormatBoundaries( { + record, + applyRecord, + setActiveFormats, +} ) { + return useRefEffect( + ( element ) => { + function onKeyDown( event ) { + const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event; + + if ( + // Only override left and right keys without modifiers pressed. + shiftKey || + altKey || + metaKey || + ctrlKey || + ( keyCode !== LEFT && keyCode !== RIGHT ) + ) { + return; + } + + const { + text, + formats, + start, + end, + activeFormats: currentActiveFormats = [], + } = record.current; + const collapsed = isCollapsed( record.current ); + const { ownerDocument } = element; + const { defaultView } = ownerDocument; + // To do: ideally, we should look at visual position instead. + const { direction } = defaultView.getComputedStyle( element ); + const reverseKey = direction === 'rtl' ? RIGHT : LEFT; + const isReverse = event.keyCode === reverseKey; + + // If the selection is collapsed and at the very start, do nothing if + // navigating backward. + // If the selection is collapsed and at the very end, do nothing if + // navigating forward. + if ( collapsed && currentActiveFormats.length === 0 ) { + if ( start === 0 && isReverse ) { + return; + } + + if ( end === text.length && ! isReverse ) { + return; + } + } + + // If the selection is not collapsed, let the browser handle collapsing + // the selection for now. Later we could expand this logic to set + // boundary positions if needed. + if ( ! collapsed ) { + return; + } + + const formatsBefore = + formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS; + const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS; + + let newActiveFormatsLength = currentActiveFormats.length; + let source = formatsAfter; + + if ( formatsBefore.length > formatsAfter.length ) { + source = formatsBefore; + } + + // If the amount of formats before the caret and after the caret is + // different, the caret is at a format boundary. + if ( formatsBefore.length < formatsAfter.length ) { + if ( + ! isReverse && + currentActiveFormats.length < formatsAfter.length + ) { + newActiveFormatsLength++; + } + + if ( + isReverse && + currentActiveFormats.length > formatsBefore.length + ) { + newActiveFormatsLength--; + } + } else if ( formatsBefore.length > formatsAfter.length ) { + if ( + ! isReverse && + currentActiveFormats.length > formatsAfter.length + ) { + newActiveFormatsLength--; + } + + if ( + isReverse && + currentActiveFormats.length < formatsBefore.length + ) { + newActiveFormatsLength++; + } + } + + if ( newActiveFormatsLength === currentActiveFormats.length ) { + record.current._newActiveFormats = isReverse + ? formatsBefore + : formatsAfter; + return; + } + + event.preventDefault(); + + const newActiveFormats = source.slice( + 0, + newActiveFormatsLength + ); + const newValue = { + ...record.current, + activeFormats: newActiveFormats, + }; + record.current = newValue; + applyRecord( newValue ); + setActiveFormats( newActiveFormats ); + } + + element.addEventListener( 'keydown', onKeyDown ); + return () => { + element.removeEventListener( 'keydown', onKeyDown ); + }; + }, + [ record, applyRecord, setActiveFormats ] + ); +} diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index f928b4c2bc8a4..7dcf7e65c79ce 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,24 @@ ## Unreleased +### Bug Fix + +- Add `postcss` as a dependency to ensure that the correct version gets installed. + +## 15.0.0 (2021-04-29) + +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. +- The bundled `puppeteer-core` (`^5.5.0`) dependency has been upgraded to version `^9.0.0`. Puppeteer uses Chromium v91 instead of Chromium v88. See the full list of breaking changes of [9.0.0](https://github.com/puppeteer/puppeteer/releases/tag/v9.0.0) and lower versions ([#31138](https://github.com/WordPress/gutenberg/pull/31138)). + +### New Features + +- Include a Jest Reporter that formats test results for GitHub Actions annotations ([#31041](https://github.com/WordPress/gutenberg/pull/31041)). +- Have the `format` command ignore files listed in a `.prettierignore` file, add a fallback `.prettierignore` to the package ([30844](https://github.com/WordPress/gutenberg/pull/30844)). +- The e2e tests are now using [`jest-circus`](https://github.com/facebook/jest/tree/master/packages/jest-circus) as the test runner. This enable us to capture screenshots at the time the tests failed. The unit tests are also using the same test runner for consistency ([#28449](https://github.com/WordPress/gutenberg/pull/28449), [#31178](https://github.com/WordPress/gutenberg/pull/31178)). + ### Breaking Changes - Rename `format-js` script to `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)). diff --git a/packages/scripts/README.md b/packages/scripts/README.md index ea507e8625c1d..ab94f94cdb6c4 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -150,7 +150,7 @@ This is how you execute the script with presented setup: When you run commands similar to the `npm run format:src` example above, you can provide a file, a directory, or `glob` syntax or any combination of them. -By default, files located in `build`, `node_modules`, and `vendor` folders are ignored. +By default, files located in `build`, `node_modules`, and `vendor` folders are ignored. You can customize the list of ignored files and directories by adding them to a `.prettierignore` file in your project. ### `lint-js` diff --git a/packages/scripts/config/.prettierignore b/packages/scripts/config/.prettierignore new file mode 100644 index 0000000000000..411a5b8a43744 --- /dev/null +++ b/packages/scripts/config/.prettierignore @@ -0,0 +1,2 @@ +build +vendor diff --git a/packages/scripts/config/jest-e2e.config.js b/packages/scripts/config/jest-e2e.config.js index 05b10123a7b87..9714664ca7f53 100644 --- a/packages/scripts/config/jest-e2e.config.js +++ b/packages/scripts/config/jest-e2e.config.js @@ -20,6 +20,10 @@ const jestE2EConfig = { setupFilesAfterEnv: [ 'expect-puppeteer' ], testMatch: [ '**/specs/**/*.[jt]s', '**/?(*.)spec.[jt]s' ], testPathIgnorePatterns: [ '/node_modules/' ], + reporters: [ + 'default', + path.join( __dirname, 'jest-github-actions-reporter.js' ), + ], }; if ( ! hasBabelConfig() ) { diff --git a/packages/scripts/config/jest-environment-puppeteer/index.js b/packages/scripts/config/jest-environment-puppeteer/index.js index 76f1b4db2ba69..bb8d5bbda00c9 100644 --- a/packages/scripts/config/jest-environment-puppeteer/index.js +++ b/packages/scripts/config/jest-environment-puppeteer/index.js @@ -205,11 +205,11 @@ class PuppeteerEnvironment extends NodeEnvironment { replacement: '-', } ); await writeFile( - `${ ARTIFACTS_PATH }/${ fileName }-snapshot.html`, + path.join( ARTIFACTS_PATH, `${ fileName }-snapshot.html` ), await this.global.page.content() ); await this.global.page.screenshot( { - path: `${ ARTIFACTS_PATH }/${ fileName }.jpg`, + path: path.join( ARTIFACTS_PATH, `${ fileName }.jpg` ), } ); } diff --git a/packages/scripts/config/jest-github-actions-reporter.js b/packages/scripts/config/jest-github-actions-reporter.js new file mode 100644 index 0000000000000..9a8f292beb80c --- /dev/null +++ b/packages/scripts/config/jest-github-actions-reporter.js @@ -0,0 +1,64 @@ +/** + * Based on https://github.com/facebook/jest/pull/11320. + * + * We might be able to remove this file once the Jest PR is merged, and a + * version of Jest that includes the GithubActionsReporter is released. + */ + +/** + * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const newLine = /\n/g; +const encodedNewLine = '%0A'; +const lineAndColumnInStackTrace = /^.*?:([0-9]+):([0-9]+).*$/; + +class GithubActionsReporter { + async onRunComplete( _contexts, _aggregatedResults ) { + if ( ! process.env.GITHUB_ACTIONS ) { + return; + } + + if ( ! _aggregatedResults ) { + return; + } + const messages = getMessages( _aggregatedResults.testResults ); + + for ( const message of messages ) { + // eslint-disable-next-line no-console + console.log( message ); + } + } +} + +function getMessages( results ) { + if ( ! results ) return []; + + return results.reduce( + flatMap( ( { testFilePath, testResults } ) => + testResults + .filter( ( r ) => r.status === 'failed' ) + .reduce( + flatMap( ( r ) => r.failureMessages ), + [] + ) + .map( ( m ) => m.replace( newLine, encodedNewLine ) ) + .map( ( m ) => lineAndColumnInStackTrace.exec( m ) ) + .filter( ( m ) => m !== null ) + .map( + ( [ message, line, col ] ) => + `::error file=${ testFilePath },line=${ line },col=${ col }::${ message }` + ) + ), + [] + ); +} + +function flatMap( fn ) { + return ( out, entry ) => out.concat( ...fn( entry ) ); +} + +module.exports = GithubActionsReporter; diff --git a/packages/scripts/config/jest-unit.config.js b/packages/scripts/config/jest-unit.config.js index 3244e163925d6..a6228f60b02d5 100644 --- a/packages/scripts/config/jest-unit.config.js +++ b/packages/scripts/config/jest-unit.config.js @@ -9,7 +9,12 @@ const path = require( 'path' ); const { hasBabelConfig } = require( '../utils' ); const jestUnitConfig = { + testRunner: 'jest-circus/runner', preset: '@wordpress/jest-preset-default', + reporters: [ + 'default', + path.join( __dirname, 'jest-github-actions-reporter.js' ), + ], }; if ( ! hasBabelConfig() ) { diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 604cf6d7c30f2..16b7ac9d3d11b 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/scripts", - "version": "14.1.1", + "version": "15.0.0", "description": "Collection of reusable scripts for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -66,9 +66,10 @@ "mini-css-extract-plugin": "^1.3.9", "minimist": "^1.2.0", "npm-package-json-lint": "^5.0.0", + "postcss": "^8.2.2", "postcss-loader": "^4.2.0", "prettier": "npm:wp-prettier@2.2.1-beta-1", - "puppeteer-core": "^5.5.0", + "puppeteer-core": "^9.0.0", "read-pkg-up": "^1.0.1", "resolve-bin": "^0.4.0", "sass": "^1.26.11", diff --git a/packages/scripts/scripts/format.js b/packages/scripts/scripts/format.js index 6dd655bdab701..7ac808de4457a 100644 --- a/packages/scripts/scripts/format.js +++ b/packages/scripts/scripts/format.js @@ -79,13 +79,13 @@ if ( ! hasPrettierConfig() ) { ]; } -// If `--ignore-path` is not explicitly specified, use the project's or global .eslintignore +// If `--ignore-path` is not explicitly specified, use the project's or global .prettierignore. let ignorePath = getArgFromCLI( '--ignore-path' ); if ( ! ignorePath ) { - if ( hasProjectFile( '.eslintignore' ) ) { - ignorePath = fromProjectRoot( '.eslintignore' ); + if ( hasProjectFile( '.prettierignore' ) ) { + ignorePath = fromProjectRoot( '.prettierignore' ); } else { - ignorePath = fromConfigRoot( '.eslintignore' ); + ignorePath = fromConfigRoot( '.prettierignore' ); } } const ignoreArgs = [ '--ignore-path', ignorePath ]; diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md index 609237ab7a4ff..72e9b497991c9 100644 --- a/packages/server-side-render/CHANGELOG.md +++ b/packages/server-side-render/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.21.0 (2021-03-17) ## 1.17.0 (2020-09-03) diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index 26d33cd94def4..50743c8281370 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -18,7 +18,7 @@ Install the module npm install @wordpress/server-side-render --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json index 287b1bd1b750a..3e1742bc3a4a9 100644 --- a/packages/server-side-render/package.json +++ b/packages/server-side-render/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/server-side-render", - "version": "1.21.2", + "version": "1.21.3", "description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,6 +19,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md index d58f344a74522..a0c8f7e6fd4c7 100644 --- a/packages/shortcode/CHANGELOG.md +++ b/packages/shortcode/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.13.0 (2021-03-17) ## 2.0.1 (2018-09-30) diff --git a/packages/shortcode/README.md b/packages/shortcode/README.md index 1179a3a3d2472..1beaba7e6ec34 100644 --- a/packages/shortcode/README.md +++ b/packages/shortcode/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/shortcode --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json index 008e69cf9867d..3afa85126b5e5 100644 --- a/packages/shortcode/package.json +++ b/packages/shortcode/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md index 966d1c8214ffa..765b546d3b8c0 100644 --- a/packages/token-list/CHANGELOG.md +++ b/packages/token-list/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.15.0 (2021-03-17) ## 1.10.0 (2020-04-15) diff --git a/packages/token-list/README.md b/packages/token-list/README.md index 2a80ee8667283..e47cc35e04101 100644 --- a/packages/token-list/README.md +++ b/packages/token-list/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/token-list ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/token-list/package.json b/packages/token-list/package.json index 8fde438611e74..18072bd5b39d3 100644 --- a/packages/token-list/package.json +++ b/packages/token-list/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/token-list", - "version": "1.15.2", + "version": "1.15.3", "description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md index e7562fd0d66d0..e1291501bdec9 100644 --- a/packages/url/CHANGELOG.md +++ b/packages/url/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.22.0 (2021-03-17) ## 2.21.0 (2021-01-05) diff --git a/packages/url/README.md b/packages/url/README.md index 84d5aa67961ea..bec8886687b66 100644 --- a/packages/url/README.md +++ b/packages/url/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/url --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage diff --git a/packages/url/package.json b/packages/url/package.json index ba52c6cfd8faf..2b096aa44db2c 100644 --- a/packages/url/package.json +++ b/packages/url/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md index a119f0d02b9b2..165cd623f8c8e 100644 --- a/packages/viewport/CHANGELOG.md +++ b/packages/viewport/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.26.0 (2021-03-17) ## 2.25.0 (2020-12-17) diff --git a/packages/viewport/README.md b/packages/viewport/README.md index 6c15ad6aa1570..a7e8ab7fdb381 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/viewport --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Usage @@ -92,7 +92,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **withViewportMatch** diff --git a/packages/viewport/package.json b/packages/viewport/package.json index e2d35d8013f8d..4debf58baa7f5 100644 --- a/packages/viewport/package.json +++ b/packages/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/viewport", - "version": "2.26.2", + "version": "2.26.3", "description": "Viewport module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md index a2b38504a9018..415e85b7b30f8 100644 --- a/packages/warning/CHANGELOG.md +++ b/packages/warning/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 1.4.0 (2021-03-17) ## 1.1.0 (2020-04-15) diff --git a/packages/warning/README.md b/packages/warning/README.md index 034991251c89c..47a7270550692 100644 --- a/packages/warning/README.md +++ b/packages/warning/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/warning --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## Reducing bundle size diff --git a/packages/warning/package.json b/packages/warning/package.json index 699bdcc3c098a..524b524d29276 100644 --- a/packages/warning/package.json +++ b/packages/warning/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md index 73641a2ccea9e..898626b951046 100644 --- a/packages/wordcount/CHANGELOG.md +++ b/packages/wordcount/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. +- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. + ## 2.15.0 (2021-03-17) ## 2.0.3 (2018-10-29) diff --git a/packages/wordcount/README.md b/packages/wordcount/README.md index 9ffff147f474c..ace076c97108c 100644 --- a/packages/wordcount/README.md +++ b/packages/wordcount/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/wordcount --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ ## API diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json index 2640fa5fb4fd1..4dea2f52a5fea 100644 --- a/packages/wordcount/package.json +++ b/packages/wordcount/package.json @@ -18,6 +18,9 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, + "engines": { + "node": ">=12" + }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/phpunit/class-rest-widget-types-controller-test.php b/phpunit/class-rest-widget-types-controller-test.php index 55601fae72eed..00529dd13d23e 100644 --- a/phpunit/class-rest-widget-types-controller-test.php +++ b/phpunit/class-rest-widget-types-controller-test.php @@ -265,6 +265,16 @@ public function test_encode_form_data_with_no_input() { "\t\t

", $data['form'] ); + $this->assertStringMatchesFormat( + "
\n" . + "\t\t\t\t
\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t
\n" . + "\t\t\t
", + $data['preview'] + ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array() ) ), @@ -294,6 +304,16 @@ public function test_encode_form_data_with_instance() { "\t\t

", $data['form'] ); + $this->assertStringMatchesFormat( + "

Test title

\n" . + "\t\t\t\t
\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t
\n" . + "\t\t\t
", + $data['preview'] + ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Test title' ) ) ), @@ -317,6 +337,16 @@ public function test_encode_form_data_with_form_data() { "\t\t

", $data['form'] ); + $this->assertStringMatchesFormat( + "

Updated title

\n" . + "\t\t\t\t
\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t
\n" . + "\t\t\t
", + $data['preview'] + ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Updated title' ) ) ), @@ -348,6 +378,16 @@ public function test_encode_form_data_no_raw() { "\t\t

", $data['form'] ); + $this->assertStringMatchesFormat( + "

Test title

\n" . + "\t\t\t\t
\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t\t\n" . + "\t\t\t\t
\n" . + "\t\t\t
", + $data['preview'] + ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Test title' ) ) ), diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index fa9f95a0d207e..372f6c7a7ba55 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -8,143 +8,6 @@ class WP_Theme_JSON_Test extends WP_UnitTestCase { - function test_schema_validation_subtree_is_removed_if_key_invalid() { - $theme_json = new WP_Theme_JSON( - array( - 'invalid/key' => 'content', - 'styles' => array( - 'invalid/key' => array( - 'color' => array( - 'custom' => 'false', - ), - ), - 'core/group' => array( - 'invalid/key' => array( - 'custom' => false, - 'background' => 'red', - ), - 'color' => array( - 'invalid/key' => true, - 'background' => 'red', - ), - 'spacing' => array( - 'padding' => array( - 'invalid/key' => false, - 'top' => '10px', - ), - ), - ), - ), - ) - ); - $result = $theme_json->get_raw_data(); - - $expected = array( - 'styles' => array( - 'core/group' => array( - 'color' => array( - 'background' => 'red', - ), - 'spacing' => array( - 'padding' => array( - 'top' => '10px', - ), - ), - ), - ), - ); - - $this->assertEqualSetsWithIndex( $expected, $result ); - } - - function test_schema_validation_subtree_is_removed_if_not_array() { - $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; - $theme_json = new WP_Theme_JSON( - array( - 'settings' => 'invalid/not/array', - 'styles' => array( - $root_name => 'invalid/not/array', - 'core/paragraph' => array( - 'invalid/not/array' => false, - ), - 'core/group' => array( - 'invalid/not/array' => false, - 'color' => array( - 'link' => 'pink', - ), - 'typography' => array( - 'invalid/key' => false, - ), - 'spacing' => array( - 'padding' => array( - 'invalid/key' => '10px', - ), - ), - ), - ), - ) - ); - - $actual = $theme_json->get_raw_data(); - $expected = array( - 'styles' => array( - 'core/group' => array( - 'color' => array( - 'link' => 'pink', - ), - ), - ), - ); - - $this->assertEqualSetsWithIndex( $expected, $actual ); - } - - function test_schema_validation_subtree_is_removed_if_empty() { - $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; - $theme_json = new WP_Theme_JSON( - array( - 'settings' => array( - 'invalid/key' => array( - 'color' => array( - 'custom' => false, - ), - ), - $root_name => array( - 'invalid/key' => false, - ), - ), - 'styles' => array( - $root_name => array( - 'color' => array( - 'link' => 'blue', - ), - 'typography' => array( - 'invalid/key' => false, - ), - 'spacing' => array( - 'padding' => array( - 'invalid/key' => '10px', - ), - ), - ), - ), - ) - ); - $result = $theme_json->get_raw_data(); - - $expected = array( - 'styles' => array( - $root_name => array( - 'color' => array( - 'link' => 'blue', - ), - ), - ), - ); - - $this->assertEqualSetsWithIndex( $expected, $result ); - } - function test_get_settings() { $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; // See schema at WP_Theme_JSON::SCHEMA. @@ -245,15 +108,15 @@ function test_get_stylesheet() { ); $this->assertEquals( - ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet() ); $this->assertEquals( - ':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + 'body{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet( 'block_styles' ) ); $this->assertEquals( - ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}', + 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}', $theme_json->get_stylesheet( 'css_variables' ) ); } @@ -324,7 +187,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - ':root{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + 'body{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet() ); } @@ -1026,105 +889,4 @@ function test_get_editor_settings_custom_units_can_be_filtered() { $this->assertEqualSetsWithIndex( $expected, $actual['settings']['defaults']['spacing'] ); } - function test_get_style_nodes() { - $theme_json = array( - 'styles' => array( - 'defaults' => array( 'color' => array( 'background' => 'red' ) ), - 'root' => array( 'color' => array( 'background' => 'green' ) ), - 'core/paragraph' => array( 'color' => array( 'background' => 'blue' ) ), - 'core/heading/h1' => array( 'color' => array( 'background' => 'yellow' ) ), - 'core/group' => array( 'color' => array( 'background' => 'pink' ) ), - 'core/post-title' => array( 'color' => array( 'background' => 'white' ) ), - ), - ); - $selectors = array( - 'defaults' => array( 'selector' => ':root' ), - 'root' => array( 'selector' => ':root' ), - 'core/paragraph' => array( 'selector' => 'p' ), - 'core/heading/h1' => array( 'selector' => 'h1' ), - 'core/group' => array( 'selector' => '.wp-block-group' ), - ); - - $actual = WP_Theme_JSON::get_style_nodes( $theme_json, $selectors ); - - $expected = array( - array( - 'path' => array( 'styles', 'defaults' ), - 'selector' => ':root', - ), - array( - 'path' => array( 'styles', 'root' ), - 'selector' => ':root', - ), - array( - 'path' => array( 'styles', 'core/paragraph' ), - 'selector' => 'p', - ), - array( - 'path' => array( 'styles', 'core/heading/h1' ), - 'selector' => 'h1', - ), - array( - 'path' => array( 'styles', 'core/group' ), - 'selector' => '.wp-block-group', - ), - array( - 'path' => array( 'styles', 'core/post-title' ), - 'selector' => null, - ), - ); - - $this->assertEqualSets( $expected, $actual ); - } - - function test_get_setting_nodes() { - $theme_json = array( - 'settings' => array( - 'defaults' => array( 'border' => array( 'customRadius' => true ) ), - 'root' => array( 'border' => array( 'customRadius' => false ) ), - 'core/paragraph' => array( 'border' => array( 'customRadius' => true ) ), - 'core/heading/h1' => array( 'border' => array( 'customRadius' => false ) ), - 'core/group' => array( 'border' => array( 'customRadius' => true ) ), - 'core/post-title' => array( 'border' => array( 'customRadius' => false ) ), - ), - ); - $selectors = array( - 'defaults' => array( 'selector' => ':root' ), - 'root' => array( 'selector' => ':root' ), - 'core/paragraph' => array( 'selector' => 'p' ), - 'core/heading/h1' => array( 'selector' => 'h1' ), - 'core/group' => array( 'selector' => '.wp-block-group' ), - ); - - $actual = WP_Theme_JSON::get_setting_nodes( $theme_json, $selectors ); - - $expected = array( - array( - 'path' => array( 'settings', 'defaults' ), - 'selector' => ':root', - ), - array( - 'path' => array( 'settings', 'root' ), - 'selector' => ':root', - ), - array( - 'path' => array( 'settings', 'core/paragraph' ), - 'selector' => 'p', - ), - array( - 'path' => array( 'settings', 'core/heading/h1' ), - 'selector' => 'h1', - ), - array( - 'path' => array( 'settings', 'core/group' ), - 'selector' => '.wp-block-group', - ), - array( - 'path' => array( 'settings', 'core/post-title' ), - 'selector' => null, - ), - ); - - $this->assertEqualSets( $expected, $actual ); - } } diff --git a/readme.txt b/readme.txt index c26c54e06da4f..b490335e4aad4 100644 --- a/readme.txt +++ b/readme.txt @@ -55,4 +55,4 @@ View release page. +To read the changelog for Gutenberg 10.5.3, please navigate to the release page. diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js index 346c2f288efd4..84277c929d817 100644 --- a/test/unit/jest.config.js +++ b/test/unit/jest.config.js @@ -43,4 +43,8 @@ module.exports = { 'jest-watch-typeahead/filename', 'jest-watch-typeahead/testname', ], + reporters: [ + 'default', + 'packages/scripts/config/jest-github-actions-reporter.js', + ], }; From 77b5a7e1813bcf0a0845f2378b5a5574a77cadd4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 3 May 2021 16:58:44 +0200 Subject: [PATCH 09/16] Revert "Sync with trunk (#31427)" (#31428) This reverts commit f2046849ac54f51482272e3d7299f45856b0240e. --- .github/CODEOWNERS | 7 +- .github/workflows/end2end-test.yml | 1 - .github/workflows/static-checks.yml | 4 +- .github/workflows/storybook-pages.yml | 1 - .github/workflows/unit-test.yml | 1 - .prettierignore | 8 - bin/packages/build.js | 12 - bin/packages/watch.js | 35 +- bin/plugin/commands/common.js | 1 - changelog.txt | 398 +++-- docs/contributors/code/release.md | 6 +- docs/contributors/documentation/README.md | 37 +- .../full-site-editing-templates.md | 12 +- docs/getting-started/faq.md | 2 +- docs/getting-started/full-site-editing.md | 61 - docs/getting-started/glossary.md | 2 +- .../README.md} | 36 +- .../block-based-themes-2-adding-blocks.md | 53 + docs/how-to-guides/themes/README.md | 11 +- ...heme-overview.md => block-based-themes.md} | 22 +- docs/how-to-guides/themes/theme-json.md | 24 +- docs/how-to-guides/themes/theme-support.md | 2 +- docs/manifest.json | 70 +- .../block-api/block-metadata.md | 27 +- .../block-api/block-patterns.md | 100 +- .../block-api/block-supports.md | 44 +- .../data/data-core-block-editor.md | 30 +- docs/toc.json | 16 +- gutenberg.php | 2 +- lib/block-editor.php | 24 +- lib/block-patterns.php | 25 +- lib/block-supports/border.php | 38 +- lib/block-supports/typography.php | 4 +- lib/blocks.php | 12 +- lib/class-wp-rest-widget-types-controller.php | 71 +- lib/class-wp-theme-json.php | 10 +- lib/compat.php | 19 +- lib/editor-settings.php | 4 - lib/full-site-editing/edit-site-page.php | 2 +- lib/full-site-editing/page-templates.php | 9 +- lib/full-site-editing/template-loader.php | 16 +- lib/full-site-editing/template-parts.php | 6 - lib/init.php | 3 +- lib/widgets-page.php | 15 +- package-lock.json | 508 +++++-- package.json | 4 +- packages/a11y/CHANGELOG.md | 5 - packages/a11y/README.md | 2 +- packages/a11y/package.json | 5 +- packages/annotations/CHANGELOG.md | 5 - packages/annotations/README.md | 2 +- packages/annotations/package.json | 5 +- packages/api-fetch/CHANGELOG.md | 11 +- packages/api-fetch/README.md | 2 +- packages/api-fetch/package.json | 5 +- packages/autop/CHANGELOG.md | 5 - packages/autop/README.md | 2 +- packages/autop/package.json | 3 - packages/babel-preset-default/CHANGELOG.md | 5 - packages/babel-preset-default/index.js | 4 +- packages/babel-preset-default/package.json | 2 +- .../test/__snapshots__/index.js.snap | 70 +- packages/base-styles/_colors.scss | 1 - packages/base-styles/_z-index.scss | 2 +- packages/base-styles/package.json | 2 +- packages/blob/CHANGELOG.md | 5 - packages/blob/package.json | 3 - packages/block-directory/CHANGELOG.md | 5 - packages/block-directory/README.md | 2 +- packages/block-directory/package.json | 5 +- packages/block-editor/CHANGELOG.md | 5 - packages/block-editor/README.md | 14 +- packages/block-editor/package.json | 5 +- .../src/components/block-controls/fill.js | 35 +- .../block-contextual-toolbar.js | 0 .../block-popover.js | 36 +- .../block-selection-button.js | 0 .../block-list/block-wrapper-elements.js | 26 + .../components/block-list/block-wrapper.js | 31 + .../block-list/block-wrapper.native.js | 11 + .../src/components/block-list/index.js | 66 +- .../components/block-list/insertion-point.js | 419 ++++++ .../src/components/block-list/style.scss | 321 +++- .../block-list/use-block-props/index.js | 10 +- .../use-block-props/use-block-nodes.js | 61 + .../use-block-props/use-block-refs.js | 101 -- ...vent-handlers.js => use-event-handlers.js} | 72 +- .../use-block-props/use-focus-handler.js | 56 - .../use-block-props/use-multi-selection.js | 209 --- .../use-block-props/use-nav-mode-exit.js | 30 +- .../block-list/use-in-between-inserter.js | 150 -- .../block-actions-menu.native.js | 53 +- .../components/block-navigation/dropdown.js | 3 +- .../src/components/block-navigation/index.js | 2 +- .../components/block-pattern-setup/index.js | 9 +- .../components/block-pattern-setup/style.scss | 1 + .../block-settings-menu-controls/index.js | 25 +- .../src/components/block-tools/index.js | 14 - .../components/block-tools/insertion-point.js | 264 ---- .../src/components/block-tools/style.scss | 321 ---- .../default-block-appender/index.js | 49 +- .../default-block-appender/style.scss | 42 +- .../test/__snapshots__/index.js.snap | 45 +- .../default-block-appender/test/index.js | 8 +- .../src/components/iframe/index.js | 2 +- packages/block-editor/src/components/index.js | 1 + .../src/components/index.native.js | 3 +- .../inserter-draggable-blocks/index.js | 1 - .../inserter/hooks/use-insertion-point.js | 58 +- .../src/components/inserter/menu.js | 3 - .../src/components/inserter/quick-inserter.js | 16 +- .../src/components/inserter/search-results.js | 2 - .../inspector-advanced-controls/index.js | 11 +- .../components/inspector-controls/index.js | 11 +- .../components/line-height-control/README.md | 2 +- .../test/__snapshots__/index.js.snap | 2 +- .../provider/block-refs-provider.js | 16 - .../src/components/provider/index.js | 3 +- .../skip-to-selected-block/index.js | 9 +- .../components/spacing-panel-control/index.js | 23 + .../src/components/writing-flow/index.js | 157 +- .../writing-flow/use-multi-selection.js | 182 ++- .../block-editor/src/hooks/color-panel.js | 10 +- packages/block-editor/src/hooks/font-size.js | 46 +- packages/block-editor/src/hooks/index.js | 2 - .../block-editor/src/hooks/index.native.js | 1 - packages/block-editor/src/hooks/padding.js | 32 +- packages/block-editor/src/hooks/spacing.js | 90 -- packages/block-editor/src/hooks/style.js | 51 +- packages/block-editor/src/hooks/test/style.js | 4 - .../src/hooks/use-border-props.js | 73 - packages/block-editor/src/index.js | 3 - packages/block-editor/src/store/actions.js | 43 +- packages/block-editor/src/store/reducer.js | 58 +- packages/block-editor/src/store/selectors.js | 21 +- .../block-editor/src/store/test/actions.js | 21 + .../block-editor/src/store/test/reducer.js | 80 +- .../block-editor/src/store/test/selectors.js | 11 +- packages/block-editor/src/style.scss | 1 - packages/block-editor/src/utils/dom.js | 33 + packages/block-library/CHANGELOG.md | 5 - packages/block-library/README.md | 2 +- packages/block-library/package.json | 5 +- .../block-library/src/archives/block.json | 3 - packages/block-library/src/archives/index.js | 3 + packages/block-library/src/audio/block.json | 4 - packages/block-library/src/audio/edit.js | 5 +- packages/block-library/src/audio/index.js | 9 + packages/block-library/src/block/block.json | 3 - .../block-library/src/block/edit.native.js | 110 +- .../src/block/editor.native.scss | 4 +- packages/block-library/src/block/index.js | 9 + packages/block-library/src/button/block.json | 8 - packages/block-library/src/button/index.js | 11 +- packages/block-library/src/button/style.scss | 8 +- packages/block-library/src/buttons/block.json | 4 - packages/block-library/src/buttons/index.js | 7 +- .../block-library/src/calendar/block.json | 4 - packages/block-library/src/calendar/index.js | 4 + .../block-library/src/categories/block.json | 3 - .../block-library/src/categories/index.js | 3 + packages/block-library/src/code/block.json | 3 - packages/block-library/src/code/index.js | 6 +- packages/block-library/src/column/block.json | 3 - packages/block-library/src/column/index.js | 3 + packages/block-library/src/columns/block.json | 3 - packages/block-library/src/columns/index.js | 6 +- packages/block-library/src/cover/block.json | 3 - packages/block-library/src/cover/index.js | 6 +- packages/block-library/src/embed/block.json | 3 - packages/block-library/src/embed/edit.js | 8 +- packages/block-library/src/embed/index.js | 9 + packages/block-library/src/file/block.json | 4 - packages/block-library/src/file/index.js | 4 + .../block-library/src/freeform/block.json | 3 - packages/block-library/src/freeform/index.js | 3 + packages/block-library/src/gallery/block.json | 4 - packages/block-library/src/gallery/index.js | 4 + packages/block-library/src/group/block.json | 4 - packages/block-library/src/group/index.js | 10 +- packages/block-library/src/heading/block.json | 4 - packages/block-library/src/heading/index.js | 7 +- packages/block-library/src/html/block.json | 4 - packages/block-library/src/html/index.js | 5 +- packages/block-library/src/image/block.json | 12 - packages/block-library/src/image/index.js | 17 +- packages/block-library/src/index.js | 8 +- packages/block-library/src/index.native.js | 14 +- .../src/latest-comments/block.json | 4 - .../src/latest-comments/index.js | 4 + .../block-library/src/latest-posts/block.json | 4 - .../block-library/src/latest-posts/index.js | 4 + .../src/legacy-widget/block.json | 3 - .../edit/convert-to-blocks-button.js | 34 - .../src/legacy-widget/edit/form.js | 140 +- .../src/legacy-widget/edit/index.js | 149 +- .../src/legacy-widget/edit/inspector-card.js | 10 +- .../src/legacy-widget/edit/no-preview.js | 13 - .../src/legacy-widget/edit/preview.js | 95 +- .../src/legacy-widget/edit/use-form.js | 128 -- .../src/legacy-widget/editor.scss | 64 +- .../block-library/src/legacy-widget/index.js | 3 + packages/block-library/src/list/block.json | 4 - packages/block-library/src/list/index.js | 8 + .../block-library/src/loginout/block.json | 4 - packages/block-library/src/loginout/index.js | 4 + .../block-library/src/media-text/block.json | 4 - .../block-library/src/media-text/index.js | 5 +- packages/block-library/src/missing/block.json | 3 - packages/block-library/src/missing/index.js | 3 + packages/block-library/src/more/block.json | 4 - packages/block-library/src/more/index.js | 6 + .../src/navigation-link/block.json | 3 - .../src/navigation-link/editor.scss | 9 +- .../src/navigation-link/index.js | 6 +- .../src/navigation-link/style.scss | 219 ++- .../block-library/src/navigation/block.json | 4 - .../block-library/src/navigation/editor.scss | 23 + .../block-library/src/navigation/index.js | 7 +- .../block-library/src/navigation/style.scss | 282 ---- .../block-library/src/nextpage/block.json | 4 - packages/block-library/src/nextpage/index.js | 4 + .../block-library/src/page-list/block.json | 4 - packages/block-library/src/page-list/index.js | 4 + .../block-library/src/paragraph/block.json | 4 - packages/block-library/src/paragraph/index.js | 5 +- .../block-library/src/post-author/block.json | 3 - .../block-library/src/post-author/index.js | 7 + .../src/post-comment-author/block.json | 4 - .../src/post-comment-author/index.js | 8 + .../src/post-comment-content/block.json | 4 - .../src/post-comment-content/index.js | 4 + .../src/post-comment-date/block.json | 4 - .../src/post-comment-date/index.js | 4 + .../block-library/src/post-comment/block.json | 3 - .../block-library/src/post-comment/index.js | 3 + .../src/post-comments-count/block.json | 3 - .../src/post-comments-count/index.js | 3 + .../src/post-comments-form/block.json | 3 - .../src/post-comments-form/index.js | 3 + .../src/post-comments-link/block.json | 8 +- .../src/post-comments-link/index.js | 5 +- .../src/post-comments/block.json | 3 - .../block-library/src/post-comments/index.js | 3 + .../block-library/src/post-content/block.json | 3 - .../block-library/src/post-content/index.js | 3 + .../block-library/src/post-date/block.json | 3 - packages/block-library/src/post-date/edit.js | 9 +- packages/block-library/src/post-date/index.js | 3 + .../block-library/src/post-excerpt/block.json | 3 - .../block-library/src/post-excerpt/index.js | 3 + .../src/post-featured-image/block.json | 3 - .../src/post-featured-image/index.js | 3 + .../src/post-hierarchical-terms/block.json | 3 - .../src/post-hierarchical-terms/index.js | 6 + .../src/post-navigation-link/block.json | 3 - .../src/post-navigation-link/index.js | 12 + .../block-library/src/post-tags/block.json | 3 - packages/block-library/src/post-tags/index.js | 3 + .../block-library/src/post-title/block.json | 3 - .../block-library/src/post-title/index.js | 5 + .../block-library/src/preformatted/block.json | 3 - .../block-library/src/preformatted/index.js | 6 +- .../block-library/src/pullquote/block.json | 11 - packages/block-library/src/pullquote/index.js | 15 +- .../block-library/src/pullquote/shared.js | 3 +- .../block-library/src/query-loop/block.json | 4 - packages/block-library/src/query-loop/edit.js | 7 +- .../block-library/src/query-loop/index.js | 3 + .../src/query-pagination-next/block.json | 4 - .../src/query-pagination-next/index.js | 4 + .../src/query-pagination-numbers/block.json | 4 - .../src/query-pagination-numbers/index.js | 4 + .../src/query-pagination-previous/block.json | 4 - .../src/query-pagination-previous/index.js | 4 + .../src/query-pagination/block.json | 5 - .../src/query-pagination/index.js | 6 + .../block-library/src/query-title/block.json | 3 - .../block-library/src/query-title/index.js | 7 + packages/block-library/src/query/block.json | 4 - .../block-library/src/query/deprecated.js | 47 - packages/block-library/src/query/index.js | 5 +- packages/block-library/src/query/save.js | 8 +- packages/block-library/src/quote/block.json | 12 - packages/block-library/src/quote/index.js | 15 +- packages/block-library/src/rss/block.json | 4 - packages/block-library/src/rss/index.js | 4 + packages/block-library/src/search/block.json | 4 - .../block-library/src/search/edit.native.js | 108 +- packages/block-library/src/search/index.js | 4 + .../test/__snapshots__/edit.native.js.snap | 36 +- .../block-library/src/separator/block.json | 9 - packages/block-library/src/separator/index.js | 11 + .../block-library/src/shortcode/block.json | 3 - packages/block-library/src/shortcode/index.js | 5 + .../block-library/src/site-logo/block.json | 11 - packages/block-library/src/site-logo/index.js | 13 + .../block-library/src/site-tagline/block.json | 4 - .../block-library/src/site-tagline/index.js | 8 + .../block-library/src/site-title/block.json | 6 - .../block-library/src/site-title/index.js | 5 + .../block-library/src/social-link/block.json | 3 - .../block-library/src/social-link/index.js | 5 + .../block-library/src/social-links/block.json | 9 - .../block-library/src/social-links/index.js | 11 + packages/block-library/src/spacer/block.json | 3 - packages/block-library/src/spacer/index.js | 5 + .../src/table-of-contents/block.json | 4 - .../src/table-of-contents/index.js | 10 + packages/block-library/src/table/block.json | 24 +- .../block-library/src/table/deprecated.js | 250 +--- packages/block-library/src/table/edit.js | 59 +- packages/block-library/src/table/index.js | 12 +- packages/block-library/src/table/save.js | 26 +- packages/block-library/src/table/style.scss | 32 - .../block-library/src/tag-cloud/block.json | 3 - packages/block-library/src/tag-cloud/index.js | 3 + .../src/template-part/block.json | 3 - .../template-part/edit/advanced-controls.js | 33 +- .../edit/get-tag-based-on-area.js | 9 + .../src/template-part/edit/index.js | 20 +- .../template-part/edit/placeholder/index.js | 143 +- .../edit/placeholder/patterns-setup.js | 33 - .../src/template-part/editor.scss | 4 +- .../block-library/src/template-part/index.js | 9 +- .../block-library/src/template-part/index.php | 14 +- .../src/template-part/variations.js | 102 +- .../src/term-description/block.json | 3 - .../src/term-description/index.js | 5 + .../block-library/src/text-columns/block.json | 3 - .../block-library/src/text-columns/index.js | 9 + packages/block-library/src/verse/block.json | 4 - packages/block-library/src/verse/index.js | 7 +- packages/block-library/src/video/block.json | 4 - packages/block-library/src/video/edit.js | 5 +- packages/block-library/src/video/index.js | 7 +- .../CHANGELOG.md | 5 - .../README.md | 2 +- .../package.json | 3 - .../CHANGELOG.md | 5 - .../package.json | 5 +- packages/blocks/CHANGELOG.md | 9 - packages/blocks/README.md | 24 +- packages/blocks/package.json | 5 +- packages/blocks/src/api/i18n-block.json | 17 - packages/blocks/src/api/index.js | 1 - packages/blocks/src/api/registration.js | 115 -- packages/blocks/src/api/test/registration.js | 124 +- packages/browserslist-config/CHANGELOG.md | 5 - packages/browserslist-config/index.js | 1 + packages/components/CHANGELOG.md | 14 - packages/components/README.md | 2 +- packages/components/package.json | 11 +- packages/components/src/box-control/index.js | 2 +- packages/components/src/button/index.js | 3 +- packages/components/src/button/next.js | 79 + .../components/src/card/styles/card-styles.js | 2 +- .../test/__snapshots__/index.js.snap | 74 +- packages/components/src/flex/README.md | 98 ++ packages/components/src/flex/block.js | 30 + packages/components/src/flex/context.ts | 12 - .../components/src/flex/flex-block/README.md | 17 - .../components/src/flex/flex-block/index.js | 2 - .../components/src/flex/flex-item/README.md | 23 - .../components/src/flex/flex-item/index.js | 2 - .../components/src/flex/flex/component.js | 60 - packages/components/src/flex/flex/index.js | 2 - packages/components/src/flex/index.js | 67 +- packages/components/src/flex/item.js | 31 + packages/components/src/flex/next.js | 75 + packages/components/src/flex/stories/index.js | 244 +++- .../components/src/flex/stories/style.css | 7 + .../components/src/flex/styles/flex-styles.js | 98 ++ .../src/flex/test/__snapshots__/index.js.snap | 149 -- .../styles/focal-point-picker-style.js | 2 +- .../components/src/font-size-picker/index.js | 70 +- .../components/src/font-size-picker/next.js | 26 + .../src/font-size-picker/style.scss | 14 - packages/components/src/heading/index.ts | 2 - .../heading/test/__snapshots__/index.js.snap | 57 - packages/components/src/index.js | 8 +- packages/components/src/index.native.js | 1 - .../styles/input-control-styles.js | 4 +- .../navigation/styles/navigation-styles.js | 2 +- .../styles/resize-tooltip.styles.js | 5 +- .../src/resizable-box/resize-tooltip/utils.js | 3 +- .../components/src/style-provider/index.js | 6 +- .../src/style-provider/index.native.js | 3 - packages/components/src/style.scss | 1 + packages/components/src/text/README.md | 253 +--- .../components/src/text/get-line-height.ts | 39 - packages/components/src/text/index.js | 23 +- packages/components/src/text/next.js | 37 + packages/components/src/text/stories/index.js | 63 +- .../components/src/text/styles/emotion-css.js | 6 + .../components/src/text/styles/font-family.js | 2 + .../{text-mixins.native.js => text-mixins.js} | 0 .../src/text/test/__snapshots__/index.js.snap | 47 - packages/components/src/text/test/index.js | 191 +-- .../src/ui/__storybook-utils/example-grid.js | 22 +- .../src/ui/__storybook-utils/page.js | 18 +- .../src/ui/base-button/component.js | 166 +++ .../components/src/ui/base-button/hook.js | 126 ++ .../components/src/ui/base-button/index.js | 3 + .../src/ui/base-button/loading-overlay.js | 22 + .../components/src/ui/base-button/styles.js | 243 ++++ .../test/__snapshots__/index.js.snap | 243 ++++ .../src/ui/base-button/test/index.js | 16 + .../components/src/ui/base-button/types.ts | 156 ++ .../components/src/ui/button-group/README.md | 40 + .../src/ui/button-group/component.js | 124 ++ .../components/src/ui/button-group/context.js | 10 + .../components/src/ui/button-group/index.js | 2 + .../src/ui/button-group/stories/index.js | 36 + .../components/src/ui/button-group/styles.js | 18 + .../test/__snapshots__/index.js.snap | 487 +++++++ .../src/ui/button-group/test/index.js | 23 + .../components/src/ui/button-group/types.ts | 56 + packages/components/src/ui/button/README.md | 159 ++ .../components/src/ui/button/component.js | 146 ++ packages/components/src/ui/button/index.js | 1 + .../components/src/ui/button/stories/index.js | 67 + packages/components/src/ui/button/styles.js | 305 ++++ .../button/test/__snapshots__/index.js.snap | 689 +++++++++ .../components/src/ui/button/test/index.js | 155 ++ packages/components/src/ui/card/README.md | 3 +- packages/components/src/ui/card/body.js | 6 +- packages/components/src/ui/card/component.js | 18 +- packages/components/src/ui/card/footer.js | 8 +- packages/components/src/ui/card/header.js | 8 +- packages/components/src/ui/card/hook.js | 6 +- packages/components/src/ui/card/inner-body.js | 6 +- .../components/src/ui/card/stories/index.js | 11 +- packages/components/src/ui/card/styles.js | 37 +- .../ui/card/test/__snapshots__/index.js.snap | 351 ++++- .../src/ui/context/context-connect.js | 18 +- .../context/get-styled-class-name-from-key.ts | 18 - packages/components/src/ui/context/index.js | 7 +- .../src/ui/context/polymorphic-component.ts | 7 +- .../context-system-provider.js.snap | 6 +- .../src/ui/context/use-context-system.js | 44 +- .../src/ui/control-group/component.js | 6 +- .../components/src/ui/control-group/hook.js | 8 +- .../src/ui/control-group/stories/index.js | 49 + .../components/src/ui/control-group/styles.js | 2 +- .../test/__snapshots__/index.js.snap | 1293 ++++++++++++++++- .../src/ui/control-group/test/index.js | 15 +- .../components/src/ui/control-group/types.ts | 2 +- .../components/src/ui/control-label/hook.js | 10 +- .../src/ui/control-label/stories/index.js | 2 +- .../components/src/ui/control-label/styles.js | 16 +- .../test/__snapshots__/index.js.snap | 148 +- .../components/src/ui/control-label/types.ts | 2 +- .../components/src/ui/divider/component.tsx | 16 +- packages/components/src/ui/divider/styles.ts | 9 +- .../divider/test/__snapshots__/index.js.snap | 25 +- packages/components/src/ui/elevation/hook.js | 25 +- .../src/ui/elevation/stories/index.js | 12 +- .../components/src/ui/elevation/styles.js | 2 +- .../test/__snapshots__/index.js.snap | 236 ++- .../src/{flex => ui}/flex/README.md | 21 +- .../component.js => ui/flex/flex-block.js} | 4 +- .../component.js => ui/flex/flex-item.js} | 4 +- packages/components/src/ui/flex/flex.js | 38 + packages/components/src/ui/flex/index.js | 7 + .../components/src/ui/flex/stories/index.js | 30 + .../components/src/{ => ui}/flex/styles.js | 2 +- .../ui/flex/test/__snapshots__/index.js.snap | 243 ++++ .../src/{ => ui}/flex/test/index.js | 6 +- .../components/src/{ => ui}/flex/types.ts | 14 +- .../hook.js => ui/flex/use-flex-block.js} | 10 +- .../hook.js => ui/flex/use-flex-item.js} | 13 +- .../flex/hook.js => ui/flex/use-flex.js} | 55 +- .../src/ui/font-size-control/README.md | 5 + .../ui/font-size-control/font-size-control.js | 78 + .../src/ui/font-size-control/index.js | 2 + .../src/ui/font-size-control/select.js | 100 ++ .../src/ui/font-size-control/slider.js | 55 + .../src/ui/font-size-control/styles.js | 11 + .../use-font-size-control.js | 113 ++ .../src/ui/font-size-control/utils.js | 105 ++ .../src/ui/form-group/form-group-content.js | 13 +- .../src/ui/form-group/form-group-help.js | 9 +- .../src/ui/form-group/form-group-label.js | 4 +- .../src/ui/form-group/form-group-styles.js | 2 +- .../src/ui/form-group/form-group.js | 8 +- .../src/ui/form-group/stories/index.js | 4 +- .../test/__snapshots__/index.js.snap | 156 +- .../src/ui/form-group/use-form-group.js | 6 +- packages/components/src/ui/grid/hook.js | 10 +- packages/components/src/ui/grid/test/grid.js | 6 +- .../components/src/ui/h-stack/component.js | 2 +- packages/components/src/ui/h-stack/hook.js | 24 +- .../h-stack/test/__snapshots__/index.js.snap | 198 ++- packages/components/src/ui/h-stack/types.ts | 2 +- packages/components/src/ui/h-stack/utils.js | 2 +- .../components/src/{ => ui}/heading/README.md | 6 +- .../src/{ => ui}/heading/component.ts | 2 +- .../components/src/{ => ui}/heading/hook.ts | 19 +- packages/components/src/ui/heading/index.ts | 3 + .../src/{ => ui}/heading/stories/index.js | 6 +- .../heading/test/__snapshots__/index.js.snap | 87 ++ .../src/{ => ui}/heading/test/index.js | 2 +- packages/components/src/ui/index.js | 5 + .../components/src/ui/popover/component.js | 10 +- packages/components/src/ui/popover/content.js | 6 +- .../src/ui/popover/stories/index.js | 6 +- packages/components/src/ui/popover/styles.js | 11 +- .../popover/test/__snapshots__/index.js.snap | 235 ++- .../components/src/ui/popover/test/index.js | 2 +- packages/components/src/ui/portal/README.md | 17 + .../components/src/ui/portal/component.js | 37 + packages/components/src/ui/portal/index.js | 1 + .../components/src/ui/portal/test/index.js | 33 + packages/components/src/ui/scrollable/hook.js | 6 +- .../src/ui/scrollable/stories/index.js | 4 +- .../components/src/ui/scrollable/styles.js | 12 +- .../test/__snapshots__/index.js.snap | 56 +- .../components/src/ui/shortcut/component.tsx | 9 +- .../shortcut/test/__snapshots__/index.js.snap | 6 +- packages/components/src/ui/spinner/README.md | 2 +- .../components/src/ui/spinner/component.js | 14 +- packages/components/src/ui/spinner/styles.js | 6 +- .../spinner/test/__snapshots__/index.js.snap | 128 +- packages/components/src/ui/surface/README.md | 2 +- .../components/src/ui/surface/component.js | 2 +- packages/components/src/ui/surface/hook.js | 20 +- .../src/ui/surface/stories/index.js | 19 +- packages/components/src/ui/surface/styles.js | 145 +- .../surface/test/__snapshots__/index.js.snap | 86 +- packages/components/src/ui/text/README.md | 237 +++ .../components/src/{ => ui}/text/component.js | 4 +- packages/components/src/{ => ui}/text/hook.js | 64 +- packages/components/src/ui/text/index.js | 2 + .../components/src/ui/text/stories/index.js | 53 + .../components/src/{ => ui}/text/styles.js | 20 +- .../ui/text/test/__snapshots__/text.js.snap | 99 ++ packages/components/src/ui/text/test/text.js | 144 ++ .../components/src/{ => ui}/text/types.ts | 0 .../components/src/{ => ui}/text/utils.js | 3 + .../src/ui/tooltip-button/README.md | 24 + .../src/ui/tooltip-button/component.tsx | 95 ++ .../components/src/ui/tooltip-button/index.js | 2 + .../src/ui/tooltip-button/stories/index.js | 74 + .../src/ui/tooltip-button/test/index.js | 32 + .../components/src/ui/tooltip/component.js | 4 +- packages/components/src/ui/tooltip/content.js | 6 +- .../src/ui/tooltip/stories/index.js | 2 +- packages/components/src/ui/tooltip/styles.js | 16 +- .../tooltip/test/__snapshots__/index.js.snap | 63 +- .../components/src/ui/tooltip/test/index.js | 2 +- .../src/{ => ui}/truncate/README.md | 8 +- .../src/{ => ui}/truncate/component.js | 4 +- .../components/src/{ => ui}/truncate/hook.js | 6 +- .../components/src/{ => ui}/truncate/index.js | 0 .../src/{ => ui}/truncate/stories/index.js | 0 .../src/{ => ui}/truncate/styles.js | 2 +- .../index.js => ui/truncate/test/truncate.js} | 0 .../components/src/{ => ui}/truncate/types.ts | 0 .../components/src/{ => ui}/truncate/utils.js | 0 .../src/ui/utils/create-component.js | 44 + .../src/ui/utils/create-component.tsx | 61 - packages/components/src/ui/utils/font-size.ts | 70 - .../components/src/ui/utils/get-high-dpi.ts | 19 - .../src/ui/utils/get-valid-children.ts | 25 - packages/components/src/ui/utils/space.ts | 16 - .../src/ui/utils/test/create-component.js | 5 +- packages/components/src/ui/utils/types.ts | 13 + .../src/ui/utils/use-responsive-value.ts | 76 - packages/components/src/ui/v-stack/hook.js | 8 +- .../v-stack/test/__snapshots__/index.js.snap | 201 ++- packages/components/src/ui/view/component.js | 4 +- .../ui/view/test/__snapshots__/index.js.snap | 139 +- .../src/ui/visually-hidden/README.md | 17 + .../src/{ => ui}/visually-hidden/component.js | 6 +- .../src/{ => ui}/visually-hidden/hook.js | 8 +- .../src/ui/visually-hidden/index.js | 2 + .../src/ui/visually-hidden/stories/index.js | 42 + .../src/{ => ui}/visually-hidden/styles.js | 9 +- .../test/__snapshots__/index.js.snap | 68 + .../{ => ui}/visually-hidden/test/index.js | 2 +- .../components/src/utils/colors-values.js | 1 - .../components/src/utils/config-values.js | 54 - packages/components/src/utils/config.js | 2 +- packages/components/src/utils/style-mixins.js | 2 - packages/components/src/utils/z-index.js | 2 - .../components/src/visually-hidden/README.md | 14 +- .../components/src/visually-hidden/index.js | 48 +- .../components/src/visually-hidden/next.js | 31 + .../src/visually-hidden/stories/index.js | 2 +- .../components/src/visually-hidden/style.scss | 30 + .../test/__snapshots__/index.js.snap | 45 - .../components/src/visually-hidden/utils.js | 31 + packages/components/tsconfig.json | 1 - packages/compose/CHANGELOG.md | 5 - packages/compose/README.md | 31 +- packages/compose/package.json | 5 +- .../src/higher-order/if-condition/index.js | 26 + .../src/higher-order/if-condition/index.tsx | 39 - .../compose/src/higher-order/pure/index.js | 46 + .../compose/src/higher-order/pure/index.tsx | 50 - .../compose/src/hooks/use-ref-effect/index.js | 6 +- .../create-higher-order-component/index.js | 36 + .../create-higher-order-component/index.ts | 48 - packages/compose/tsconfig.json | 12 - packages/core-data/CHANGELOG.md | 8 - packages/core-data/README.md | 2 +- packages/core-data/package.json | 5 +- packages/core-data/src/actions.js | 43 - packages/core-data/src/entities.js | 12 - packages/core-data/src/resolvers.js | 2 +- packages/core-data/src/test/resolvers.js | 56 +- packages/create-block/CHANGELOG.md | 2 - .../lib/templates/es5/index.js.mustache | 4 +- .../templates/esnext/src/index.js.mustache | 4 +- packages/create-block/package.json | 2 +- packages/customize-widgets/CHANGELOG.md | 2 +- packages/customize-widgets/README.md | 2 +- packages/customize-widgets/package.json | 3 - .../components/sidebar-block-editor/index.js | 18 +- packages/data-controls/CHANGELOG.md | 5 - packages/data-controls/README.md | 2 +- packages/data-controls/package.json | 5 +- packages/data/CHANGELOG.md | 12 - packages/data/README.md | 4 +- packages/data/package.json | 7 +- packages/data/src/redux-store/test/index.js | 4 +- packages/date/CHANGELOG.md | 5 - packages/date/README.md | 2 +- packages/date/package.json | 3 - packages/deprecated/CHANGELOG.md | 5 - packages/deprecated/README.md | 4 +- packages/deprecated/package.json | 5 +- packages/docgen/CHANGELOG.md | 6 +- packages/docgen/lib/get-jsdoc-from-token.js | 2 - packages/docgen/lib/markdown/formatter.js | 4 +- packages/docgen/package.json | 2 +- .../test/get-intermediate-representation.js | 8 - packages/dom-ready/CHANGELOG.md | 5 - packages/dom-ready/README.md | 2 +- packages/dom-ready/package.json | 3 - packages/dom/CHANGELOG.md | 9 +- packages/dom/README.md | 12 - packages/dom/package.json | 5 +- .../dom/src/dom/get-rectangle-from-range.js | 40 +- packages/dom/src/dom/index.js | 1 - packages/dom/src/dom/is-edge.js | 6 +- packages/dom/src/dom/is-rtl.js | 15 - .../src/dom/place-caret-at-horizontal-edge.js | 5 +- packages/e2e-test-utils/README.md | 13 - packages/e2e-test-utils/package.json | 2 +- packages/e2e-test-utils/src/get-all-blocks.js | 20 +- packages/e2e-test-utils/src/wp-data-select.js | 11 - packages/e2e-tests/experimental-features.js | 52 +- .../fixtures/blocks/core__query.html | 4 +- .../fixtures/blocks/core__query.json | 2 +- .../fixtures/blocks/core__query.parsed.json | 6 +- .../blocks/core__query.serialized.html | 4 +- .../blocks/core__query__deprecated-1.html | 1 - .../blocks/core__query__deprecated-1.json | 29 - .../core__query__deprecated-1.parsed.json | 9 - .../core__query__deprecated-1.serialized.html | 3 - .../blocks/core__table__deprecated-1.html | 6 +- .../blocks/core__table__deprecated-1.json | 10 +- .../core__table__deprecated-1.parsed.json | 8 +- .../core__table__deprecated-1.serialized.html | 4 +- .../blocks/core__table__deprecated-2.html | 3 - .../blocks/core__table__deprecated-2.json | 145 -- .../core__table__deprecated-2.parsed.json | 11 - .../core__table__deprecated-2.serialized.html | 3 - packages/e2e-tests/package.json | 4 +- .../specs/editor/blocks/list.test.js | 1 - .../editor/various/font-size-picker.test.js | 1 - .../specs/editor/various/undo.test.js | 10 +- .../experiments/customizing-widgets.test.js | 427 ------ .../experiments/multi-entity-saving.test.js | 31 - .../specs/widgets/adding-widgets.test.js | 93 +- packages/edit-navigation/CHANGELOG.md | 2 - packages/edit-navigation/README.md | 2 +- packages/edit-navigation/package.json | 3 - .../src/components/editor/style.scss | 4 +- .../inspector-additions/delete-menu.js | 4 +- .../components/inspector-additions/index.js | 17 +- .../components/inspector-additions/style.scss | 2 +- packages/edit-navigation/src/store/actions.js | 4 +- packages/edit-post/CHANGELOG.md | 5 - packages/edit-post/README.md | 4 +- packages/edit-post/package.json | 5 +- .../header/fullscreen-mode-close/style.scss | 3 +- .../components/header/header-toolbar/index.js | 7 +- .../header/header-toolbar/index.native.js | 28 +- .../src/components/layout/actions-panel.js | 7 +- .../edit-post/src/components/layout/index.js | 12 +- .../src/components/layout/style.scss | 6 +- .../sidebar/settings-sidebar/index.js | 7 +- .../components/visual-editor/header.native.js | 3 +- .../src/components/visual-editor/style.scss | 14 +- .../src/hooks/validate-multiple-use/index.js | 8 +- packages/edit-post/src/store/actions.js | 8 +- packages/edit-post/src/store/reducer.js | 8 +- packages/edit-post/src/store/selectors.js | 14 +- packages/edit-site/CHANGELOG.md | 7 +- packages/edit-site/README.md | 2 +- packages/edit-site/package.json | 5 +- .../block-editor/block-inspector-button.js | 63 - .../src/components/block-editor/index.js | 26 +- .../editor/global-styles-provider.js | 26 +- .../editor/global-styles-renderer.js | 8 +- .../edit-site/src/components/editor/index.js | 45 +- .../src/components/editor/style.scss | 10 - .../edit-site/src/components/editor/utils.js | 8 +- .../header/document-actions/index.js | 22 +- .../edit-site/src/components/header/index.js | 5 - .../src/components/header/undo-redo/redo.js | 11 +- .../src/components/header/undo-redo/undo.js | 11 +- .../components/keyboard-shortcuts/index.js | 39 - .../content-navigation-item.js | 11 +- .../edit-site/src/components/notices/index.js | 24 + .../src/components/notices/style.scss | 9 + .../secondary-sidebar/inserter-sidebar.js | 15 +- .../src/components/sidebar/spacing-panel.js | 59 +- .../src/components/template-details/index.js | 6 +- .../convert-to-regular.js | 9 +- packages/edit-site/src/store/actions.js | 16 +- packages/edit-site/src/store/reducer.js | 16 +- packages/edit-site/src/store/selectors.js | 14 +- packages/edit-site/src/style.scss | 1 + packages/edit-widgets/CHANGELOG.md | 7 +- packages/edit-widgets/README.md | 2 +- packages/edit-widgets/package.json | 5 +- .../src/components/header/index.js | 3 +- .../src/components/header/undo-redo/redo.js | 11 +- .../src/components/header/undo-redo/undo.js | 11 +- .../src/components/sidebar/index.js | 12 +- .../style.scss | 1 - .../use-widget-library-insertion-point.js | 3 +- packages/edit-widgets/src/store/actions.js | 8 +- packages/edit-widgets/src/store/reducer.js | 8 +- packages/edit-widgets/src/store/selectors.js | 2 +- packages/edit-widgets/src/style.scss | 2 +- packages/editor/CHANGELOG.md | 5 - packages/editor/README.md | 2 +- packages/editor/package.json | 5 +- .../src/components/document-outline/check.js | 3 +- .../src/components/document-outline/index.js | 3 +- .../src/components/editor-history/redo.js | 15 +- .../src/components/editor-history/undo.js | 15 +- .../entity-record-item.js | 7 +- .../entities-saved-states/entity-type-list.js | 8 +- .../components/entities-saved-states/index.js | 103 +- .../components/post-featured-image/index.js | 8 +- .../test/__snapshots__/index.js.snap | 8 +- .../editor/src/components/post-title/index.js | 5 +- .../src/components/provider/index.native.js | 5 +- .../src/components/table-of-contents/index.js | 3 +- .../src/components/table-of-contents/panel.js | 3 +- .../template-validation-notice/index.js | 5 +- packages/editor/src/store/selectors.js | 13 +- packages/editor/src/store/test/selectors.js | 10 +- .../src/store/utils/get-template-part-icon.js | 15 +- packages/element/CHANGELOG.md | 5 - packages/element/README.md | 2 +- packages/element/package.json | 5 +- packages/env/CHANGELOG.md | 2 - packages/env/lib/download-sources.js | 4 +- packages/env/package.json | 2 +- packages/escape-html/CHANGELOG.md | 5 - packages/escape-html/README.md | 2 +- packages/escape-html/package.json | 3 - packages/eslint-plugin/package.json | 2 +- packages/format-library/CHANGELOG.md | 5 - packages/format-library/README.md | 2 +- packages/format-library/package.json | 5 +- .../format-library/src/text-color/inline.js | 3 +- packages/hooks/CHANGELOG.md | 5 - packages/hooks/README.md | 2 +- packages/hooks/package.json | 5 +- packages/html-entities/CHANGELOG.md | 5 - packages/html-entities/README.md | 2 +- packages/html-entities/package.json | 3 - packages/i18n/CHANGELOG.md | 11 +- packages/i18n/README.md | 2 +- packages/i18n/package.json | 5 +- packages/icons/CHANGELOG.md | 5 - packages/icons/README.md | 2 +- packages/icons/package.json | 5 +- packages/interface/CHANGELOG.md | 5 - packages/interface/README.md | 2 +- packages/interface/package.json | 5 +- packages/is-shallow-equal/CHANGELOG.md | 5 - packages/is-shallow-equal/package.json | 5 +- packages/keyboard-shortcuts/CHANGELOG.md | 5 - packages/keyboard-shortcuts/README.md | 4 +- packages/keyboard-shortcuts/package.json | 5 +- packages/keycodes/CHANGELOG.md | 5 - packages/keycodes/README.md | 14 +- packages/keycodes/package.json | 5 +- packages/lazy-import/README.md | 2 +- packages/list-reusable-blocks/CHANGELOG.md | 5 - packages/list-reusable-blocks/README.md | 2 +- packages/list-reusable-blocks/package.json | 5 +- packages/media-utils/CHANGELOG.md | 5 - packages/media-utils/README.md | 2 +- packages/media-utils/package.json | 5 +- packages/notices/CHANGELOG.md | 5 - packages/notices/README.md | 2 +- packages/notices/package.json | 5 +- packages/nux/CHANGELOG.md | 5 - packages/nux/README.md | 2 +- packages/nux/package.json | 5 +- packages/plugins/CHANGELOG.md | 5 - packages/plugins/README.md | 2 +- packages/plugins/package.json | 5 +- packages/postcss-plugins-preset/CHANGELOG.md | 2 - packages/postcss-plugins-preset/package.json | 2 +- packages/postcss-themes/CHANGELOG.md | 2 - packages/postcss-themes/package.json | 2 +- packages/primitives/CHANGELOG.md | 5 - packages/primitives/README.md | 2 +- packages/primitives/package.json | 5 +- packages/priority-queue/CHANGELOG.md | 5 - packages/priority-queue/README.md | 2 +- packages/priority-queue/package.json | 3 - .../package.json | 2 +- packages/react-i18n/CHANGELOG.md | 12 - packages/react-i18n/README.md | 2 +- packages/react-i18n/package.json | 5 +- .../react-native-aztec/android/build.gradle | 58 +- .../android/settings.gradle | 6 + packages/react-native-aztec/package.json | 2 +- .../react-native-bridge/android/build.gradle | 4 + .../android/publish-aztec-and-bridge.sh | 17 +- .../android/react-native-bridge/build.gradle | 60 +- .../android/settings.gradle | 6 + packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/CHANGELOG.md | 5 - .../gutenberg-editor-search.test.js | 179 --- .../__device-tests__/helpers/test-data.js | 2 - .../__device-tests__/pages/editor-page.js | 74 - .../android/app/build.gradle | 2 +- packages/react-native-editor/ios/Podfile.lock | 8 +- packages/react-native-editor/package.json | 4 +- packages/redux-routine/CHANGELOG.md | 5 - packages/redux-routine/package.json | 3 - packages/reusable-blocks/CHANGELOG.md | 5 - packages/reusable-blocks/README.md | 2 +- packages/reusable-blocks/package.json | 5 +- .../reusable-blocks-menu-items/index.js | 3 +- .../reusable-blocks-manage-button.js | 7 +- .../reusable-blocks/src/store/controls.js | 13 +- packages/rich-text/CHANGELOG.md | 5 - packages/rich-text/README.md | 4 +- packages/rich-text/package.json | 5 +- packages/rich-text/src/component/index.js | 129 +- .../src/component/use-format-boundaries.js | 144 -- packages/scripts/CHANGELOG.md | 18 - packages/scripts/README.md | 2 +- packages/scripts/config/.prettierignore | 2 - packages/scripts/config/jest-e2e.config.js | 4 - .../jest-environment-puppeteer/index.js | 4 +- .../config/jest-github-actions-reporter.js | 64 - packages/scripts/config/jest-unit.config.js | 5 - packages/scripts/package.json | 5 +- packages/scripts/scripts/format.js | 8 +- packages/server-side-render/CHANGELOG.md | 5 - packages/server-side-render/README.md | 2 +- packages/server-side-render/package.json | 5 +- packages/shortcode/CHANGELOG.md | 5 - packages/shortcode/README.md | 2 +- packages/shortcode/package.json | 3 - packages/token-list/CHANGELOG.md | 5 - packages/token-list/README.md | 2 +- packages/token-list/package.json | 5 +- packages/url/CHANGELOG.md | 5 - packages/url/README.md | 2 +- packages/url/package.json | 3 - packages/viewport/CHANGELOG.md | 5 - packages/viewport/README.md | 4 +- packages/viewport/package.json | 5 +- packages/warning/CHANGELOG.md | 5 - packages/warning/README.md | 2 +- packages/warning/package.json | 3 - packages/wordcount/CHANGELOG.md | 5 - packages/wordcount/README.md | 2 +- packages/wordcount/package.json | 3 - ...lass-rest-widget-types-controller-test.php | 40 - phpunit/class-wp-theme-json-test.php | 246 +++- readme.txt | 2 +- test/unit/jest.config.js | 4 - 889 files changed, 14930 insertions(+), 10226 deletions(-) delete mode 100644 .prettierignore delete mode 100644 docs/getting-started/full-site-editing.md rename docs/how-to-guides/{themes/create-block-theme.md => block-based-theme/README.md} (79%) create mode 100644 docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md rename docs/how-to-guides/themes/{block-theme-overview.md => block-based-themes.md} (76%) rename packages/block-editor/src/components/{block-tools => block-list}/block-contextual-toolbar.js (100%) rename packages/block-editor/src/components/{block-tools => block-list}/block-popover.js (92%) rename packages/block-editor/src/components/{block-tools => block-list}/block-selection-button.js (100%) create mode 100644 packages/block-editor/src/components/block-list/block-wrapper-elements.js create mode 100644 packages/block-editor/src/components/block-list/block-wrapper.js create mode 100644 packages/block-editor/src/components/block-list/block-wrapper.native.js create mode 100644 packages/block-editor/src/components/block-list/insertion-point.js create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js delete mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js rename packages/block-editor/src/components/block-list/use-block-props/{use-selected-block-event-handlers.js => use-event-handlers.js} (51%) delete mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js delete mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js delete mode 100644 packages/block-editor/src/components/block-list/use-in-between-inserter.js delete mode 100644 packages/block-editor/src/components/block-tools/index.js delete mode 100644 packages/block-editor/src/components/block-tools/insertion-point.js delete mode 100644 packages/block-editor/src/components/block-tools/style.scss delete mode 100644 packages/block-editor/src/components/provider/block-refs-provider.js create mode 100644 packages/block-editor/src/components/spacing-panel-control/index.js delete mode 100644 packages/block-editor/src/hooks/spacing.js delete mode 100644 packages/block-editor/src/hooks/use-border-props.js delete mode 100644 packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js delete mode 100644 packages/block-library/src/legacy-widget/edit/no-preview.js delete mode 100644 packages/block-library/src/legacy-widget/edit/use-form.js delete mode 100644 packages/block-library/src/query/deprecated.js create mode 100644 packages/block-library/src/template-part/edit/get-tag-based-on-area.js delete mode 100644 packages/block-library/src/template-part/edit/placeholder/patterns-setup.js delete mode 100644 packages/blocks/src/api/i18n-block.json create mode 100644 packages/components/src/button/next.js create mode 100644 packages/components/src/flex/README.md create mode 100644 packages/components/src/flex/block.js delete mode 100644 packages/components/src/flex/context.ts delete mode 100644 packages/components/src/flex/flex-block/README.md delete mode 100644 packages/components/src/flex/flex-block/index.js delete mode 100644 packages/components/src/flex/flex-item/README.md delete mode 100644 packages/components/src/flex/flex-item/index.js delete mode 100644 packages/components/src/flex/flex/component.js delete mode 100644 packages/components/src/flex/flex/index.js create mode 100644 packages/components/src/flex/item.js create mode 100644 packages/components/src/flex/next.js create mode 100644 packages/components/src/flex/stories/style.css create mode 100644 packages/components/src/flex/styles/flex-styles.js delete mode 100644 packages/components/src/flex/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/font-size-picker/next.js delete mode 100644 packages/components/src/heading/index.ts delete mode 100644 packages/components/src/heading/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/style-provider/index.native.js delete mode 100644 packages/components/src/text/get-line-height.ts create mode 100644 packages/components/src/text/next.js create mode 100644 packages/components/src/text/styles/emotion-css.js create mode 100644 packages/components/src/text/styles/font-family.js rename packages/components/src/text/styles/{text-mixins.native.js => text-mixins.js} (100%) delete mode 100644 packages/components/src/text/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/base-button/component.js create mode 100644 packages/components/src/ui/base-button/hook.js create mode 100644 packages/components/src/ui/base-button/index.js create mode 100644 packages/components/src/ui/base-button/loading-overlay.js create mode 100644 packages/components/src/ui/base-button/styles.js create mode 100644 packages/components/src/ui/base-button/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/base-button/test/index.js create mode 100644 packages/components/src/ui/base-button/types.ts create mode 100644 packages/components/src/ui/button-group/README.md create mode 100644 packages/components/src/ui/button-group/component.js create mode 100644 packages/components/src/ui/button-group/context.js create mode 100644 packages/components/src/ui/button-group/index.js create mode 100644 packages/components/src/ui/button-group/stories/index.js create mode 100644 packages/components/src/ui/button-group/styles.js create mode 100644 packages/components/src/ui/button-group/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/button-group/test/index.js create mode 100644 packages/components/src/ui/button-group/types.ts create mode 100644 packages/components/src/ui/button/README.md create mode 100644 packages/components/src/ui/button/component.js create mode 100644 packages/components/src/ui/button/index.js create mode 100644 packages/components/src/ui/button/stories/index.js create mode 100644 packages/components/src/ui/button/styles.js create mode 100644 packages/components/src/ui/button/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/button/test/index.js delete mode 100644 packages/components/src/ui/context/get-styled-class-name-from-key.ts create mode 100644 packages/components/src/ui/control-group/stories/index.js rename packages/components/src/{flex => ui}/flex/README.md (76%) rename packages/components/src/{flex/flex-block/component.js => ui/flex/flex-block.js} (79%) rename packages/components/src/{flex/flex-item/component.js => ui/flex/flex-item.js} (79%) create mode 100644 packages/components/src/ui/flex/flex.js create mode 100644 packages/components/src/ui/flex/index.js create mode 100644 packages/components/src/ui/flex/stories/index.js rename packages/components/src/{ => ui}/flex/styles.js (94%) create mode 100644 packages/components/src/ui/flex/test/__snapshots__/index.js.snap rename packages/components/src/{ => ui}/flex/test/index.js (90%) rename packages/components/src/{ => ui}/flex/types.ts (92%) rename packages/components/src/{flex/flex-block/hook.js => ui/flex/use-flex-block.js} (50%) rename packages/components/src/{flex/flex-item/hook.js => ui/flex/use-flex-item.js} (53%) rename packages/components/src/{flex/flex/hook.js => ui/flex/use-flex.js} (54%) create mode 100644 packages/components/src/ui/font-size-control/README.md create mode 100755 packages/components/src/ui/font-size-control/font-size-control.js create mode 100644 packages/components/src/ui/font-size-control/index.js create mode 100755 packages/components/src/ui/font-size-control/select.js create mode 100755 packages/components/src/ui/font-size-control/slider.js create mode 100755 packages/components/src/ui/font-size-control/styles.js create mode 100755 packages/components/src/ui/font-size-control/use-font-size-control.js create mode 100755 packages/components/src/ui/font-size-control/utils.js rename packages/components/src/{ => ui}/heading/README.md (73%) rename packages/components/src/{ => ui}/heading/component.ts (90%) rename packages/components/src/{ => ui}/heading/hook.ts (77%) create mode 100644 packages/components/src/ui/heading/index.ts rename packages/components/src/{ => ui}/heading/stories/index.js (81%) create mode 100644 packages/components/src/ui/heading/test/__snapshots__/index.js.snap rename packages/components/src/{ => ui}/heading/test/index.js (97%) create mode 100644 packages/components/src/ui/portal/README.md create mode 100644 packages/components/src/ui/portal/component.js create mode 100644 packages/components/src/ui/portal/index.js create mode 100644 packages/components/src/ui/portal/test/index.js create mode 100644 packages/components/src/ui/text/README.md rename packages/components/src/{ => ui}/text/component.js (80%) rename packages/components/src/{ => ui}/text/hook.js (70%) create mode 100644 packages/components/src/ui/text/index.js create mode 100644 packages/components/src/ui/text/stories/index.js rename packages/components/src/{ => ui}/text/styles.js (56%) create mode 100644 packages/components/src/ui/text/test/__snapshots__/text.js.snap create mode 100644 packages/components/src/ui/text/test/text.js rename packages/components/src/{ => ui}/text/types.ts (100%) rename packages/components/src/{ => ui}/text/utils.js (98%) create mode 100644 packages/components/src/ui/tooltip-button/README.md create mode 100644 packages/components/src/ui/tooltip-button/component.tsx create mode 100644 packages/components/src/ui/tooltip-button/index.js create mode 100644 packages/components/src/ui/tooltip-button/stories/index.js create mode 100644 packages/components/src/ui/tooltip-button/test/index.js rename packages/components/src/{ => ui}/truncate/README.md (90%) rename packages/components/src/{ => ui}/truncate/component.js (85%) rename packages/components/src/{ => ui}/truncate/hook.js (86%) rename packages/components/src/{ => ui}/truncate/index.js (100%) rename packages/components/src/{ => ui}/truncate/stories/index.js (100%) rename packages/components/src/{ => ui}/truncate/styles.js (80%) rename packages/components/src/{truncate/test/index.js => ui/truncate/test/truncate.js} (100%) rename packages/components/src/{ => ui}/truncate/types.ts (100%) rename packages/components/src/{ => ui}/truncate/utils.js (100%) create mode 100644 packages/components/src/ui/utils/create-component.js delete mode 100644 packages/components/src/ui/utils/create-component.tsx delete mode 100644 packages/components/src/ui/utils/font-size.ts delete mode 100644 packages/components/src/ui/utils/get-high-dpi.ts delete mode 100644 packages/components/src/ui/utils/get-valid-children.ts delete mode 100644 packages/components/src/ui/utils/space.ts delete mode 100644 packages/components/src/ui/utils/use-responsive-value.ts create mode 100644 packages/components/src/ui/visually-hidden/README.md rename packages/components/src/{ => ui}/visually-hidden/component.js (76%) rename packages/components/src/{ => ui}/visually-hidden/hook.js (63%) create mode 100644 packages/components/src/ui/visually-hidden/index.js create mode 100644 packages/components/src/ui/visually-hidden/stories/index.js rename packages/components/src/{ => ui}/visually-hidden/styles.js (77%) create mode 100644 packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap rename packages/components/src/{ => ui}/visually-hidden/test/index.js (92%) delete mode 100644 packages/components/src/utils/z-index.js create mode 100644 packages/components/src/visually-hidden/next.js create mode 100644 packages/components/src/visually-hidden/style.scss delete mode 100644 packages/components/src/visually-hidden/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/visually-hidden/utils.js create mode 100644 packages/compose/src/higher-order/if-condition/index.js delete mode 100644 packages/compose/src/higher-order/if-condition/index.tsx create mode 100644 packages/compose/src/higher-order/pure/index.js delete mode 100644 packages/compose/src/higher-order/pure/index.tsx create mode 100644 packages/compose/src/utils/create-higher-order-component/index.js delete mode 100644 packages/compose/src/utils/create-higher-order-component/index.ts delete mode 100644 packages/compose/tsconfig.json delete mode 100644 packages/dom/src/dom/is-rtl.js delete mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.html delete mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.json delete mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.parsed.json delete mode 100644 packages/e2e-tests/fixtures/blocks/core__query__deprecated-1.serialized.html delete mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.html delete mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.json delete mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.parsed.json delete mode 100644 packages/e2e-tests/fixtures/blocks/core__table__deprecated-2.serialized.html delete mode 100644 packages/e2e-tests/specs/experiments/customizing-widgets.test.js delete mode 100644 packages/edit-site/src/components/block-editor/block-inspector-button.js create mode 100644 packages/edit-site/src/components/notices/index.js create mode 100644 packages/edit-site/src/components/notices/style.scss delete mode 100644 packages/react-i18n/CHANGELOG.md delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js delete mode 100644 packages/rich-text/src/component/use-format-boundaries.js delete mode 100644 packages/scripts/config/.prettierignore delete mode 100644 packages/scripts/config/jest-github-actions-reporter.js diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 50df1242ebdfb..d7fd45936bc35 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -15,12 +15,7 @@ /packages/block-library/src/gallery @mkevins /packages/block-library/src/social-links @mkaz /packages/block-library/src/social-link @mkaz - -# Duotone -/lib/block-supports/duotone.php @ajlende -/packages/block-editor/src/components/duotone-control @ajlende -/packages/block-editor/src/hooks/duotone.js @ajlende -/packages/components/src/duotone-picker @ajlende +/packages/block-library/src/image @ajlende # Editor /packages/annotations @atimmer diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 97faf7f5a183d..9552175c283ff 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -5,7 +5,6 @@ on: push: branches: - trunk - - 'release/**' - 'wp/**' jobs: diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index a5bc053d4c8e2..ba66847963df7 100644 --- a/.github/workflows/static-checks.yml +++ b/.github/workflows/static-checks.yml @@ -5,7 +5,6 @@ on: push: branches: - trunk - - 'release/**' - 'wp/**' jobs: @@ -43,6 +42,9 @@ jobs: - name: Lint JavaScript and Styles run: npm run lint + - name: Lint ES5 built files (IE11) + run: npx eslint --parser-options=ecmaVersion:5 --no-eslintrc --no-ignore ./build/**/*.js + - name: Type checking run: npm run build:package-types diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 7084b8d964230..50eb5351225bf 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -39,4 +39,3 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./storybook/build - force_orphan: true diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index 87a598a1646e4..b1d0bb6278bb4 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -7,7 +7,6 @@ on: push: branches: - trunk - - 'release/**' - 'wp/**' jobs: diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 39d3acb571b21..0000000000000 --- a/.prettierignore +++ /dev/null @@ -1,8 +0,0 @@ -.cache -build -build-module -build-types -packages/block-serialization-spec-parser/parser.js -packages/e2e-tests/plugins -packages/react-native-editor/bundle -vendor diff --git a/bin/packages/build.js b/bin/packages/build.js index ff26c904fd884..397a136ba7246 100755 --- a/bin/packages/build.js +++ b/bin/packages/build.js @@ -114,18 +114,6 @@ function createStyleEntryTransform() { const entries = await glob( path.resolve( PACKAGES_DIR, packageName, 'src/*.scss' ) ); - - // Account for the specific case where block styles in - // block-library package also need rebuilding. - if ( - packageName === 'block-library' && - [ 'style.scss', 'editor.scss' ].includes( - path.basename( file ) - ) - ) { - entries.push( file ); - } - entries.forEach( ( entry ) => this.push( entry ) ); // Find other stylesheets that need to be rebuilt because diff --git a/bin/packages/watch.js b/bin/packages/watch.js index c0e8ca1586dae..404d45dd0309e 100644 --- a/bin/packages/watch.js +++ b/bin/packages/watch.js @@ -31,20 +31,6 @@ function exists( filename ) { return false; } -/** - * Is the path name a directory? - * - * @param {string} pathname - * - * @return {boolean} True if the given path is a directory. - */ -function isDirectory( pathname ) { - try { - return fs.statSync( pathname ).isDirectory(); - } catch ( e ) {} - return false; -} - /** * Determine if a file is source code. * @@ -57,16 +43,12 @@ function isDirectory( pathname ) { * @return {boolean} True if the file a source file. */ function isSourceFile( filename ) { - // Only run this regex on the relative path, otherwise we might run - // into some false positives when eg. the project directory contains `src` - const relativePath = path.relative( process.cwd(), filename ); - return ( - /\/src\/.+\.(js|json|scss)$/.test( relativePath ) && + /\/src\/.+\.(js|json|scss)$/.test( filename ) && ! [ /\/(benchmark|__mocks__|__tests__|test|storybook|stories)\/.+/, /.\.(spec|test)\.js$/, - ].some( ( regex ) => regex.test( relativePath ) ) + ].some( ( regex ) => regex.test( filename ) ) ); } @@ -95,13 +77,6 @@ function isModulePackage( filename ) { * @return {boolean | symbol} True if the file should be watched. */ function isWatchableFile( filename, skip ) { - // Recursive file watching is not available on a Linux-based OS. If this is the case, - // the watcher library falls back to watching changes in the subdirectories - // and passes the directories to this filter callback instead. - if ( isDirectory( filename ) ) { - return true; - } - return isSourceFile( filename ) && isModulePackage( filename ) ? true : skip; @@ -172,12 +147,6 @@ watch( PACKAGES_DIR, { recursive: true, delay: 500, filter: isWatchableFile }, ( event, filename ) => { - // Double check whether we're dealing with a file that needs watching, to accomodate for - // the inability to watch recursively on linux-based operating systems. - if ( ! isSourceFile( filename ) || ! isModulePackage( filename ) ) { - return; - } - switch ( event ) { case 'update': updateBuildFile( event, filename ); diff --git a/bin/plugin/commands/common.js b/bin/plugin/commands/common.js index 4f3e0bb065243..57326be7205bf 100644 --- a/bin/plugin/commands/common.js +++ b/bin/plugin/commands/common.js @@ -116,7 +116,6 @@ function calculateVersionBumpFromChangelog( if ( lineNormalized.startsWith( '### deprecation' ) || lineNormalized.startsWith( '### enhancement' ) || - lineNormalized.startsWith( '### new api' ) || lineNormalized.startsWith( '### new feature' ) ) { versionBump = 'minor'; diff --git a/changelog.txt b/changelog.txt index fadf7aa370632..87ff18257b265 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,255 +1,203 @@ == Changelog == -= 10.5.3 = - -## Bug Fixes - - - Fix the stylesheet loading order for non FSE themes. - - -= 10.5.2 = - -## Bug Fixes - - - Include new API for useSelect to prevent the global editor white screen. - - -= 10.5.1 = - - - -### Bug Fixes - -- Plugin: Fix "Undefined variable: $image_default_size". ([31324](https://github.com/WordPress/gutenberg/pull/31324)) -- Select mode: Fix navigate by pointer. ([31321](https://github.com/WordPress/gutenberg/pull/31321)) -- Fix Inserter Drag and Drop. ([31319](https://github.com/WordPress/gutenberg/pull/31319)) - -### Code Quality - -- Plugin: Unregister only registered block patterns. ([31325](https://github.com/WordPress/gutenberg/pull/31325)) += 10.5.0-rc.1 = +### Features -= 10.5.0 = +- File Block: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857)) ### Enhancements -- Block Library: - - Buttons: - - Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394)) - - Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525)) - - Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870)) - - Columns: Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248)) - - File: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857)) - - List: Add placeholder attribute. ([30958](https://github.com/WordPress/gutenberg/pull/30958)) - - Post Comments Link: New block added. ([29564](https://github.com/WordPress/gutenberg/pull/29564)) - - Site Logo: - - Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909)) - - Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907)) - - Site Title: - - Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999)) - - Normalize the toolbar (II). ([31032](https://github.com/WordPress/gutenberg/pull/31032)) - - Social Links: - - Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851)) - - Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721)) - - Template Part: Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731)) - - Term Description: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564)) - - Verse: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736)) - - Video: Add uploading state. ([30837](https://github.com/WordPress/gutenberg/pull/30837)) -- Block Patterns: - - Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973)) - - Small adjustments to bundled block patterns. ([31105](https://github.com/WordPress/gutenberg/pull/31105)) - - Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469)) - - Query Patterns: - - Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763)) - - Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817)) -- Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509)) -- Design Tools: - - Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124)) - - BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606)) - - Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869)) -- General Interface: - - Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802)) - - Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808)) - - Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075)) - - Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900)) - - Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339)) -- Icons: Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673)) -- i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419)) -- Publishing Flow: Show post events in the post schedule calendar. ([29716](https://github.com/WordPress/gutenberg/pull/29716)) -- Template Editing Mode: - - Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438)) - - Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860)) - - Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793)) - - Updates the template mode canvas padding and adds a backlink. ([30658](https://github.com/WordPress/gutenberg/pull/30658)) -- Site Editor: - - Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395)) - - Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345)) - - Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336)) - - Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668)) - - Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599)) -- Writing Flow: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924)) - +- [Block Library - Site Title]: Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999)) +- docgen: Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971)) +- Add placeholder attribute to the list block. ([30958](https://github.com/WordPress/gutenberg/pull/30958)) +- Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954)) +- Widget Customizer: Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952)) +- Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900)) +- Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896)) +- Button Block: Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870)) +- Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869)) +- Add uploading state to video block. ([30837](https://github.com/WordPress/gutenberg/pull/30837)) +- RN: Add segment controls to mobile editor. ([30822](https://github.com/WordPress/gutenberg/pull/30822)) +- Query Block Patterns: Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817)) +- Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808)) +- Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802)) +- Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731)) +- BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606)) +- Block Library - Buttons: Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394)) +- Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248)) +- Post Schedule: Show post events. ([29716](https://github.com/WordPress/gutenberg/pull/29716)) ### Bug Fixes +- Block Editor: Fix the position of vertical add new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035)) +- [Block Library - Site Title]: Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996)) +- block-library: Duplicate media types to avoid bad import. ([30973](https://github.com/WordPress/gutenberg/pull/30973)) +- Block Editor: Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955)) +- Fixes broken github links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875)) +- Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873)) +- Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864)) +- Image Block: Disable media buttons in uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863)) +- Hide the template selector and template mode from non viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861)) +- Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823)) +- Fix post date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790)) +- Widgets API: Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713)) +- Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709)) +- docgen: Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681)) +- docgen: Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675)) +- fix(RadioControl): Checked style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670)) +- Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667)) +- Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654)) +- Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639)) +- Fix crash from non-adjustable unit RangeCell a11y activation. ([30636](https://github.com/WordPress/gutenberg/pull/30636)) +- Site Editor: Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552)) +- Components: Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298)) +- docgen: Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945)) +- Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938)) - API Fetch: Make preloaded OPTIONS requests use `parse` setting. ([28862](https://github.com/WordPress/gutenberg/pull/28862)) -- Block Library: - - Duplicate media types to avoid bad imports. ([30973](https://github.com/WordPress/gutenberg/pull/30973)) - - Image Block: Disable media buttons in the uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863)) - - Query: Fix max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757)) - - Post Title: Fix warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666)) - - Site Title Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996)) -- Block Editor: - - Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955)) - - Fix the position of vertical add a new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035)) - - Template part: Fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928)) -- Components: - - Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010)) - - Apply a StyleProvider around fills that can be used inside the iframe. ([31073](https://github.com/WordPress/gutenberg/pull/31073)) - - Fix "RadioControl: checked" style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670)) - - Fix Post Date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790)) - - Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298)) - - Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667)) -- General Interface: Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823)) -- Inserter: Stop event propagation for the select element's onBlur to fix the behavior in iOS when selecting a pattern category. ([30717](https://github.com/WordPress/gutenberg/pull/30717)) -- Site Editor: - - Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873)) - - Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552)) -- Template Editing Mode: Hide the template selector and template mode from non-viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861)) ### Experiments -- Block-based Widgets: - - API: - - Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429)) - - Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713)) - - Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853)) - - Customizer Integration: - - Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954)) - - Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896)) - - Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952)) - - Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654)) - - Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864)) - - Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431)) - - Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709)) - - Widget editor: - - Add a toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826)) - - Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989)) -- Navigation Editor and Block: - - Fix navigation placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824)) - - Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441)) - - Limit navigation nesting depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199)) - - Nav-created drafts should not render on the front end. ([29692](https://github.com/WordPress/gutenberg/pull/29692)) - - Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390)) - - Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351)) - - Use theme locations description instead of the slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797)) -- Global Styles: - - Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610)) - - Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830)) - - Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809)) - - Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015)) - - Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604)) - - Only remove the default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895)) - - Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801)) - - Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605)) - - theme.json: Add util to transform from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600)) +- Handbook: Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039)) +- Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015)) +- Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010)) +- Widgets: Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989)) +- Template part block - fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928)) +- Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909)) +- Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907)) +- Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860)) +- Widgets REST API: Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853)) +- Global Styles: Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830)) +- Widget editor: Add toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826)) +- Fix nav placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824)) +- GlobalStyles: Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809)) +- Global Styles: Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801)) +- Use theme locations description instead of slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797)) +- Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793)) +- Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763)) +- Try: Add max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757)) +- Block Library: Fix Post Title warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666)) +- Updates the template mode canvas padding and adds a back link. ([30658](https://github.com/WordPress/gutenberg/pull/30658)) +- Global Styles: Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610)) +- Global Styles: Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605)) +- Global Styles: Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604)) +- theme.json: Add util to transfrom from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600)) +- Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599)) +- Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469)) +- Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441)) +- Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438)) +- Widgets: Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429)) +- Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345)) +- Site Editor: Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336)) +- Block Editor: Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245)) +- Navigation Link: Limit Nesting Depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199)) +- Block Supports: Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124)) +- Navigation: Nav created drafts should not render on frontend. ([29692](https://github.com/WordPress/gutenberg/pull/29692)) +- Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668)) +- New block: Post comments link. ([29564](https://github.com/WordPress/gutenberg/pull/29564)) +- Verse Block: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736)) ### Documentation -- docgen: - - Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971)) - - Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681)) - - Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675)) - - Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945)) -- Handbook: - - Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039)) - - Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040)) - - Add fix to suggested prefixes of the branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953)) - - Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911)) - - Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569)) - - Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819)) - - Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818)) - - Fixed a type and made the whole explanation more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487)) - - Fixes broken GitHub links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875)) - - Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946)) - - Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792)) - - Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980)) - - Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733)) - - Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447)) -- Libs: - - Blocks: Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050)) - - Query Utils: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611)) -- License: Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383)) -- Packages: - - Block Library - Social Links: Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652)) - - Components: Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796)) - - Core Data: Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639)) - - Block Editor: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704)) - - Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501)) +- Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050)) +- Update Gutenberg mobile v1.51.0 changelog. ([31006](https://github.com/WordPress/gutenberg/pull/31006)) +- Docs: Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980)) +- Docs: Add fix to suggested prefixes of branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953)) +- Handbook: Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911)) +- Handbook: Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819)) +- Docs: Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818)) +- Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796)) +- Handbook: Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792)) +- Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733)) +- docs: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704)) +- Docs: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611)) +- Handbook: Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569)) +- Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501)) +- Handbook: Fixed a type and made the whole explaination more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487)) +- Docs: Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447)) ### Code Quality -- Block Editor: - - Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036)) - - Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245)) -- Block Library: - - Button Block: Use hook-based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194)) - - Cover: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435)) - - Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977)) -- Block Patterns: Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998)) -- Components: Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048)) -- dom: - - Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750)) - - Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386)) - - Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546)) - - Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774)) - - Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752)) - - Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807)) - - Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841)) -- Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310)) -- Gutenberg Plugin: - - Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894)) - - Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715)) - - Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714)) - - Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794)) - - Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938)) -- Improve get_merged_data() code. ([30612](https://github.com/WordPress/gutenberg/pull/30612)) +- Block Editor: Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036)) +- Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998)) +- Chore: Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977)) +- Gutenberg Plugin: Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894)) +- dom: Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841)) +- dom: Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807)) +- Gutenberg Plugin: Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794)) - Remove unnecessary semicolons in PHP. ([30780](https://github.com/WordPress/gutenberg/pull/30780)) +- dom: Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774)) +- dom: Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752)) +- dom: Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750)) +- Gutenberg Plugin: Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715)) +- Gutenberg Plugin: Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714)) +- Improve get_merged_data() code. ([30612](https://github.com/WordPress/gutenberg/pull/30612)) +- dom: Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546)) - Replace older-style PHP type conversion functions with typecasts. ([30531](https://github.com/WordPress/gutenberg/pull/30531)) +- Cover block: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435)) +- dom: Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386)) +- Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310)) ### Tools -- Testing: - - Block Library - Cover Block: - - Add edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270)) - - Replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306)) - - Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449)) - - Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813)) - - Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748)) - - Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981)) - - Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984)) -- wp-env: - - Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882)) - - Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045)) - - Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651)) - - Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053)) - - Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692)) - - Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638)) - - Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808)) - - Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646)) -- Build Tooling: - - Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629)) - - Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341)) - - Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628)) - - Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615)) - - Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868)) - - Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347)) - - Use consistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866)) -- Scripts: - - Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182)) - - Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240)) +- Editor: Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984)) +- Testing: Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981)) +- wp-env: Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882)) +- Packages: Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868)) +- Packages: Use conistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866)) +- Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813)) +- Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748)) +- wp-env: Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692)) +- wp-env: Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651)) +- wp-env: Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646)) +- wp-env: Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638)) +- Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629)) +- Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628)) +- Build Tooling: Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347)) +- Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341)) +- Add Cover block edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270)) +- Scripts: Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240)) +- wp-env: Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053)) +- wp-env.json: Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045)) +- Scripts: Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182)) +- Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808)) +- Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449)) + +### Various + +- Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048)) +- Handbook: Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040)) +- [Block Library - Site Title]: Fix Site Title toolbar normalization. ([31032](https://github.com/WordPress/gutenberg/pull/31032)) +- Documentation: Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946)) +- Block editor: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924)) +- Only remove default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895)) +- Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721)) +- Pattern Categories Select: Stop event propagation for the select element's onBlur to fix behaviour in iOS. ([30717](https://github.com/WordPress/gutenberg/pull/30717)) +- RNMobile: Truncate rangecell screenreader decimals. ([30678](https://github.com/WordPress/gutenberg/pull/30678)) +- Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673)) +- Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652)) +- RNMobile: Use the default div tagName on native for the Quote block. ([30645](https://github.com/WordPress/gutenberg/pull/30645)) +- Plugin Build Workflow: Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615)) +- Remove unnecessary space in HTML tags. ([30585](https://github.com/WordPress/gutenberg/pull/30585)) +- Term Description block: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564)) +- Try: Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525)) +- Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509)) +- Widgets: Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431)) +- i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419)) +- Site Editor: Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395)) +- Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390)) +- Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383)) +- Nav Block: Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351)) +- Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339)) +- Add Cover block replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306)) +- Button Block: Use hook based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194)) +- Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075)) +- Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973)) +- Social Links: Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851)) + + = 10.4.1 = diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md index 07bee7bd6f7a2..bc6c0e4272cf9 100644 --- a/docs/contributors/code/release.md +++ b/docs/contributors/code/release.md @@ -2,7 +2,7 @@ This Repository is used to perform several types of releases. This document serves as a checklist for each one of these. It is helpful if you'd like to understand the different workflows. -To release a stable version of the Gutenberg plugin, you need approval from a member of the Gutenberg Core team for the final step of the release process (upload to the WordPress.org plugin repo -- see below). If you aren't a member yourself, make sure to contact one ahead of time so they'll be around at the time of the release. You can ping in the [#core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7). +To release a stable version of the Gutenberg plugin, you need approval from a member of the [`gutenberg-core` team](https://github.com/orgs/WordPress/teams/gutenberg-core) for the final step of the release process (upload to the WordPress.org plugin repo -- see below). If you aren't a member yourself, make sure to contact one ahead of time so they'll be around at the time of the release. To release Gutenberg's npm packages, you need to be part of the [WordPress organization at npm](https://www.npmjs.com/org/wordpress). 🙂 @@ -41,7 +41,7 @@ Only once you're happy with the shape of the release notes should you press the 1. Use the release notes that you just edited to update `changelog.txt`, and 2. upload the new plugin version to the WordPress.org plugin repository (SVN) (only if you're releasing a stable version). -The latter step needs approval by a member of the Gutenberg Core team. Locate the ["Upload Gutenberg plugin to WordPress.org plugin repo" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job). +The latter step needs approval by a member of the [`gutenberg-core` team](https://github.com/orgs/WordPress/teams/gutenberg-core). Locate the ["Upload Gutenberg plugin to WordPress.org plugin repo" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job). This will cause the new version to be available to users of WordPress all over the globe! 💃 You should check that folks are able to install the new version from their Dashboard. @@ -67,7 +67,7 @@ You should also include a performance audit at the end of the release post. You Compile this to a draft post on [make.wordpress.org/core](https://make.wordpress.org/core/); this post should be published after the actual release. -If you don't have access to [make.wordpress.org/core](https://make.wordpress.org/core/), ping someone on the Gutenberg Core team in the [WordPress #core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7) to publish the post. +If you don't have access to [make.wordpress.org/core](https://make.wordpress.org/core/), ping [someone on the Gutenberg Core team](https://github.com/orgs/WordPress/teams/gutenberg-core) in the [WordPress #core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7) to publish the post. ### Creating Release Candidate Patches (done via `git cherry-pick`) diff --git a/docs/contributors/documentation/README.md b/docs/contributors/documentation/README.md index 569e3073dc070..e3033c3c8f88e 100644 --- a/docs/contributors/documentation/README.md +++ b/docs/contributors/documentation/README.md @@ -94,37 +94,6 @@ The preferred format for code examples is ESNext, this should be the default vie **Note:** it is not required to include ES5 code examples. The guidance is to include `ES5` code for beginner tutorials, but the majority of code in Gutenberg packages and across the larger React and JavaScript ecosystem is in ESNext. -### Callout Notices - -The Block Editor handbook supports the same [notice styles as other WordPress handbooks](https://make.wordpress.org/docs/handbook/documentation-team-handbook/handbooks-style-and-formatting-guide/#formatting). However, the shortcode implementation is not ideal with the different locations the block editor handbook documentation is published (npm, GitHub). - -The recommended way to implement in markdown is to use the raw HTML and `callout callout-LEVEL` classes. For example: - -```html -
- This is an **info** callout. -
-``` - -The following classes are available: `info`, `tip`, `alert`, `warning` - -
-This is a **tip** callout. -
- -
-This is an **info** callout. -
- -
-This is an **alert** callout. -
- -
-This is a **warning** callout. -
- - ### Editor Config You should configure your editor to use Prettier to auto-format markdown documents. See the [Getting Started documentation](/docs/contributors/code/getting-started-with-code-contribution.md) for complete details. @@ -132,16 +101,12 @@ You should configure your editor to use Prettier to auto-format markdown documen An example config for using Visual Studio Code and the Prettier extensions: ```json -"[[markdown]]": { +"\[markdown\]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, ``` -
- Note: depending on where you are viewing this document, the brackets may show as double, the proper format is just a single bracket. -
- ## Resources - [Copy Guidelines](/docs/contributors/copy-guide.md) for writing instructions, documentations, or other contributions to Gutenberg project. diff --git a/docs/explanations/architecture/full-site-editing-templates.md b/docs/explanations/architecture/full-site-editing-templates.md index dac115ef92ce8..10f1ac3d537ad 100644 --- a/docs/explanations/architecture/full-site-editing-templates.md +++ b/docs/explanations/architecture/full-site-editing-templates.md @@ -2,15 +2,13 @@ ## Template and template part flows -
-This is the documentation for the current implementation of the block templates and template parts themes. This is part of the Full Site Editing project. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors, and theme authors. -
+> This is the documentation for the current implementation of the block-based templates and template parts themes. This is part of the Full Site Editing project. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors, and theme authors. -This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend. For an introduction about block themes and Full site editing templates, refer to the [block theme documentation](/docs/how-to-guides/themes/block-theme-overview.md). +This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend. For an introduction about block-based themes and Full site editing templates, refer to the [block-based themes documentation](/docs/how-to-guides/themes/block-based-themes.md). ## Storage -Just like the regular templates, the block templates live initially as files in the theme folder but the main difference is that the user can edit these templates in the UI in the Site Editor. +Just like the regular templates, the block-based templates live initially as files in the theme folder but the main difference is that the user can edit these templates in the UI in the Site Editor. When a user edits a template (or template-part), the initial theme template file is kept as is but a forked version of the template is saved to the `wp_template` custom post type (or `wp_template_part` for template parts). @@ -32,11 +30,11 @@ The synchronization is important for two different flows: - When editing the template and template parts, the site editor frontend fetches the edited and available templates through the REST API. This means that for all `GET` API requests performed to the `wp-templates` and `wp-template-parts` endpoint synchronization is required. - When rendering a template (sometimes referred to as "resolving a template"): this is the algorithm that WordPress follows to traverse the template hierarchy and find the right template to render for the current page being loaded. -- When exporting a block theme, we need to export all its templates back as files. The synchronization is required to simplify the operation and only export the CPT templates. +- When exporting a block-based theme, we need to export all its templates back as files. The synchronization is required to simplify the operation and only export the CPT templates. ## Switching themes -Since block themes make use of templates that can refer to each other and that can be saved to a custom post type, it becomes possible to mix templates and template parts from different themes. For example: +Since block-based themes make use of templates that can refer to each other and that can be saved to a custom post type, it becomes possible to mix templates and template parts from different themes. For example: - A user might like the "header" template part of theme A and would like to use it in theme B. - A user might like the "contact" template from theme A and would like to use it in theme B. diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 87ac239e03190..5a685ce6053b7 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -320,7 +320,7 @@ Blocks are able to provide base structural CSS styles, and themes can add styles Other features, like the new _wide_ and _full-wide_ alignment options, are simply CSS classes applied to blocks that offer this alignment. We are looking at how a theme can opt in to this feature, for example using `add_theme_support`. -This is currently a work in progress and we recommend reviewing the [block based theme documentation](/docs/how-to-guides/themes/block-theme-overview.md) to learn more. +This is currently a work in progress and we recommend reviewing the [block based theme documentation](/docs/how-to-guides/block-based-theme/README.md) to learn more. ## What are block variations? Are they the same as block styles? diff --git a/docs/getting-started/full-site-editing.md b/docs/getting-started/full-site-editing.md deleted file mode 100644 index 2ce234362af2a..0000000000000 --- a/docs/getting-started/full-site-editing.md +++ /dev/null @@ -1,61 +0,0 @@ -# Full Site Editing - -At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551): - -- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more. -- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses. -- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below. -- Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications). -- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block). -- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc. -- Navigation Block: a new block that allows you to edit a site's navigation menu, both in terms of structure and design. -- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality. - -There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places. - -**Jump in:** - -The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/), it is listed in the theme diretory and our development reference theme. You can find other themes in the directory using the [full-site-editing feature tag](https://wordpress.org/themes/tags/full-site-editing/). - -## Get Involved - -An ongoing [FSE Outreach program](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/) is in place with calls for testing and is a great way to get involved and learn about the new features. - -- Join in on [WordPress Slack](https://make.wordpress.org/chat/) at [#fse-outreach-experiment](https://wordpress.slack.com/archives/C015GUFFC00) -- Participate in the [Calls for Testing](https://make.wordpress.org/test/tag/fse-testing-call/) by testing and giving feedback. -- See detailed [How to Test FSE instructions](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/how-to-test-fse/) to get setup to test FSE features. - -## Block Themes - -If you are using the Gutenberg plugin you can run, test, and develop block themes. Block themes are themes built using templates composed using blocks. See [block theme overview](/docs/how-to-guides/themes/block-theme-overview.md) for additional details. - -- See the [Create a Block Theme](/docs/how-to-guides/themes/create-block-theme.md) tutorial for a walk-through of the pieces of a block theme. - -- For examples, see the [WordPress/theme-experiments](https://github.com/WordPress/theme-experiments/) repository with several block themes there including the source for the above mentioned TT1 Blocks. - -- Use the `empty-theme.php` script from theme-experiments repo to generate a starter block theme, it will prompt you with a few questions and create a theme. - -``` -❯ git clone https://github.com/WordPress/theme-experiments -❯ cd theme-experiments -❯ php new-empty-theme.php -Please provide the following information: -Theme name: TestTheme -Description: A theme to test -Author: Marcus Kazmierczak -Theme URI: https://github.com/mkaz - -Your new theme is ready! -``` - -You can then copy the generated directory to your `wp-content/themes` directory and start playing with the Site Editor to build and extend the theme. - -### Template and Template Parts - -See the [architecture document on templates](/docs/explanations/architecture/full-site-editing-templates.md) for an explanation on the internals of how templates and templates parts are rendered in the frontend and edited in the backend. - -### theme.json - -Instead of the proliferation of theme support flags or alternative methods, a new `theme.json` file is being used to define theme settings. **NOTE:** This feature is still experimental and changing, so the interim file name is `experimental-theme.json` - -See [documentation for theme.json](/docs/how-to-guides/themes/theme-json.md). diff --git a/docs/getting-started/glossary.md b/docs/getting-started/glossary.md index 6518868b09856..02327c0eb36e0 100644 --- a/docs/getting-started/glossary.md +++ b/docs/getting-started/glossary.md @@ -11,7 +11,7 @@
The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
Block Based Theme
-
A theme built in block forward way that allows Full Site Editing to work. The core of a block theme are its block templates and block template parts. To date, block theme templates have been HTML files of block markup that map to templates from the standard WordPress template hierarchy.
+
A theme built in block forward way that allows Full Site Editing to work. The core of a block-based theme are its block templates and block template parts. To date, block-based theme templates have been HTML files of block markup that map to templates from the standard WordPress template hierarchy.
Block categories
These are not a WordPress taxonomy, but instead used internally to sort blocks in the Block Library.
diff --git a/docs/how-to-guides/themes/create-block-theme.md b/docs/how-to-guides/block-based-theme/README.md similarity index 79% rename from docs/how-to-guides/themes/create-block-theme.md rename to docs/how-to-guides/block-based-theme/README.md index 86797bc2424e0..d39dd3b0caaa4 100644 --- a/docs/how-to-guides/themes/create-block-theme.md +++ b/docs/how-to-guides/block-based-theme/README.md @@ -1,8 +1,10 @@ -# Create a block theme +# Creating a block-based theme -The purpose of this tutorial is to show how to create a block theme and help theme developers transition to full site editing. +The purpose of this tutorial is to show how to create a basic block based theme +and help theme developers transition to full site editing. -You will learn about the required files, how to combine templates and template parts, how to add presets for global styles, and how to add blocks and export the templates in the site editor. +You will learn about the required files, how to combine templates and template parts, +how to add presets for global styles, and how to add blocks and export the templates in the site editor. Full site editing is an experimental feature and the workflow in this tutorial is likely to change. @@ -10,22 +12,25 @@ This tutorial is up to date as of Gutenberg version 9.1. ## Table of Contents -1. [What is needed to create a block-theme?](#what-is-needed-to-create-a-block-theme) -2. [Creating the theme](#creating-the-theme) -3. [Creating the templates and template parts](#creating-the-templates-and-template-parts) -4. [experimental-theme.json - Global styles](#experimental-theme-json-global-styles) +1. [What is needed to create a block-based theme?](/docs/how-to-guides/block-based-themes/README.md#what-is-needed-to-create-a-block-based-theme) +2. [Creating the theme](/docs/how-to-guides/block-based-themes/README.md#creating-the-theme) +3. [Creating the templates and template parts](/docs/how-to-guides/block-based-themes/README.md#creating-the-templates-and-template-parts) +4. [experimental-theme.json - Global styles](/docs/how-to-guides/block-based-themes/README.md#experimental-theme-json-global-styles) +5. [Adding blocks](/docs/how-to-guides/block-based-themes/block-based-themes-2-adding-blocks.md) -## What is needed to create a block theme? +## What is needed to create a block-based theme? -To use a block theme you need to use the Gutenberg plugin. +To use a block based theme you need to have Gutenberg installed and full site editing must be enabled. -A block theme is built using HTML templates and template parts. Templates are the main files used in the [template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/), for example index, single or archive. Templates can optionally include structural template parts, for example a header, footer or sidebar. +Full site editing can be enabled from the Gutenberg experiments menu in the WordPress admin area. -Each template or template part contains the [block grammar](/docs/explanations/architecture/key-concepts/), the HTML, for the selected blocks. The block HTML is generated in and exported from the **site editor**. It can also be added to the theme's HTML files manually. +A block-based theme is built using HTML templates and template parts. Templates are the main files used in the [template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/), for example index, single or archive. Templates can optionally include structural template parts, for example a header, footer or sidebar. + +Each template or template part contains the [block grammar](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks), the HTML, for the selected blocks. The block HTML is generated in and exported from the **site editor**. It can also be added to the theme's HTML files manually. ### Required files and file structure -A block theme requires an `index.php` file, an index template file, a `style.css` file, and a `functions.php` file. +A block based theme requires an `index.php` file, an index template file, a `style.css` file, and a `functions.php` file. The theme may optionally include an [experimental-theme.json file](/docs/how-to-guides/themes/theme-json.md) to manage global styles. You decide what additional templates and template parts to include in your theme. @@ -85,7 +90,7 @@ _You no longer need to add theme support for the title tag. It is already enable https://developer.wordpress.org/themes/basics/theme-functions/#what-is-functions-php -https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/ +https://developer.wordpress.org/block-editor/developers/themes/theme-support/ ```php -These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors and theme authors. +> This is the documentation for the current implementation of block-based themes, also known as Full Site Editing or Block Content Areas. These features are still experimental in the plugin. “Experimental” means this is just an early implementation that is subject to potential drastic and breaking changes in iterations based on feedback from users, contributors and theme authors. -Documentation is shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. You can provide feedback in the weekly #core-editor chats, or #fse-outreach-experiment channels, or async via Github issues. -
+> Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. You can provide feedback in the weekly #core-editor chats where the latest progress of this effort will be shared and discussed, or async via Github issues. + +**Note:** To use these features, activate a theme that includes a `block-templates/index.html` file. This will signal to the block editor that the theme should use full-site editing features. -## What is a block theme? +## What is a block-based theme? -A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, ...), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc. +A block-based theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, ...), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc. -## What is the structure of a block theme? +## What is the structure of a block-based theme? -A very simple block theme is structured like so: +A very simple block-based theme is structured like so: ``` theme @@ -96,7 +96,7 @@ Note that it won't take precedence over any of your theme's templates with highe ## Theme Blocks -Some blocks have been made specifically for block themes. For example, you'll most likely use the **Site Title** block in your site's header while your **single** block template will most likely include a **Post Title** and a **Post Content** block. +Some blocks have been made specifically for block-based themes. For example, you'll most likely use the **Site Title** block in your site's header while your **single** block template will most likely include a **Post Title** and a **Post Content** block. As we're still early in the process, the number of blocks specifically dedicated to these block templates is relatively small but more will be added as we move forward with the project. As of Gutenberg 8.5, the following blocks are currently available: @@ -137,4 +137,4 @@ remove_theme_support( 'block-templates' ); ## Resources - [Full Site Editing](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing) label. -- [Theme Experiments](https://github.com/WordPress/theme-experiments) repository, full of block theme examples created by the WordPress community. +- [Theme Experiments](https://github.com/WordPress/theme-experiments) repository, full of block-based theme examples created by the WordPress community. diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 32f9bacacefc5..b45557c5ad1ae 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -1,10 +1,8 @@ -# Global Settings (theme.json) +# Themes & Block Editor: experimental theme.json -
-These features are still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. - -Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. Please share your feedback in the weekly #core-editor or #fse-outreach-experiment channels in Slack, or async in GitHub issues. -
+> **These features are still experimental**. “Experimental” means this is an early implementation subject to drastic and breaking changes. +> +> Documentation has been shared early to surface what’s being worked on and invite feedback from those experimenting with the APIs. Please, be welcomed to share yours in the weekly #core-editor chats as well as async via the Github issues and Pull Requests. This is documentation for the current direction and work in progress about how themes can hook into the various sub-systems that the Block Editor provides. @@ -60,7 +58,7 @@ There are some areas of styling that would benefit from having shared values tha To address this need, we've started to experiment with CSS Custom Properties, aka CSS Variables, in some places: -- **Presets**: [color palettes](/docs/how-to-guides/themes/theme-support.md#block-color-palettes), [font sizes](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or [gradients](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors. +- **Presets**: [color palettes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes), [font sizes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), or [gradients](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors. {% codetabs %} {% Input %} @@ -91,7 +89,7 @@ To address this need, we've started to experiment with CSS Custom Properties, ak {% Output %} ```css -body { +:root { --wp--preset--color--black: #000000; --wp--preset--color--white: #ffffff; } @@ -122,7 +120,7 @@ body { {% Output %} ```css -body { +:root { --wp--custom--line-height--body: 1.7; --wp--custom--line-height--heading: 1.3; } @@ -292,7 +290,7 @@ For example: {% Output %} ```css -body { +:root { --wp--preset--color--strong-magenta: #a156b4; --wp--preset--color--very-dark-gray: #444; --wp--preset--font-size--big: 32; @@ -344,7 +342,7 @@ For example: {% Output %} ```css -body { +:root { --wp--custom--base-font: 16; --wp--custom--line-height--small: 1.2; --wp--custom--line-height--medium: 1.4; @@ -434,7 +432,7 @@ For example: {% Output %} ```css -body { +:root { color: var( --wp--preset--color--primary ); } h1 { @@ -549,7 +547,7 @@ For example: {% Output %} ```css -body { +:root { --wp--custom--line-height--body: 1.7; --wp--custom--font-primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; } diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index 9f8f9baa9f368..404647d6004ae 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/docs/how-to-guides/themes/theme-support.md @@ -397,7 +397,7 @@ Using the Gutenberg plugin (version 8.3 or later), link color control is availab add_theme_support('experimental-link-color'); ``` -If a theme opts in, it should [define default link colors](/docs/how-to-guides/themes/theme-json.md#color-properties) in `experimental-theme.json` (or in its theme styles if no `experimental-theme.json` is present). For example: +If a theme opts in, it should [define default link colors](https://developer.wordpress.org/block-editor/developers/themes/theme-json/#color-properties) in `experimental-theme.json` (or in its theme styles if no `experimental-theme.json` is present). For example: ```css { diff --git a/docs/manifest.json b/docs/manifest.json index 73995624c75e1..208231d556a1d 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -71,12 +71,6 @@ "markdown_source": "../docs/getting-started/tutorials/create-block/submitting-to-block-directory.md", "parent": "create-block" }, - { - "title": "Full Site Editing", - "slug": "full-site-editing", - "markdown_source": "../docs/getting-started/full-site-editing.md", - "parent": "handbook" - }, { "title": "Glossary", "slug": "glossary", @@ -294,40 +288,40 @@ "parent": "block-tutorial" }, { - "title": "Themes", - "slug": "themes", - "markdown_source": "../docs/how-to-guides/themes/README.md", + "title": "Feature Flags", + "slug": "feature-flags", + "markdown_source": "../docs/how-to-guides/feature-flags.md", "parent": "how-to-guides" }, { - "title": "Block Theme", - "slug": "block-theme-overview", - "markdown_source": "../docs/how-to-guides/themes/block-theme-overview.md", - "parent": "themes" + "title": "Theming for the Block Editor", + "slug": "themes", + "markdown_source": "../docs/how-to-guides/themes/README.md", + "parent": "how-to-guides" }, { - "title": "Create a block theme", - "slug": "create-block-theme", - "markdown_source": "../docs/how-to-guides/themes/create-block-theme.md", + "title": "Theme Support", + "slug": "theme-support", + "markdown_source": "../docs/how-to-guides/themes/theme-support.md", "parent": "themes" }, { - "title": "Global Settings (theme.json)", + "title": "Themes & Block Editor: experimental theme.json", "slug": "theme-json", "markdown_source": "../docs/how-to-guides/themes/theme-json.md", "parent": "themes" }, { - "title": "Theme Support", - "slug": "theme-support", - "markdown_source": "../docs/how-to-guides/themes/theme-support.md", - "parent": "themes" + "title": "Creating a block-based theme", + "slug": "block-based-theme", + "markdown_source": "../docs/how-to-guides/block-based-theme/README.md", + "parent": "how-to-guides" }, { - "title": "Feature Flags", - "slug": "feature-flags", - "markdown_source": "../docs/how-to-guides/feature-flags.md", - "parent": "how-to-guides" + "title": "Adding blocks to your theme", + "slug": "block-based-themes-2-adding-blocks", + "markdown_source": "../docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md", + "parent": "block-based-theme" }, { "title": "Backward Compatibility", @@ -779,22 +773,10 @@ "markdown_source": "../packages/components/src/external-link/README.md", "parent": "components" }, - { - "title": "FlexBlock", - "slug": "flex-block", - "markdown_source": "../packages/components/src/flex/flex-block/README.md", - "parent": "components" - }, - { - "title": "FlexItem", - "slug": "flex-item", - "markdown_source": "../packages/components/src/flex/flex-item/README.md", - "parent": "components" - }, { "title": "Flex", "slug": "flex", - "markdown_source": "../packages/components/src/flex/flex/README.md", + "markdown_source": "../packages/components/src/flex/README.md", "parent": "components" }, { @@ -839,12 +821,6 @@ "markdown_source": "../packages/components/src/guide/README.md", "parent": "components" }, - { - "title": "Heading", - "slug": "heading", - "markdown_source": "../packages/components/src/heading/README.md", - "parent": "components" - }, { "title": "NavigateRegions", "slug": "navigate-regions", @@ -1145,12 +1121,6 @@ "markdown_source": "../packages/components/src/tree-select/README.md", "parent": "components" }, - { - "title": "Truncate", - "slug": "truncate", - "markdown_source": "../packages/components/src/truncate/README.md", - "parent": "components" - }, { "title": "UnitControl", "slug": "unit-control", diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index 6a4160906ba3b..35e014595b0c8 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -438,7 +438,7 @@ return array( ## Internationalization -WordPress string discovery system can automatically translate fields marked in this document as translatable. First, you need to set the `textdomain` property in the `block.json` file that provides block metadata. +WordPress string discovery automatically will translate fields marked in the documentation as translatable using the `textdomain` property when specified in the `block.json` file. In that case, localized properties will be automatically wrapped in `_x` function calls on the backend of WordPress when executing `register_block_type_from_metadata`. These translations are added as an inline script to the `wp-block-library` script handle in WordPress core or to the plugin's script handle. **Example:** @@ -451,40 +451,19 @@ WordPress string discovery system can automatically translate fields marked in t } ``` -### PHP - -In PHP, localized properties will be automatically wrapped in `_x` function calls on the backend of WordPress when executing `register_block_type_from_metadata`. These translations get added as an inline script to the plugin's script handle or to the `wp-block-library` script handle in WordPress core. - -The way `register_block_type_from_metadata` processes translatable values is roughly equivalent to the following code snippet: +The way `register_block_type_from_metadata` processes translatable values is roughly equivalent to: ```php _x( 'My block', 'block title', 'my-plugin' ), 'description' => _x( 'My block is fantastic!', 'block description', 'my-plugin' ), - 'keywords' => array( _x( 'fantastic', 'block keyword', 'my-plugin' ) ), + 'keywords' => array( _x( 'fantastic', 'block keywords', 'my-plugin' ) ), ); ``` Implementation follows the existing [get_plugin_data](https://codex.wordpress.org/Function_Reference/get_plugin_data) function which parses the plugin contents to retrieve the plugin’s metadata, and it applies translations dynamically. -### JavaScript - -In JavaScript, you need to use `registerBlockTypeFromMetadata` method from `@wordpress/blocks` package to process loaded block metadata. All localized properties get automatically wrapped in `_x` (from `@wordpress/i18n` package) function calls similar to how it works in PHP. - -**Example:** - -```js -import { registerBlockTypeFromMetadata } from '@wordpress/blocks'; -import Edit from './edit'; -import metadata from './block.json'; - -registerBlockTypeFromMetadata( metadata, { - edit: Edit, - // ...other client-side settings -} ); -``` - ## Backward Compatibility The existing registration mechanism (both server side and frontend) will continue to work, it will serve as low-level implementation detail for the `block.json` based registration. diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md index 52b30fcb9b20a..4122651b7713a 100644 --- a/docs/reference-guides/block-api/block-patterns.md +++ b/docs/reference-guides/block-api/block-patterns.md @@ -1,33 +1,23 @@ # Patterns -Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. +Block Patterns are predefined block layouts, ready to insert and tweak. -In this Document: -* [`register_block_pattern`](#register_block_pattern) -* [`unregister_block_pattern`](#unregister_block_pattern) -* [`register_block_pattern_category`](#register_block_pattern_category) -* [`unregister_block_pattern_category`](#unregister_block_pattern_category) - -## Block Patterns +## Block Patterns Registration ### register_block_pattern -The editor comes with several core block patterns. Theme and plugin authors can register additional custom block patterns using the `register_block_pattern` helper function. +The editor comes with a list of built-in block patterns. Theme and plugin authors can register addition custom block patterns using the `register_block_pattern` function. -The `register_block_pattern` helper function receives two arguments. -- `title`: A machine-readable title with a naming convention of `namespace/title`. -- `properties`: An array describing properties of the pattern. +The `register_block_pattern` function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument. -The properties available for block patterns are: +The properties of the block pattern include: - `title` (required): A human-readable title for the pattern. -- `content` (required): Block HTML Markup for the pattern. -- `description` (optional): A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. The description will help users discover the pattern while searching. -- `categories` (optional): An array of registered pattern categories used to group block patterns. Block patterns can be shown on multiple categories. A category must be registered separately in order to be used here. -- `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching. -- `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter. - -The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern': +- `content` (required): Raw HTML content for the pattern. +- `description`: A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. +- `categories`: An array of pattern categories used to group block patterns. Block patterns can be shown on multiple categories. +- `keywords`: An array of aliases or keywords that help users discover the pattern while searching. +- `viewportWidth`: An integer specifying the width of the pattern in the inserter. ```php register_block_pattern( @@ -37,62 +27,33 @@ register_block_pattern( 'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ), 'content' => "\n
\n
" . esc_html__( 'Button One', 'my-plugin' ) . "
\n\n\n\n
" . esc_html__( 'Button Two', 'my-plugin' ) . "
\n
\n", ) -); -``` - -_Note:_ - -`register_block_pattern()` should be called from a handler attached to the init hook. - -```php -function my_plugin_register_my_patterns() { - register_block_pattern( ... ); -} - -add_action( 'init', 'my_plugin_register_my_patterns' ); +); ``` -## Unregistering Block Patterns - ### unregister_block_pattern -The `unregister_block_pattern` helper function allows for a previously registered block pattern to be unregistered from a theme or plugin and receives one argument. -- `title`: The name of the block pattern to be unregistered. - -The following code sample unregisters the block pattern named 'my-plugin/my-awesome-pattern': +`unregister_block_pattern` allows unregistering a pattern previously registered on the server using `register_block_pattern`. -```php -unregister_block_pattern( 'my-plugin/my-awesome-pattern' ); -``` +The function's argument is the registered name of the pattern. -_Note:_ - -`unregister_block_pattern()` should be called from a handler attached to the init hook. +The following code sample unregisters the style named 'my-plugin/my-awesome-pattern': ```php -function my_plugin_unregister_my_patterns() { - unregister_block_pattern( ... ); -} - -add_action( 'init', 'my_plugin_unregister_my_patterns' ); +unregister_block_pattern( 'my-plugin/my-awesome-pattern' ); ``` ## Block Pattern Categories -Block patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom block patterns. You can also register your own block pattern categories. +Block patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom block patterns. You can also register your own pattern categories. ### register_block_pattern_category -The `register_block_pattern_category` helper function receives two arguments. -- `title`: A machine-readable title for the block pattern category. -- `properties`: An array describing properties of the pattern category. +The `register_block_pattern_category` function receives the name of the category as the first argument and an array describing properties of the category as the second argument. The properties of the pattern categories include: - `label` (required): A human-readable label for the pattern category. -The following code sample registers the category named 'hero': - ```php register_block_pattern_category( 'hero', @@ -100,39 +61,14 @@ register_block_pattern_category( ); ``` -_Note:_ - -`register_block_pattern_category()` should be called from a handler attached to the init hook. - -```php -function my_plugin_register_my_pattern_categories() { - register_block_pattern_category( ... ); -} - -add_action( 'init', 'my_plugin_register_my_pattern_categories' ); -``` - ### unregister_block_pattern_category `unregister_block_pattern_category` allows unregistering a pattern category. -The `unregister_block_pattern_category` helper function allows for a previously registered block pattern category to be unregistered from a theme or plugin and receives one argument. -- `title`: The name of the block pattern category to be unregistered. +The function's argument is the name of the pattern category to unregister. The following code sample unregisters the category named 'hero': ```php unregister_block_pattern_category( 'hero' ); ``` - -_Note:_ - -`unregister_block_pattern_category()` should be called from a handler attached to the init hook. - -```php -function my_plugin_unregister_my_pattern_categories() { - unregister_block_pattern_category( ... ); -} - -add_action( 'init', 'my_plugin_unregister_my_pattern_categories' ); -``` \ No newline at end of file diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 1f5ab06e7b7b1..97ee464b7fa1d 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -143,7 +143,7 @@ When the block declares support for `color.background`, the attributes definitio When a user chooses from the list of preset background colors, the preset slug is stored in the `backgroundColor` attribute. - Background color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes). + Background color presets are sourced from the `editor-color-palette` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes). The block can apply a default preset background color by specifying its own attribute with a default e.g.: @@ -157,7 +157,7 @@ When the block declares support for `color.background`, the attributes definitio ``` - `style`: attribute of `object` type with no default assigned. - + When a custom background color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.background` attribute. The block can apply a default custom background color by specifying its own attribute with a default e.g.: @@ -194,7 +194,7 @@ supports: { } ``` -Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/theme-json.md). +Duotone presets are sourced from `color.duotone` in [theme.json](https://developer.wordpress.org/block-editor/developers/themes/theme-json/). When the block declares support for `color.duotone`, the attributes definition is extended to include the attribute `style`: @@ -234,7 +234,7 @@ supports: { } ``` -Gradient presets are sourced from `editor-gradient-presets` [theme support](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets). +Gradient presets are sourced from `editor-gradient-presets` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets). When the block declares support for `color.gradient`, the attributes definition is extended to include two new attributes: `gradient` and `style`: @@ -244,7 +244,7 @@ When the block declares support for `color.gradient`, the attributes definition When a user chooses from the list of preset gradients, the preset slug is stored in the `gradient` attribute. The block can apply a default preset gradient by specifying its own attribute with a default e.g.: - + ```js attributes: { gradient: { @@ -255,9 +255,9 @@ When the block declares support for `color.gradient`, the attributes definition ``` - `style`: attribute of `object` type with no default assigned. - + When a custom gradient is selected (i.e. using the custom gradient picker), the custom gradient value is stored in the `style.color.gradient` attribute. - + The block can apply a default custom gradient by specifying its own attribute with a default e.g.: ```js @@ -296,15 +296,15 @@ supports: { } ``` -Text color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes). - +Text color presets are sourced from the `editor-color-palette` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes). + When the block declares support for `color.text`, the attributes definition is extended to include two new attributes: `textColor` and `style`: - `textColor`: attribute of `string` type with no default assigned. When a user chooses from the list of preset text colors, the preset slug is stored in the `textColor` attribute. - + The block can apply a default preset text color by specifying its own attribute with a default e.g.: ```js @@ -317,9 +317,9 @@ When the block declares support for `color.text`, the attributes definition is e ``` - `style`: attribute of `object` type with no default assigned. - + When a custom text color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.text` attribute. - + The block can apply a default custom text color by specifying its own attribute with a default e.g.: ```js @@ -370,7 +370,7 @@ supports: { This value signals that a block supports the font-size CSS style property. When it does, the block editor will show an UI control for the user to set its value. -The values shown in this control are the ones declared by the theme via the `editor-font-sizes` [theme support](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or the default ones if none is provided. +The values shown in this control are the ones declared by the theme via the `editor-font-sizes` [theme support](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), or the default ones if none is provided. ```js supports: { @@ -497,28 +497,16 @@ supports: { - Type: `Object` - Default value: null - Subproperties: - - `padding`: type `boolean` or `array`, default value `false` + - `padding`: type `boolean`, default value `false` -This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md#cover-block-padding). +This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md##cover-block-padding). ```js supports: { - spacing: { - padding: true, // Enable padding UI control. - } + padding: true, // Enable padding color UI control. } ``` When the block declares support for a specific spacing property, the attributes definition is extended to include the `style` attribute. - `style`: attribute of `object` type with no default assigned. This is added when `padding` support is declared. It stores the custom values set by the user. - -```js -supports: { - spacing: { - padding: [ 'top', 'bottom' ], // Enable padding for arbitrary sides. - } -} -``` - -A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. \ No newline at end of file diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 97011bcce9105..bf14e51671995 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -160,16 +160,22 @@ _Returns_ # **getBlockInsertionPoint** -Returns the insertion point, the index at which the new inserted block would -be placed. Defaults to the last index. +Returns the insertion point. This will be: + +1. The insertion point manually set using setInsertionPoint() or + showInsertionPoint(); or +2. The point after the current block selection, if there is a selection; or +3. The point at the end of the block list. + +Components like will default to inserting blocks at this point. _Parameters_ -- _state_ `Object`: Editor state. +- _state_ `Object`: Global application state. _Returns_ -- `Object`: Insertion point object with `rootClientId`, `index`. +- `Object`: Insertion point object with `rootClientId` and `index`. # **getBlockListSettings** @@ -847,7 +853,8 @@ _Returns_ # **isBlockInsertionPointVisible** -Returns true if we should show the block insertion point. +Whether or not the insertion point should be shown to users. This is set +using showInsertionPoint() or hideInsertionPoint(). _Parameters_ @@ -855,7 +862,7 @@ _Parameters_ _Returns_ -- `?boolean`: Whether the insertion point is visible or not. +- `?boolean`: Whether the insertion point should be shown. # **isBlockMultiSelected** @@ -1083,7 +1090,7 @@ _Parameters_ # **hideInsertionPoint** -Returns an action object hiding the insertion point. +Hides the insertion point for users. _Returns_ @@ -1399,13 +1406,14 @@ _Returns_ # **showInsertionPoint** -Returns an action object used in signalling that the insertion point should -be shown. +Sets the insertion point and shows it to users. + +Components like will default to inserting blocks at this point. _Parameters_ -- _rootClientId_ `?string`: Optional root client ID of block list on which to insert. -- _index_ `?number`: Index at which block should be inserted. +- _rootClientId_ `?string`: Root client ID of block list in which to insert. Use `undefined` for the root block list. +- _index_ `number`: Index at which block should be inserted. _Returns_ diff --git a/docs/toc.json b/docs/toc.json index d9f66b3d63555..8d62894fb4bf0 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -37,7 +37,6 @@ } ] }, - { "docs/getting-started/full-site-editing.md": [] }, { "docs/getting-started/glossary.md": [] }, { "docs/getting-started/faq.md": [] }, { "docs/getting-started/history.md": [] }, @@ -129,15 +128,20 @@ } ] }, + { "docs/how-to-guides/feature-flags.md": [] }, { "docs/how-to-guides/themes/README.md": [ - { "docs/how-to-guides/themes/block-theme-overview.md": [] }, - { "docs/how-to-guides/themes/create-block-theme.md": [] }, - { "docs/how-to-guides/themes/theme-json.md": [] }, - { "docs/how-to-guides/themes/theme-support.md": [] } + { "docs/how-to-guides/themes/theme-support.md": [] }, + { "docs/how-to-guides/themes/theme-json.md": [] } + ] + }, + { + "docs/how-to-guides/block-based-theme/README.md": [ + { + "docs/how-to-guides/block-based-theme/block-based-themes-2-adding-blocks.md": [] + } ] }, - { "docs/how-to-guides/feature-flags.md": [] }, { "docs/how-to-guides/backward-compatibility/README.md": [ { diff --git a/gutenberg.php b/gutenberg.php index f7c2e057cb79a..ceb19d706a38d 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the new block editor in core. * Requires at least: 5.6 * Requires PHP: 5.6 - * Version: 10.5.3 + * Version: 10.5.0-rc.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/lib/block-editor.php b/lib/block-editor.php index 4497a20d559b4..372da86eafa3b 100644 --- a/lib/block-editor.php +++ b/lib/block-editor.php @@ -23,37 +23,37 @@ function gutenberg_get_default_block_categories() { return array( array( 'slug' => 'text', - 'title' => _x( 'Text', 'block category', 'gutenberg' ), + 'title' => _x( 'Text', 'block category' ), 'icon' => null, ), array( 'slug' => 'media', - 'title' => _x( 'Media', 'block category', 'gutenberg' ), + 'title' => _x( 'Media', 'block category' ), 'icon' => null, ), array( 'slug' => 'design', - 'title' => _x( 'Design', 'block category', 'gutenberg' ), + 'title' => _x( 'Design', 'block category' ), 'icon' => null, ), array( 'slug' => 'widgets', - 'title' => _x( 'Widgets', 'block category', 'gutenberg' ), + 'title' => _x( 'Widgets', 'block category' ), 'icon' => null, ), array( 'slug' => 'theme', - 'title' => _x( 'Theme', 'block category', 'gutenberg' ), + 'title' => _x( 'Theme', 'block category' ), 'icon' => null, ), array( 'slug' => 'embed', - 'title' => _x( 'Embeds', 'block category', 'gutenberg' ), + 'title' => _x( 'Embeds', 'block category' ), 'icon' => null, ), array( 'slug' => 'reusable', - 'title' => _x( 'Reusable Blocks', 'block category', 'gutenberg' ), + 'title' => _x( 'Reusable Blocks', 'block category' ), 'icon' => null, ), ); @@ -175,10 +175,10 @@ function gutenberg_get_default_block_editor_settings() { $image_size_names = apply_filters( 'image_size_names_choose', array( - 'thumbnail' => __( 'Thumbnail', 'gutenberg' ), - 'medium' => __( 'Medium', 'gutenberg' ), - 'large' => __( 'Large', 'gutenberg' ), - 'full' => __( 'Full Size', 'gutenberg' ), + 'thumbnail' => __( 'Thumbnail' ), + 'medium' => __( 'Medium' ), + 'large' => __( 'Large' ), + 'full' => __( 'Full Size' ), ) ); @@ -191,7 +191,7 @@ function gutenberg_get_default_block_editor_settings() { } $default_size = get_option( 'image_default_size', 'large' ); - $image_default_size = in_array( $default_size, array_keys( $image_size_names ), true ) ? $default_size : 'large'; + $image_default_size = in_array( $default_size, array_keys( $image_size_names ), true ) ? $image_default_size : 'large'; $image_dimensions = array(); $all_sizes = wp_get_registered_image_subsizes(); diff --git a/lib/block-patterns.php b/lib/block-patterns.php index 8d0c4b025a0ca..d0ac6e9c081e9 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -16,7 +16,6 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' -
@@ -26,7 +25,6 @@ -
', ) ); @@ -38,7 +36,6 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' -
@@ -50,7 +47,6 @@
-
', ) ); @@ -62,7 +58,6 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' -
@@ -73,7 +68,6 @@
-
', ) ); @@ -85,7 +79,6 @@ 'blockTypes' => array( 'core/query' ), 'categories' => array( 'query' ), 'content' => ' -
@@ -93,7 +86,6 @@
- ', ) ); @@ -106,7 +98,7 @@ 'categories' => array( 'query' ), 'content' => '
-
+
@@ -120,7 +112,7 @@
-
+ ', ) @@ -136,26 +128,26 @@
-
+ -
+
-
+ -
+
@@ -221,10 +213,7 @@ function() { } foreach ( $core_block_patterns as $core_block_pattern ) { - $name = 'core/' . $core_block_pattern; - if ( WP_Block_Patterns_Registry::get_instance()->is_registered( $name ) ) { - unregister_block_pattern( $name ); - } + unregister_block_pattern( 'core/' . $core_block_pattern ); } foreach ( $new_core_block_patterns as $core_block_pattern ) { diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index e400a89fc0119..3bdc2253534c9 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -14,7 +14,7 @@ function gutenberg_register_border_support( $block_type ) { // Determine if any border related features are supported. $has_border_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder' ) ); - $has_border_color_support = gutenberg_has_border_feature_support( $block_type, 'color' ); + $has_border_color_support = gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) ); // Setup attributes and styles within that if needed. if ( ! $block_type->attributes ) { @@ -53,7 +53,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border radius. if ( - gutenberg_has_border_feature_support( $block_type, 'radius' ) && + gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'radius' ) ) && isset( $block_attributes['style']['border']['radius'] ) ) { $border_radius = (int) $block_attributes['style']['border']['radius']; @@ -62,7 +62,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border style. if ( - gutenberg_has_border_feature_support( $block_type, 'style' ) && + gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'style' ) ) && isset( $block_attributes['style']['border']['style'] ) ) { $border_style = $block_attributes['style']['border']['style']; @@ -71,7 +71,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border width. if ( - gutenberg_has_border_feature_support( $block_type, 'width' ) && + gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'width' ) ) && isset( $block_attributes['style']['border']['width'] ) ) { $border_width = intval( $block_attributes['style']['border']['width'] ); @@ -79,7 +79,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { } // Border color. - if ( gutenberg_has_border_feature_support( $block_type, 'color' ) ) { + if ( gutenberg_block_has_support( $block_type, array( '__experimentalBorder', 'color' ) ) ) { $has_named_border_color = array_key_exists( 'borderColor', $block_attributes ); $has_custom_border_color = isset( $block_attributes['style']['border']['color'] ); @@ -125,34 +125,6 @@ function gutenberg_skip_border_serialization( $block_type ) { $border_support['__experimentalSkipSerialization']; } -/** - * Checks whether the current block type supports the border feature requested. - * - * If the `__experimentalBorder` support flag is a boolean `true` all border - * support features are available. Otherwise, the specific feature's support - * flag nested under `experimentalBorder` must be enabled for the feature - * to be opted into. - * - * @param WP_Block_Type $block_type Block type to check for support. - * @param string $feature Name of the feature to check support for. - * @param mixed $default Fallback value for feature support, defaults to false. - * - * @return boolean Whether or not the feature is supported. - */ -function gutenberg_has_border_feature_support( $block_type, $feature, $default = false ) { - // Check if all border support features have been opted into via `"__experimentalBorder": true`. - if ( - property_exists( $block_type, 'supports' ) && - ( true === _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), $default ) ) - ) { - return true; - } - - // Check if the specific feature has been opted into individually - // via nested flag under `__experimentalBorder`. - return gutenberg_block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default ); -} - // Register the block support. WP_Block_Supports::get_instance()->register( 'border', diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 27b00ae6bf232..4412f929d0652 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -75,10 +75,8 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); $has_letter_spacing_support = _wp_array_get( $block_type->supports, array( '__experimentalLetterSpacing' ), false ); - $skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false ); - // Font Size. - if ( $has_font_size_support && ! $skip_font_size_support_serialization ) { + if ( $has_font_size_support ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); diff --git a/lib/blocks.php b/lib/blocks.php index 2800e4df6b238..6cfc53c85d765 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -144,7 +144,7 @@ function gutenberg_reregister_core_block_types() { gutenberg_register_core_block_styles( $block_name ); } - require_once $blocks_dir . $file; + require $blocks_dir . $file; } } } @@ -253,21 +253,15 @@ function( $a, $b ) { $style['css'] = file_get_contents( $style['path'] ); // Set `src` to `false` and add styles inline. - $wp_styles->registered[ $style['handle'] ]->src = false; - if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) { - $wp_styles->registered[ $style['handle'] ]->extra['after'] = array(); - } - array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] ); + $wp_styles->registered[ $style['handle'] ]->src = false; + $wp_styles->registered[ $style['handle'] ]->extra['after'][] = $style['css']; // Add the styles size to the $total_inline_size var. $total_inline_size += (int) $style['size']; } } } -// Run for styles enqueued in . add_action( 'wp_head', 'gutenberg_maybe_inline_styles', 1 ); -// Run for late-loaded styles in the footer. -add_action( 'wp_footer', 'gutenberg_maybe_inline_styles', 1 ); /** * Complements the implementation of block type `core/social-icon`, whether it diff --git a/lib/class-wp-rest-widget-types-controller.php b/lib/class-wp-rest-widget-types-controller.php index 75b00e455cd59..61612e30c785c 100644 --- a/lib/class-wp-rest-widget-types-controller.php +++ b/lib/class-wp-rest-widget-types-controller.php @@ -456,58 +456,6 @@ public function encode_form_data( $request ) { ); } - $serialized_instance = serialize( $instance ); - - $response = array( - 'form' => trim( - $this->get_widget_form( - $widget_object, - $instance - ) - ), - 'preview' => trim( - $this->get_widget_preview( - $widget_object, - $instance - ) - ), - 'instance' => array( - 'encoded' => base64_encode( $serialized_instance ), - 'hash' => wp_hash( $serialized_instance ), - ), - ); - - if ( ! empty( $widget_object->show_instance_in_rest ) ) { - // Use new stdClass so that JSON result is {} and not []. - $response['instance']['raw'] = empty( $instance ) ? new stdClass : $instance; - } - - return rest_ensure_response( $response ); - } - - /** - * Returns the output of WP_Widget::widget() when called with the provided - * instance. Used by encode_form_data() to preview a widget. - - * @param WP_Widget $widget_object Widget object to call widget() on. - * @param array $instance Widget instance settings. - * @return string - */ - private function get_widget_preview( $widget_object, $instance ) { - ob_start(); - the_widget( get_class( $widget_object ), $instance ); - return ob_get_clean(); - } - - /** - * Returns the output of WP_Widget::form() when called with the provided - * instance. Used by encode_form_data() to preview a widget's form. - * - * @param WP_Widget $widget_object Widget object to call widget() on. - * @param array $instance Widget instance settings. - * @return string - */ - private function get_widget_form( $widget_object, $instance ) { ob_start(); /** This filter is documented in wp-includes/class-wp-widget.php */ @@ -527,7 +475,24 @@ private function get_widget_form( $widget_object, $instance ) { ); } - return ob_get_clean(); + $form = ob_get_clean(); + + $serialized_instance = serialize( $instance ); + + $response = array( + 'form' => trim( $form ), + 'instance' => array( + 'encoded' => base64_encode( $serialized_instance ), + 'hash' => wp_hash( $serialized_instance ), + ), + ); + + if ( ! empty( $widget_object->show_instance_in_rest ) ) { + // Use new stdClass so that JSON result is {} and not []. + $response['instance']['raw'] = empty( $instance ) ? new stdClass : $instance; + } + + return rest_ensure_response( $response ); } /** diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index e44eb0cc520cd..1ec295a06dc77 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -39,7 +39,7 @@ class WP_Theme_JSON { * * @var string */ - const ALL_BLOCKS_SELECTOR = 'body'; + const ALL_BLOCKS_SELECTOR = ':root'; /** * How to address the root block @@ -54,7 +54,7 @@ class WP_Theme_JSON { * * @var string */ - const ROOT_BLOCK_SELECTOR = 'body'; + const ROOT_BLOCK_SELECTOR = ':root'; const VALID_TOP_LEVEL_KEYS = array( 'customTemplates', @@ -361,7 +361,7 @@ private static function to_property( $css_name ) { * * { * 'root': { - * 'selector': 'body' + * 'selector': ':root' * }, * 'core/heading/h1': { * 'selector': 'h1' @@ -962,7 +962,7 @@ public function get_template_parts() { * * @return array */ - private static function get_style_nodes( $theme_json, $selectors = array() ) { + public static function get_style_nodes( $theme_json, $selectors = array() ) { $nodes = array(); if ( ! isset( $theme_json['styles'] ) ) { return $nodes; @@ -1001,7 +1001,7 @@ private static function get_style_nodes( $theme_json, $selectors = array() ) { * * @return array */ - private static function get_setting_nodes( $theme_json, $selectors = array() ) { + public static function get_setting_nodes( $theme_json, $selectors = array() ) { $nodes = array(); if ( ! isset( $theme_json['settings'] ) ) { return $nodes; diff --git a/lib/compat.php b/lib/compat.php index 674412ee400ef..84956857c262d 100644 --- a/lib/compat.php +++ b/lib/compat.php @@ -14,7 +14,7 @@ * @return bool */ function gutenberg_should_load_separate_block_assets() { - $load_separate_styles = gutenberg_is_fse_theme(); + $load_separate_styles = gutenberg_supports_block_templates(); /** * Determine if separate styles will be loaded for blocks on-render or not. * @@ -141,6 +141,23 @@ function gutenberg_inject_default_block_context( $args ) { add_filter( 'register_block_type_args', 'gutenberg_inject_default_block_context' ); +/** + * Amends the paths to preload when initializing edit post. + * + * @see https://core.trac.wordpress.org/ticket/50606 + * + * @since 8.4.0 + * + * @param array $preload_paths Default path list that will be preloaded. + * @return array Modified path list to preload. + */ +function gutenberg_preload_edit_post( $preload_paths ) { + $additional_paths = array( '/?context=edit' ); + return array_merge( $preload_paths, $additional_paths ); +} + +add_filter( 'block_editor_preload_paths', 'gutenberg_preload_edit_post' ); + /** * Override post type labels for Reusable Block custom post type. * The labels are different from the ones in Core. diff --git a/lib/editor-settings.php b/lib/editor-settings.php index e5d0ce8e53cbd..9a3b91c69a9f7 100644 --- a/lib/editor-settings.php +++ b/lib/editor-settings.php @@ -24,10 +24,6 @@ function gutenberg_extend_post_editor_settings( $settings ) { $settings['imageDefaultSize'] = in_array( $image_default_size, $image_sizes, true ) ? $image_default_size : 'large'; $settings['__unstableEnableFullSiteEditingBlocks'] = gutenberg_supports_block_templates(); - if ( gutenberg_is_fse_theme() ) { - $settings['defaultTemplatePartAreas'] = gutenberg_get_allowed_template_part_areas(); - } - return $settings; } add_filter( 'block_editor_settings', 'gutenberg_extend_post_editor_settings' ); diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index d8df5d1301bfe..8d9f09878cce8 100644 --- a/lib/full-site-editing/edit-site-page.php +++ b/lib/full-site-editing/edit-site-page.php @@ -109,7 +109,7 @@ function gutenberg_edit_site_init( $hook ) { array( 'preload_paths' => array( array( '/wp/v2/media', 'OPTIONS' ), - '/', + '/?context=edit', '/wp/v2/types?context=edit', '/wp/v2/taxonomies?context=edit', '/wp/v2/pages?context=edit', diff --git a/lib/full-site-editing/page-templates.php b/lib/full-site-editing/page-templates.php index caac07dc98481..e868d963e5aaf 100644 --- a/lib/full-site-editing/page-templates.php +++ b/lib/full-site-editing/page-templates.php @@ -8,10 +8,13 @@ /** * Load the page templates in Gutenberg. * - * @param array $templates Page templates. + * @param array $templates Page templates. + * @param WP_Theme $theme WP_Theme instance. + * @param WP_Post $post The post being edited, provided for context, or null. + * @param string $post_type Post type to get the templates for. * @return array (Maybe) modified page templates array. */ -function gutenberg_load_block_page_templates( $templates ) { +function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_type ) { if ( ! gutenberg_supports_block_templates() ) { return $templates; } @@ -24,4 +27,4 @@ function gutenberg_load_block_page_templates( $templates ) { return $templates; } -add_filter( 'theme_templates', 'gutenberg_load_block_page_templates' ); +add_filter( 'theme_templates', 'gutenberg_load_block_page_templates', 10, 4 ); diff --git a/lib/full-site-editing/template-loader.php b/lib/full-site-editing/template-loader.php index 98f9f6b1394fe..6f96427812aa6 100644 --- a/lib/full-site-editing/template-loader.php +++ b/lib/full-site-editing/template-loader.php @@ -20,7 +20,6 @@ function gutenberg_add_template_loader_filters() { add_filter( str_replace( '-', '', $template_type ) . '_template', 'gutenberg_override_query_template', 20, 3 ); } } - add_action( 'wp_loaded', 'gutenberg_add_template_loader_filters' ); /** @@ -70,19 +69,6 @@ function gutenberg_override_query_template( $template, $type, array $templates = $current_template_slug = basename( $template, '.php' ); $current_block_template_slug = is_object( $current_template ) ? $current_template->slug : false; foreach ( $templates as $template_item ) { - - // if the theme is a child theme we want to check if a php template exists - // and that a corresponding block template from the theme and not the parent doesn't exist. - $has_php_template = file_exists( get_stylesheet_directory() . '/' . $type . '.php' ); - $has_block_template = false; - $block_template = _gutenberg_get_template_file( 'wp_template', $type ); - if ( null !== $block_template && wp_get_theme()->get_stylesheet() === $block_template['theme'] ) { - $has_block_template = true; - } - if ( is_child_theme() && ( $has_php_template && ! $has_block_template ) ) { - return $template; - } - $template_item_slug = gutenberg_strip_php_suffix( $template_item ); // Break the loop if the block-template matches the template slug. @@ -143,7 +129,7 @@ function gutenberg_override_query_template( $template, $type, array $templates = } /** - * Return the correct 'wp_template' to render for the request template type. + * Return the correct 'wp_template' to render fot the request template type. * * Accepts an optional $template_hierarchy argument as a hint. * diff --git a/lib/full-site-editing/template-parts.php b/lib/full-site-editing/template-parts.php index 6212c190d5bf3..e3e0609a99710 100644 --- a/lib/full-site-editing/template-parts.php +++ b/lib/full-site-editing/template-parts.php @@ -176,8 +176,6 @@ function gutenberg_get_allowed_template_part_areas() { 'General templates often perform a specific role like displaying post content, and are not tied to any particular area.', 'gutenberg' ), - 'icon' => 'layout', - 'area_tag' => 'div', ), array( 'area' => WP_TEMPLATE_PART_AREA_HEADER, @@ -186,8 +184,6 @@ function gutenberg_get_allowed_template_part_areas() { 'The Header template defines a page area that typically contains a title, logo, and main navigation.', 'gutenberg' ), - 'icon' => 'header', - 'area_tag' => 'header', ), array( 'area' => WP_TEMPLATE_PART_AREA_FOOTER, @@ -196,8 +192,6 @@ function gutenberg_get_allowed_template_part_areas() { 'The Footer template defines a page area that typically contains site credits, social links, or any other combination of blocks.', 'gutenberg' ), - 'icon' => 'footer', - 'area_tag' => 'footer', ), ); diff --git a/lib/init.php b/lib/init.php index 880fe852c6fad..d320d3bffaf24 100644 --- a/lib/init.php +++ b/lib/init.php @@ -36,8 +36,7 @@ function gutenberg_menu() { __( 'Widgets', 'gutenberg' ), 'edit_theme_options', 'gutenberg-widgets', - 'the_gutenberg_widgets', - 2 + 'the_gutenberg_widgets' ); remove_submenu_page( 'themes.php', 'widgets.php' ); } diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 7fc01d2133910..891153bcd72b2 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -41,8 +41,6 @@ function gutenberg_widgets_init( $hook ) { return; } - add_filter( 'admin_body_class', 'gutenberg_widgets_editor_add_admin_body_classes' ); - $settings = array_merge( gutenberg_get_default_block_editor_settings(), gutenberg_get_legacy_widget_settings() @@ -93,15 +91,14 @@ function gutenberg_widgets_editor_load_block_editor_scripts_and_styles( $is_bloc add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_widgets_editor_load_block_editor_scripts_and_styles' ); /** - * Adds admin classes necessary for the block-based widgets screen. - * - * - Adds `block-editor-page` editor body class to allow directly styling the admin pages that are based on the block editor. - * - Shows responsive embeds correctly on the widgets screen by adding the `wp-embed-responsive` class. + * Show responsive embeds correctly on the widgets screen by adding the wp-embed-responsive class. * * @param string $classes existing admin body classes. * - * @return string admin body classes including the `block-editor-page` and `wp-embed-responsive` classes. + * @return string admin body classes including the wp-embed-responsive class. */ -function gutenberg_widgets_editor_add_admin_body_classes( $classes ) { - return "$classes block-editor-page wp-embed-responsive"; +function gutenberg_widgets_editor_add_responsive_embed_body_class( $classes ) { + return "$classes wp-embed-responsive"; } + +add_filter( 'admin_body_class', 'gutenberg_widgets_editor_add_responsive_embed_body_class' ); diff --git a/package-lock.json b/package-lock.json index cd0bad87a00b9..27a6e5816877c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "10.5.3", + "version": "10.5.0-rc.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1496,7 +1496,6 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz", "integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==", - "dev": true, "requires": { "commander": "^2.15.1" }, @@ -1504,8 +1503,7 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" } } }, @@ -2330,6 +2328,11 @@ "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==", "dev": true }, + "@itsjonq/is": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@itsjonq/is/-/is-0.0.2.tgz", + "integrity": "sha512-P0Ug+chfjCV1JV8MUxAGPz0BM76yDlR76AIfPwRZ6mAJW56k6b9j0s2cIcEsEAu0gNj/RJD1STw777AQyBN3CQ==" + }, "@jest/console": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz", @@ -7721,6 +7724,12 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "caniuse-lite": { + "version": "1.0.30001208", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz", + "integrity": "sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==", + "dev": true + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -11910,8 +11919,7 @@ "@types/node": { "version": "14.14.22", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz", - "integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==", - "dev": true + "integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==" }, "@types/node-fetch": { "version": "2.5.10", @@ -13333,6 +13341,7 @@ "@emotion/cache": "^10.0.27", "@emotion/core": "^10.1.1", "@emotion/css": "^10.0.22", + "@emotion/hash": "^0.8.0", "@emotion/native": "^10.0.22", "@emotion/styled": "^10.0.23", "@wordpress/a11y": "file:packages/a11y", @@ -13349,6 +13358,10 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", + "@wp-g2/components": "^0.0.160", + "@wp-g2/context": "^0.0.160", + "@wp-g2/styles": "^0.0.160", + "@wp-g2/utils": "^0.0.160", "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", @@ -13530,7 +13543,7 @@ "is-promise": "^4.0.0", "lodash": "^4.17.19", "memize": "^1.1.0", - "redux": "^4.1.0", + "redux": "^4.0.0", "turbo-combine-reducers": "^1.0.2", "use-memo-one": "^1.1.1" } @@ -13625,7 +13638,7 @@ "chalk": "^4.0.0", "expect-puppeteer": "^4.4.0", "lodash": "^4.17.19", - "puppeteer-testing-library": "^0.4.0", + "puppeteer-testing-library": "^0.3.1", "uuid": "^8.3.0" } }, @@ -14348,10 +14361,9 @@ "mini-css-extract-plugin": "^1.3.9", "minimist": "^1.2.0", "npm-package-json-lint": "^5.0.0", - "postcss": "^8.2.2", "postcss-loader": "^4.2.0", "prettier": "npm:wp-prettier@2.2.1-beta-1", - "puppeteer-core": "^9.0.0", + "puppeteer-core": "^5.5.0", "read-pkg-up": "^1.0.1", "resolve-bin": "^0.4.0", "sass": "^1.26.11", @@ -14366,6 +14378,16 @@ "webpack-cli": "^3.3.11", "webpack-livereload-plugin": "^2.3.0", "webpack-sources": "^2.2.0" + }, + "dependencies": { + "puppeteer-testing-library": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.0.tgz", + "integrity": "sha512-iLD2zaz+d+GYUhZ8DgBL3wyg1KsWUOXUMRQEYgRnjmR6uPJJn6XfZRohQUIqExu2D0rPFNA3PDyqgXHDqeqc6w==", + "requires": { + "jest-diff": "^26.6.2" + } + } } }, "@wordpress/server-side-render": { @@ -14435,6 +14457,136 @@ "lodash": "^4.17.19" } }, + "@wp-g2/components": { + "version": "0.0.160", + "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.160.tgz", + "integrity": "sha512-44qUtiF5Nl/srD7Vzbpcd0im/EIej04fOdDfa0lfDxXJDNK3RRtSSEwCRhok/M5SKCmvYbZKRUx2K0ugXNqK0Q==", + "requires": { + "@popperjs/core": "^2.5.4", + "@wp-g2/context": "^0.0.160", + "@wp-g2/styles": "^0.0.160", + "@wp-g2/utils": "^0.0.160", + "csstype": "^3.0.3", + "downshift": "^6.0.15", + "framer-motion": "^2.1.0", + "highlight-words-core": "^1.2.2", + "history": "^4.9.0", + "lodash": "^4.17.19", + "path-to-regexp": "^1.7.0", + "react-colorful": "4.4.4", + "react-textarea-autosize": "^8.2.0", + "react-use-gesture": "^9.0.0", + "reakit": "^1.3.4" + }, + "dependencies": { + "csstype": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "@wp-g2/context": { + "version": "0.0.160", + "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.160.tgz", + "integrity": "sha512-50wSQCZkdZEexP88Ljutskn7/klT2Id1ks4GpzKDSBM8kadrfNdr2iabjgJdFLIH33S+r4dzEnzLs9SFtqUgwg==", + "requires": { + "@wp-g2/create-styles": "^0.0.160", + "@wp-g2/styles": "^0.0.160", + "@wp-g2/utils": "^0.0.160", + "lodash": "^4.17.19" + } + }, + "@wp-g2/create-styles": { + "version": "0.0.160", + "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.160.tgz", + "integrity": "sha512-2/q8jcB9wIyfxkoCfNhz+9otRmAbDwfgk3nSEFhyz9ExR+OCqNUWqmITE3TZ4hYaSsV8E/gUUO4JjnPPy989bA==", + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/hash": "^0.8.0", + "@emotion/is-prop-valid": "^0.8.8", + "@wp-g2/utils": "^0.0.160", + "create-emotion": "^10.0.27", + "emotion": "^10.0.27", + "emotion-theming": "^10.0.27", + "lodash": "^4.17.19", + "mitt": "^2.1.0", + "rtlcss": "^2.6.2", + "styled-griddie": "^0.1.3" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + } + } + }, + "@wp-g2/styles": { + "version": "0.0.160", + "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.160.tgz", + "integrity": "sha512-o91jxb0ZwEDRJrtVVjnqn3qTAXjnxZ1fX5KF3Q7oz776lMZPHsyfC0hvqnOz0w7zqaZZpdWtVQRShgrYXN6JHw==", + "requires": { + "@wp-g2/create-styles": "^0.0.160", + "@wp-g2/utils": "^0.0.160" + } + }, + "@wp-g2/utils": { + "version": "0.0.160", + "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.160.tgz", + "integrity": "sha512-4FhezjKyeYVb+3PZahW1kmqXpCvVvuJM97EcGqkKf+u4Qf66J3n1niHgfnRbn8aNydYK6EFze+6/UL48U35z1w==", + "requires": { + "copy-to-clipboard": "^3.3.1", + "create-emotion": "^10.0.27", + "deepmerge": "^4.2.2", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2", + "json2mq": "^0.2.0", + "lodash": "^4.17.19", + "memize": "^1.1.0", + "react-merge-refs": "^1.1.0", + "react-resize-aware": "^3.1.0", + "tinycolor2": "^1.4.2", + "use-enhanced-state": "^0.0.13", + "use-isomorphic-layout-effect": "^1.0.0" + }, + "dependencies": { + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + } + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -23518,6 +23670,12 @@ "node-releases": "^1.1.70" } }, + "caniuse-lite": { + "version": "1.0.30001202", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz", + "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==", + "dev": true + }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -24756,26 +24914,41 @@ } }, "browserslist": { - "version": "4.16.5", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.5.tgz", - "integrity": "sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==", + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.15.0.tgz", + "integrity": "sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==", "requires": { - "caniuse-lite": "^1.0.30001214", - "colorette": "^1.2.2", - "electron-to-chromium": "^1.3.719", + "caniuse-lite": "^1.0.30001164", + "colorette": "^1.2.1", + "electron-to-chromium": "^1.3.612", "escalade": "^3.1.1", - "node-releases": "^1.1.71" + "node-releases": "^1.1.67" }, "dependencies": { + "caniuse-lite": { + "version": "1.0.30001165", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz", + "integrity": "sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==" + }, "colorette": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", - "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", + "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==" }, "electron-to-chromium": { - "version": "1.3.720", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.720.tgz", - "integrity": "sha512-B6zLTxxaOFP4WZm6DrvgRk8kLFYWNhQ5TrHMC0l5WtkMXhU5UbnvWoTfeEwqOruUSlNMhVLfYak7REX6oC5Yfw==" + "version": "1.3.619", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.619.tgz", + "integrity": "sha512-WFGatwtk7Fw0QcKCZzfGD72hvbcXV8kLY8aFuj0Ip0QRnOtyLYMsc+wXbSjb2w4lk1gcAeNU1/lQ20A+tvuypQ==" + }, + "escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" + }, + "node-releases": { + "version": "1.1.67", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz", + "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==" } } }, @@ -25124,9 +25297,10 @@ } }, "caniuse-lite": { - "version": "1.0.30001214", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz", - "integrity": "sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg==" + "version": "1.0.30000998", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000998.tgz", + "integrity": "sha512-8Tj5sPZR9kMHeDD9SZXIVr5m9ofufLLCG2Y4QwQrH18GIwG+kCc+zYdlR036ZRkuKjVVetyxeAgGA1xF7XdmzQ==", + "dev": true }, "capture-exit": { "version": "2.0.0", @@ -25158,7 +25332,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz", "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==", - "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -25168,7 +25341,6 @@ "version": "4.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", - "dev": true, "requires": { "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" @@ -25178,7 +25350,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "requires": { "color-name": "~1.1.4" } @@ -25186,20 +25357,17 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "supports-color": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", - "dev": true, "requires": { "has-flag": "^4.0.0" } @@ -26642,7 +26810,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", - "dev": true, "requires": { "toggle-selection": "^1.0.6" } @@ -26787,6 +26954,11 @@ "node-releases": "^1.1.70" } }, + "caniuse-lite": { + "version": "1.0.30001204", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz", + "integrity": "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==" + }, "colorette": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", @@ -27940,8 +28112,7 @@ "deepmerge": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", - "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", - "dev": true + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==" }, "defaults": { "version": "1.0.3", @@ -28257,9 +28428,9 @@ } }, "devtools-protocol": { - "version": "0.0.869402", - "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.869402.tgz", - "integrity": "sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==", + "version": "0.0.818844", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.818844.tgz", + "integrity": "sha512-AD1hi7iVJ8OD0aMLQU5VK0XH9LDlA1+BcPIgrAxPfaibx2DbWucuyOhc4oyQCbnvDDO68nN6/LcKfqTP343Jjg==", "dev": true }, "dezalgo": { @@ -28285,8 +28456,7 @@ "diff-sequences": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz", - "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==", - "dev": true + "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==" }, "diffie-hellman": { "version": "5.0.3", @@ -28644,11 +28814,19 @@ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", "dev": true }, + "emotion": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz", + "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==", + "requires": { + "babel-plugin-emotion": "^10.0.27", + "create-emotion": "^10.0.27" + } + }, "emotion-theming": { "version": "10.0.27", "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz", "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/weak-memoize": "0.2.5", @@ -28659,7 +28837,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dev": true, "requires": { "react-is": "^16.7.0" } @@ -32410,6 +32587,34 @@ "map-cache": "^0.2.2" } }, + "framer-motion": { + "version": "2.9.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-2.9.5.tgz", + "integrity": "sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "framesync": "^4.1.0", + "hey-listen": "^1.0.8", + "popmotion": "9.0.0-rc.20", + "style-value-types": "^3.1.9", + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "framesync": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz", + "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==", + "requires": { + "hey-listen": "^1.0.5" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -33901,6 +34106,19 @@ "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==", "dev": true }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -36719,7 +36937,6 @@ "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz", "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==", - "dev": true, "requires": { "chalk": "^4.0.0", "diff-sequences": "^26.6.2", @@ -36731,7 +36948,6 @@ "version": "26.6.2", "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz", "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==", - "dev": true, "requires": { "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", @@ -36744,7 +36960,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz", "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==", - "dev": true, "requires": { "@types/istanbul-lib-report": "*" } @@ -36752,14 +36967,12 @@ "ansi-regex": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", - "dev": true + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -36768,7 +36981,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "requires": { "color-name": "~1.1.4" } @@ -36776,20 +36988,17 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "jest-get-type": { "version": "26.3.0", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz", - "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==", - "dev": true + "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==" }, "pretty-format": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz", "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==", - "dev": true, "requires": { "@jest/types": "^26.6.2", "ansi-regex": "^5.0.0", @@ -36800,8 +37009,7 @@ "react-is": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", - "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==", - "dev": true + "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" } } }, @@ -40172,6 +40380,14 @@ "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", "dev": true }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", + "requires": { + "string-convert": "^0.2.0" + } + }, "json2php": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.4.tgz", @@ -43598,6 +43814,11 @@ } } }, + "mitt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" + }, "mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -46102,6 +46323,24 @@ "@babel/runtime": "^7.12.5" } }, + "popmotion": { + "version": "9.0.0-rc.20", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-rc.20.tgz", + "integrity": "sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==", + "requires": { + "framesync": "^4.1.0", + "hey-listen": "^1.0.8", + "style-value-types": "^3.1.9", + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", @@ -49307,19 +49546,19 @@ "dev": true }, "puppeteer-core": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-9.0.0.tgz", - "integrity": "sha512-cgrnFLg5td0ciW3seGmLPlAf7e2jlIEjZlBOij/byS4iD3DRMHxItzVHv5OwEntkC1eamZqt8+WJJpAaGk6zPw==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz", + "integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==", "dev": true, "requires": { "debug": "^4.1.0", - "devtools-protocol": "0.0.869402", + "devtools-protocol": "0.0.818844", "extract-zip": "^2.0.0", - "https-proxy-agent": "^5.0.0", + "https-proxy-agent": "^4.0.0", "node-fetch": "^2.6.1", "pkg-dir": "^4.2.0", "progress": "^2.0.1", - "proxy-from-env": "^1.1.0", + "proxy-from-env": "^1.0.0", "rimraf": "^3.0.2", "tar-fs": "^2.0.0", "unbzip2-stream": "^1.3.3", @@ -49327,13 +49566,10 @@ }, "dependencies": { "agent-base": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", - "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", - "dev": true, - "requires": { - "debug": "4" - } + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", + "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==", + "dev": true }, "debug": { "version": "4.3.1", @@ -49376,12 +49612,12 @@ } }, "https-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", - "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz", + "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==", "dev": true, "requires": { - "agent-base": "6", + "agent-base": "5", "debug": "4" } }, @@ -49452,9 +49688,9 @@ } }, "puppeteer-testing-library": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.4.0.tgz", - "integrity": "sha512-7G2hZO/JbOgeZppEhh6jLP8J7y1cDExGZT2YtLAczgcDSXBWYz42aUGhVCUADU6BGj8ozp3vfiInWj/KrGUqIw==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.3.1.tgz", + "integrity": "sha512-k2hRLIPEL+BKBHFncEfs1SSICKa9gfEzdxGa5wO3jHofMszJJnIRg9rNEFVx3+K7OOU8gZEqd+zFGICMZNQ9QA==", "dev": true, "requires": { "jest-diff": "^26.6.2" @@ -49725,6 +49961,11 @@ "prop-types": "^15.5.6" } }, + "react-colorful": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-4.4.4.tgz", + "integrity": "sha512-01V2/6rr6sa1vaZntWZJXZxnU7ew02NG2rqq0eoVp4d3gFU5Ug9lDzNMbr+8ns0byXsJbBR8LbwQTlAjz6x7Kg==" + }, "react-dates": { "version": "17.2.0", "resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz", @@ -49822,6 +50063,12 @@ "node-releases": "^1.1.61" } }, + "caniuse-lite": { + "version": "1.0.30001208", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz", + "integrity": "sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==", + "dev": true + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -50382,6 +50629,11 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "dev": true }, + "react-merge-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", + "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==" + }, "react-moment-proptypes": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz", @@ -51589,7 +51841,6 @@ "version": "8.3.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.0.tgz", "integrity": "sha512-3GLWFAan2pbwBeoeNDoqGmSbrShORtgWfaWX0RJDivsUrpShh01saRM5RU/i4Zmf+whpBVEY5cA90Eq8Ub1N3w==", - "dev": true, "requires": { "@babel/runtime": "^7.10.2", "use-composed-ref": "^1.0.0", @@ -51870,11 +52121,12 @@ } }, "redux": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", - "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz", + "integrity": "sha512-NnnHF0h0WVE/hXyrB6OlX67LYRuaf/rJcbWvnHHEPCF/Xa/AZpwhs/20WyqzQae5x4SD2F9nPObgBh2rxAgLiA==", "requires": { - "@babel/runtime": "^7.9.2" + "loose-envify": "^1.1.0", + "symbol-observable": "^1.2.0" } }, "redux-multi": { @@ -52830,6 +53082,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -52936,7 +53193,6 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz", "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==", - "dev": true, "requires": { "@choojs/findup": "^0.2.1", "chalk": "^2.4.2", @@ -52949,7 +53205,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -52960,7 +53215,6 @@ "version": "6.0.23", "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, "requires": { "chalk": "^2.4.1", "source-map": "^0.6.1", @@ -52970,8 +53224,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" } } }, @@ -54352,6 +54605,11 @@ "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", "dev": true }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" + }, "string-length": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz", @@ -55206,8 +55464,7 @@ "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", - "dev": true + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" }, "strip-outer": { "version": "1.0.1", @@ -55329,6 +55586,27 @@ "inline-style-parser": "0.1.1" } }, + "style-value-types": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz", + "integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "styled-griddie": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/styled-griddie/-/styled-griddie-0.1.3.tgz", + "integrity": "sha512-RjsiiADJrRpdPTF8NR26nlZutnvkrX78tiM5/za/E+ftVdpjD8ZBb2iOzrIzfix80uDcHYQbg3iIR0lOGaYmEQ==" + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -55508,6 +55786,12 @@ "fill-range": "^7.0.1" } }, + "caniuse-lite": { + "version": "1.0.30001173", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001173.tgz", + "integrity": "sha512-R3aqmjrICdGCTAnSXtNyvWYMK3YtV5jwudbq0T7nN9k4kmE4CBuwPqyJ+KBzepSTh0huivV2gLbSMEzTTmfeYw==", + "dev": true + }, "chalk": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", @@ -56212,8 +56496,7 @@ "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", - "dev": true + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, "symbol-tree": { "version": "3.2.4", @@ -56576,6 +56859,12 @@ "tar-stream": "^2.1.4" }, "dependencies": { + "chownr": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", + "dev": true + }, "pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -57302,6 +57591,11 @@ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, "tiny-lr": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz", @@ -57316,6 +57610,11 @@ "qs": "^6.4.0" } }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", @@ -57392,8 +57691,7 @@ "toggle-selection": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=", - "dev": true + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" }, "toidentifier": { "version": "1.0.0", @@ -57492,8 +57790,7 @@ "ts-essentials": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", - "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==", - "dev": true + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" }, "ts-pnp": { "version": "1.2.0", @@ -58161,22 +58458,28 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==", - "dev": true, "requires": { "ts-essentials": "^2.0.3" } }, + "use-enhanced-state": { + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/use-enhanced-state/-/use-enhanced-state-0.0.13.tgz", + "integrity": "sha512-RCtUQdhfUXu/0GAQqLnKPetUt3BheYFpOTogppHe9x1XGwluiu6DQLKVNnc3yMfj0HM3IOVBgw5nVJJuZS5TWQ==", + "requires": { + "@itsjonq/is": "0.0.2", + "tiny-warning": "^1.0.3" + } + }, "use-isomorphic-layout-effect": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.0.tgz", - "integrity": "sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==", - "dev": true + "integrity": "sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==" }, "use-latest": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", - "dev": true, "requires": { "use-isomorphic-layout-effect": "^1.0.0" } @@ -58300,6 +58603,11 @@ "builtins": "^1.0.3" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vargs": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz", diff --git a/package.json b/package.json index 9fc689abff35b..3534b6195bfa8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "10.5.3", + "version": "10.5.0-rc.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", @@ -150,7 +150,7 @@ "babel-plugin-react-native-platform-specific-extensions": "1.1.1", "babel-plugin-transform-remove-console": "6.9.4", "benchmark": "2.1.4", - "browserslist": "4.16.5", + "browserslist": "4.15.0", "chalk": "4.0.0", "commander": "4.1.0", "concurrently": "3.5.0", diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index 9d8a3eb09d38e..f12bda946e1fc 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.15.0 (2021-03-17) ## 2.9.0 (2020-04-15) diff --git a/packages/a11y/README.md b/packages/a11y/README.md index 5f44a3d22cf39..46cf83291fd30 100644 --- a/packages/a11y/README.md +++ b/packages/a11y/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/a11y --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 24e5d95d159a2..cbf1633fcc9ec 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/a11y", - "version": "2.15.3", + "version": "2.15.2", "description": "Accessibility (a11y) utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,9 +20,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md index 225ec2a9fb7cd..dad14cc38f45d 100644 --- a/packages/annotations/CHANGELOG.md +++ b/packages/annotations/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.25.0 (2021-03-17) ## 1.24.0 (2020-12-17) diff --git a/packages/annotations/README.md b/packages/annotations/README.md index 5c3f3b59d6d7c..af3a2263d1175 100644 --- a/packages/annotations/README.md +++ b/packages/annotations/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/annotations --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Getting Started diff --git a/packages/annotations/package.json b/packages/annotations/package.json index 63e6e28008518..7e34e9b075484 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/annotations", - "version": "1.25.3", + "version": "1.25.2", "description": "Annotate content in the Gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md index edfb5152a961d..9169fafa457b7 100644 --- a/packages/api-fetch/CHANGELOG.md +++ b/packages/api-fetch/CHANGELOG.md @@ -2,16 +2,9 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - -## 4.0.0 (2021-04-29) - -### Breaking Changes +### Breaking changes -- `OPTIONS` requests which are handled by the preloading middleware are no longer resolved as unparsed responses unless you explicitly set `parse: false`, for consistency with other request methods. If you expect an unparsed response, add `{ parse: false }` to your request options to preserve the previous behavior. +- `OPTIONS` requests which are handled by the preloading middleware are no longer resolved as unparsed responses unless you explicitly set `parse: false`, for consistency with other request methods. If you expect an unparsed response, add `{ parse: false }` to your request options to preserve the previous behavior. ## 3.23.1 (2021-04-15) diff --git a/packages/api-fetch/README.md b/packages/api-fetch/README.md index eb1882a9d6e2d..3fd2db8605ec9 100644 --- a/packages/api-fetch/README.md +++ b/packages/api-fetch/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/api-fetch --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json index ab7ea085eb85f..86f3135080228 100644 --- a/packages/api-fetch/package.json +++ b/packages/api-fetch/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/api-fetch", - "version": "4.0.0", + "version": "3.23.1", "description": "Utility to make WordPress REST API requests.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md index 3f3e26ee7dbe7..b6ba6555736ff 100644 --- a/packages/autop/CHANGELOG.md +++ b/packages/autop/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.12.0 (2021-03-17) ## 2.7.0 (2020-04-15) diff --git a/packages/autop/README.md b/packages/autop/README.md index 43d6a0ca123d1..882affe18946e 100644 --- a/packages/autop/README.md +++ b/packages/autop/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/autop --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ### API diff --git a/packages/autop/package.json b/packages/autop/package.json index 43ea2f97d0fde..c00b9249ee493 100644 --- a/packages/autop/package.json +++ b/packages/autop/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index b244eb598c18d..46433925ebad5 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 5.2.0 (2021-04-06) ### Enhancements diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 3e82a7d088be1..73ebfe5512560 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -16,9 +16,7 @@ module.exports = ( api ) => { } ); const getPresetEnv = () => { - const opts = { - include: [ 'proposal-nullish-coalescing-operator' ], - }; + const opts = {}; if ( isTestEnv ) { opts.targets = { diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index 4cd0ca046ae92..906a695164113 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/babel-preset-default", - "version": "5.2.2", + "version": "5.2.1", "description": "Default Babel preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/babel-preset-default/test/__snapshots__/index.js.snap b/packages/babel-preset-default/test/__snapshots__/index.js.snap index 249a42b95537c..667e2b6594813 100644 --- a/packages/babel-preset-default/test/__snapshots__/index.js.snap +++ b/packages/babel-preset-default/test/__snapshots__/index.js.snap @@ -1,23 +1,67 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Babel preset default transpilation works properly 1`] = ` -"describe('Babel preset default', () => { - async function* foo() { - await 1; - yield 2; +"import _asyncToGenerator from \\"@babel/runtime/helpers/asyncToGenerator\\"; +import _awaitAsyncGenerator from \\"@babel/runtime/helpers/awaitAsyncGenerator\\"; +import _wrapAsyncGenerator from \\"@babel/runtime/helpers/wrapAsyncGenerator\\"; +import _regeneratorRuntime from \\"@babel/runtime/regenerator\\"; +describe('Babel preset default', function () { + function foo() { + return _foo.apply(this, arguments); } - test('support for async generator functions', async () => { - const generator = foo(); - expect(await generator.next()).toEqual({ - done: false, - value: 2 - }); - }); - test('support for optional chaining', () => { + function _foo() { + _foo = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() { + return _regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + _context.next = 2; + return _awaitAsyncGenerator(1); + + case 2: + _context.next = 4; + return 2; + + case 4: + case \\"end\\": + return _context.stop(); + } + } + }, _callee); + })); + return _foo.apply(this, arguments); + } + + test('support for async generator functions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() { + var generator; + return _regeneratorRuntime.wrap(function _callee2$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + generator = foo(); + _context2.t0 = expect; + _context2.next = 4; + return generator.next(); + + case 4: + _context2.t1 = _context2.sent; + (0, _context2.t0)(_context2.t1).toEqual({ + done: false, + value: 2 + }); + + case 6: + case \\"end\\": + return _context2.stop(); + } + } + }, _callee2); + }))); + test('support for optional chaining', function () { var _obj$foo, _obj$foo2; - const obj = { + var obj = { foo: { bar: 42 } diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index 03f6bfbdd566d..792672ba66ddc 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -5,7 +5,6 @@ // WordPress grays. $black: #000; // Use only when you truly need pure black. For UI, use $gray-900. $gray-900: #1e1e1e; -$gray-800: #2f2f2f; $gray-700: #757575; // Meets 4.6:1 text contrast against white. $gray-600: #949494; // Meets 3:1 UI or large text contrast against white. $gray-400: #ccc; diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 92efe18d7ecdb..8baf03c3fa61b 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -84,7 +84,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".interface-interface-skeleton__sidebar": 100000, - ".edit-post-layout__toggle-sidebar-panel": 100000, + ".edit-post-layout__toogle-sidebar-panel": 100000, ".edit-site-sidebar": 100000, ".edit-widgets-sidebar": 100000, ".edit-post-layout .edit-post-post-publish-panel": 100001, diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 7f5fa45fdc4be..9da5878f25728 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/base-styles", - "version": "3.4.3", + "version": "3.4.2", "description": "Base SCSS utilities and variables for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md index ab8fe8c1444cd..bd12b7a03757e 100644 --- a/packages/blob/CHANGELOG.md +++ b/packages/blob/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.13.0 (2021-03-17) ## 2.11.0 (2020-10-19) diff --git a/packages/blob/package.json b/packages/blob/package.json index c2b981825dc13..aae6bf44d7f61 100644 --- a/packages/blob/package.json +++ b/packages/blob/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index a9ea77993ec9e..9255db7059ea9 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.19.0 (2021-03-17) ## 1.18.0 (2020-12-17) diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md index a0c5ea8cd7b0d..f43474acffb7a 100644 --- a/packages/block-directory/README.md +++ b/packages/block-directory/README.md @@ -12,7 +12,7 @@ Install the module npm install @wordpress/block-directory --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 55128781cf4fe..f6ff0734026c4 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-directory", - "version": "1.19.3", + "version": "1.19.2", "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index c762040248204..5b420e088ea02 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 5.3.0 (2021-03-17) - Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere. diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 2c895c1f286ac..814eb12c18b76 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/block-editor --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage @@ -194,14 +194,6 @@ _Related_ - -_Parameters_ - -- _props_ `Object`: Fill props. - -_Returns_ - -- `WPElement`: Element. - # **BlockTitle** Renders the block's configured title as a string, or empty if the title @@ -541,7 +533,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **storeConfig** @@ -553,7 +545,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **ToolSelector** diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 007f1982ce641..231b7062a1b86 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-editor", - "version": "5.3.3", + "version": "5.3.2", "description": "Generic block editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js index 2392c3d07ee3a..f66636e2a6265 100644 --- a/packages/block-editor/src/components/block-controls/fill.js +++ b/packages/block-editor/src/components/block-controls/fill.js @@ -7,7 +7,6 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { - __experimentalStyleProvider as StyleProvider, __experimentalToolbarContext as ToolbarContext, ToolbarGroup, } from '@wordpress/components'; @@ -29,23 +28,21 @@ export default function BlockControlsFill( { const Fill = groups[ group ].Fill; return ( - - - { ( fillProps ) => { - // Children passed to BlockControlsFill will not have access to any - // React Context whose Provider is part of the BlockControlsSlot tree. - // So we re-create the Provider in this subtree. - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - { group === 'default' && ( - - ) } - { children } - - ); - } } - - + + { ( fillProps ) => { + // Children passed to BlockControlsFill will not have access to any + // React Context whose Provider is part of the BlockControlsSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + { group === 'default' && ( + + ) } + { children } + + ); + } } + ); } diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js similarity index 100% rename from packages/block-editor/src/components/block-tools/block-contextual-toolbar.js rename to packages/block-editor/src/components/block-list/block-contextual-toolbar.js diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js similarity index 92% rename from packages/block-editor/src/components/block-tools/block-popover.js rename to packages/block-editor/src/components/block-list/block-popover.js index 822a942308b23..91f44d2df09f8 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/packages/block-editor/src/components/block-list/block-popover.js @@ -7,7 +7,13 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, useCallback, useRef, useEffect } from '@wordpress/element'; +import { + useState, + useCallback, + useContext, + useRef, + useEffect, +} from '@wordpress/element'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { Popover } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -21,8 +27,9 @@ import { getScrollContainer } from '@wordpress/dom'; import BlockSelectionButton from './block-selection-button'; import BlockContextualToolbar from './block-contextual-toolbar'; import Inserter from '../inserter'; +import { BlockNodes } from './'; +import { getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; function selector( select ) { const { @@ -64,6 +71,7 @@ function BlockPopover( { const isLargeViewport = useViewportMatch( 'medium' ); const [ isToolbarForced, setIsToolbarForced ] = useState( false ); const [ isInserterShown, setIsInserterShown ] = useState( false ); + const blockNodes = useContext( BlockNodes ); const { stopTyping } = useDispatch( blockEditorStore ); // Controls when the side inserter on empty lines should @@ -107,9 +115,11 @@ function BlockPopover( { // to it when re-mounting. const initialToolbarItemIndexRef = useRef(); - const selectedElement = useBlockElement( clientId ); - const lastSelectedElement = useBlockElement( lastClientId ); - const capturingElement = useBlockElement( capturingClientId ); + useEffect( () => { + // Resets the index whenever the active block changes so this is not + // persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169 + initialToolbarItemIndexRef.current = undefined; + }, [ clientId ] ); if ( ! shouldShowBreadcrumb && @@ -120,28 +130,32 @@ function BlockPopover( { return null; } - let node = selectedElement; + let node = blockNodes[ clientId ]; if ( ! node ) { return null; } + const { ownerDocument } = node; + if ( capturingClientId ) { - node = capturingElement; + node = getBlockDOMNode( capturingClientId, ownerDocument ); } let anchorRef = node; if ( hasMultiSelection ) { + const bottomNode = blockNodes[ lastClientId ]; + // Wait to render the popover until the bottom reference is available // as well. - if ( ! lastSelectedElement ) { + if ( ! bottomNode ) { return null; } anchorRef = { top: node, - bottom: lastSelectedElement, + bottom: bottomNode, }; } @@ -160,7 +174,6 @@ function BlockPopover( { const popoverPosition = showEmptyBlockSideInserter ? 'top left right' : 'top right left'; - const { ownerDocument } = node; const stickyBoundaryElement = showEmptyBlockSideInserter ? undefined : // The sticky boundary element should be the boundary at which the @@ -222,9 +235,6 @@ function BlockPopover( { __experimentalOnIndexChange={ ( index ) => { initialToolbarItemIndexRef.current = index; } } - // Resets the index whenever the active block changes so - // this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169 - key={ clientId } /> ) } { shouldShowBreadcrumb && ( diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js similarity index 100% rename from packages/block-editor/src/components/block-tools/block-selection-button.js rename to packages/block-editor/src/components/block-list/block-selection-button.js diff --git a/packages/block-editor/src/components/block-list/block-wrapper-elements.js b/packages/block-editor/src/components/block-list/block-wrapper-elements.js new file mode 100644 index 0000000000000..ce8eb456c9772 --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-wrapper-elements.js @@ -0,0 +1,26 @@ +/** + * HTML elements that can be used as a block wrapper. + */ +const ELEMENTS = [ + 'p', + 'div', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'ol', + 'ul', + 'li', + 'figure', + 'nav', + 'pre', + 'header', + 'section', + 'aside', + 'footer', + 'main', +]; + +export default ELEMENTS; diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js new file mode 100644 index 0000000000000..a06a644320cda --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-wrapper.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; + +/** + * Internal dependencies + */ +import ELEMENTS from './block-wrapper-elements'; +import { useBlockProps } from './use-block-props'; + +const BlockComponent = forwardRef( + ( { children, tagName: TagName = 'div', ...props }, ref ) => { + deprecated( 'wp.blockEditor.__experimentalBlock', { + since: '5.6', + alternative: 'wp.blockEditor.useBlockProps', + } ); + const blockProps = useBlockProps( { ...props, ref } ); + return { children }; + } +); + +const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => { + acc[ element ] = forwardRef( ( props, ref ) => { + return ; + } ); + return acc; +}, BlockComponent ); + +export const Block = ExtendedBlockComponent; diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js new file mode 100644 index 0000000000000..507e17bb982ec --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-wrapper.native.js @@ -0,0 +1,11 @@ +/** + * Internal dependencies + */ +import ELEMENTS from './block-wrapper-elements'; + +const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => { + acc[ element ] = element; + return acc; +}, String ); + +export const Block = ExtendedBlockComponent; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 4d866a6994ec6..352df1fd8a4f3 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -7,6 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { AsyncModeProvider, useSelect } from '@wordpress/data'; +import { useRef, createContext, useState } from '@wordpress/element'; import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; /** @@ -15,13 +16,21 @@ import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; import useBlockDropZone from '../use-block-drop-zone'; -import { useInBetweenInserter } from './use-in-between-inserter'; -import BlockTools from '../block-tools'; +import useInsertionPoint from './insertion-point'; +import BlockPopover from './block-popover'; import { store as blockEditorStore } from '../../store'; import { usePreParsePatterns } from '../../utils/pre-parse-patterns'; import { LayoutProvider, defaultLayout } from './layout'; -function Root( { className, children } ) { +export const BlockNodes = createContext(); +export const SetBlockNodes = createContext(); + +export default function BlockList( { className, __experimentalLayout } ) { + const ref = useRef(); + const [ blockNodes, setBlockNodes ] = useState( {} ); + const insertionPoint = useInsertionPoint( ref ); + usePreParsePatterns(); + const isLargeViewport = useViewportMatch( 'medium' ); const { isTyping, @@ -42,36 +51,31 @@ function Root( { className, children } ) { isNavigationMode: _isNavigationMode(), }; }, [] ); - return ( -
- { children } -
- ); -} -export default function BlockList( { className, __experimentalLayout } ) { - usePreParsePatterns(); return ( - - - - - + + { insertionPoint } + +
+ + + +
+ ); } diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js new file mode 100644 index 0000000000000..c209c48f513a6 --- /dev/null +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -0,0 +1,419 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { + useState, + useEffect, + useCallback, + useRef, + useMemo, +} from '@wordpress/element'; +import { Popover } from '@wordpress/components'; +import { isRTL } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Inserter from '../inserter'; +import { getBlockDOMNode } from '../../utils/dom'; +import { store as blockEditorStore } from '../../store'; + +function InsertionPointInserter( { + clientId, + rootClientId, + setIsInserterForced, +} ) { + return ( +
+ setIsInserterForced( false ) } + /> +
+ ); +} + +function InsertionPointPopover( { + clientId, + selectedRootClientId, + isInserterShown, + isInserterForced, + setIsInserterForced, + containerRef, + showInsertionPoint, +} ) { + const { selectBlock } = useDispatch( blockEditorStore ); + const ref = useRef(); + + const { + previousElement, + nextElement, + orientation, + isHidden, + nextClientId, + rootClientId, + } = useSelect( + ( select ) => { + const { + getBlockOrder, + getBlockRootClientId, + getBlockListSettings, + getMultiSelectedBlockClientIds, + getSelectedBlockClientId, + hasMultiSelection, + getSettings, + } = select( blockEditorStore ); + const { ownerDocument } = containerRef.current; + const targetRootClientId = clientId + ? getBlockRootClientId( clientId ) + : selectedRootClientId; + const blockOrder = getBlockOrder( targetRootClientId ); + if ( ! blockOrder.length ) { + return {}; + } + const previous = clientId + ? clientId + : blockOrder[ blockOrder.length - 1 ]; + const isLast = previous === blockOrder[ blockOrder.length - 1 ]; + const next = isLast + ? null + : blockOrder[ blockOrder.indexOf( previous ) + 1 ]; + const { hasReducedUI } = getSettings(); + const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); + const selectedBlockClientId = getSelectedBlockClientId(); + const blockOrientation = + getBlockListSettings( targetRootClientId )?.orientation || + 'vertical'; + + return { + previousElement: getBlockDOMNode( previous, ownerDocument ), + nextElement: getBlockDOMNode( next, ownerDocument ), + nextClientId: next, + isHidden: + hasReducedUI || + ( hasMultiSelection() + ? next && multiSelectedBlockClientIds.includes( next ) + : next && + blockOrientation === 'vertical' && + next === selectedBlockClientId ), + orientation: blockOrientation, + rootClientId: targetRootClientId, + }; + }, + [ clientId, selectedRootClientId ] + ); + + const style = useMemo( () => { + if ( ! previousElement ) { + return {}; + } + const previousRect = previousElement.getBoundingClientRect(); + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + + if ( orientation === 'vertical' ) { + return { + width: previousElement.offsetWidth, + height: nextRect ? nextRect.top - previousRect.bottom : 0, + }; + } + + let width = 0; + if ( nextElement ) { + width = isRTL() + ? previousRect.left - nextRect.right + : nextRect.left - previousRect.right; + } + + return { + width, + height: previousElement.offsetHeight, + }; + }, [ previousElement, nextElement ] ); + + const getAnchorRect = useCallback( () => { + const previousRect = previousElement.getBoundingClientRect(); + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + if ( orientation === 'vertical' ) { + if ( isRTL() ) { + return { + top: previousRect.bottom, + left: previousRect.right, + right: previousRect.left, + bottom: nextRect ? nextRect.top : previousRect.bottom, + }; + } + + return { + top: previousRect.bottom, + left: previousRect.left, + right: previousRect.right, + bottom: nextRect ? nextRect.top : previousRect.bottom, + }; + } + + if ( isRTL() ) { + return { + top: previousRect.top, + left: nextRect ? nextRect.right : previousRect.left, + right: previousRect.left, + bottom: previousRect.bottom, + }; + } + + return { + top: previousRect.top, + left: previousRect.right, + right: nextRect ? nextRect.left : previousRect.right, + bottom: previousRect.bottom, + }; + }, [ previousElement, nextElement ] ); + + if ( ! previousElement ) { + return null; + } + + const className = classnames( + 'block-editor-block-list__insertion-point', + 'is-' + orientation + ); + + function onClick( event ) { + if ( event.target === ref.current && nextClientId ) { + selectBlock( nextClientId, -1 ); + } + } + + function onFocus( event ) { + // Only handle click on the wrapper specifically, and not an event + // bubbled from the inserter itself. + if ( event.target !== ref.current ) { + setIsInserterForced( true ); + } + } + + // Only show the inserter when there's a `nextElement` (a block after the + // insertion point). At the end of the block list the trailing appender + // should serve the purpose of inserting blocks. + const showInsertionPointInserter = + ! isHidden && nextElement && ( isInserterShown || isInserterForced ); + + // Show the indicator if the insertion point inserter is visible, or if + // the `showInsertionPoint` state is `true`. The latter is generally true + // when hovering blocks for insertion in the block library. + const showInsertionPointIndicator = + showInsertionPointInserter || ( ! isHidden && showInsertionPoint ); + + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ + // While ideally it would be enough to capture the + // bubbling focus event from the Inserter, due to the + // characteristics of click focusing of `button`s in + // Firefox and Safari, it is not reliable. + // + // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + return ( + +
+ { showInsertionPointIndicator && ( +
+ ) } + { showInsertionPointInserter && ( + + ) } +
+ + ); + /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ +} + +export default function useInsertionPoint( ref ) { + const [ isInserterShown, setIsInserterShown ] = useState( false ); + const [ isInserterForced, setIsInserterForced ] = useState( false ); + const [ inserterClientId, setInserterClientId ] = useState( null ); + const { + isMultiSelecting, + isInserterVisible, + selectedClientId, + selectedRootClientId, + } = useSelect( ( select ) => { + const { + isMultiSelecting: _isMultiSelecting, + isBlockInsertionPointVisible, + getBlockInsertionPoint, + getBlockOrder, + } = select( blockEditorStore ); + + const insertionPoint = getBlockInsertionPoint(); + const order = getBlockOrder( insertionPoint.rootClientId ); + + return { + isMultiSelecting: _isMultiSelecting(), + isInserterVisible: isBlockInsertionPointVisible(), + selectedClientId: order[ insertionPoint.index - 1 ], + selectedRootClientId: insertionPoint.rootClientId, + }; + }, [] ); + const { getBlockListSettings } = useSelect( blockEditorStore ); + + const onMouseMove = useCallback( + ( event ) => { + if ( + ! event.target.classList.contains( + 'block-editor-block-list__layout' + ) + ) { + if ( isInserterShown ) { + setIsInserterShown( false ); + } + return; + } + + let rootClientId; + if ( ! event.target.classList.contains( 'is-root-container' ) ) { + const blockElement = !! event.target.getAttribute( + 'data-block' + ) + ? event.target + : event.target.closest( '[data-block]' ); + rootClientId = blockElement.getAttribute( 'data-block' ); + } + + const orientation = + getBlockListSettings( rootClientId )?.orientation || 'vertical'; + const rect = event.target.getBoundingClientRect(); + const offsetTop = event.clientY - rect.top; + const offsetLeft = event.clientX - rect.left; + + const children = Array.from( event.target.children ); + const nextElement = children.find( ( blockEl ) => { + return ( + ( blockEl.classList.contains( 'wp-block' ) && + orientation === 'vertical' && + blockEl.offsetTop > offsetTop ) || + ( blockEl.classList.contains( 'wp-block' ) && + orientation === 'horizontal' && + blockEl.offsetLeft > offsetLeft ) + ); + } ); + + let element = nextElement + ? children[ children.indexOf( nextElement ) - 1 ] + : children[ children.length - 1 ]; + + if ( ! element ) { + return; + } + + // The block may be in an alignment wrapper, so check the first direct + // child if the element has no ID. + if ( ! element.id ) { + element = element.firstElementChild; + + if ( ! element ) { + return; + } + } + + const clientId = element.id.slice( 'block-'.length ); + + if ( ! clientId ) { + return; + } + + const elementRect = element.getBoundingClientRect(); + + if ( + ( orientation === 'horizontal' && + ( event.clientY > elementRect.bottom || + event.clientY < elementRect.top ) ) || + ( orientation === 'vertical' && + ( event.clientX > elementRect.right || + event.clientX < elementRect.left ) ) + ) { + if ( isInserterShown ) { + setIsInserterShown( false ); + } + return; + } + + setIsInserterShown( true ); + setInserterClientId( clientId ); + }, + [ isInserterShown, setIsInserterShown, setInserterClientId ] + ); + + const enableMouseMove = ! isInserterForced && ! isMultiSelecting; + + useEffect( () => { + if ( ! enableMouseMove ) { + return; + } + + ref.current.addEventListener( 'mousemove', onMouseMove ); + + return () => { + ref.current.removeEventListener( 'mousemove', onMouseMove ); + }; + }, [ enableMouseMove, onMouseMove ] ); + + const isVisible = isInserterShown || isInserterForced || isInserterVisible; + + return ( + ! isMultiSelecting && + isVisible && ( + { + setIsInserterForced( value ); + if ( ! value ) { + setIsInserterShown( value ); + } + } } + containerRef={ ref } + showInsertionPoint={ isInserterVisible } + /> + ) + ); +} diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ebe5d59097395..16422a98d9376 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -266,7 +266,7 @@ left: $border-width; right: $border-width; bottom: $border-width; - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + box-shadow: 0 0 0 $border-width $gray-900; border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius. } } @@ -275,7 +275,7 @@ cursor: unset; &::after { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); // Selected not focussed. + box-shadow: 0 0 0 $border-width $gray-900; // Selected not focussed top: $border-width; left: $border-width; right: $border-width; @@ -341,6 +341,113 @@ cursor: grab; } +.block-editor-block-list__insertion-point { + position: absolute; +} + +.block-editor-block-list__insertion-point-indicator { + position: absolute; + background: var(--wp-admin-theme-color); + + // Provide a muted animation that isn't too noisy. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + + .block-editor-block-list__insertion-point.is-vertical > & { + top: 50%; + right: 0; + left: 0; + height: $border-width; + } + + .block-editor-block-list__insertion-point.is-horizontal > & { + top: 0; + right: 0; + left: 50%; + height: 100%; + width: $border-width; + } +} + +// This is the clickable plus. +.block-editor-block-list__insertion-point-inserter { + // Don't show on mobile. + display: none; + position: absolute; + @include break-mobile() { + display: flex; + } + + justify-content: center; + + top: calc(50% - #{ $button-size-small / 2 }); + left: calc(50% - #{ $button-size-small / 2 }); +} + +.block-editor-block-list__block-popover-inserter { + position: absolute; + top: -9999em; + margin-bottom: $block-padding; + + &.is-visible { + position: static; + } +} + +// Sibling inserter / "inbetweenserter". +.block-editor-block-list__empty-block-inserter, +.block-editor-default-block-appender, +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button.has-icon { + // Basic look + background: $gray-900; + border-radius: $radius-block-ui; + color: $white; + padding: 0; + + // Special dimensions for this button. + min-width: $button-size-small; + height: $button-size-small; + + &:hover { + color: $white; + background: var(--wp-admin-theme-color); + } + } +} + +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { + background: var(--wp-admin-theme-color); + &:hover { + background: $gray-900; + } +} + + +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button { + // Fade it in after a delay. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } +} + +@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { + 0% { + opacity: 0; + } + 60% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + @keyframes block-editor-inserter__toggle__fade-in-animation { from { opacity: 0; @@ -390,6 +497,133 @@ } +/** + * Block Toolbar when contextual. + */ + +.block-editor-block-contextual-toolbar { + // Block UI appearance. + border: $border-width solid $gray-900; + border-radius: $radius-block-ui; + background-color: $white; + + .block-editor-block-toolbar .components-toolbar-group, + .block-editor-block-toolbar .components-toolbar { + border-right-color: $gray-900; + } + + .block-editor-block-mover-button { + overflow: hidden; + } + + // Extra specificity to override standard toolbar button styles. + .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { + min-width: $block-toolbar-height/2; + width: $block-toolbar-height/2; + + svg { + min-width: $block-toolbar-height/2; + } + } +} + +// Position mover arrows for both toolbars. +.block-editor-block-contextual-toolbar, +.edit-post-header-toolbar__block-toolbar, +.edit-site-header-toolbar__block-toolbar, +.edit-navigation-layout__block-toolbar, +.edit-widgets-header__block-toolbar { + + .block-editor-block-mover:not(.is-horizontal) { + // Position SVGs. + .block-editor-block-mover-button { + &:focus::before { + left: 0 !important; + min-width: 0; + width: 100%; + } + } + + @include break-small() { + .block-editor-block-mover-button.is-up-button svg { + top: 5px; + } + + .block-editor-block-mover-button.is-down-button svg { + bottom: 5px; + } + } + } +} + + +/** + * Block Label for Navigation/Selection Mode + */ + +.block-editor-block-list__block-selection-button { + display: inline-flex; + padding: 0 ( $grid-unit-15 + $border-width ); + z-index: z-index(".block-editor-block-list__block-selection-button"); + + // Dark block UI appearance. + border-radius: $radius-block-ui; + background-color: $gray-900; + + font-size: $default-font-size; + height: $block-toolbar-height; + + .block-editor-block-list__block-selection-button__content { + margin: auto; + display: inline-flex; + align-items: center; + + > .components-flex__item { + margin-right: $grid-unit-15 / 2; + } + } + .components-button.has-icon.block-selection-button_drag-handle { + cursor: grab; + padding: 0; + height: $grid-unit-30; + min-width: $grid-unit-30; + + // Drag handle is smaller than the others. + svg { + min-width: 18px; + min-height: 18px; + } + } + + .block-editor-block-icon { + font-size: $default-font-size; + color: $white; + height: $block-toolbar-height; + } + + // The button here has a special style to appear as a toolbar. + .components-button { + min-width: $button-size; + color: $white; + height: $block-toolbar-height; + + // When button is focused, it receives a box-shadow instead of the border. + &:focus { + box-shadow: none; + border: none; + } + + &:active { + color: $white; + } + display: flex; + } + .block-selection-button_select-button.components-button { + padding: 0; + } +} + + /** * Warnings. */ @@ -407,3 +641,86 @@ margin-bottom: auto; } } + + +/** + * Popovers. + */ + +.block-editor-block-list__insertion-point-popover.is-without-arrow { + z-index: z-index(".block-editor-block-list__insertion-point-popover"); + position: absolute; + pointer-events: none; + + * { + pointer-events: none; + } + + .is-with-inserter { + pointer-events: all; + + * { + pointer-events: all; + } + } + + .components-popover__content.components-popover__content { // Needs specificity. + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + margin-left: 0; + } +} + +// Hide the popover block editor list while dragging. +// Using a hacky animation to delay hiding the element. +// It's needed because if we hide the element immediately upon dragging, +// the dragging will end immediately since there are no elements to be dragged anymore. +// Fortunately, we only have to keep it visible for a frame immediately after dragging, +// after that, we can safely hide it altogether. +@keyframes hide-during-dragging { + to { + position: fixed; + transform: translate(9999px, 9999px); + } +} + +.components-popover.block-editor-block-list__block-popover { + z-index: z-index(".block-editor-block-list__block-popover"); + position: absolute; + + .components-popover__content { + margin: 0 !important; + min-width: auto; + width: max-content; + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + + // Allow clicking through the toolbar holder. + pointer-events: none; + + > * { + pointer-events: all; + } + + // Position the block toolbar. + .block-editor-block-list__block-selection-button, + .block-editor-block-contextual-toolbar { + margin-bottom: $grid-unit-15; + } + } + + .is-dragging-components-draggable & { + opacity: 0; + // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. + // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. + animation: hide-during-dragging 1ms linear forwards; + } +} + +.is-dragging-components-draggable .components-tooltip { + display: none; +} diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 517a0a080cedc..91c27c025b4a6 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -26,12 +26,10 @@ import { useBlockClassNames } from './use-block-class-names'; import { useBlockDefaultClassName } from './use-block-default-class-name'; import { useBlockCustomClassName } from './use-block-custom-class-name'; import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names'; -import { useFocusHandler } from './use-focus-handler'; -import { useEventHandlers } from './use-selected-block-event-handlers'; +import { useEventHandlers } from './use-event-handlers'; import { useNavModeExit } from './use-nav-mode-exit'; +import { useBlockNodes } from './use-block-nodes'; import { useScrollIntoView } from './use-scroll-into-view'; -import { useBlockRefProvider } from './use-block-refs'; -import { useMultiSelection } from './use-multi-selection'; import { store as blockEditorStore } from '../../../store'; /** @@ -107,9 +105,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useFocusFirstElement( clientId ), // Must happen after focus because we check for focus in the block. useScrollIntoView( clientId ), - useBlockRefProvider( clientId ), - useFocusHandler( clientId ), - useMultiSelection( clientId ), + useBlockNodes( clientId ), useEventHandlers( clientId ), useNavModeExit( clientId ), useIsHovered(), diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js new file mode 100644 index 0000000000000..49542364e2cfe --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-nodes.js @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import { omit } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useContext } from '@wordpress/element'; +import { useRefEffect } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { SetBlockNodes } from '../'; +import { store as blockEditorStore } from '../../../store'; + +export function useBlockNodes( clientId ) { + const setBlockNodes = useContext( SetBlockNodes ); + // Provide the selected node, or the first and last nodes of a multi- + // selection, so it can be used to position the contextual block toolbar. + // We only provide what is necessary, and remove the nodes again when they + // are no longer selected. + const isNodeNeeded = useSelect( + ( select ) => { + const { + isBlockSelected, + isFirstMultiSelectedBlock, + getLastMultiSelectedBlockClientId, + } = select( blockEditorStore ); + return ( + isBlockSelected( clientId ) || + isFirstMultiSelectedBlock( clientId ) || + getLastMultiSelectedBlockClientId() === clientId + ); + } + // To do: figure out why tests are failing when dependencies are added. + // This data was originally retrieved with `withSelect` in `block.js`. + // For some reason, adding `clientId` as a dependency results in + // `toolbar-roving-tabindex.test.js` e2e test failures. + ); + + return useRefEffect( + ( node ) => { + if ( ! isNodeNeeded ) { + return; + } + + setBlockNodes( ( nodes ) => ( { + ...nodes, + [ clientId ]: node, + } ) ); + + return () => { + setBlockNodes( ( nodes ) => omit( nodes, clientId ) ); + }; + }, + [ isNodeNeeded, clientId, setBlockNodes ] + ); +} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js deleted file mode 100644 index 50794c611f1f6..0000000000000 --- a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * WordPress dependencies - */ -import { - useCallback, - useContext, - useLayoutEffect, - useMemo, - useRef, - useState, -} from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { BlockRefs } from '../../provider/block-refs-provider'; - -/** @typedef {import('@wordpress/element').RefCallback} RefCallback */ -/** @typedef {import('@wordpress/element').RefObject} RefObject */ - -/** - * Provides a ref to the BlockRefs context. - * - * @param {string} clientId The client ID of the element ref. - * - * @return {RefCallback} Ref callback. - */ -export function useBlockRefProvider( clientId ) { - const { refs, callbacks } = useContext( BlockRefs ); - const ref = useRef(); - useLayoutEffect( () => { - refs.set( clientId, ref ); - return () => { - refs.delete( clientId ); - }; - }, [] ); - return useCallback( ( element ) => { - // Update the ref in the provider. - ref.current = element; - // Call any update functions. - callbacks.forEach( ( id, setElement ) => { - if ( clientId === id ) { - setElement( element ); - } - } ); - }, [] ); -} - -/** - * Gets a ref pointing to the current block element. Continues to return a - * stable ref even if the block client ID changes. - * - * @param {string} clientId The client ID to get a ref for. - * - * @return {RefObject} A ref containing the element. - */ -function useBlockRef( clientId ) { - const { refs } = useContext( BlockRefs ); - const freshClientId = useRef(); - freshClientId.current = clientId; - // Always return an object, even if no ref exists for a given client ID, so - // that `current` works at a later point. - return useMemo( - () => ( { - get current() { - return refs.get( freshClientId.current )?.current || null; - }, - } ), - [] - ); -} - -/** - * Return the element for a given client ID. Updates whenever the element - * changes, becomes available, or disappears. - * - * @param {string} clientId The client ID to an element for. - * - * @return {Element|null} The block's wrapper element. - */ -function useBlockElement( clientId ) { - const { callbacks } = useContext( BlockRefs ); - const ref = useBlockRef( clientId ); - const [ element, setElement ] = useState( null ); - - useLayoutEffect( () => { - if ( ! clientId ) { - return; - } - - callbacks.set( setElement, clientId ); - return () => { - callbacks.delete( setElement ); - }; - }, [ clientId ] ); - - return ref.current || element; -} - -export { useBlockRef as __unstableUseBlockRef }; -export { useBlockElement as __unstableUseBlockElement }; diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js similarity index 51% rename from packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js rename to packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js index 8f3d5a5ec3953..844a6862fd8eb 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-event-handlers.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { useContext } from '@wordpress/element'; import { isTextField } from '@wordpress/dom'; import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -9,30 +10,68 @@ import { useRefEffect } from '@wordpress/compose'; /** * Internal dependencies */ +import { isInsideRootBlock } from '../../../utils/dom'; +import { SelectionStart } from '../../writing-flow'; import { store as blockEditorStore } from '../../../store'; /** * Adds block behaviour: + * - Selects the block if it receives focus. * - Removes the block on BACKSPACE. * - Inserts a default block on ENTER. + * - Initiates selection start for multi-selection. * - Disables dragging of block contents. * * @param {string} clientId Block client ID. */ export function useEventHandlers( clientId ) { - const isSelected = useSelect( - ( select ) => select( blockEditorStore ).isBlockSelected( clientId ), + const onSelectionStart = useContext( SelectionStart ); + const { isSelected, rootClientId, index } = useSelect( + ( select ) => { + const { + isBlockSelected, + getBlockRootClientId, + getBlockIndex, + } = select( blockEditorStore ); + + return { + isSelected: isBlockSelected( clientId ), + rootClientId: getBlockRootClientId( clientId ), + index: getBlockIndex( clientId ), + }; + }, [ clientId ] ); - const { getBlockRootClientId, getBlockIndex } = useSelect( + const { insertDefaultBlock, removeBlock, selectBlock } = useDispatch( blockEditorStore ); - const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore ); return useRefEffect( ( node ) => { if ( ! isSelected ) { - return; + /** + * Marks the block as selected when focused and not already + * selected. This specifically handles the case where block does not + * set focus on its own (via `setFocus`), typically if there is no + * focusable input in the block. + * + * @param {FocusEvent} event Focus event. + */ + function onFocus( event ) { + // If an inner block is focussed, that block is resposible for + // setting the selected block. + if ( ! isInsideRootBlock( node, event.target ) ) { + return; + } + + selectBlock( clientId ); + } + + node.addEventListener( 'focusin', onFocus ); + + return () => { + node.removeEventListener( 'focusin', onFocus ); + }; } /** @@ -62,16 +101,20 @@ export function useEventHandlers( clientId ) { event.preventDefault(); if ( keyCode === ENTER ) { - insertDefaultBlock( - {}, - getBlockRootClientId( clientId ), - getBlockIndex( clientId ) + 1 - ); + insertDefaultBlock( {}, rootClientId, index + 1 ); } else { removeBlock( clientId ); } } + function onMouseLeave( { buttons } ) { + // The primary button must be pressed to initiate selection. + // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + if ( buttons === 1 ) { + onSelectionStart( clientId ); + } + } + /** * Prevents default dragging behavior within a block. To do: we must * handle this in the future and clean up the drag target. @@ -83,20 +126,23 @@ export function useEventHandlers( clientId ) { } node.addEventListener( 'keydown', onKeyDown ); + node.addEventListener( 'mouseleave', onMouseLeave ); node.addEventListener( 'dragstart', onDragStart ); return () => { + node.removeEventListener( 'mouseleave', onMouseLeave ); node.removeEventListener( 'keydown', onKeyDown ); node.removeEventListener( 'dragstart', onDragStart ); }; }, [ - clientId, isSelected, - getBlockRootClientId, - getBlockIndex, + rootClientId, + index, + onSelectionStart, insertDefaultBlock, removeBlock, + selectBlock, ] ); } diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js deleted file mode 100644 index 4946cc40a26c9..0000000000000 --- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useRefEffect } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import { isInsideRootBlock } from '../../../utils/dom'; -import { store as blockEditorStore } from '../../../store'; - -/** - * Selects the block if it receives focus. - * - * @param {string} clientId Block client ID. - */ -export function useFocusHandler( clientId ) { - const { isBlockSelected } = useSelect( blockEditorStore ); - const { selectBlock } = useDispatch( blockEditorStore ); - - return useRefEffect( - ( node ) => { - /** - * Marks the block as selected when focused and not already - * selected. This specifically handles the case where block does not - * set focus on its own (via `setFocus`), typically if there is no - * focusable input in the block. - * - * @param {FocusEvent} event Focus event. - */ - function onFocus( event ) { - // Check synchronously because a non-selected block might be - // getting data through `useSelect` asynchronously. - if ( isBlockSelected( clientId ) ) { - return; - } - - // If an inner block is focussed, that block is resposible for - // setting the selected block. - if ( ! isInsideRootBlock( node, event.target ) ) { - return; - } - - selectBlock( clientId ); - } - - node.addEventListener( 'focusin', onFocus ); - - return () => { - node.removeEventListener( 'focusin', onFocus ); - }; - }, - [ isBlockSelected, selectBlock ] - ); -} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js deleted file mode 100644 index 221191a412ae0..0000000000000 --- a/packages/block-editor/src/components/block-list/use-block-props/use-multi-selection.js +++ /dev/null @@ -1,209 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useRefEffect } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../../../store'; -import { getBlockClientId } from '../../../utils/dom'; - -function toggleRichText( container, toggle ) { - Array.from( - container - .closest( '.is-root-container' ) - .querySelectorAll( '.rich-text' ) - ).forEach( ( node ) => { - if ( toggle ) { - node.setAttribute( 'contenteditable', true ); - } else { - node.removeAttribute( 'contenteditable' ); - } - } ); -} - -/** - * Sets a multi-selection based on the native selection across blocks. - * - * @param {string} clientId Block client ID. - */ -export function useMultiSelection( clientId ) { - const { - startMultiSelect, - stopMultiSelect, - multiSelect, - selectBlock, - } = useDispatch( blockEditorStore ); - const { - isSelectionEnabled, - isBlockSelected, - getBlockParents, - getBlockSelectionStart, - hasMultiSelection, - } = useSelect( blockEditorStore ); - return useRefEffect( - ( node ) => { - const { ownerDocument } = node; - const { defaultView } = ownerDocument; - - let anchorElement; - let rafId; - - function onSelectionChange( { isSelectionEnd } ) { - const selection = defaultView.getSelection(); - - // If no selection is found, end multi selection and enable all rich - // text areas. - if ( ! selection.rangeCount || selection.isCollapsed ) { - toggleRichText( node, true ); - return; - } - - const endClientId = getBlockClientId( selection.focusNode ); - const isSingularSelection = clientId === endClientId; - - if ( isSingularSelection ) { - selectBlock( clientId ); - - // If the selection is complete (on mouse up), and no - // multiple blocks have been selected, set focus back to the - // anchor element. if the anchor element contains the - // selection. Additionally, rich text elements that were - // previously disabled can now be enabled again. - if ( isSelectionEnd ) { - toggleRichText( node, true ); - - if ( selection.rangeCount ) { - const { - commonAncestorContainer, - } = selection.getRangeAt( 0 ); - - if ( - anchorElement.contains( - commonAncestorContainer - ) - ) { - anchorElement.focus(); - } - } - } - } else { - const startPath = [ - ...getBlockParents( clientId ), - clientId, - ]; - const endPath = [ - ...getBlockParents( endClientId ), - endClientId, - ]; - const depth = - Math.min( startPath.length, endPath.length ) - 1; - - multiSelect( startPath[ depth ], endPath[ depth ] ); - } - } - - function onSelectionEnd() { - ownerDocument.removeEventListener( - 'selectionchange', - onSelectionChange - ); - // Equivalent to attaching the listener once. - defaultView.removeEventListener( 'mouseup', onSelectionEnd ); - // The browser selection won't have updated yet at this point, - // so wait until the next animation frame to get the browser - // selection. - rafId = defaultView.requestAnimationFrame( () => { - onSelectionChange( { isSelectionEnd: true } ); - stopMultiSelect(); - } ); - } - - function onMouseLeave( { buttons } ) { - // The primary button must be pressed to initiate selection. - // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons - if ( buttons !== 1 ) { - return; - } - - if ( ! isSelectionEnabled() || ! isBlockSelected( clientId ) ) { - return; - } - - anchorElement = ownerDocument.activeElement; - startMultiSelect(); - - // `onSelectionStart` is called after `mousedown` and - // `mouseleave` (from a block). The selection ends when - // `mouseup` happens anywhere in the window. - ownerDocument.addEventListener( - 'selectionchange', - onSelectionChange - ); - defaultView.addEventListener( 'mouseup', onSelectionEnd ); - - // Removing the contenteditable attributes within the block - // editor is essential for selection to work across editable - // areas. The edible hosts are removed, allowing selection to be - // extended outside the DOM element. `startMultiSelect` sets a - // flag in the store so the rich text components are updated, - // but the rerender may happen very slowly, especially in Safari - // for the blocks that are asynchonously rendered. To ensure the - // browser instantly removes the selection boundaries, we remove - // the contenteditable attributes manually. - toggleRichText( node, false ); - } - - function onMouseDown( event ) { - // The main button. - // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button - if ( ! isSelectionEnabled() || event.button !== 0 ) { - return; - } - - if ( event.shiftKey ) { - const blockSelectionStart = getBlockSelectionStart(); - if ( blockSelectionStart !== clientId ) { - toggleRichText( node, false ); - multiSelect( blockSelectionStart, clientId ); - event.preventDefault(); - } - } else if ( hasMultiSelection() ) { - // Allow user to escape out of a multi-selection to a - // singular selection of a block via click. This is handled - // here since focus handling excludes blocks when there is - // multiselection, as focus can be incurred by starting a - // multiselection (focus moved to first block's multi- - // controls). - selectBlock( clientId ); - } - } - - node.addEventListener( 'mousedown', onMouseDown ); - node.addEventListener( 'mouseleave', onMouseLeave ); - - return () => { - node.removeEventListener( 'mousedown', onMouseDown ); - node.removeEventListener( 'mouseleave', onMouseLeave ); - ownerDocument.removeEventListener( - 'selectionchange', - onSelectionChange - ); - defaultView.removeEventListener( 'mouseup', onSelectionEnd ); - defaultView.cancelAnimationFrame( rafId ); - }; - }, - [ - clientId, - startMultiSelect, - stopMultiSelect, - multiSelect, - selectBlock, - isSelectionEnabled, - isBlockSelected, - getBlockParents, - ] - ); -} diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js index 7289751f515ae..a051d1cce1bc4 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js @@ -15,24 +15,22 @@ import { store as blockEditorStore } from '../../../store'; * @param {string} clientId Block client ID. */ export function useNavModeExit( clientId ) { - const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore ); - const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore ); + const isEnabled = useSelect( ( select ) => { + const { isNavigationMode, isBlockSelected } = select( + blockEditorStore + ); + return isNavigationMode() && isBlockSelected( clientId ); + }, [] ); + const { setNavigationMode } = useDispatch( blockEditorStore ); + return useRefEffect( ( node ) => { - function onMouseDown( event ) { - // Don't select a block if it's already handled by a child - // block. - if ( isNavigationMode() && ! event.defaultPrevented ) { - // Prevent focus from moving to the block. - event.preventDefault(); + if ( ! isEnabled ) { + return; + } - // When clicking on a selected block, exit navigation mode. - if ( isBlockSelected( clientId ) ) { - setNavigationMode( false ); - } else { - selectBlock( clientId ); - } - } + function onMouseDown() { + setNavigationMode( false ); } node.addEventListener( 'mousedown', onMouseDown ); @@ -41,6 +39,6 @@ export function useNavModeExit( clientId ) { node.addEventListener( 'mousedown', onMouseDown ); }; }, - [ clientId, isNavigationMode, isBlockSelected, setNavigationMode ] + [ isEnabled ] ); } diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js deleted file mode 100644 index 0dfdab359d7a7..0000000000000 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ /dev/null @@ -1,150 +0,0 @@ -/** - * WordPress dependencies - */ -import { useRefEffect } from '@wordpress/compose'; - -import { useSelect, useDispatch } from '@wordpress/data'; -import { useContext } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../../store'; -import { InsertionPointOpenRef } from '../block-tools/insertion-point'; - -export function useInBetweenInserter() { - const openRef = useContext( InsertionPointOpenRef ); - const { - getBlockListSettings, - getBlockRootClientId, - getBlockIndex, - isBlockInsertionPointVisible, - isMultiSelecting, - } = useSelect( blockEditorStore ); - const { showInsertionPoint, hideInsertionPoint } = useDispatch( - blockEditorStore - ); - - return useRefEffect( - ( node ) => { - function onMouseMove( event ) { - if ( openRef.current ) { - return; - } - - if ( isMultiSelecting() ) { - return; - } - - if ( - ! event.target.classList.contains( - 'block-editor-block-list__layout' - ) - ) { - if ( isBlockInsertionPointVisible() ) { - hideInsertionPoint(); - } - return; - } - - let rootClientId; - if ( - ! event.target.classList.contains( 'is-root-container' ) - ) { - const blockElement = !! event.target.getAttribute( - 'data-block' - ) - ? event.target - : event.target.closest( '[data-block]' ); - rootClientId = blockElement.getAttribute( 'data-block' ); - } - - const orientation = - getBlockListSettings( rootClientId )?.orientation || - 'vertical'; - const rect = event.target.getBoundingClientRect(); - const offsetTop = event.clientY - rect.top; - const offsetLeft = event.clientX - rect.left; - - const children = Array.from( event.target.children ); - let element = children.find( ( blockEl ) => { - return ( - ( blockEl.classList.contains( 'wp-block' ) && - orientation === 'vertical' && - blockEl.offsetTop > offsetTop ) || - ( blockEl.classList.contains( 'wp-block' ) && - orientation === 'horizontal' && - blockEl.offsetLeft > offsetLeft ) - ); - } ); - - if ( ! element ) { - return; - } - - // The block may be in an alignment wrapper, so check the first direct - // child if the element has no ID. - if ( ! element.id ) { - element = element.firstElementChild; - - if ( ! element ) { - return; - } - } - - const clientId = element.id.slice( 'block-'.length ); - - if ( ! clientId ) { - return; - } - - const elementRect = element.getBoundingClientRect(); - - if ( - ( orientation === 'horizontal' && - ( event.clientY > elementRect.bottom || - event.clientY < elementRect.top ) ) || - ( orientation === 'vertical' && - ( event.clientX > elementRect.right || - event.clientX < elementRect.left ) ) - ) { - if ( isBlockInsertionPointVisible() ) { - hideInsertionPoint(); - } - return; - } - - const index = getBlockIndex( clientId, rootClientId ); - - // Don't show the in-between inserter before the first block in - // the list (preserves the original behaviour). - if ( index === 0 ) { - if ( isBlockInsertionPointVisible() ) { - hideInsertionPoint(); - } - return; - } - - showInsertionPoint( rootClientId, index, { - __unstableWithInserter: true, - } ); - } - - node.addEventListener( 'mousemove', onMouseMove ); - - return () => { - node.removeEventListener( 'mousemove', onMouseMove ); - }; - }, - [ - openRef, - getBlockListSettings, - getBlockRootClientId, - getBlockIndex, - isBlockInsertionPointVisible, - isMultiSelecting, - showInsertionPoint, - hideInsertionPoint, - ] - ); -} diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js index acfd59b8db8c5..0c2e3bfc82133 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js @@ -19,7 +19,6 @@ import { rawHandler, createBlock, isUnmodifiedDefaultBlock, - isReusableBlock, } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; @@ -27,9 +26,6 @@ import { withInstanceId, compose } from '@wordpress/compose'; import { moreHorizontalMobile } from '@wordpress/icons'; import { useRef, useState } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; -import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; -import { store as coreStore } from '@wordpress/core-data'; - /** * Internal dependencies */ @@ -45,14 +41,11 @@ const BlockActionsMenu = ( { isEmptyDefaultBlock, isFirst, isLast, - isReusableBlockType, - reusableBlock, rootClientId, selectedBlockClientId, selectedBlockPossibleTransformations, // Dispatch createSuccessNotice, - convertToRegularBlocks, duplicateBlock, onMoveDown, onMoveUp, @@ -182,21 +175,6 @@ const BlockActionsMenu = ( { ); }, }, - convertToRegularBlocks: { - id: 'convertToRegularBlocksOption', - label: __( 'Convert to regular blocks' ), - value: 'convertToRegularBlocksOption', - onSelect: () => { - createSuccessNotice( - sprintf( - /* translators: %s: name of the reusable block */ - __( '%s converted to regular blocks' ), - reusableBlock?.title?.raw || blockTitle - ) - ); - convertToRegularBlocks(); - }, - }, }; const options = compact( [ @@ -209,7 +187,6 @@ const BlockActionsMenu = ( { allOptions.cutButton, isPasteEnabled && allOptions.pasteButton, allOptions.duplicateButton, - isReusableBlockType && allOptions.convertToRegularBlocks, allOptions.delete, ] ); @@ -320,15 +297,6 @@ export default compose( ? getBlockTransformItems( [ selectedBlock ], rootClientId ) : []; - const isReusableBlockType = block ? isReusableBlock( block ) : false; - const reusableBlock = isReusableBlockType - ? select( coreStore ).getEntityRecord( - 'postType', - 'wp_block', - block?.attributes.ref - ) - : undefined; - return { blockTitle, canInsertBlockType, @@ -337,19 +305,13 @@ export default compose( isEmptyDefaultBlock, isFirst: firstIndex === 0, isLast: lastIndex === blockOrder.length - 1, - isReusableBlockType, - reusableBlock, rootClientId, selectedBlockClientId, selectedBlockPossibleTransformations, }; } ), withDispatch( - ( - dispatch, - { clientIds, rootClientId, currentIndex, selectedBlockClientId }, - { select } - ) => { + ( dispatch, { clientIds, rootClientId, currentIndex }, { select } ) => { const { moveBlocksDown, moveBlocksUp, @@ -357,7 +319,6 @@ export default compose( removeBlocks, insertBlock, replaceBlocks, - clearSelectedBlock, } = dispatch( blockEditorStore ); const { openGeneralSidebar } = dispatch( 'core/edit-post' ); const { getBlockSelectionEnd, getBlock } = select( @@ -365,20 +326,8 @@ export default compose( ); const { createSuccessNotice } = dispatch( noticesStore ); - const { - __experimentalConvertBlockToStatic: convertBlockToStatic, - } = dispatch( reusableBlocksStore ); - return { createSuccessNotice, - convertToRegularBlocks() { - clearSelectedBlock(); - // Convert action is executed at the end of the current JavaScript execution block - // to prevent issues related to undo/redo actions. - setImmediate( () => - convertBlockToStatic( selectedBlockClientId ) - ); - }, duplicateBlock() { return duplicateBlocks( clientIds ); }, diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index 6ffe00fc93f8d..b72d879d6762e 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -80,8 +80,9 @@ function BlockNavigationDropdown( isEnabled={ isEnabled } /> ) } - renderContent={ () => ( + renderContent={ ( { onClose } ) => ( ) } diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 48c20ae9ae144..daeba32bae54d 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -32,7 +32,7 @@ export default function BlockNavigation( { const _selectedBlockClientId = getSelectedBlockClientId(); const _rootBlocks = __unstableGetClientIdsTree(); const _rootBlock = - _selectedBlockClientId && ! isArray( _selectedBlockClientId ) + selectedBlockClientId && ! isArray( selectedBlockClientId ) ? __unstableGetClientIdWithClientIdsTree( getBlockHierarchyRootClientId( _selectedBlockClientId diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 2fa25326a5c9c..26c5533be8c84 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -134,7 +134,6 @@ const BlockPatternSetup = ( { blockName, filterPatternsFn, startBlankComponent, - onBlockPatternSelect, } ) => { const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel ); const [ activeSlide, setActiveSlide ] = useState( 0 ); @@ -146,12 +145,10 @@ const BlockPatternSetup = ( { return startBlankComponent; } - const onBlockPatternSelectDefault = ( blocks ) => { + const onBlockPatternSelect = ( blocks ) => { const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) ); replaceBlock( clientId, clonedBlocks ); }; - const onPatternSelectCallback = - onBlockPatternSelect || onBlockPatternSelectDefault; return (
active - 1 ); } } onBlockPatternSelect={ () => { - onPatternSelectCallback( patterns[ activeSlide ].blocks ); + onBlockPatternSelect( patterns[ activeSlide ].blocks ); } } onStartBlank={ () => { setShowBlank( true ); @@ -178,7 +175,7 @@ const BlockPatternSetup = ( { viewMode={ viewMode } activeSlide={ activeSlide } patterns={ patterns } - onBlockPatternSelect={ onPatternSelectCallback } + onBlockPatternSelect={ onBlockPatternSelect } />
); diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss index 17bcf3b8191d6..a1876fd5c6022 100644 --- a/packages/block-editor/src/components/block-pattern-setup/style.scss +++ b/packages/block-editor/src/components/block-pattern-setup/style.scss @@ -84,6 +84,7 @@ .carousel-container { overflow: hidden; + text-align: center; position: relative; padding: 0; margin: 0; diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 4279b307f7e80..4242983c192d5 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -6,11 +6,7 @@ import { compact, map } from 'lodash'; /** * WordPress dependencies */ -import { - createSlotFill, - MenuGroup, - __experimentalStyleProvider as StyleProvider, -} from '@wordpress/components'; +import { createSlotFill, MenuGroup } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; /** @@ -22,7 +18,9 @@ import { } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); +const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill( + 'BlockSettingsMenuControls' +); const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { const selectedBlocks = useSelect( @@ -64,20 +62,9 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { ); }; +BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; + /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md - * - * @param {Object} props Fill props. - * @return {WPElement} Element. */ -function BlockSettingsMenuControls( { ...props } ) { - return ( - - - - ); -} - -BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; - export default BlockSettingsMenuControls; diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js deleted file mode 100644 index 14aaf661c001e..0000000000000 --- a/packages/block-editor/src/components/block-tools/index.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import InsertionPoint from './insertion-point'; -import BlockPopover from './block-popover'; - -export default function BlockTools( { children } ) { - return ( - - - { children } - - ); -} diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js deleted file mode 100644 index b462565d8f95b..0000000000000 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ /dev/null @@ -1,264 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { - useCallback, - useRef, - useMemo, - createContext, - useContext, -} from '@wordpress/element'; -import { Popover } from '@wordpress/components'; -import { isRTL } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import Inserter from '../inserter'; -import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; - -export const InsertionPointOpenRef = createContext(); - -function InsertionPointPopover() { - const { selectBlock } = useDispatch( blockEditorStore ); - const openRef = useContext( InsertionPointOpenRef ); - const ref = useRef(); - const { - orientation, - isHidden, - previousClientId, - nextClientId, - rootClientId, - isInserterShown, - } = useSelect( ( select ) => { - const { - getBlockOrder, - getBlockListSettings, - getMultiSelectedBlockClientIds, - getSelectedBlockClientId, - hasMultiSelection, - getSettings, - getBlockInsertionPoint, - } = select( blockEditorStore ); - const insertionPoint = getBlockInsertionPoint(); - const order = getBlockOrder( insertionPoint.rootClientId ); - const targetClientId = order[ insertionPoint.index - 1 ]; - const targetRootClientId = insertionPoint.rootClientId; - const blockOrder = getBlockOrder( targetRootClientId ); - if ( ! blockOrder.length ) { - return {}; - } - const previous = targetClientId - ? targetClientId - : blockOrder[ blockOrder.length - 1 ]; - const isLast = previous === blockOrder[ blockOrder.length - 1 ]; - const next = isLast - ? null - : blockOrder[ blockOrder.indexOf( previous ) + 1 ]; - const { hasReducedUI } = getSettings(); - const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); - const selectedBlockClientId = getSelectedBlockClientId(); - const blockOrientation = - getBlockListSettings( targetRootClientId )?.orientation || - 'vertical'; - - return { - previousClientId: previous, - nextClientId: next, - isHidden: - hasReducedUI || - ( hasMultiSelection() - ? next && multiSelectedBlockClientIds.includes( next ) - : next && - blockOrientation === 'vertical' && - next === selectedBlockClientId ), - orientation: blockOrientation, - clientId: targetClientId, - rootClientId: targetRootClientId, - isInserterShown: insertionPoint?.__unstableWithInserter, - }; - }, [] ); - const previousElement = useBlockElement( previousClientId ); - const nextElement = useBlockElement( nextClientId ); - const style = useMemo( () => { - if ( ! previousElement ) { - return {}; - } - const previousRect = previousElement.getBoundingClientRect(); - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - - if ( orientation === 'vertical' ) { - return { - width: previousElement.offsetWidth, - height: nextRect ? nextRect.top - previousRect.bottom : 0, - }; - } - - let width = 0; - if ( nextElement ) { - width = isRTL() - ? previousRect.left - nextRect.right - : nextRect.left - previousRect.right; - } - - return { - width, - height: previousElement.offsetHeight, - }; - }, [ previousElement, nextElement ] ); - - const getAnchorRect = useCallback( () => { - const previousRect = previousElement.getBoundingClientRect(); - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - if ( orientation === 'vertical' ) { - if ( isRTL() ) { - return { - top: previousRect.bottom, - left: previousRect.right, - right: previousRect.left, - bottom: nextRect ? nextRect.top : previousRect.bottom, - }; - } - - return { - top: previousRect.bottom, - left: previousRect.left, - right: previousRect.right, - bottom: nextRect ? nextRect.top : previousRect.bottom, - }; - } - - if ( isRTL() ) { - return { - top: previousRect.top, - left: nextRect ? nextRect.right : previousRect.left, - right: previousRect.left, - bottom: previousRect.bottom, - }; - } - - return { - top: previousRect.top, - left: previousRect.right, - right: nextRect ? nextRect.left : previousRect.right, - bottom: previousRect.bottom, - }; - }, [ previousElement, nextElement ] ); - - if ( ! previousElement ) { - return null; - } - - const className = classnames( - 'block-editor-block-list__insertion-point', - 'is-' + orientation - ); - - function onClick( event ) { - if ( event.target === ref.current && nextClientId ) { - selectBlock( nextClientId, -1 ); - } - } - - function onFocus( event ) { - // Only handle click on the wrapper specifically, and not an event - // bubbled from the inserter itself. - if ( event.target !== ref.current ) { - openRef.current = true; - } - } - - // Only show the inserter when there's a `nextElement` (a block after the - // insertion point). At the end of the block list the trailing appender - // should serve the purpose of inserting blocks. - const showInsertionPointInserter = - ! isHidden && nextElement && isInserterShown; - - // Show the indicator if the insertion point inserter is visible, or if - // the `showInsertionPoint` state is `true`. The latter is generally true - // when hovering blocks for insertion in the block library. - const showInsertionPointIndicator = - showInsertionPointInserter || ! isHidden; - - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ - // While ideally it would be enough to capture the - // bubbling focus event from the Inserter, due to the - // characteristics of click focusing of `button`s in - // Firefox and Safari, it is not reliable. - // - // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus - return ( - -
- { showInsertionPointIndicator && ( -
- ) } - { showInsertionPointInserter && ( -
- { - openRef.current = isOpen; - } } - onSelectOrClose={ () => { - openRef.current = false; - } } - /> -
- ) } -
- - ); - /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ -} - -export default function InsertionPoint( { children } ) { - const isVisible = useSelect( ( select ) => { - const { isMultiSelecting, isBlockInsertionPointVisible } = select( - blockEditorStore - ); - - return isBlockInsertionPointVisible() && ! isMultiSelecting(); - }, [] ); - - return ( - - { isVisible && } - { children } - - ); -} diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss deleted file mode 100644 index 013f24b784e13..0000000000000 --- a/packages/block-editor/src/components/block-tools/style.scss +++ /dev/null @@ -1,321 +0,0 @@ -/** - * Insertion Point. - */ - -.block-editor-block-list__insertion-point { - position: absolute; -} - -.block-editor-block-list__insertion-point-indicator { - position: absolute; - background: var(--wp-admin-theme-color); - - // Provide a muted animation that isn't too noisy. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - - .block-editor-block-list__insertion-point.is-vertical > & { - top: 50%; - right: 0; - left: 0; - height: $border-width; - } - - .block-editor-block-list__insertion-point.is-horizontal > & { - top: 0; - right: 0; - left: 50%; - height: 100%; - width: $border-width; - } -} - -// This is the clickable plus. -.block-editor-block-list__insertion-point-inserter { - // Don't show on mobile. - display: none; - position: absolute; - @include break-mobile() { - display: flex; - } - - justify-content: center; - - top: calc(50% - #{ $button-size-small / 2 }); - left: calc(50% - #{ $button-size-small / 2 }); -} - -.block-editor-block-list__block-popover-inserter { - position: absolute; - top: -9999em; - margin-bottom: $block-padding; - - &.is-visible { - position: static; - } -} - -// Sibling inserter / "inbetweenserter". -.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender, -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button.has-icon { - // Basic look - background: $gray-900; - border-radius: $radius-block-ui; - color: $white; - padding: 0; - - // Special dimensions for this button. - min-width: $button-size-small; - height: $button-size-small; - - &:hover { - color: $white; - background: var(--wp-admin-theme-color); - } - } -} - -.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { - background: var(--wp-admin-theme-color); - &:hover { - background: $gray-900; - } -} - -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button { - // Fade it in after a delay. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - } -} - -@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { - 0% { - opacity: 0; - } - 60% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - - -/** - * Block Toolbar when contextual. - */ - -.block-editor-block-contextual-toolbar { - // Block UI appearance. - border: $border-width solid $gray-900; - border-radius: $radius-block-ui; - background-color: $white; - - .block-editor-block-toolbar .components-toolbar-group, - .block-editor-block-toolbar .components-toolbar { - border-right-color: $gray-900; - } - - .block-editor-block-mover-button { - overflow: hidden; - } - - // Extra specificity to override standard toolbar button styles. - .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { - min-width: $block-toolbar-height/2; - width: $block-toolbar-height/2; - - svg { - min-width: $block-toolbar-height/2; - } - } -} - -// Position mover arrows for both toolbars. -.block-editor-block-contextual-toolbar, -.edit-post-header-toolbar__block-toolbar, -.edit-site-header-toolbar__block-toolbar, -.edit-navigation-layout__block-toolbar, -.edit-widgets-header__block-toolbar { - .block-editor-block-mover:not(.is-horizontal) { - // Position SVGs. - .block-editor-block-mover-button { - &:focus::before { - left: 0 !important; - min-width: 0; - width: 100%; - } - } - - @include break-small() { - .block-editor-block-mover-button.is-up-button svg { - top: 5px; - } - - .block-editor-block-mover-button.is-down-button svg { - bottom: 5px; - } - } - } -} - - -/** - * Block Label for Navigation/Selection Mode - */ - -.block-editor-block-list__block-selection-button { - display: inline-flex; - padding: 0 ( $grid-unit-15 + $border-width ); - z-index: z-index(".block-editor-block-list__block-selection-button"); - - // Dark block UI appearance. - border-radius: $radius-block-ui; - background-color: $gray-900; - - font-size: $default-font-size; - height: $block-toolbar-height; - - .block-editor-block-list__block-selection-button__content { - margin: auto; - display: inline-flex; - align-items: center; - - > .components-flex__item { - margin-right: $grid-unit-15 / 2; - } - } - .components-button.has-icon.block-selection-button_drag-handle { - cursor: grab; - padding: 0; - height: $grid-unit-30; - min-width: $grid-unit-30; - - // Drag handle is smaller than the others. - svg { - min-width: 18px; - min-height: 18px; - } - } - - .block-editor-block-icon { - font-size: $default-font-size; - color: $white; - height: $block-toolbar-height; - } - - // The button here has a special style to appear as a toolbar. - .components-button { - min-width: $button-size; - color: $white; - height: $block-toolbar-height; - - // When button is focused, it receives a box-shadow instead of the border. - &:focus { - box-shadow: none; - border: none; - } - - &:active { - color: $white; - } - display: flex; - } - .block-selection-button_select-button.components-button { - padding: 0; - } -} - - -/** - * Popovers. - */ - -.block-editor-block-list__insertion-point-popover.is-without-arrow { - z-index: z-index(".block-editor-block-list__insertion-point-popover"); - position: absolute; - pointer-events: none; - - * { - pointer-events: none; - } - - .is-with-inserter { - pointer-events: all; - - * { - pointer-events: all; - } - } - - .components-popover__content.components-popover__content { // Needs specificity. - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - margin-left: 0; - } -} - -// Hide the popover block editor list while dragging. -// Using a hacky animation to delay hiding the element. -// It's needed because if we hide the element immediately upon dragging, -// the dragging will end immediately since there are no elements to be dragged anymore. -// Fortunately, we only have to keep it visible for a frame immediately after dragging, -// after that, we can safely hide it altogether. -@keyframes hide-during-dragging { - to { - position: fixed; - transform: translate(9999px, 9999px); - } -} - -.components-popover.block-editor-block-list__block-popover { - z-index: z-index(".block-editor-block-list__block-popover"); - position: absolute; - - .components-popover__content { - margin: 0 !important; - min-width: auto; - width: max-content; - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - - // Allow clicking through the toolbar holder. - pointer-events: none; - - .block-editor-block-list__block-selection-button, - .block-editor-block-contextual-toolbar, - .block-editor-block-list__empty-block-inserter { - pointer-events: all; - } - - // Position the block toolbar. - .block-editor-block-list__block-selection-button, - .block-editor-block-contextual-toolbar { - margin-top: $grid-unit-15; - margin-bottom: $grid-unit-15; - } - } - - .is-dragging-components-draggable & { - opacity: 0; - // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. - // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. - animation: hide-during-dragging 1ms linear forwards; - } -} - -.is-dragging-components-draggable .components-tooltip { - display: none; -} diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index 5f3b52bcb2881..db1f249d393bf 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import TextareaAutosize from 'react-autosize-textarea'; + /** * WordPress dependencies */ @@ -13,12 +18,6 @@ import { withSelect, withDispatch } from '@wordpress/data'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; -/** - * Zero width non-breaking space, used as padding for the paragraph when it is - * empty. - */ -export const ZWNBSP = '\ufeff'; - export function DefaultBlockAppender( { isLocked, isVisible, @@ -34,30 +33,34 @@ export function DefaultBlockAppender( { const value = decodeEntities( placeholder ) || __( 'Type / to choose a block' ); + // The appender "button" is in-fact a text field so as to support + // transitions by WritingFlow occurring by arrow key press. WritingFlow + // only supports tab transitions into text fields and to the block focus + // boundary. + // + // See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658 + // + // If it were ever to be made to be a proper `button` element, it is + // important to note that `onFocus` alone would not be sufficient to + // capture click events, notably in Firefox. + // + // See: https://gist.github.com/cvrebert/68659d0333a578d75372 + + // The wp-block className is important for editor styles. + return (
-

- { showPrompt ? value : ZWNBSP } -

+ value={ showPrompt ? value : '' } + /> -

- Type / to choose a block -

+ value="Type / to choose a block" + /> -

- Type / to choose a block -

+ value="Type / to choose a block" + /> -

-  -

+ value="" + /> { const expectOnAppendCalled = ( onAppend ) => { @@ -35,7 +35,7 @@ describe( 'DefaultBlockAppender', () => { ); - wrapper.find( 'p' ).simulate( 'focus' ); + wrapper.find( 'ForwardRef' ).simulate( 'focus' ); expect( wrapper ).toMatchSnapshot(); @@ -51,9 +51,9 @@ describe( 'DefaultBlockAppender', () => { showPrompt={ false } /> ); - const input = wrapper.find( 'p' ); + const input = wrapper.find( 'ForwardRef' ); - expect( input.prop( 'children' ) ).toEqual( ZWNBSP ); + expect( input.prop( 'value' ) ).toEqual( '' ); expect( wrapper ).toMatchSnapshot(); } ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 2485c35347033..40e677aedd228 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -185,7 +185,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) { > { iframeDocument && createPortal( - + { children } , iframeDocument.body diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index dfa5b794ed7db..a4cb37e658505 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -95,6 +95,7 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas'; export { default as BlockInspector } from './block-inspector'; export { default as BlockList } from './block-list'; export { useBlockProps } from './block-list/use-block-props'; +export { Block as __experimentalBlock } from './block-list/block-wrapper'; export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout'; export { default as BlockMover } from './block-mover'; export { default as BlockPreview } from './block-preview'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index bb6175c5ffe93..29449bb0a0843 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -50,8 +50,6 @@ export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; export { default as __experimentalUseEditorFeature } from './use-editor-feature'; -export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders'; -export { default as Warning } from './warning'; export { BottomSheetSettings, @@ -70,6 +68,7 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; export { useBlockProps } from './block-list/use-block-props'; +export { Block as __experimentalBlock } from './block-list/block-wrapper'; export { default as FloatingToolbar } from './floating-toolbar'; // State Related Components diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js index f2f4dd81438fb..5d01ecc02515b 100644 --- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -15,7 +15,6 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => { return ( diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index fec66c1ef0913..02ef1c0571107 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -38,7 +38,7 @@ import { store as blockEditorStore } from '../../../store'; * @return {Array} Insertion Point State (rootClientID, onInsertBlocks and onToggle). */ function useInsertionPoint( { - rootClientId = '', + rootClientId, insertionIndex, clientId, isAppender, @@ -49,38 +49,40 @@ function useInsertionPoint( { const { destinationRootClientId, destinationIndex } = useSelect( ( select ) => { const { - getSelectedBlockClientId, - getBlockRootClientId, getBlockIndex, getBlockOrder, + getBlockInsertionPoint, } = select( blockEditorStore ); - const selectedBlockClientId = getSelectedBlockClientId(); - - let _destinationRootClientId = rootClientId; - let _destinationIndex; - - if ( insertionIndex ) { - // Insert into a specific index. - _destinationIndex = insertionIndex; - } else if ( clientId ) { - // Insert after a specific client ID. - _destinationIndex = getBlockIndex( - clientId, - _destinationRootClientId - ); - } else if ( ! isAppender && selectedBlockClientId ) { - _destinationRootClientId = getBlockRootClientId( - selectedBlockClientId - ); - _destinationIndex = - getBlockIndex( - selectedBlockClientId, + + let _destinationRootClientId, _destinationIndex; + + if ( rootClientId || insertionIndex || clientId || isAppender ) { + // If any of these arguments are set, we're in "manual mode" + // meaning the insertion point is set by the caller. + + _destinationRootClientId = rootClientId; + + if ( insertionIndex ) { + // Insert into a specific index. + _destinationIndex = insertionIndex; + } else if ( clientId ) { + // Insert after a specific client ID. + _destinationIndex = getBlockIndex( + clientId, + _destinationRootClientId + ); + } else { + // Insert at the end of the list. + _destinationIndex = getBlockOrder( _destinationRootClientId - ) + 1; + ).length; + } } else { - // Insert at the end of the list. - _destinationIndex = getBlockOrder( _destinationRootClientId ) - .length; + // Otherwise, we're in "auto mode" where the insertion point is + // decided by getBlockInsertionPoint(). + const insertionPoint = getBlockInsertionPoint(); + _destinationRootClientId = insertionPoint.rootClientId; + _destinationIndex = insertionPoint.index; } return { diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 13dda883f5b94..d18973d1d37db 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -190,9 +190,6 @@ function InserterMenu( { rootClientId={ rootClientId } clientId={ clientId } isAppender={ isAppender } - __experimentalInsertionIndex={ - __experimentalInsertionIndex - } showBlockDirectory shouldFocusBlock={ shouldFocusBlock } /> diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index ca4ff4c2fa274..d880b2b448067 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -52,16 +52,13 @@ export default function QuickInserter( { ( showPatterns && patterns.length > SEARCH_THRESHOLD ) || blockTypes.length > SEARCH_THRESHOLD; - const { setInserterIsOpened, insertionIndex } = useSelect( + const { setInserterIsOpened, blockIndex } = useSelect( ( select ) => { - const { getSettings, getBlockIndex, getBlockCount } = select( - blockEditorStore - ); - const index = getBlockIndex( clientId, rootClientId ); + const { getSettings, getBlockIndex } = select( blockEditorStore ); return { setInserterIsOpened: getSettings() .__experimentalSetIsInserterOpened, - insertionIndex: index === -1 ? getBlockCount() : index, + blockIndex: getBlockIndex( clientId, rootClientId ), }; }, [ clientId, rootClientId ] @@ -73,10 +70,13 @@ export default function QuickInserter( { } }, [ setInserterIsOpened ] ); + const { __unstableSetInsertionPoint } = useDispatch( blockEditorStore ); + // When clicking Browse All select the appropriate block so as // the insertion point can work as expected const onBrowseAll = () => { - setInserterIsOpened( { rootClientId, insertionIndex } ); + __unstableSetInsertionPoint( rootClientId, blockIndex ); + setInserterIsOpened( true ); }; return ( diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index b29015ee763dc..03bf7b7c2da99 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -33,7 +33,6 @@ function InserterSearchResults( { rootClientId, clientId, isAppender, - __experimentalInsertionIndex, maxBlockPatterns, maxBlockTypes, showBlockDirectory = false, @@ -47,7 +46,6 @@ function InserterSearchResults( { rootClientId, clientId, isAppender, - insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); const [ diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js index 4ed9b6341142d..304a118315444 100644 --- a/packages/block-editor/src/components/inspector-advanced-controls/index.js +++ b/packages/block-editor/src/components/inspector-advanced-controls/index.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - createSlotFill, - __experimentalStyleProvider as StyleProvider, -} from '@wordpress/components'; +import { createSlotFill } from '@wordpress/components'; /** * Internal dependencies @@ -16,11 +13,7 @@ const { Fill, Slot } = createSlotFill( name ); function InspectorAdvancedControls( { children } ) { const { isSelected } = useBlockEditContext(); - return isSelected ? ( - - { children } - - ) : null; + return isSelected ? { children } : null; } InspectorAdvancedControls.slotName = name; diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 9a6cb7bab61a7..8db793f10ec39 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - __experimentalStyleProvider as StyleProvider, - createSlotFill, -} from '@wordpress/components'; +import { createSlotFill } from '@wordpress/components'; /** * Internal dependencies @@ -14,11 +11,7 @@ import useDisplayBlockControls from '../use-display-block-controls'; const { Fill, Slot } = createSlotFill( 'InspectorControls' ); function InspectorControls( { children } ) { - return useDisplayBlockControls() ? ( - - { children } - - ) : null; + return useDisplayBlockControls() ? { children } : null; } InspectorControls.Slot = Slot; diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md index 806d181e180b7..ca61544e9c541 100644 --- a/packages/block-editor/src/components/line-height-control/README.md +++ b/packages/block-editor/src/components/line-height-control/README.md @@ -4,7 +4,7 @@ The `LineHeightControl` component adds a lineHeight attribute to the core Paragr ![Line height control in a paragraph block](https://make.wordpress.org/core/files/2020/09/line-height-for-paragraph-block.png) -_Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available. +_Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#supporting-custom-line-heights) before it'll be available. ## Table of contents diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index 25950cca507de..dd0bc6f80877c 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; diff --git a/packages/block-editor/src/components/provider/block-refs-provider.js b/packages/block-editor/src/components/provider/block-refs-provider.js deleted file mode 100644 index e98e0f4d25c9d..0000000000000 --- a/packages/block-editor/src/components/provider/block-refs-provider.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { createContext, useMemo } from '@wordpress/element'; - -export const BlockRefs = createContext(); - -export function BlockRefsProvider( { children } ) { - const value = useMemo( - () => ( { refs: new Map(), callbacks: new Map() } ), - [] - ); - return ( - { children } - ); -} diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js index 8851a2b9b47a1..157cd72d1f237 100644 --- a/packages/block-editor/src/components/provider/index.js +++ b/packages/block-editor/src/components/provider/index.js @@ -10,7 +10,6 @@ import { useEffect } from '@wordpress/element'; import withRegistryProvider from './with-registry-provider'; import useBlockSync from './use-block-sync'; import { store as blockEditorStore } from '../../store'; -import { BlockRefsProvider } from './block-refs-provider'; /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */ @@ -25,7 +24,7 @@ function BlockEditorProvider( props ) { // Syncs the entity provider with changes in the block-editor store. useBlockSync( props ); - return { children }; + return children; } export default withRegistryProvider( BlockEditorProvider ); diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js index 61e7e3f8fd05d..e5c54524dc46e 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/index.js +++ b/packages/block-editor/src/components/skip-to-selected-block/index.js @@ -8,13 +8,16 @@ import { Button } from '@wordpress/components'; /** * Internal dependencies */ +import { getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; const SkipToSelectedBlock = ( { selectedBlockClientId } ) => { - const ref = useBlockRef( selectedBlockClientId ); const onClick = () => { - ref.current.focus(); + const selectedBlockElement = getBlockDOMNode( + selectedBlockClientId, + document + ); + selectedBlockElement.focus(); }; return selectedBlockClientId ? ( diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js new file mode 100644 index 0000000000000..aafdbb94151d2 --- /dev/null +++ b/packages/block-editor/src/components/spacing-panel-control/index.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import InspectorControls from '../inspector-controls'; +import useEditorFeature from '../use-editor-feature'; + +export default function SpacingPanelControl( { children, ...props } ) { + const isSpacingEnabled = useEditorFeature( 'spacing.customPadding' ); + + if ( ! isSpacingEnabled ) return null; + + return ( + + { children } + + ); +} diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 09025eeec5407..1d46debeb567a 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -6,7 +6,7 @@ import { find, reverse, first, last } from 'lodash'; /** * WordPress dependencies */ -import { useRef, useEffect } from '@wordpress/element'; +import { useRef, useEffect, createContext } from '@wordpress/element'; import { computeCaretRect, focus, @@ -15,7 +15,6 @@ import { placeCaretAtHorizontalEdge, placeCaretAtVerticalEdge, isEntirelySelected, - isRTL, } from '@wordpress/dom'; import { UP, @@ -32,16 +31,22 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { isInSameBlock } from '../../utils/dom'; +import { isInSameBlock, getBlockClientId } from '../../utils/dom'; import useMultiSelection from './use-multi-selection'; import { store as blockEditorStore } from '../../store'; +export const SelectionStart = createContext(); + /** * Useful for positioning an element within the viewport so focussing the * element does not scroll the page. */ const PREVENT_SCROLL_ON_FOCUS = { position: 'fixed' }; +function getComputedStyle( node ) { + return node.ownerDocument.defaultView.getComputedStyle( node ); +} + function isFormElement( element ) { const { tagName } = element; return ( @@ -144,6 +149,51 @@ export function getClosestTabbable( return find( focusableNodes, isTabCandidate ); } +function selector( select ) { + const { + getSelectedBlockClientId, + getMultiSelectedBlocksStartClientId, + getMultiSelectedBlocksEndClientId, + getPreviousBlockClientId, + getNextBlockClientId, + getFirstMultiSelectedBlockClientId, + getLastMultiSelectedBlockClientId, + hasMultiSelection, + getBlockOrder, + isSelectionEnabled, + getBlockSelectionStart, + isMultiSelecting, + getSettings, + isNavigationMode, + } = select( blockEditorStore ); + + const selectedBlockClientId = getSelectedBlockClientId(); + const selectionStartClientId = getMultiSelectedBlocksStartClientId(); + const selectionEndClientId = getMultiSelectedBlocksEndClientId(); + const blocks = getBlockOrder(); + + return { + selectedBlockClientId, + selectionStartClientId, + selectionBeforeEndClientId: getPreviousBlockClientId( + selectionEndClientId || selectedBlockClientId + ), + selectionAfterEndClientId: getNextBlockClientId( + selectionEndClientId || selectedBlockClientId + ), + selectedFirstClientId: getFirstMultiSelectedBlockClientId(), + selectedLastClientId: getLastMultiSelectedBlockClientId(), + hasMultiSelection: hasMultiSelection(), + firstBlock: first( blocks ), + lastBlock: last( blocks ), + isSelectionEnabled: isSelectionEnabled(), + blockSelectionStart: getBlockSelectionStart(), + isMultiSelecting: isMultiSelecting(), + keepCaretInsideBlock: getSettings().keepCaretInsideBlock, + isNavigationMode: isNavigationMode(), + }; +} + /** * Handles selection and navigation across blocks. This component should be * wrapped around BlockList. @@ -168,46 +218,57 @@ export default function WritingFlow( { children } ) { // browser behaviour across blocks. const verticalRect = useRef(); - const { hasMultiSelection, isMultiSelecting, isNavigationMode } = useSelect( - ( select ) => { - const selectors = select( blockEditorStore ); - return { - hasMultiSelection: selectors.hasMultiSelection(), - isMultiSelecting: selectors.isMultiSelecting(), - isNavigationMode: selectors.isNavigationMode(), - }; - }, - [] - ); const { - getSelectedBlockClientId, - getMultiSelectedBlocksStartClientId, - getMultiSelectedBlocksEndClientId, - getPreviousBlockClientId, - getNextBlockClientId, - getFirstMultiSelectedBlockClientId, - getLastMultiSelectedBlockClientId, - getBlockOrder, - getSettings, - } = useSelect( blockEditorStore ); + selectedBlockClientId, + selectionStartClientId, + selectionBeforeEndClientId, + selectionAfterEndClientId, + selectedFirstClientId, + selectedLastClientId, + hasMultiSelection, + firstBlock, + lastBlock, + isSelectionEnabled, + blockSelectionStart, + isMultiSelecting, + keepCaretInsideBlock, + isNavigationMode, + } = useSelect( selector, [] ); const { multiSelect, selectBlock, setNavigationMode } = useDispatch( blockEditorStore ); - function onMouseDown() { + function onMouseDown( event ) { verticalRect.current = null; + + // Multi-select blocks when Shift+clicking. + if ( + isSelectionEnabled && + // The main button. + // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + event.button === 0 + ) { + const clientId = getBlockClientId( event.target ); + + if ( clientId ) { + if ( event.shiftKey ) { + if ( blockSelectionStart !== clientId ) { + multiSelect( blockSelectionStart, clientId ); + event.preventDefault(); + } + // Allow user to escape out of a multi-selection to a singular + // selection of a block via click. This is handled here since + // focus handling excludes blocks when there is multiselection, + // as focus can be incurred by starting a multiselection (focus + // moved to first block's multi-controls). + } else if ( hasMultiSelection ) { + selectBlock( clientId ); + } + } + } } function expandSelection( isReverse ) { - const selectedBlockClientId = getSelectedBlockClientId(); - const selectionStartClientId = getMultiSelectedBlocksStartClientId(); - const selectionEndClientId = getMultiSelectedBlocksEndClientId(); - const selectionBeforeEndClientId = getPreviousBlockClientId( - selectionEndClientId || selectedBlockClientId - ); - const selectionAfterEndClientId = getNextBlockClientId( - selectionEndClientId || selectedBlockClientId - ); const nextSelectionEndClientId = isReverse ? selectionBeforeEndClientId : selectionAfterEndClientId; @@ -221,8 +282,6 @@ export default function WritingFlow( { children } ) { } function moveSelection( isReverse ) { - const selectedFirstClientId = getFirstMultiSelectedBlockClientId(); - const selectedLastClientId = getLastMultiSelectedBlockClientId(); const focusedBlockClientId = isReverse ? selectedFirstClientId : selectedLastClientId; @@ -283,7 +342,6 @@ export default function WritingFlow( { children } ) { const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge; const { ownerDocument } = container.current; const { defaultView } = ownerDocument; - const selectedBlockClientId = getSelectedBlockClientId(); // In Edit mode, Tab should focus the first tabbable element after the // content, which is normally the sidebar (with block controls) and @@ -353,8 +411,7 @@ export default function WritingFlow( { children } ) { ? entirelySelected.current : isEntirelySelected( target ) ) { - const blocks = getBlockOrder(); - multiSelect( first( blocks ), last( blocks ) ); + multiSelect( firstBlock, lastBlock ); event.preventDefault(); } @@ -380,18 +437,10 @@ export default function WritingFlow( { children } ) { // In the case of RTL scripts, right means previous and left means next, // which is the exact reverse of LTR. - const isReverseDir = isRTL( target ) ? ! isReverse : isReverse; - const { keepCaretInsideBlock } = getSettings(); + const { direction } = getComputedStyle( target ); + const isReverseDir = direction === 'rtl' ? ! isReverse : isReverse; if ( isShift ) { - const selectionEndClientId = getMultiSelectedBlocksEndClientId(); - const selectionBeforeEndClientId = getPreviousBlockClientId( - selectionEndClientId || selectedBlockClientId - ); - const selectionAfterEndClientId = getNextBlockClientId( - selectionEndClientId || selectedBlockClientId - ); - if ( // Ensure that there is a target block. ( ( isReverse && selectionBeforeEndClientId ) || @@ -435,7 +484,7 @@ export default function WritingFlow( { children } ) { isReverseDir, container.current ); - placeCaretAtHorizontalEdge( closestTabbable, isReverse ); + placeCaretAtHorizontalEdge( closestTabbable, isReverseDir ); event.preventDefault(); } } @@ -478,7 +527,7 @@ export default function WritingFlow( { children } ) { // This hook sets the selection after the user makes a multi-selection. For // some browsers, like Safari, it is important that this happens AFTER // setting focus on the multi-selection container above. - useMultiSelection( container ); + const onSelectionStart = useMultiSelection( container ); const lastFocus = useRef(); @@ -499,7 +548,7 @@ export default function WritingFlow( { children } ) { noCapture.current = null; } else if ( hasMultiSelection ) { multiSelectionContainer.current.focus(); - } else if ( getSelectedBlockClientId() ) { + } else if ( selectedBlockClientId ) { lastFocus.current.focus(); } else { setNavigationMode( true ); @@ -521,7 +570,7 @@ export default function WritingFlow( { children } ) { // bubbling events from children to determine focus transition intents. /* eslint-disable jsx-a11y/no-static-element-interactions */ return ( - <> +
- + ); /* eslint-enable jsx-a11y/no-static-element-interactions */ } diff --git a/packages/block-editor/src/components/writing-flow/use-multi-selection.js b/packages/block-editor/src/components/writing-flow/use-multi-selection.js index 7bb224d3beda5..a6aee58da331f 100644 --- a/packages/block-editor/src/components/writing-flow/use-multi-selection.js +++ b/packages/block-editor/src/components/writing-flow/use-multi-selection.js @@ -1,19 +1,14 @@ -/** - * External dependencies - */ -import { first, last } from 'lodash'; - /** * WordPress dependencies */ -import { useEffect } from '@wordpress/element'; +import { useEffect, useRef, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ +import { getBlockClientId, getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs'; /** * Returns for the deepest node at the start or end of a container node. Ignores @@ -43,6 +38,7 @@ function getDeepestNode( node, type ) { function selector( select ) { const { + isSelectionEnabled, isMultiSelecting, getMultiSelectedBlockClientIds, hasMultiSelection, @@ -50,6 +46,7 @@ function selector( select ) { } = select( blockEditorStore ); return { + isSelectionEnabled: isSelectionEnabled(), isMultiSelecting: isMultiSelecting(), multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), hasMultiSelection: hasMultiSelection(), @@ -57,18 +54,36 @@ function selector( select ) { }; } +function toggleRichText( container, toggle ) { + Array.from( container.querySelectorAll( '.rich-text' ) ).forEach( + ( node ) => { + if ( toggle ) { + node.setAttribute( 'contenteditable', true ); + } else { + node.removeAttribute( 'contenteditable' ); + } + } + ); +} + export default function useMultiSelection( ref ) { const { + isSelectionEnabled, isMultiSelecting, multiSelectedBlockClientIds, hasMultiSelection, selectedBlockClientId, } = useSelect( selector, [] ); - const { selectBlock } = useDispatch( blockEditorStore ); - const selectedRef = useBlockRef( selectedBlockClientId ); - // These must be in the right DOM order. - const startRef = useBlockRef( first( multiSelectedBlockClientIds ) ); - const endRef = useBlockRef( last( multiSelectedBlockClientIds ) ); + const { getBlockParents } = useSelect( blockEditorStore ); + const { + startMultiSelect, + stopMultiSelect, + multiSelect, + selectBlock, + } = useDispatch( blockEditorStore ); + const rafId = useRef(); + const startClientId = useRef(); + const anchorElement = useRef(); /** * When the component updates, and there is multi selection, we need to @@ -86,7 +101,10 @@ export default function useMultiSelection( ref ) { const selection = defaultView.getSelection(); if ( selection.rangeCount && ! selection.isCollapsed ) { - const blockNode = selectedRef.current; + const blockNode = getBlockDOMNode( + selectedBlockClientId, + ownerDocument + ); const { startContainer, endContainer } = selection.getRangeAt( 0 ); @@ -110,14 +128,19 @@ export default function useMultiSelection( ref ) { } // These must be in the right DOM order. + const start = multiSelectedBlockClientIds[ 0 ]; + const end = multiSelectedBlockClientIds[ length - 1 ]; + + let startNode = getBlockDOMNode( start, ownerDocument ); + let endNode = getBlockDOMNode( end, ownerDocument ); const selection = defaultView.getSelection(); const range = ownerDocument.createRange(); // The most stable way to select the whole block contents is to start // and end at the deepest points. - const startNode = getDeepestNode( startRef.current, 'start' ); - const endNode = getDeepestNode( endRef.current, 'end' ); + startNode = getDeepestNode( startNode, 'start' ); + endNode = getDeepestNode( endNode, 'end' ); range.setStartBefore( startNode ); range.setEndAfter( endNode ); @@ -131,4 +154,133 @@ export default function useMultiSelection( ref ) { selectBlock, selectedBlockClientId, ] ); + + const onSelectionChange = useCallback( + ( { isSelectionEnd } ) => { + const { ownerDocument } = ref.current; + const { defaultView } = ownerDocument; + const selection = defaultView.getSelection(); + + // If no selection is found, end multi selection and enable all rich + // text areas. + if ( ! selection.rangeCount || selection.isCollapsed ) { + toggleRichText( ref.current, true ); + return; + } + + const clientId = getBlockClientId( selection.focusNode ); + const isSingularSelection = startClientId.current === clientId; + + if ( isSingularSelection ) { + selectBlock( clientId ); + + // If the selection is complete (on mouse up), and no multiple + // blocks have been selected, set focus back to the anchor element + // if the anchor element contains the selection. Additionally, rich + // text elements that were previously disabled can now be enabled + // again. + if ( isSelectionEnd ) { + toggleRichText( ref.current, true ); + + if ( selection.rangeCount ) { + const { + commonAncestorContainer, + } = selection.getRangeAt( 0 ); + + if ( + anchorElement.current.contains( + commonAncestorContainer + ) + ) { + anchorElement.current.focus(); + } + } + } + } else { + const startPath = [ + ...getBlockParents( startClientId.current ), + startClientId.current, + ]; + const endPath = [ ...getBlockParents( clientId ), clientId ]; + const depth = Math.min( startPath.length, endPath.length ) - 1; + + multiSelect( startPath[ depth ], endPath[ depth ] ); + } + }, + [ selectBlock, getBlockParents, multiSelect ] + ); + + /** + * Handles a mouseup event to end the current mouse multi-selection. + */ + const onSelectionEnd = useCallback( () => { + const { ownerDocument } = ref.current; + const { defaultView } = ownerDocument; + ownerDocument.removeEventListener( + 'selectionchange', + onSelectionChange + ); + // Equivalent to attaching the listener once. + defaultView.removeEventListener( 'mouseup', onSelectionEnd ); + // The browser selection won't have updated yet at this point, so wait + // until the next animation frame to get the browser selection. + rafId.current = defaultView.requestAnimationFrame( () => { + onSelectionChange( { isSelectionEnd: true } ); + stopMultiSelect(); + } ); + }, [ onSelectionChange, stopMultiSelect ] ); + + // Only clean up when unmounting, these are added and cleaned up elsewhere. + useEffect( () => { + const { ownerDocument } = ref.current; + const { defaultView } = ownerDocument; + + return () => { + ownerDocument.removeEventListener( + 'selectionchange', + onSelectionChange + ); + defaultView.removeEventListener( 'mouseup', onSelectionEnd ); + defaultView.cancelAnimationFrame( rafId.current ); + }; + }, [ onSelectionChange, onSelectionEnd ] ); + + /** + * Binds event handlers to the document for tracking a pending multi-select + * in response to a mousedown event occurring in a rendered block. + */ + return useCallback( + ( clientId ) => { + if ( ! isSelectionEnabled ) { + return; + } + + const { ownerDocument } = ref.current; + const { defaultView } = ownerDocument; + + startClientId.current = clientId; + anchorElement.current = ownerDocument.activeElement; + startMultiSelect(); + + // `onSelectionStart` is called after `mousedown` and `mouseleave` + // (from a block). The selection ends when `mouseup` happens anywhere + // in the window. + ownerDocument.addEventListener( + 'selectionchange', + onSelectionChange + ); + defaultView.addEventListener( 'mouseup', onSelectionEnd ); + + // Removing the contenteditable attributes within the block editor is + // essential for selection to work across editable areas. The edible + // hosts are removed, allowing selection to be extended outside the + // DOM element. `startMultiSelect` sets a flag in the store so the rich + // text components are updated, but the rerender may happen very slowly, + // especially in Safari for the blocks that are asynchonously rendered. + // To ensure the browser instantly removes the selection boundaries, we + // remove the contenteditable attributes manually. + toggleRichText( ref.current, false ); + }, + [ isSelectionEnabled, startMultiSelect, onSelectionEnd ] + ); } diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js index eacc2bbbc413b..9b93203b3d265 100644 --- a/packages/block-editor/src/hooks/color-panel.js +++ b/packages/block-editor/src/hooks/color-panel.js @@ -10,7 +10,7 @@ import { useState, useEffect } from '@wordpress/element'; import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings'; import ContrastChecker from '../components/contrast-checker'; import InspectorControls from '../components/inspector-controls'; -import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs'; +import { getBlockDOMNode } from '../utils/dom'; function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); @@ -23,19 +23,19 @@ export default function ColorPanel( { } ) { const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); const [ detectedColor, setDetectedColor ] = useState(); - const ref = useBlockRef( clientId ); useEffect( () => { if ( ! enableContrastChecking ) { return; } - if ( ! ref.current ) { + const colorsDetectionElement = getBlockDOMNode( clientId, document ); + if ( ! colorsDetectionElement ) { return; } - setDetectedColor( getComputedStyle( ref.current ).color ); + setDetectedColor( getComputedStyle( colorsDetectionElement ).color ); - let backgroundColorNode = ref.current; + let backgroundColorNode = colorsDetectionElement; let backgroundColor = getComputedStyle( backgroundColorNode ) .backgroundColor; while ( diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 152f20602d65a..277c413e98b0a 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -57,12 +57,6 @@ function addSaveProps( props, blockType, attributes ) { return props; } - if ( - hasBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) - ) { - return props; - } - // Use TokenList to dedupe classes. const classes = new TokenList( props.className ); classes.add( getFontSizeClass( attributes.fontSize ) ); @@ -174,38 +168,30 @@ const withFontSizeInlineStyles = createHigherOrderComponent( wrapperProps, } = props; - // Only add inline styles if the block supports font sizes, - // doesn't skip serialization of font sizes, - // doesn't already have an inline font size, - // and does have a class to extract the font size from. + const newProps = { ...props }; + + // Only add inline styles if the block supports font sizes, doesn't + // already have an inline font size, and does have a class to extract + // the font size from. if ( - ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || - hasBlockSupport( - blockName, - '__experimentalSkipFontSizeSerialization' - ) || - ! fontSize || - style?.typography?.fontSize + hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) && + fontSize && + ! style?.typography?.fontSize ) { - return ; - } - - const fontSizeValue = getFontSize( - fontSizes, - fontSize, - style?.typography?.fontSize - ).size; + const fontSizeValue = getFontSize( + fontSizes, + fontSize, + style?.typography?.fontSize + ).size; - const newProps = { - ...props, - wrapperProps: { + newProps.wrapperProps = { ...wrapperProps, style: { fontSize: fontSizeValue, ...wrapperProps?.style, }, - }, - }; + }; + } return ; }, diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 3308b98d28169..ea343c8d37773 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -12,6 +12,4 @@ import './font-size'; import './border-color'; import './layout'; -export { useCustomSides } from './spacing'; -export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 11dbe0a30e4c9..617bd51a05726 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -9,5 +9,4 @@ import './style'; import './color'; import './font-size'; -export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index e366ed4de53dc..113da0a5bfcce 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -9,11 +9,11 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ -import useEditorFeature from '../components/use-editor-feature'; -import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; +export const SPACING_SUPPORT_KEY = 'spacing'; + const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ { @@ -43,27 +43,10 @@ const CSS_UNITS = [ }, ]; -/** - * Determines if there is padding support. - * - * @param {string|Object} blockType Block name or Block Type object. - * @return {boolean} Whether there is support. - */ -export function hasPaddingSupport( blockType ) { - const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY ); - return !! ( true === support || support?.padding ); -} - -/** - * Custom hook that checks if padding settings have been disabled. - * - * @param {string} name The name of the block. - * @return {boolean} Whether padding setting is disabled. - */ -export function useIsPaddingDisabled( { name: blockName } = {} ) { - const isDisabled = ! useEditorFeature( 'spacing.customPadding' ); - return ! hasPaddingSupport( blockName ) || isDisabled; -} +const hasPaddingSupport = ( blockName ) => { + const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); + return spacingSupport && spacingSupport.padding !== false; +}; /** * Inspector control panel containing the padding related configuration @@ -80,7 +63,6 @@ export function PaddingEdit( props ) { } = props; const units = useCustomUnits( CSS_UNITS ); - const sides = useCustomSides( blockName, 'padding' ); if ( ! hasPaddingSupport( blockName ) ) { return null; @@ -90,7 +72,6 @@ export function PaddingEdit( props ) { const newStyle = { ...style, spacing: { - ...style?.spacing, padding: next, }, }; @@ -121,7 +102,6 @@ export function PaddingEdit( props ) { onChange={ onChange } onChangeShowVisualizer={ onChangeShowVisualizer } label={ __( 'Padding' ) } - sides={ sides } units={ units } /> diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js deleted file mode 100644 index 1566f3015f39c..0000000000000 --- a/packages/block-editor/src/hooks/spacing.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components'; -import { Platform } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { getBlockSupport } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import InspectorControls from '../components/inspector-controls'; -import { - PaddingEdit, - hasPaddingSupport, - useIsPaddingDisabled, -} from './padding'; - -export const SPACING_SUPPORT_KEY = 'spacing'; - -/** - * Inspector controls for spacing support. - * - * @param {Object} props Block props. - * @return {WPElement} Inspector controls for spacing support features. - */ -export function SpacingPanel( props ) { - const isDisabled = useIsSpacingDisabled( props ); - const isSupported = hasSpacingSupport( props.name ); - - if ( isDisabled || ! isSupported ) { - return null; - } - - return ( - - - - - - ); -} - -/** - * Determine whether there is block support for padding. - * - * @param {string} blockName Block name. - * @return {boolean} Whether there is support. - */ -export function hasSpacingSupport( blockName ) { - if ( Platform.OS !== 'web' ) { - return false; - } - - return hasPaddingSupport( blockName ); -} - -/** - * Determines whether spacing support has been disabled. - * - * @param {Object} props Block properties. - * @return {boolean} If spacing support is completely disabled. - */ -const useIsSpacingDisabled = ( props = {} ) => { - const paddingDisabled = useIsPaddingDisabled( props ); - - return paddingDisabled; -}; - -/** - * Custom hook to retrieve which padding/margin is supported - * e.g. top, right, bottom or left. - * - * Sides are opted into by default. It is only if a specific side is set to - * false that it is omitted. - * - * @param {string} blockName Block name. - * @param {string} feature The feature custom sides relate to e.g. padding or margins. - * @return {Object} Sides supporting custom margin. - */ -export function useCustomSides( blockName, feature ) { - const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); - - // Skip when setting is boolean as theme isn't setting arbitrary sides. - if ( typeof support[ feature ] === 'boolean' ) { - return; - } - - return support[ feature ]; -} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index e856f8e91bd82..b1c7239b2d791 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { capitalize, get, has, omit, omitBy, startsWith } from 'lodash'; +import { capitalize, get, has, omitBy, startsWith } from 'lodash'; /** * WordPress dependencies @@ -19,10 +19,9 @@ import { createHigherOrderComponent } from '@wordpress/compose'; */ import { BORDER_SUPPORT_KEY, BorderPanel } from './border'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; -import { FONT_SIZE_SUPPORT_KEY } from './font-size'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; -import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing'; -import useDisplayBlockControls from '../components/use-display-block-controls'; +import { SPACING_SUPPORT_KEY, PaddingEdit } from './padding'; +import SpacingPanelControl from '../components/spacing-panel-control'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, @@ -128,19 +127,10 @@ export function addSaveProps( props, blockType, attributes ) { } const { style } = attributes; - let filteredStyle = omitKeysNotToSerialize( style, { + const filteredStyle = omitKeysNotToSerialize( style, { border: getBlockSupport( blockType, BORDER_SUPPORT_KEY ), [ COLOR_SUPPORT_KEY ]: getBlockSupport( blockType, COLOR_SUPPORT_KEY ), } ); - - if ( - getBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) - ) { - filteredStyle = omit( filteredStyle, [ - [ 'typography', FONT_SIZE_SUPPORT_KEY ], - ] ); - } - props.style = { ...getInlineStyles( filteredStyle ), ...props.style, @@ -150,7 +140,7 @@ export function addSaveProps( props, blockType, attributes ) { } /** - * Filters registered block settings to extend the block edit wrapper + * Filters registered block settings to extand the block edit wrapper * to apply the desired styles and classnames properly. * * @param {Object} settings Original block settings @@ -183,21 +173,24 @@ export function addEditProps( settings ) { */ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const shouldDisplayControls = useDisplayBlockControls(); - - return ( - <> - { shouldDisplayControls && ( - <> - - - - - - ) } - - + const { name: blockName } = props; + + const hasSpacingSupport = hasBlockSupport( + blockName, + SPACING_SUPPORT_KEY ); + + return [ + , + , + , + , + hasSpacingSupport && ( + + + + ), + ]; }, 'withToolbarControls' ); diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index b6bd98eb56da6..0cd3c70d9f2b6 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -23,9 +23,6 @@ describe( 'getInlineStyles', () => { style: 'dotted', color: '#21759b', }, - spacing: { - padding: { top: '10px' }, - }, } ) ).toEqual( { backgroundColor: 'black', @@ -36,7 +33,6 @@ describe( 'getInlineStyles', () => { color: 'red', lineHeight: 1.5, fontSize: 10, - paddingTop: '10px', } ); } ); } ); diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js deleted file mode 100644 index 1e8a853057eeb..0000000000000 --- a/packages/block-editor/src/hooks/use-border-props.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { getInlineStyles } from './style'; -import { - getColorClassName, - getColorObjectByAttributeValues, -} from '../components/colors'; -import useEditorFeature from '../components/use-editor-feature'; - -// This utility is intended to assist where the serialization of the border -// block support is being skipped for a block but the border related CSS classes -// & styles still need to be generated so they can be applied to inner elements. - -const EMPTY_ARRAY = []; - -/** - * Provides the CSS class names and inline styles for a block's border support - * attributes. - * - * @param {Object} attributes Block attributes. - * @param {string} attributes.borderColor Selected named border color. - * @param {Object} attributes.style Block's styles attribute. - * - * @return {Object} Border block support derived CSS classes & styles. - */ -export function getBorderClassesAndStyles( { borderColor, style } ) { - const borderStyles = style?.border || {}; - const borderClass = getColorClassName( 'border-color', borderColor ); - - const className = classnames( { - [ borderClass ]: !! borderClass, - 'has-border-color': borderColor || style?.border?.color, - } ); - - return { - className: className || undefined, - style: getInlineStyles( { border: borderStyles } ), - }; -} - -/** - * Derives the border related props for a block from its border block support - * attributes. - * - * Inline styles are forced for named colors to ensure these selections are - * reflected when themes do not load their color stylesheets in the editor. - * - * @param {Object} attributes Block attributes. - * @return {Object} ClassName & style props from border block support. - */ -export function useBorderProps( attributes ) { - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const borderProps = getBorderClassesAndStyles( attributes ); - - // Force inline style to apply border color when themes do not load their - // color stylesheets in the editor. - if ( attributes.borderColor ) { - const borderColorObject = getColorObjectByAttributeValues( - colors, - attributes.borderColor - ); - - borderProps.style.borderColor = borderColorObject.color; - } - - return borderProps; -} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 27af4c4be666b..a5604c367c025 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -8,11 +8,8 @@ import '@wordpress/rich-text'; */ import './hooks'; export { - getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, - useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, useColorProps as __experimentalUseColorProps, - useCustomSides as __experimentalUseCustomSides, } from './hooks'; export * from './components'; export * from './utils'; diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 69da6c75860ed..b0144c19e4f47 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -620,32 +620,47 @@ export function* insertBlocks( } /** - * Returns an action object used in signalling that the insertion point should - * be shown. + * Sets the insertion point without showing it to users. * - * @param {?string} rootClientId Optional root client ID of block list on - * which to insert. - * @param {?number} index Index at which block should be inserted. - * @param {Object} __unstableOptions Wether or not to show an inserter button. + * Components like will default to inserting blocks at this point. + * + * @param {?string} rootClientId Root client ID of block list in which to + * insert. Use `undefined` for the root block + * list. + * @param {number} index Index at which block should be inserted. * * @return {Object} Action object. */ -export function showInsertionPoint( - rootClientId, - index, - __unstableOptions = {} -) { - const { __unstableWithInserter } = __unstableOptions; +export function __unstableSetInsertionPoint( rootClientId, index ) { + return { + type: 'SET_INSERTION_POINT', + rootClientId, + index, + }; +} + +/** + * Sets the insertion point and shows it to users. + * + * Components like will default to inserting blocks at this point. + * + * @param {?string} rootClientId Root client ID of block list in which to + * insert. Use `undefined` for the root block + * list. + * @param {number} index Index at which block should be inserted. + * + * @return {Object} Action object. + */ +export function showInsertionPoint( rootClientId, index ) { return { type: 'SHOW_INSERTION_POINT', rootClientId, index, - __unstableWithInserter, }; } /** - * Returns an action object hiding the insertion point. + * Hides the insertion point for users. * * @return {Object} Action object. */ diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index fbc39f3905251..b4349d621f776 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1393,9 +1393,32 @@ export function blocksMode( state = {}, action ) { } /** - * Reducer returning the block insertion point visibility, either null if there - * is not an explicit insertion point assigned, or an object of its `index` and - * `rootClientId`. + * A helper for resetting the insertion point state. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * @param {*} defaultValue The default value for the reducer. + * + * @return {*} Either the default value if a reset is required, or the state. + */ +function resetInsertionPoint( state, action, defaultValue ) { + switch ( action.type ) { + case 'CLEAR_SELECTED_BLOCK': + case 'SELECT_BLOCK': + case 'SELECTION_CHANGE': + case 'REPLACE_INNER_BLOCKS': + case 'INSERT_BLOCKS': + case 'REMOVE_BLOCKS': + case 'REPLACE_BLOCKS': + return defaultValue; + } + + return state; +} + +/** + * Reducer returning the insertion point position, consisting of the + * rootClientId and an index. * * @param {Object} state Current state. * @param {Object} action Dispatched action. @@ -1404,15 +1427,33 @@ export function blocksMode( state = {}, action ) { */ export function insertionPoint( state = null, action ) { switch ( action.type ) { - case 'SHOW_INSERTION_POINT': - const { rootClientId, index, __unstableWithInserter } = action; - return { rootClientId, index, __unstableWithInserter }; + case 'SET_INSERTION_POINT': + case 'SHOW_INSERTION_POINT': { + const { rootClientId, index } = action; + return { rootClientId, index }; + } + } + + return resetInsertionPoint( state, action, null ); +} +/** + * Reducer returning the visibility of the insertion point. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export function insertionPointVisibility( state = false, action ) { + switch ( action.type ) { + case 'SHOW_INSERTION_POINT': + return true; case 'HIDE_INSERTION_POINT': - return null; + return false; } - return state; + return resetInsertionPoint( state, action, false ); } /** @@ -1723,6 +1764,7 @@ export default combineReducers( { blocksMode, blockListSettings, insertionPoint, + insertionPointVisibility, template, settings, preferences, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 564f6bd1a8970..7d8b9d0b4cca8 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1177,12 +1177,18 @@ export function isCaretWithinFormattedText( state ) { } /** - * Returns the insertion point, the index at which the new inserted block would - * be placed. Defaults to the last index. + * Returns the insertion point. This will be: * - * @param {Object} state Editor state. + * 1) The insertion point manually set using setInsertionPoint() or + * showInsertionPoint(); or + * 2) The point after the current block selection, if there is a selection; or + * 3) The point at the end of the block list. + * + * Components like will default to inserting blocks at this point. + * + * @param {Object} state Global application state. * - * @return {Object} Insertion point object with `rootClientId`, `index`. + * @return {Object} Insertion point object with `rootClientId` and `index`. */ export function getBlockInsertionPoint( state ) { let rootClientId, index; @@ -1208,14 +1214,15 @@ export function getBlockInsertionPoint( state ) { } /** - * Returns true if we should show the block insertion point. + * Whether or not the insertion point should be shown to users. This is set + * using showInsertionPoint() or hideInsertionPoint(). * * @param {Object} state Global application state. * - * @return {?boolean} Whether the insertion point is visible or not. + * @return {?boolean} Whether the insertion point should be shown. */ export function isBlockInsertionPointVisible( state ) { - return state.insertionPoint !== null; + return state.insertionPointVisibility; } /** diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 6433f15e6523e..bbb47619ac28c 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -42,6 +42,7 @@ const { resetBlocks, selectBlock, selectPreviousBlock, + __unstableSetInsertionPoint, showInsertionPoint, startMultiSelect, startTyping, @@ -740,11 +741,31 @@ describe( 'actions', () => { } ); } ); + describe( '__unstableSetInsertionPoint', () => { + it( 'should return the SET_INSERTION_POINT action', () => { + expect( __unstableSetInsertionPoint() ).toEqual( { + type: 'SET_INSERTION_POINT', + } ); + expect( __unstableSetInsertionPoint( 'rootClientId', 2 ) ).toEqual( + { + type: 'SET_INSERTION_POINT', + rootClientId: 'rootClientId', + index: 2, + } + ); + } ); + } ); + describe( 'showInsertionPoint', () => { it( 'should return the SHOW_INSERTION_POINT action', () => { expect( showInsertionPoint() ).toEqual( { type: 'SHOW_INSERTION_POINT', } ); + expect( showInsertionPoint( 'rootClientId', 2 ) ).toEqual( { + type: 'SHOW_INSERTION_POINT', + rootClientId: 'rootClientId', + index: 2, + } ); } ); } ); diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index b4ad1c12ec198..13e6fe57ae980 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -29,6 +29,7 @@ import { preferences, blocksMode, insertionPoint, + insertionPointVisibility, template, blockListSettings, lastBlockAttributesChange, @@ -2040,35 +2041,82 @@ describe( 'state', () => { } ); describe( 'insertionPoint', () => { - it( 'should default to null', () => { + it( 'defaults to `null`', () => { const state = insertionPoint( undefined, {} ); - expect( state ).toBe( null ); + expect( state ).toEqual( null ); } ); - it( 'should set insertion point', () => { - const state = insertionPoint( null, { - type: 'SHOW_INSERTION_POINT', - rootClientId: 'clientId1', - index: 0, - } ); + it.each( [ 'SET_INSERTION_POINT', 'SHOW_INSERTION_POINT' ] )( + 'sets the insertion point on %s', + ( type ) => { + const original = deepFreeze( { + rootClientId: 'clientId1', + index: 0, + } ); - expect( state ).toEqual( { - rootClientId: 'clientId1', - index: 0, - } ); - } ); + const expectedNewState = { + rootClientId: 'clientId2', + index: 1, + }; - it( 'should clear the insertion point', () => { + const state = insertionPoint( original, { + type, + ...expectedNewState, + } ); + + expect( state ).toEqual( expectedNewState ); + } + ); + + it.each( [ + 'CLEAR_SELECTED_BLOCK', + 'SELECT_BLOCK', + 'REPLACE_INNER_BLOCKS', + 'INSERT_BLOCKS', + 'REMOVE_BLOCKS', + 'REPLACE_BLOCKS', + ] )( 'resets the insertion point to `null` on %s', ( type ) => { const original = deepFreeze( { rootClientId: 'clientId1', index: 0, } ); const state = insertionPoint( original, { - type: 'HIDE_INSERTION_POINT', + type, } ); - expect( state ).toBe( null ); + expect( state ).toEqual( null ); + } ); + } ); + + describe( 'insertionPointVisibility', () => { + it( 'defaults to `false`', () => { + const state = insertionPointVisibility( undefined, {} ); + expect( state ).toBe( false ); + } ); + + it( 'shows the insertion point', () => { + const state = insertionPointVisibility( false, { + type: 'SHOW_INSERTION_POINT', + } ); + + expect( state ).toBe( true ); + } ); + + it.each( [ + 'HIDE_INSERTION_POINT', + 'CLEAR_SELECTED_BLOCK', + 'SELECT_BLOCK', + 'REPLACE_INNER_BLOCKS', + 'INSERT_BLOCKS', + 'REMOVE_BLOCKS', + 'REPLACE_BLOCKS', + ] )( 'sets the insertion point on %s to `false`', ( type ) => { + const state = insertionPointVisibility( true, { + type, + } ); + + expect( state ).toBe( false ); } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 5339ffb49943c..78f1342fa4ce6 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -2246,20 +2246,17 @@ describe( 'selectors', () => { } ); describe( 'isBlockInsertionPointVisible', () => { - it( 'should return false if no assigned insertion point', () => { + it( 'should return false if insertion point is set to not show', () => { const state = { - insertionPoint: null, + insertionPointVisibility: false, }; expect( isBlockInsertionPointVisible( state ) ).toBe( false ); } ); - it( 'should return true if assigned insertion point', () => { + it( 'should return true if insertion point is set to show', () => { const state = { - insertionPoint: { - rootClientId: undefined, - index: 5, - }, + insertionPointVisibility: true, }; expect( isBlockInsertionPointVisible( state ) ).toBe( true ); diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 0d9b9b01cbde1..cd83dca5fec2f 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -10,7 +10,6 @@ @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; -@import "./components/block-tools/style.scss"; @import "./components/block-list-appender/style.scss"; @import "./components/block-breadcrumb/style.scss"; @import "./components/block-card/style.scss"; diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index f99468a7e751c..248587311d1d2 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -1,3 +1,36 @@ +/** + * Given a block client ID, returns the corresponding DOM node for the block, + * if exists. As much as possible, this helper should be avoided, and used only + * in cases where isolated behaviors need remote access to a block node. + * + * @param {string} clientId Block client ID. + * @param {Document} doc Document to search. + * + * @return {Element?} Block DOM node. + */ +export function getBlockDOMNode( clientId, doc ) { + return doc.getElementById( 'block-' + clientId ); +} + +/** + * Returns the preview container DOM node for a given block client ID, or + * undefined if the container cannot be determined. + * + * @param {string} clientId Block client ID. + * @param {Document} doc Document to search. + * + * @return {Node|undefined} Preview container DOM node. + */ +export function getBlockPreviewContainerDOMNode( clientId, doc ) { + const domNode = getBlockDOMNode( clientId, doc ); + + if ( ! domNode ) { + return; + } + + return domNode.firstChild || domNode; +} + /** * Returns true if two elements are contained within the same block. * diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 52e02c9762bfb..f62720071c299 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.29.0 (2021-03-17) ### Bug Fixes diff --git a/packages/block-library/README.md b/packages/block-library/README.md index 7b500f4a3b983..356e4778653d1 100644 --- a/packages/block-library/README.md +++ b/packages/block-library/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/block-library --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Building JavaScript for the browser diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 03fb96d81fd90..f36c4685759e1 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "2.29.3", + "version": "2.29.2", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json index 799d050354c5f..d35f8b05001c4 100644 --- a/packages/block-library/src/archives/block.json +++ b/packages/block-library/src/archives/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/archives", - "title": "Archives", "category": "widgets", - "description": "Display a monthly archive of your posts.", - "textdomain": "default", "attributes": { "displayAsDropdown": { "type": "boolean", diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index e1f01f30a7187..6bfdbef7abce3 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { archive as icon } from '@wordpress/icons'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -14,6 +15,8 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Archives', 'block title' ), + description: __( 'Display a monthly archive of your posts.' ), icon, example: {}, edit, diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json index 969a9e7e7c29b..c8e6e8e19d693 100644 --- a/packages/block-library/src/audio/block.json +++ b/packages/block-library/src/audio/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/audio", - "title": "Audio", "category": "media", - "description": "Embed a simple audio player.", - "keywords": [ "music", "sound", "podcast", "recording" ], - "textdomain": "default", "attributes": { "src": { "type": "string", diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index db14dd6895bbe..425c5ef808b73 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -178,11 +178,10 @@ function AudioEdit( {
{ /* - Disable the audio tag if the block is not selected - so the user clicking on it won't play the + Disable the audio tag so the user clicking on it won't play the file or change the position slider when the controls are enabled. */ } - + { ( ! RichText.isEmpty( caption ) || isSelected ) && ( diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index 6ed1b116f06b2..a06248ac24553 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { audio as icon } from '@wordpress/icons'; /** @@ -17,6 +18,14 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Audio', 'block title' ), + description: __( 'Embed a simple audio player.' ), + keywords: [ + __( 'music' ), + __( 'sound' ), + __( 'podcast' ), + __( 'recording' ), + ], icon, transforms, deprecated, diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index 006c85c0b5db6..aece916ab601b 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/block", - "title": "Reusable block", "category": "reusable", - "description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.", - "textdomain": "default", "attributes": { "ref": { "type": "number" diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index 074dc9ee704c8..a492230e83673 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -13,18 +13,14 @@ import { * WordPress dependencies */ import { useState } from '@wordpress/element'; -import { - useEntityBlockEditor, - useEntityProp, - store as coreStore, -} from '@wordpress/core-data'; +import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data'; import { BottomSheet, Icon, Disabled } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { - __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, - InnerBlocks, - Warning, + BlockEditorProvider, + BlockList, + store as blockEditorStore, } from '@wordpress/block-editor'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { help } from '@wordpress/icons'; @@ -41,9 +37,7 @@ export default function ReusableBlockEdit( { clientId, isSelected, } ) { - const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders( - ref - ); + const recordArgs = [ 'postType', 'wp_block', ref ]; const [ showHelp, setShowHelp ] = useState( false ); const infoTextStyle = usePreferredColorSchemeStyle( @@ -63,26 +57,30 @@ export default function ReusableBlockEdit( { styles.spinnerDark ); - const { hasResolved, isEditing, isMissing } = useSelect( + const { reusableBlock, hasResolved, isEditing, settings } = useSelect( ( select ) => { - const persistedBlock = select( coreStore ).getEntityRecord( - 'postType', - 'wp_block', - ref - ); - const hasResolvedBlock = select( - coreStore - ).hasFinishedResolution( 'getEntityRecord', [ - 'postType', - 'wp_block', - ref, - ] ); + const { getSettings } = select( blockEditorStore ); + return { - hasResolved: hasResolvedBlock, + reusableBlock: select( coreStore ).getEditedEntityRecord( + ...recordArgs + ), + hasResolved: select( coreStore ).hasFinishedResolution( + 'getEditedEntityRecord', + recordArgs + ), + isSaving: select( coreStore ).isSavingEntityRecord( + ...recordArgs + ), + canUserUpdate: select( coreStore ).canUser( + 'update', + 'blocks', + ref + ), isEditing: select( reusableBlocksStore ).__experimentalIsEditingReusableBlock( clientId ), - isMissing: hasResolvedBlock && ! persistedBlock, + settings: getSettings(), }; }, [ ref, clientId ] @@ -94,8 +92,6 @@ export default function ReusableBlockEdit( { { id: ref } ); - const [ title ] = useEntityProp( 'postType', 'wp_block', 'title', ref ); - function openSheet() { setShowHelp( true ); } @@ -132,22 +128,6 @@ export default function ReusableBlockEdit( { ); } - if ( hasAlreadyRendered ) { - return ( - - ); - } - - if ( isMissing ) { - return ( - - ); - } - if ( ! hasResolved ) { return ( @@ -156,12 +136,22 @@ export default function ReusableBlockEdit( { ); } + if ( ! reusableBlock ) { + return ( + { __( 'Block has been deleted or is unavailable.' ) } + ); + } + + const { title } = reusableBlock; let element = ( - + > + + ); if ( ! isEditing ) { @@ -169,20 +159,18 @@ export default function ReusableBlockEdit( { } return ( - - - - { isSelected && } - { element } - { renderSheet() } - - - + + + { isSelected && } + { element } + { renderSheet() } + + ); } diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss index d69d9ee78162f..e4c8dac29cd5c 100644 --- a/packages/block-library/src/block/editor.native.scss +++ b/packages/block-library/src/block/editor.native.scss @@ -1,7 +1,7 @@ .titleContainer { flex-direction: row; align-items: center; - padding-bottom: 28; + padding-bottom: 12; } .title { @@ -21,7 +21,7 @@ position: absolute; left: -$block-selected-to-content + $block-selected-border-width; right: -$block-selected-to-content + $block-selected-border-width; - bottom: 16; + bottom: 0; } .separatorDark { diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js index d3f536a5676ad..0c6353eb1ebed 100644 --- a/packages/block-library/src/block/index.js +++ b/packages/block-library/src/block/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -9,5 +14,9 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Reusable block', 'block title' ), + description: __( + 'Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.' + ), edit, }; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 3cb59a7fd653e..a9b483981eccf 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -1,12 +1,8 @@ { "apiVersion": 2, "name": "core/button", - "title": "Button", "category": "design", "parent": [ "core/buttons" ], - "description": "Prompt visitors to take action with a button-style link.", - "keywords": [ "link" ], - "textdomain": "default", "attributes": { "url": { "type": "string", @@ -70,10 +66,6 @@ "__experimentalFontFamily": true, "__experimentalSelector": ".wp-block-button__link" }, - "styles": [ - { "name": "fill", "label": "Fill", "isDefault": true }, - { "name": "outline", "label": "Outline" } - ], "editorStyle": "wp-block-button-editor", "style": "wp-block-button" } diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index a62ee2180d76a..de6f3c8e0b6d2 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { button as icon } from '@wordpress/icons'; /** @@ -17,7 +17,12 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Button', 'block title' ), + description: __( + 'Prompt visitors to take action with a button-style link.' + ), icon, + keywords: [ __( 'link' ) ], example: { attributes: { className: 'is-style-fill', @@ -25,6 +30,10 @@ export const settings = { text: __( 'Call to Action' ), }, }, + styles: [ + { name: 'fill', label: __( 'Fill' ), isDefault: true }, + { name: 'outline', label: __( 'Outline' ) }, + ], edit, save, deprecated, diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 65df1b3f0d504..2e0c50205a1cb 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -62,12 +62,8 @@ $blocks-block__margin: 0.5em; } &.wp-block-button__width-100 { - width: calc(100% - #{ $blocks-block__margin }); - - &:only-child { - margin-right: 0; - width: 100%; - } + margin-right: 0; + width: 100%; } } diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 74eed0a4a0a54..704b3a33b29a9 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/buttons", - "title": "Buttons", "category": "design", - "description": "Prompt visitors to take action with a group of button-style links.", - "keywords": [ "link" ], - "textdomain": "default", "attributes": { "contentJustification": { "type": "string" diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 2ee8ca3d371d9..9cade7c6dc2eb 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { buttons as icon } from '@wordpress/icons'; /** @@ -19,7 +19,12 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Buttons', 'block title' ), + description: __( + 'Prompt visitors to take action with a group of button-style links.' + ), icon, + keywords: [ __( 'link' ) ], example: { innerBlocks: [ { diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 07938927f5eba..edb73671e692a 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/calendar", - "title": "Calendar", "category": "widgets", - "description": "A calendar of your site’s posts.", - "keywords": [ "posts", "archive" ], - "textdomain": "default", "attributes": { "month": { "type": "integer" diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js index 43fb2e5000606..5ad08622de378 100644 --- a/packages/block-library/src/calendar/index.js +++ b/packages/block-library/src/calendar/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { calendar as icon } from '@wordpress/icons'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -14,7 +15,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Calendar', 'block title' ), + description: __( 'A calendar of your site’s posts.' ), icon, + keywords: [ __( 'posts' ), __( 'archive' ) ], example: {}, edit, }; diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json index b238df42039e5..5fe562622c83e 100644 --- a/packages/block-library/src/categories/block.json +++ b/packages/block-library/src/categories/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/categories", - "title": "Categories", "category": "widgets", - "description": "Display a list of all categories.", - "textdomain": "default", "attributes": { "displayAsDropdown": { "type": "boolean", diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index 9698dacfdaff3..ad11522b3c567 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { category as icon } from '@wordpress/icons'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -14,6 +15,8 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Categories', 'block title' ), + description: __( 'Display a list of all categories.' ), icon, example: {}, edit, diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json index 8cb922288730f..0f29cf33cc030 100644 --- a/packages/block-library/src/code/block.json +++ b/packages/block-library/src/code/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/code", - "title": "Code", "category": "text", - "description": "Display code snippets that respect your spacing and tabs.", - "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index 8301b13d9ff57..ed6e65c1dffb6 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { code as icon } from '@wordpress/icons'; /** @@ -17,6 +17,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Code', 'block title' ), + description: __( + 'Display code snippets that respect your spacing and tabs.' + ), icon, example: { attributes: { diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index e949aa4f4fcac..92e76c6a5c174 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -1,11 +1,8 @@ { "apiVersion": 2, "name": "core/column", - "title": "Column", "category": "text", "parent": [ "core/columns" ], - "description": "A single column within a columns block.", - "textdomain": "default", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index e935e682f45ca..955d82d8fcb2f 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { column as icon } from '@wordpress/icons'; /** @@ -16,7 +17,9 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Column', 'block title' ), icon, + description: __( 'A single column within a columns block.' ), edit, save, deprecated, diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index f3bc49d3d2497..d9f61692b7cf8 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/columns", - "title": "Columns", "category": "design", - "description": "Add a block that displays content in multiple columns, then add whatever content blocks you’d like.", - "textdomain": "default", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 4bee7eb6bc396..5e00f018d0d29 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { columns as icon } from '@wordpress/icons'; /** @@ -19,7 +19,11 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Columns', 'block title' ), icon, + description: __( + 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' + ), variations, example: { innerBlocks: [ diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 3b3ad5d804417..676fb581c2b95 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/cover", - "title": "Cover", "category": "media", - "description": "Add an image or video with a text overlay — great for headers.", - "textdomain": "default", "attributes": { "url": { "type": "string" diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 89576d2ae55e1..331e2fb19c4af 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { cover as icon } from '@wordpress/icons'; /** @@ -18,6 +18,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Cover', 'block title' ), + description: __( + 'Add an image or video with a text overlay — great for headers.' + ), icon, example: { attributes: { diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index cc0cb64c03fe6..8c270a0c0c60e 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/embed", - "title": "Embed", "category": "embed", - "description": "Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.", - "textdomain": "default", "attributes": { "url": { "type": "string" diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 09b28b72338b5..75f0cee9a9128 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -8,8 +8,8 @@ import { getAttributesFromPreview, getEmbedInfoByProvider, } from './util'; +import { settings } from './index'; import EmbedControls from './embed-controls'; -import { embedContentIcon } from './icons'; import EmbedLoading from './embed-loading'; import EmbedPlaceholder from './embed-placeholder'; import EmbedPreview from './embed-preview'; @@ -22,7 +22,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; @@ -55,8 +55,8 @@ const EmbedEdit = ( props ) => { } = props; const defaultEmbedInfo = { - title: _x( 'Embed', 'block title' ), - icon: embedContentIcon, + title: settings.title, + icon: settings.icon, }; const { icon, title } = getEmbedInfoByProvider( providerNameSlug ) || defaultEmbedInfo; diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 5f0e38c1aabf2..3b1ed4d9bdb9c 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -9,10 +9,19 @@ import variations from './variations'; import deprecated from './deprecated'; import { embedContentIcon } from './icons'; +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; + const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Embed', 'block title' ), + description: __( + 'Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.' + ), icon: embedContentIcon, edit, save, diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index 4874eec3961d9..530d856fa7087 100644 --- a/packages/block-library/src/file/block.json +++ b/packages/block-library/src/file/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/file", - "title": "File", "category": "media", - "description": "Add a link to a downloadable file.", - "keywords": [ "document", "pdf", "download" ], - "textdomain": "default", "attributes": { "id": { "type": "number" diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index 6dbb7446427bd..a8e566c21eb44 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { file as icon } from '@wordpress/icons'; /** @@ -16,7 +17,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'File', 'block title' ), + description: __( 'Add a link to a downloadable file.' ), icon, + keywords: [ __( 'document' ), __( 'pdf' ), __( 'download' ) ], transforms, edit, save, diff --git a/packages/block-library/src/freeform/block.json b/packages/block-library/src/freeform/block.json index f3b2d45b00c48..a18cd84635004 100644 --- a/packages/block-library/src/freeform/block.json +++ b/packages/block-library/src/freeform/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/freeform", - "title": "Classic", "category": "text", - "description": "Use the classic WordPress editor.", - "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/freeform/index.js b/packages/block-library/src/freeform/index.js index b4d7cf715442b..89275ee2d1ebc 100644 --- a/packages/block-library/src/freeform/index.js +++ b/packages/block-library/src/freeform/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { classic as icon } from '@wordpress/icons'; /** @@ -15,6 +16,8 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Classic', 'block title' ), + description: __( 'Use the classic WordPress editor.' ), icon, edit, save, diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index a87edb1eda972..8beac02827f61 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/gallery", - "title": "Gallery", "category": "media", - "description": "Display multiple images in a rich gallery.", - "keywords": [ "images", "photos" ], - "textdomain": "default", "attributes": { "images": { "type": "array", diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index 01e8a7a61502f..677291252e7ce 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { gallery as icon } from '@wordpress/icons'; /** @@ -17,7 +18,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Gallery', 'block title' ), + description: __( 'Display multiple images in a rich gallery.' ), icon, + keywords: [ __( 'images' ), __( 'photos' ) ], example: { attributes: { columns: 2, diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index b12fb400437c6..429f13fb03018 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/group", - "title": "Group", "category": "design", - "description": "Combine blocks into a group.", - "keywords": [ "container", "wrapper", "row", "section" ], - "textdomain": "default", "attributes": { "tagName": { "type": "string", diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index dac9a09b3cb1f..5ce93ae1fd397 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import { group as icon } from '@wordpress/icons'; @@ -18,7 +18,15 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Group', 'block title' ), icon, + description: __( 'Combine blocks into a group.' ), + keywords: [ + __( 'container' ), + __( 'wrapper' ), + __( 'row' ), + __( 'section' ), + ], example: { attributes: { style: { diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 0e32048da4e5b..8d7e0fdd5c194 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/heading", - "title": "Heading", "category": "text", - "description": "Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.", - "keywords": [ "title", "subtitle" ], - "textdomain": "default", "attributes": { "textAlign": { "type": "string" diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 989812cd46c89..593e1eaca7fe4 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -7,7 +7,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { heading as icon } from '@wordpress/icons'; -import { __, sprintf } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -23,7 +23,12 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Heading', 'block title' ), + description: __( + 'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.' + ), icon, + keywords: [ __( 'title' ), __( 'subtitle' ) ], example: { attributes: { content: __( 'Code is Poetry' ), diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json index 962db3f3684d3..266b4511e0fe5 100644 --- a/packages/block-library/src/html/block.json +++ b/packages/block-library/src/html/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/html", - "title": "Custom HTML", "category": "widgets", - "description": "Add custom HTML code and preview it as you edit.", - "keywords": [ "embed" ], - "textdomain": "default", "attributes": { "content": { "type": "string", diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js index cb1fb915ee8b5..43f0975f9a130 100644 --- a/packages/block-library/src/html/index.js +++ b/packages/block-library/src/html/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { html as icon } from '@wordpress/icons'; /** @@ -17,7 +17,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Custom HTML', 'block title' ), + description: __( 'Add custom HTML code and preview it as you edit.' ), icon, + keywords: [ __( 'embed' ) ], example: { attributes: { content: diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 9cb1901028c9d..6b9fb6443a236 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/image", - "title": "Image", "category": "media", - "description": "Insert an image to make a visual statement.", - "keywords": [ "img", "photo", "picture" ], - "textdomain": "default", "attributes": { "align": { "type": "string" @@ -85,14 +81,6 @@ "radius": true } }, - "styles": [ - { - "name": "default", - "label": "Default", - "isDefault": true - }, - { "name": "rounded", "label": "Rounded" } - ], "editorStyle": "wp-block-image-editor", "style": "wp-block-image" } diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index dcdbd4e76882c..ab8f057d210a0 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { image as icon } from '@wordpress/icons'; /** @@ -18,7 +18,14 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Image', 'block title' ), + description: __( 'Insert an image to make a visual statement.' ), icon, + keywords: [ + 'img', // "img" is not translated as it is intended to reflect the HTML tag. + __( 'photo' ), + __( 'picture' ), + ], example: { attributes: { sizeSlug: 'large', @@ -27,6 +34,14 @@ export const settings = { caption: __( 'Mont Blanc appears—still, snowy, and serene.' ), }, }, + styles: [ + { + name: 'default', + label: _x( 'Default', 'block style' ), + isDefault: true, + }, + { name: 'rounded', label: _x( 'Rounded', 'block style' ) }, + ], __experimentalLabel( attributes, { context } ) { if ( context === 'accessibility' ) { const { caption, alt, url } = attributes; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 22b4385b9a806..e1b6d279acaad 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -4,11 +4,12 @@ import '@wordpress/core-data'; import '@wordpress/block-editor'; import { - registerBlockTypeFromMetadata, + registerBlockType, setDefaultBlockName, setFreeformContentHandlerName, setUnregisteredTypeHandlerName, setGroupingBlockName, + unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase } from '@wordpress/blocks'; /** @@ -105,7 +106,10 @@ const registerBlock = ( block ) => { return; } const { metadata, settings, name } = block; - registerBlockTypeFromMetadata( { name, ...metadata }, settings ); + if ( metadata ) { + unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } ); + } + registerBlockType( name, settings ); }; /** diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 0dffcb66269c1..ba0d20795a111 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -10,7 +10,6 @@ import { sortBy } from 'lodash'; import { hasBlockSupport, registerBlockType, - registerBlockTypeFromMetadata, setDefaultBlockName, setFreeformContentHandlerName, setUnregisteredTypeHandlerName, @@ -128,13 +127,10 @@ const registerBlock = ( block ) => { return; } const { metadata, settings, name } = block; - registerBlockTypeFromMetadata( - { - name, - ...metadata, - }, - settings - ); + registerBlockType( name, { + ...metadata, + ...settings, + } ); }; /** @@ -252,7 +248,7 @@ export const registerCoreBlocks = () => { file, audio, devOnly( reusableBlock ), - search, + devOnly( search ), devOnly( embed ), ].forEach( registerBlock ); diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index fa5aace648fef..37600026f8f71 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/latest-comments", - "title": "Latest Comments", "category": "widgets", - "description": "Display a list of your most recent comments.", - "keywords": [ "recent comments" ], - "textdomain": "default", "attributes": { "commentsToShow": { "type": "number", diff --git a/packages/block-library/src/latest-comments/index.js b/packages/block-library/src/latest-comments/index.js index 6497e8b5b927d..3e77c68b0198c 100644 --- a/packages/block-library/src/latest-comments/index.js +++ b/packages/block-library/src/latest-comments/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { comment as icon } from '@wordpress/icons'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -14,7 +15,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Latest Comments', 'block title' ), + description: __( 'Display a list of your most recent comments.' ), icon, + keywords: [ __( 'recent comments' ) ], example: {}, edit, }; diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index dfc69621f5e23..46f1c197b6c53 100644 --- a/packages/block-library/src/latest-posts/block.json +++ b/packages/block-library/src/latest-posts/block.json @@ -1,11 +1,7 @@ { "apiVersion": 2, "name": "core/latest-posts", - "title": "Latest Posts", "category": "widgets", - "description": "Display a list of your most recent posts.", - "keywords": [ "recent posts" ], - "textdomain": "default", "attributes": { "categories": { "type": "array", diff --git a/packages/block-library/src/latest-posts/index.js b/packages/block-library/src/latest-posts/index.js index a0f8ffa74898b..a17d52ca76fd3 100644 --- a/packages/block-library/src/latest-posts/index.js +++ b/packages/block-library/src/latest-posts/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __, _x } from '@wordpress/i18n'; import { postList as icon } from '@wordpress/icons'; /** @@ -14,7 +15,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { + title: _x( 'Latest Posts', 'block title' ), + description: __( 'Display a list of your most recent posts.' ), icon, + keywords: [ __( 'recent posts' ) ], example: {}, edit, deprecated, diff --git a/packages/block-library/src/legacy-widget/block.json b/packages/block-library/src/legacy-widget/block.json index 30b60c6448835..2ffbe6716a786 100644 --- a/packages/block-library/src/legacy-widget/block.json +++ b/packages/block-library/src/legacy-widget/block.json @@ -1,10 +1,7 @@ { "apiVersion": 2, "name": "core/legacy-widget", - "title": "Legacy Widget", "category": "widgets", - "description": "Display a legacy widget.", - "textdomain": "default", "attributes": { "id": { "type": "string", diff --git a/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js b/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js deleted file mode 100644 index d9dc71062bcf9..0000000000000 --- a/packages/block-library/src/legacy-widget/edit/convert-to-blocks-button.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { ToolbarButton } from '@wordpress/components'; -import { createBlock, rawHandler } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; - -export default function ConvertToBlocksButton( { clientId, rawInstance } ) { - const { replaceBlocks } = useDispatch( blockEditorStore ); - - return ( - { - if ( rawInstance.title ) { - replaceBlocks( clientId, [ - createBlock( 'core/heading', { - content: rawInstance.title, - } ), - ...rawHandler( { HTML: rawInstance.text } ), - ] ); - } else { - replaceBlocks( - clientId, - rawHandler( { HTML: rawInstance.text } ) - ); - } - } } - > - { __( 'Convert to blocks' ) } - - ); -} diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js index 32726b89d7b6c..ca2fd3baed575 100644 --- a/packages/block-library/src/legacy-widget/edit/form.js +++ b/packages/block-library/src/legacy-widget/edit/form.js @@ -6,12 +6,28 @@ import { debounce } from 'lodash'; /** * WordPress dependencies */ +import { useDispatch } from '@wordpress/data'; +import { store as noticesStore } from '@wordpress/notices'; import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useCallback, RawHTML } from '@wordpress/element'; +import { + useEffect, + useRef, + useState, + useCallback, + RawHTML, +} from '@wordpress/element'; +import apiFetch from '@wordpress/api-fetch'; import { Button } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; -export default function Form( { id, idBase, content, setFormData } ) { +export default function Form( { id, idBase, instance, setInstance } ) { + const { html, setFormData } = useForm( { + id, + idBase, + instance, + setInstance, + } ); + const setFormDataDebounced = useCallback( debounce( setFormData, 300 ), [ setFormData, ] ); @@ -20,24 +36,106 @@ export default function Form( { id, idBase, content, setFormData } ) { ); } -function Control( { id, idBase, content, onChange, onSave } ) { +function useForm( { id, idBase, instance, setInstance } ) { + const isStillMounted = useRef( false ); + const [ html, setHTML ] = useState( null ); + const [ formData, setFormData ] = useState( null ); + + useEffect( () => { + isStillMounted.current = true; + return () => ( isStillMounted.current = false ); + }, [] ); + + const { createNotice } = useDispatch( noticesStore ); + + useEffect( () => { + const performFetch = async () => { + if ( id ) { + // Updating a widget that does not extend WP_Widget. + try { + let widget; + if ( formData ) { + widget = await apiFetch( { + path: `/wp/v2/widgets/${ id }?context=edit`, + method: 'PUT', + data: { + form_data: formData, + }, + } ); + } else { + widget = await apiFetch( { + path: `/wp/v2/widgets/${ id }?context=edit`, + method: 'GET', + } ); + } + if ( isStillMounted.current ) { + setHTML( widget.rendered_form ); + } + } catch ( error ) { + createNotice( + 'error', + error?.message ?? + __( 'An error occured while updating the widget.' ) + ); + } + } else if ( idBase ) { + // Updating a widget that extends WP_Widget. + try { + const response = await apiFetch( { + path: `/wp/v2/widget-types/${ idBase }/encode`, + method: 'POST', + data: { + instance, + form_data: formData, + }, + } ); + if ( isStillMounted.current ) { + setInstance( response.instance ); + // Only set HTML the first time so that we don't cause a + // focus loss by remounting the form. + setHTML( + ( previousHTML ) => previousHTML ?? response.form + ); + } + } catch ( error ) { + createNotice( + 'error', + error?.message ?? + __( 'An error occured while updating the widget.' ) + ); + } + } + }; + performFetch(); + }, [ + id, + idBase, + setInstance, + formData, + // Do not trigger when `instance` changes so that we don't make two API + // requests when there is form input. + ] ); + + return { html, setFormData }; +} + +function Control( { id, idBase, html, onChange, onSave } ) { const controlRef = useRef(); const formRef = useRef(); - // Trigger 'widget-added' when widget is ready. This event is what widgets' - // scripts use to initialize, attach events, etc. The event must be fired - // using jQuery's event bus as this is what widget scripts expect. If jQuery - // is not loaded, do nothing - some widgets will still work regardless. + // Trigger 'widget-added' when widget is ready and 'widget-updated' when + // widget changes. This event is what widgets' scripts use to initialize, + // attach events, etc. The event must be fired using jQuery's event bus as + // this is what widget scripts expect. If jQuery is not loaded, do nothing - + // some widgets will still work regardless. + const hasBeenAdded = useRef( false ); useEffect( () => { if ( ! window.jQuery ) { return; @@ -45,12 +143,20 @@ function Control( { id, idBase, content, onChange, onSave } ) { const { jQuery: $ } = window; - if ( content ) { - $( document ).trigger( 'widget-added', [ - $( controlRef.current ), - ] ); + if ( html ) { + $( document ).trigger( + hasBeenAdded.current ? 'widget-updated' : 'widget-added', + [ $( controlRef.current ) ] + ); + hasBeenAdded.current = true; } - }, [ content ] ); + }, [ + html, + // Include id and idBase in the deps so that widget-updated is triggered + // if they change. + id, + idBase, + ] ); // Prefer jQuery 'change' event instead of the native 'change' event because // many widgets use jQuery's event bus to trigger an update. @@ -124,7 +230,7 @@ function Control( { id, idBase, content, onChange, onSave } ) { className="add_new" value="" /> - { content } + { html } { id && (
diff --git a/packages/edit-site/src/components/header/undo-redo/redo.js b/packages/edit-site/src/components/header/undo-redo/redo.js index c3cd9bd118eaa..3662c568106b8 100644 --- a/packages/edit-site/src/components/header/undo-redo/redo.js +++ b/packages/edit-site/src/components/header/undo-redo/redo.js @@ -1,19 +1,18 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; +import { redo as redoIcon } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; -import { store as coreStore } from '@wordpress/core-data'; export default function RedoButton() { - const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo() ); - const { redo } = useDispatch( coreStore ); + const hasRedo = useSelect( ( select ) => select( 'core' ).hasRedo() ); + const { redo } = useDispatch( 'core' ); return (
- +
); diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index f8c4e2053b5dd..0afcf1344f897 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -7,7 +7,6 @@ import { __experimentalBoxControl as BoxControl, PanelBody, } from '@wordpress/components'; -import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor'; /** * Internal dependencies @@ -43,13 +42,7 @@ const CSS_UNITS = [ }, ]; -export function useHasSpacingPanel( context ) { - const hasPadding = useHasPadding( context ); - - return hasPadding; -} - -export function useHasPadding( { name, supports } ) { +export function useHasSpacingPanel( { supports, name } ) { return ( useEditorFeature( 'spacing.customPadding', name ) && supports.includes( 'padding' ) @@ -72,43 +65,29 @@ function useCustomUnits( { units, contextName } ) { return usedUnits.length === 0 ? false : usedUnits; } -function filterValuesBySides( values, sides ) { - if ( ! sides ) { - // If no custom side configuration all sides are opted into by default. - return values; - } - - // Only include sides opted into within filtered values. - const filteredValues = {}; - sides.forEach( ( side ) => ( filteredValues[ side ] = values[ side ] ) ); - - return filteredValues; -} - -export default function SpacingPanel( { context, getStyle, setStyle } ) { - const { name } = context; - const showPaddingControl = useHasPadding( context ); +export default function SpacingPanel( { + context: { name }, + getStyle, + setStyle, +} ) { const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); - const paddingValues = getStyle( name, 'padding' ); - const paddingSides = useCustomSides( name, 'padding' ); - - const setPaddingValues = ( newPaddingValues ) => { - const padding = filterValuesBySides( newPaddingValues, paddingSides ); - setStyle( name, 'padding', padding ); + const setPaddingValues = ( { top, right, bottom, left } ) => { + setStyle( name, 'padding', { + top: top || paddingValues?.top, + right: right || paddingValues?.right, + bottom: bottom || paddingValues?.bottom, + left: left || paddingValues?.left, + } ); }; - return ( - { showPaddingControl && ( - - ) } + ); } diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js index 9876606c38502..103c4f0e4107b 100644 --- a/packages/edit-site/src/components/template-details/index.js +++ b/packages/edit-site/src/components/template-details/index.js @@ -43,13 +43,11 @@ export default function TemplateDetails( { template, onClose } ) { return ( <>
- - { title } - + { title } { description && ( { description } diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js index cfc43db26a657..b5151ee554d54 100644 --- a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js +++ b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js @@ -2,22 +2,19 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { - BlockSettingsMenuControls, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { BlockSettingsMenuControls } from '@wordpress/block-editor'; import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; export default function ConvertToRegularBlocks( { clientId } ) { const { innerBlocks } = useSelect( ( select ) => - select( blockEditorStore ).__unstableGetBlockWithBlockTree( + select( 'core/block-editor' ).__unstableGetBlockWithBlockTree( clientId ), [ clientId ] ); - const { replaceBlocks } = useDispatch( blockEditorStore ); + const { replaceBlocks } = useDispatch( 'core/block-editor' ); return ( diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 17a0965ee7a53..4bad708c4f913 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -264,21 +264,15 @@ export function setIsNavigationPanelOpened( isOpen ) { } /** - * Returns an action object used to open/close the inserter. + * Sets whether the block inserter panel should be open. * - * @param {boolean|Object} value Whether the inserter should be - * opened (true) or closed (false). - * To specify an insertion point, - * use an object. - * @param {string} value.rootClientId The root client ID to insert at. - * @param {number} value.insertionIndex The index to insert at. - * - * @return {Object} Action object. + * @param {boolean} isOpen If true, opens the inserter. If false, closes it. It + * does not toggle the state, but sets it directly. */ -export function setIsInserterOpened( value ) { +export function setIsInserterOpened( isOpen ) { return { type: 'SET_IS_INSERTER_OPENED', - value, + isOpen, }; } diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index 01423f4f082d2..0e6c44f7bea24 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -145,18 +145,13 @@ export function navigationPanel( menu: ! action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel. isOpen: action.isOpen, }; + case 'SET_IS_INSERTER_OPENED': case 'SET_IS_LIST_VIEW_OPENED': return { ...state, menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel. isOpen: action.isOpen ? false : state.isOpen, }; - case 'SET_IS_INSERTER_OPENED': - return { - ...state, - menu: state.isOpen && action.value ? MENU_ROOT : state.menu, // Set menu to root when closing panel. - isOpen: action.value ? false : state.isOpen, - }; } return state; } @@ -167,8 +162,8 @@ export function navigationPanel( * Note: this reducer interacts with the navigation and list view panels reducers * to make sure that only one of the three panels is open at the same time. * - * @param {boolean|Object} state Current state. - * @param {Object} action Dispatched action. + * @param {Object} state Current state. + * @param {Object} action Dispatched action. */ export function blockInserterPanel( state = false, action ) { switch ( action.type ) { @@ -178,7 +173,7 @@ export function blockInserterPanel( state = false, action ) { case 'SET_IS_LIST_VIEW_OPENED': return action.isOpen ? false : state; case 'SET_IS_INSERTER_OPENED': - return action.value; + return action.isOpen; } return state; } @@ -197,9 +192,8 @@ export function listViewPanel( state = false, action ) { case 'OPEN_NAVIGATION_PANEL_TO_MENU': return false; case 'SET_IS_NAVIGATION_PANEL_OPENED': - return action.isOpen ? false : state; case 'SET_IS_INSERTER_OPENED': - return action.value ? false : state; + return action.isOpen ? false : state; case 'SET_IS_LIST_VIEW_OPENED': return action.isOpen; } diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 16f1a711cd233..8543eb233fe03 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -231,19 +231,7 @@ export function isNavigationOpened( state ) { * @return {boolean} True if the inserter panel should be open; false if closed. */ export function isInserterOpened( state ) { - return !! state.blockInserterPanel; -} - -/** - * Get the insertion point for the inserter. - * - * @param {Object} state Global application state. - * - * @return {Object} The root client ID and index to insert at. - */ -export function __experimentalGetInsertionPoint( state ) { - const { rootClientId, insertionIndex } = state.blockInserterPanel; - return { rootClientId, insertionIndex }; + return state.blockInserterPanel; } /** diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 846e1673d6557..42894cd6e4ecf 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -6,6 +6,7 @@ @import "./components/header/more-menu/style.scss"; @import "./components/navigation-sidebar/navigation-toggle/style.scss"; @import "./components/navigation-sidebar/navigation-panel/style.scss"; +@import "./components/notices/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; @import "./components/sidebar/template-card/style.scss"; diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md index 6563f8ec1bcd2..83b61d2622cd6 100644 --- a/packages/edit-widgets/CHANGELOG.md +++ b/packages/edit-widgets/CHANGELOG.md @@ -2,15 +2,10 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.3.0 (2021-03-17) ## 0.1.0 (2019-03-06) ### New Features -- Initial version of the package. +- Initial version of the module. diff --git a/packages/edit-widgets/README.md b/packages/edit-widgets/README.md index 9dbada72717b5..2aec3fae4a03b 100644 --- a/packages/edit-widgets/README.md +++ b/packages/edit-widgets/README.md @@ -16,7 +16,7 @@ Install the module npm install @wordpress/edit-widgets ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

Code is Poetry.

diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index f059011ba9b75..34e27c08c9784 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-widgets", - "version": "1.3.3", + "version": "1.3.2", "description": "Widgets Page module for WordPress..", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js index 29cb861346664..6aad7c5fb54b4 100644 --- a/packages/edit-widgets/src/components/header/index.js +++ b/packages/edit-widgets/src/components/header/index.js @@ -8,7 +8,6 @@ import { BlockNavigationDropdown, BlockToolbar, NavigableToolbar, - store as blockEditorStore, } from '@wordpress/block-editor'; import { PinnedItems } from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; @@ -41,7 +40,7 @@ function Header() { const { setIsWidgetAreaOpen, setIsInserterOpened } = useDispatch( editWidgetsStore ); - const { selectBlock } = useDispatch( blockEditorStore ); + const { selectBlock } = useDispatch( 'core/block-editor' ); const handleClick = () => { if ( isInserterOpened ) { // Focusing the inserter button closes the inserter popover diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js index 30827e9a6823e..6fed9a11f897f 100644 --- a/packages/edit-widgets/src/components/header/undo-redo/redo.js +++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js @@ -1,19 +1,18 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; +import { redo as redoIcon } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; -import { store as coreStore } from '@wordpress/core-data'; export default function RedoButton() { - const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo() ); - const { redo } = useDispatch( coreStore ); + const hasRedo = useSelect( ( select ) => select( 'core' ).hasRedo() ); + const { redo } = useDispatch( 'core' ); return ( select( coreStore ).hasUndo() ); - const { undo } = useDispatch( coreStore ); + const hasUndo = useSelect( ( select ) => select( 'core' ).hasUndo() ); + const { undo } = useDispatch( 'core' ); return ( { getBlockSelectionEnd, getBlockOrder, getBlockIndex, - } = select( blockEditorStore ); + } = select( 'core/block-editor' ); const clientId = getBlockSelectionEnd() || firstRootId; const rootClientId = getBlockRootClientId( clientId ); diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index 5a9d7d25e2ebc..9c5b86924e290 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -299,13 +299,7 @@ export function setIsWidgetAreaOpen( clientId, isOpen ) { /** * Returns an action object used to open/close the inserter. * - * @param {boolean|Object} value Whether the inserter should be - * opened (true) or closed (false). - * To specify an insertion point, - * use an object. - * @param {string} value.rootClientId The root client ID to insert at. - * @param {number} value.insertionIndex The index to insert at. - * + * @param {boolean} value A boolean representing whether the inserter should be opened or closed. * @return {Object} Action object. */ export function setIsInserterOpened( value ) { diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js index d6af45e611209..93e650c88769f 100644 --- a/packages/edit-widgets/src/store/reducer.js +++ b/packages/edit-widgets/src/store/reducer.js @@ -32,10 +32,10 @@ export function widgetAreasOpenState( state = {}, action ) { /** * Reducer tracking whether the inserter is open. * - * @param {boolean|Object} state - * @param {Object} action + * @param {boolean} state + * @param {Object} action */ -function blockInserterPanel( state = false, action ) { +function isInserterOpened( state = false, action ) { switch ( action.type ) { case 'SET_IS_INSERTER_OPENED': return action.value; @@ -44,6 +44,6 @@ function blockInserterPanel( state = false, action ) { } export default combineReducers( { - blockInserterPanel, + isInserterOpened, widgetAreasOpenState, } ); diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js index 1d8cc005148f2..44d0f4614f7f9 100644 --- a/packages/edit-widgets/src/store/selectors.js +++ b/packages/edit-widgets/src/store/selectors.js @@ -193,5 +193,5 @@ export const getIsWidgetAreaOpen = ( state, clientId ) => { * @return {boolean} Whether the inserter is opened. */ export function isInserterOpened( state ) { - return !! state.blockInserterPanel; + return state.isInserterOpened; } diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 525930ae66794..9036ccbab444c 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -43,7 +43,7 @@ body.widgets-php { } .interface-interface-skeleton__content { - background-color: $gray-100; + background-color: #f1f1f1; } } diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index a7c4bee89a714..1ffd37b6f1236 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 9.26.0 (2021-03-17) ## 9.25.0 (2020-12-17) diff --git a/packages/editor/README.md b/packages/editor/README.md index 46a35fd648f6c..b8345adb19dd7 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/editor --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## How it works diff --git a/packages/editor/package.json b/packages/editor/package.json index 2de282830970e..a08239b92b129 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/editor", - "version": "9.26.3", + "version": "9.26.2", "description": "Enhanced block editor for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/editor/src/components/document-outline/check.js b/packages/editor/src/components/document-outline/check.js index 324b9380ca63a..84d988b0a510f 100644 --- a/packages/editor/src/components/document-outline/check.js +++ b/packages/editor/src/components/document-outline/check.js @@ -7,7 +7,6 @@ import { filter } from 'lodash'; * WordPress dependencies */ import { withSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; function DocumentOutlineCheck( { blocks, children } ) { const headings = filter( @@ -23,5 +22,5 @@ function DocumentOutlineCheck( { blocks, children } ) { } export default withSelect( ( select ) => ( { - blocks: select( blockEditorStore ).getBlocks(), + blocks: select( 'core/block-editor' ).getBlocks(), } ) )( DocumentOutlineCheck ); diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index d624f744d95c8..abd1c853fb8b8 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -10,7 +10,6 @@ import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { create, getTextContent } from '@wordpress/rich-text'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -145,7 +144,7 @@ export const DocumentOutline = ( { export default compose( withSelect( ( select ) => { - const { getBlocks } = select( blockEditorStore ); + const { getBlocks } = select( 'core/block-editor' ); const { getEditedPostAttribute } = select( 'core/editor' ); const { getPostType } = select( 'core' ); const postType = getPostType( getEditedPostAttribute( 'type' ) ); diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js index f80d14646d556..ae332e93b4389 100644 --- a/packages/editor/src/components/editor-history/redo.js +++ b/packages/editor/src/components/editor-history/redo.js @@ -1,29 +1,24 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; -import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; +import { redo as redoIcon } from '@wordpress/icons'; import { forwardRef } from '@wordpress/element'; -/** - * Internal dependencies - */ -import { store as editorStore } from '../../store'; - function EditorHistoryRedo( props, ref ) { const hasRedo = useSelect( - ( select ) => select( editorStore ).hasEditorRedo(), + ( select ) => select( 'core/editor' ).hasEditorRedo(), [] ); - const { redo } = useDispatch( editorStore ); + const { redo } = useDispatch( 'core/editor' ); return (
@@ -180,5 +129,7 @@ export default function EntitiesSavedStates( { close } ) { ); } ) }
- ); + ) : null; } + +export default withFocusReturn( EntitiesSavedStates ); diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 6f636bb5a98b8..4bf8cf6510431 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -18,11 +18,7 @@ import { } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; -import { - MediaUpload, - MediaUploadCheck, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; /** * Internal dependencies @@ -231,7 +227,7 @@ const applyWithDispatch = withDispatch( editPost( { featured_media: image.id } ); }, onDropImage( filesList ) { - select( blockEditorStore ) + select( 'core/block-editor' ) .getSettings() .mediaUpload( { allowedTypes: [ 'image' ], diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap index e03484534e4ab..220042a8a41aa 100644 --- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap @@ -10,11 +10,11 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] target="wp-preview-1" > Preview - (opens in a new tab) - + `; @@ -28,10 +28,10 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] = target="wp-preview-1" > Preview - (opens in a new tab) - + `; diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 96d2de7819118..b18ae57a756b0 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -15,7 +15,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { VisuallyHidden } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { pasteHandler } from '@wordpress/blocks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -36,7 +35,7 @@ export default function PostTitle() { insertDefaultBlock, clearSelectedBlock, insertBlocks, - } = useDispatch( blockEditorStore ); + } = useDispatch( 'core/block-editor' ); const { isCleanNewPost, title, @@ -48,7 +47,7 @@ export default function PostTitle() { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost, } = select( 'core/editor' ); - const { getSettings } = select( blockEditorStore ); + const { getSettings } = select( 'core/block-editor' ); const { titlePlaceholder, focusMode, diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index 93f589bc7d9f4..d788b1a2447e3 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -33,7 +33,6 @@ import { applyFilters } from '@wordpress/hooks'; import { validateThemeColors, validateThemeGradients, - store as blockEditorStore, } from '@wordpress/block-editor'; const postTypeEntities = [ @@ -292,7 +291,7 @@ export default compose( [ getBlockIndex, getSelectedBlockClientId, getGlobalBlockCount, - } = select( blockEditorStore ); + } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); return { @@ -313,7 +312,7 @@ export default compose( [ clearSelectedBlock, insertBlock, replaceBlock, - } = dispatch( blockEditorStore ); + } = dispatch( 'core/block-editor' ); const { switchEditorMode } = dispatch( 'core/edit-post' ); const { addEntities, receiveEntityRecords } = dispatch( 'core' ); const { createSuccessNotice } = dispatch( 'core/notices' ); diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index 97d96efaf8473..a739de193c64a 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -6,7 +6,6 @@ import { Dropdown, Button } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { info } from '@wordpress/icons'; import { forwardRef } from '@wordpress/element'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -18,7 +17,7 @@ function TableOfContents( ref ) { const hasBlocks = useSelect( - ( select ) => !! select( blockEditorStore ).getBlockCount(), + ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] ); return ( diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js index 48ca98c2fd04a..afb40439b9a6a 100644 --- a/packages/editor/src/components/table-of-contents/panel.js +++ b/packages/editor/src/components/table-of-contents/panel.js @@ -3,7 +3,6 @@ */ import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -15,7 +14,7 @@ import CharacterCount from '../character-count'; function TableOfContentsPanel( { hasOutlineItemsDisabled, onRequestClose } ) { const { headingCount, paragraphCount, numberOfBlocks } = useSelect( ( select ) => { - const { getGlobalBlockCount } = select( blockEditorStore ); + const { getGlobalBlockCount } = select( 'core/block-editor' ); return { headingCount: getGlobalBlockCount( 'core/heading' ), paragraphCount: getGlobalBlockCount( 'core/paragraph' ), diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js index 584e773845cd3..9dd9a2f404ba8 100644 --- a/packages/editor/src/components/template-validation-notice/index.js +++ b/packages/editor/src/components/template-validation-notice/index.js @@ -5,7 +5,6 @@ import { Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { store as blockEditorStore } from '@wordpress/block-editor'; function TemplateValidationNotice( { isValid, ...props } ) { if ( isValid ) { @@ -50,11 +49,11 @@ function TemplateValidationNotice( { isValid, ...props } ) { export default compose( [ withSelect( ( select ) => ( { - isValid: select( blockEditorStore ).isValidTemplate(), + isValid: select( 'core/block-editor' ).isValidTemplate(), } ) ), withDispatch( ( dispatch ) => { const { setTemplateValidity, synchronizeTemplate } = dispatch( - blockEditorStore + 'core/block-editor' ); return { resetTemplateValidity: () => setTemplateValidity( true ), diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 7209ff79f2224..4f9265d29cc9e 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -27,7 +27,6 @@ import { addQueryArgs } from '@wordpress/url'; import { createRegistrySelector } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { Platform } from '@wordpress/element'; -import { layout } from '@wordpress/icons'; /** * Internal dependencies @@ -41,7 +40,7 @@ import { } from './constants'; import { getPostRawValue } from './reducer'; import { cleanForSlug } from '../utils/url'; -import { getTemplatePartIcon } from './utils/get-template-part-icon'; +import { getTemplatePartIconByArea } from './utils/get-template-part-icon'; /** * Shared reference to an empty object for cases where it is important to avoid @@ -1681,10 +1680,9 @@ export function __experimentalGetDefaultTemplateTypes( state ) { */ export const __experimentalGetDefaultTemplatePartAreas = createSelector( ( state ) => { - const areas = - getEditorSettings( state )?.defaultTemplatePartAreas || []; + const areas = getEditorSettings( state )?.defaultTemplatePartAreas; return areas?.map( ( item ) => { - return { ...item, icon: getTemplatePartIcon( item.icon ) }; + return { ...item, icon: getTemplatePartIconByArea( item.area ) }; } ); }, ( state ) => [ getEditorSettings( state )?.defaultTemplatePartAreas ] @@ -1725,10 +1723,7 @@ export function __experimentalGetTemplateInfo( state, template ) { const templateTitle = isString( title ) ? title : title?.rendered; const templateDescription = isString( excerpt ) ? excerpt : excerpt?.raw; - const templateIcon = - __experimentalGetDefaultTemplatePartAreas( state ).find( - ( item ) => area === item.area - )?.icon || layout; + const templateIcon = getTemplatePartIconByArea( area ); return { title: diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js index ea8a6d5a9db97..a81d6fa21a22c 100644 --- a/packages/editor/src/store/test/selectors.js +++ b/packages/editor/src/store/test/selectors.js @@ -193,13 +193,11 @@ const defaultTemplatePartAreas = [ area: 'header', label: 'Header', description: 'Some description of a header', - icon: 'header', }, { area: 'footer', label: 'Footer', description: 'Some description of a footer', - icon: 'footer', }, ]; @@ -2823,11 +2821,11 @@ describe( 'selectors', () => { describe( '__experimentalGetDefaultTemplatePartAreas', () => { const state = { editorSettings: { defaultTemplatePartAreas } }; - it( 'returns empty array if there are no default template part areas', () => { + it( 'returns undefined if there are no default template part areas', () => { const emptyState = { editorSettings: {} }; expect( __experimentalGetDefaultTemplatePartAreas( emptyState ) - ).toHaveLength( 0 ); + ).toBeUndefined(); } ); it( 'returns a list of default template part areas if present in state', () => { @@ -2884,9 +2882,7 @@ describe( 'selectors', () => { } ); describe( '__experimentalGetTemplateInfo', () => { - const state = { - editorSettings: { defaultTemplateTypes, defaultTemplatePartAreas }, - }; + const state = { editorSettings: { defaultTemplateTypes } }; it( 'should return an empty object if no template is passed', () => { expect( __experimentalGetTemplateInfo( state, null ) ).toEqual( diff --git a/packages/editor/src/store/utils/get-template-part-icon.js b/packages/editor/src/store/utils/get-template-part-icon.js index e6f846519b3b2..523712b6ed115 100644 --- a/packages/editor/src/store/utils/get-template-part-icon.js +++ b/packages/editor/src/store/utils/get-template-part-icon.js @@ -1,14 +1,19 @@ /** * WordPress dependencies */ -import * as icons from '@wordpress/icons'; +import { layout, header, footer } from '@wordpress/icons'; + /** - * Helper function to retrieve the corresponding icon by name. + * Helper function to find the corresponding icon for a template part's 'area'. * - * @param {string} iconName The name of the icon. + * @param {string} area The value of the template part 'area' tax term. * * @return {Object} The corresponding icon. */ -export function getTemplatePartIcon( iconName ) { - return icons[ iconName ] || icons.layout; +export function getTemplatePartIconByArea( area ) { + const iconsByArea = { + footer, + header, + }; + return iconsByArea[ area ] || layout; } diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index ccb531f10afbe..b5c32cde47cd2 100644 --- a/packages/element/CHANGELOG.md +++ b/packages/element/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.20.0 (2021-03-17) ## 2.17.1 (2020-09-17) diff --git a/packages/element/README.md b/packages/element/README.md index b09cca79c8afb..d89498c1cace8 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -21,7 +21,7 @@ Install the module npm install @wordpress/element --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/element/package.json b/packages/element/package.json index 89e083e91c15e..768c8cd1dcfe9 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/element", - "version": "2.20.3", + "version": "2.20.2", "description": "Element React module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index d9159569675cb..86e83a4cb4753 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -2,8 +2,6 @@ ## Unreleased -## 4.0.3 (2021-04-29) - ### Bug Fix - `wp-env destroy` will now work in environments which don't include the `grep` or `awk` commands, such as Windows PowerShell. diff --git a/packages/env/lib/download-sources.js b/packages/env/lib/download-sources.js index 537389317b058..d87cd8e821da9 100644 --- a/packages/env/lib/download-sources.js +++ b/packages/env/lib/download-sources.js @@ -128,9 +128,7 @@ async function downloadGitSource( source, { onProgress, spinner, debug } ) { } log( 'Fetching the specified ref.' ); - await git.fetch( 'origin', source.ref, { - '--tags': null, - } ); + await git.fetch( 'origin', source.ref ); log( 'Checking out the specified ref.' ); await git.checkout( source.ref ); diff --git a/packages/env/package.json b/packages/env/package.json index c9ffe3330f92d..41aeee31e5778 100644 --- a/packages/env/package.json +++ b/packages/env/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/env", - "version": "4.0.3", + "version": "4.0.2", "description": "A zero-config, self contained local WordPress environment for development and testing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md index 2aef265d51cb5..3b41bbc97a606 100644 --- a/packages/escape-html/CHANGELOG.md +++ b/packages/escape-html/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.12.0 (2021-03-17) ## 1.8.0 (2020-04-15) diff --git a/packages/escape-html/README.md b/packages/escape-html/README.md index 2b35b9ff8daf7..8d9f451d3403a 100644 --- a/packages/escape-html/README.md +++ b/packages/escape-html/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/escape-html ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json index 9a00dd9a50121..a9ab95193793a 100644 --- a/packages/escape-html/package.json +++ b/packages/escape-html/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 86711610ff070..013ff948b65fd 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/eslint-plugin", - "version": "9.0.4", + "version": "9.0.3", "description": "ESLint plugin for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md index 0d9a1a1426fca..1cd726bac4fb9 100644 --- a/packages/format-library/CHANGELOG.md +++ b/packages/format-library/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.27.0 (2021-03-17) ## 1.8.0 (2019-08-29) diff --git a/packages/format-library/README.md b/packages/format-library/README.md index 8615dfcfda9bf..69d6f157279d0 100644 --- a/packages/format-library/README.md +++ b/packages/format-library/README.md @@ -10,6 +10,6 @@ Install the module npm install @wordpress/format-library --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

Code is Poetry.

diff --git a/packages/format-library/package.json b/packages/format-library/package.json index 8541b7193a946..d8bec03267964 100644 --- a/packages/format-library/package.json +++ b/packages/format-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/format-library", - "version": "1.27.3", + "version": "1.27.2", "description": "Format library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index c4c2bc6fa50a8..b6b38e31c509c 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -20,7 +20,6 @@ import { getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, - store as blockEditorStore, } from '@wordpress/block-editor'; /** @@ -49,7 +48,7 @@ export function getActiveColor( formatName, formatValue, colors ) { const ColorPicker = ( { name, value, onChange } ) => { const colors = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); + const { getSettings } = select( 'core/block-editor' ); return get( getSettings(), [ 'colors' ], [] ); } ); const onColorChange = useCallback( diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md index 3be7d6b97890a..86de3fa4fbc21 100644 --- a/packages/hooks/CHANGELOG.md +++ b/packages/hooks/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.12.0 (2021-03-17) ### New Feature diff --git a/packages/hooks/README.md b/packages/hooks/README.md index 3b780a8dd52c7..ffc15114d387d 100644 --- a/packages/hooks/README.md +++ b/packages/hooks/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/hooks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ### Usage diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 0a5ecb0cf54eb..2587a53ebf13e 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/hooks", - "version": "2.12.3", + "version": "2.12.2", "description": "WordPress hooks library.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md index b125a40b2ed49..1c478dbc60083 100644 --- a/packages/html-entities/CHANGELOG.md +++ b/packages/html-entities/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.11.0 (2021-03-17) ## 2.7.0 (2020-04-15) diff --git a/packages/html-entities/README.md b/packages/html-entities/README.md index f51848b18c74e..562c835faf53b 100644 --- a/packages/html-entities/README.md +++ b/packages/html-entities/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/html-entities --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json index 85f0a6c072877..9e1c655865b5d 100644 --- a/packages/html-entities/package.json +++ b/packages/html-entities/package.json @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md index 23470f8298da3..455e792603d07 100644 --- a/packages/i18n/CHANGELOG.md +++ b/packages/i18n/CHANGELOG.md @@ -2,16 +2,7 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - -## 3.20.0 (2021-04-29) - -### New Features - -- Add new `resetLocaleData` method to reset the existing Tannin locale data. +- Add new `resetLocaleData` method to reset the existing Tannin locale data. ## 3.19.0 (2021-03-17) diff --git a/packages/i18n/README.md b/packages/i18n/README.md index 7c4982a9caa77..061dbbb0257fc 100644 --- a/packages/i18n/README.md +++ b/packages/i18n/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/i18n --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/i18n/package.json b/packages/i18n/package.json index b155024d898b0..95e1e932ef183 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/i18n", - "version": "3.20.0", + "version": "3.19.2", "description": "WordPress internationalization (i18n) library.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 184f96daadf9e..62cee734faa8e 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.10.0 (2021-03-17) ## 2.0.0 (2020-05-14) diff --git a/packages/icons/README.md b/packages/icons/README.md index 825bd1b1fc086..d6f4aecf917d6 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/icons --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/icons/package.json b/packages/icons/package.json index 579e400c5350c..05826fc9a9468 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/icons", - "version": "2.10.3", + "version": "2.10.2", "description": "WordPress Icons package, based on dashicon.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,9 +20,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index b9257a2f9ccb2..13392b234397a 100644 --- a/packages/interface/CHANGELOG.md +++ b/packages/interface/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.0.0 (2021-04-06) ### Breaking Changes diff --git a/packages/interface/README.md b/packages/interface/README.md index 8dfebc7dc842d..e115aa6478371 100644 --- a/packages/interface/README.md +++ b/packages/interface/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/interface --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API Usage diff --git a/packages/interface/package.json b/packages/interface/package.json index 8b245bca1287e..b18edd06ef63a 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/interface", - "version": "2.0.2", + "version": "2.0.1", "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md index 2b98af50f65f4..e213da1182d0e 100644 --- a/packages/is-shallow-equal/CHANGELOG.md +++ b/packages/is-shallow-equal/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 3.1.0 (2021-03-17) ## 3.0.0 (2020-12-17) diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json index 9b94b18bb81b4..243d4046b05e4 100644 --- a/packages/is-shallow-equal/package.json +++ b/packages/is-shallow-equal/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/is-shallow-equal", - "version": "3.1.3", + "version": "3.1.2", "description": "Test for shallow equality between two objects or arrays.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -20,9 +20,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "files": [ "build", "build-module", diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md index 2b74b99d026a1..aa72fe476631c 100644 --- a/packages/keyboard-shortcuts/CHANGELOG.md +++ b/packages/keyboard-shortcuts/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.14.0 (2021-03-17) ## 1.13.0 (2020-12-17) diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md index bb072ed81e859..3a060fdf23af6 100644 --- a/packages/keyboard-shortcuts/README.md +++ b/packages/keyboard-shortcuts/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/keyboard-shortcuts --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API @@ -26,7 +26,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **useShortcut** diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json index e4a0f502fedd7..7e31dc1a30f83 100644 --- a/packages/keyboard-shortcuts/package.json +++ b/packages/keyboard-shortcuts/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keyboard-shortcuts", - "version": "1.14.3", + "version": "1.14.2", "description": "Handling keyboard shortcuts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md index c7e347f4f6f63..6f01d011b238f 100644 --- a/packages/keycodes/CHANGELOG.md +++ b/packages/keycodes/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.19.0 (2021-03-17) ## 2.18.0 (2021-01-05) diff --git a/packages/keycodes/README.md b/packages/keycodes/README.md index 036258a6fbdc2..6752d99548857 100644 --- a/packages/keycodes/README.md +++ b/packages/keycodes/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/keycodes --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage @@ -72,7 +72,7 @@ displayShortcut.primary( 'm' ); _Type_ -- `WPModifierHandler>`Keyed map of functions to display shortcuts. +- `WPModifierHandler>` Keyed map of functions to display shortcuts. # **displayShortcutList** @@ -88,7 +88,7 @@ displayShortcutList.primary( 'm' ); _Type_ -- `WPModifierHandler>`Keyed map of functions to shortcut sequences. +- `WPModifierHandler>` Keyed map of functions to shortcut sequences. # **DOWN** @@ -121,7 +121,7 @@ isKeyboardEvent.primary( event, 'm' ); _Type_ -- `WPModifierHandler`Keyed map of functions to match events. +- `WPModifierHandler` Keyed map of functions to match events. # **LEFT** @@ -134,7 +134,7 @@ depending on platform. _Type_ -- `WPModifierHandler< ( isApple: () => boolean ) => WPModifierPart[]>` +- `WPModifierHandler< ( isApple: () => boolean ) => WPModifierPart[]>` # **rawShortcut** @@ -152,7 +152,7 @@ rawShortcut.primary( 'm' ) _Type_ -- `WPModifierHandler>`Keyed map of functions to raw shortcuts. +- `WPModifierHandler>` Keyed map of functions to raw shortcuts. # **RIGHT** @@ -177,7 +177,7 @@ shortcutAriaLabel.primary( '.' ); _Type_ -- `WPModifierHandler>`Keyed map of functions to shortcut ARIA labels. +- `WPModifierHandler>` Keyed map of functions to shortcut ARIA labels. # **SPACE** diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json index 1060fd791c31b..e52c3bf364780 100644 --- a/packages/keycodes/package.json +++ b/packages/keycodes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/keycodes", - "version": "2.19.3", + "version": "2.19.2", "description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/lazy-import/README.md b/packages/lazy-import/README.md index 396e5cc2248e1..06a943f23ce7d 100644 --- a/packages/lazy-import/README.md +++ b/packages/lazy-import/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/lazy-import --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Requirements diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md index 3f807369c354c..10fcefa371267 100644 --- a/packages/list-reusable-blocks/CHANGELOG.md +++ b/packages/list-reusable-blocks/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.26.0 (2021-03-17) ## 1.1.18 (2019-01-03) diff --git a/packages/list-reusable-blocks/README.md b/packages/list-reusable-blocks/README.md index 5021be6b4608f..f14e9dd2e5979 100644 --- a/packages/list-reusable-blocks/README.md +++ b/packages/list-reusable-blocks/README.md @@ -12,6 +12,6 @@ Install the module npm install @wordpress/list-reusable-blocks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

Code is Poetry.

diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json index 7a4a00fddac3a..0d7b6182824c4 100644 --- a/packages/list-reusable-blocks/package.json +++ b/packages/list-reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/list-reusable-blocks", - "version": "1.26.3", + "version": "1.26.2", "description": "Adding Export/Import support to the reusable blocks listing.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "dependencies": { diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md index 40bb5208f71da..a9fe18389bf11 100644 --- a/packages/media-utils/CHANGELOG.md +++ b/packages/media-utils/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.20.0 (2021-03-17) ## 0.1.0 (2019-01-03) diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md index 818d17dce6340..a80ea9ac9ca73 100644 --- a/packages/media-utils/README.md +++ b/packages/media-utils/README.md @@ -11,7 +11,7 @@ Install the module npm install @wordpress/media-utils --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json index 22d44dfa84a28..db94b40c3f416 100644 --- a/packages/media-utils/package.json +++ b/packages/media-utils/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/media-utils", - "version": "1.20.3", + "version": "1.20.2", "description": "WordPress Media Upload Utils.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "dependencies": { diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md index ce7200d958f9e..a0a039cd6c6f6 100644 --- a/packages/notices/CHANGELOG.md +++ b/packages/notices/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.13.0 (2021-03-17) ## 2.12.0 (2020-12-17) diff --git a/packages/notices/README.md b/packages/notices/README.md index bce5583c71ab6..9b3a591fc1abc 100644 --- a/packages/notices/README.md +++ b/packages/notices/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/notices ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/notices/package.json b/packages/notices/package.json index 2ca16b98ff75c..3731b4a4637f7 100644 --- a/packages/notices/package.json +++ b/packages/notices/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/notices", - "version": "2.13.3", + "version": "2.13.2", "description": "State management for notices.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md index c90c5b88eb94f..727006c2556b1 100644 --- a/packages/nux/CHANGELOG.md +++ b/packages/nux/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 3.25.0 (2021-03-17) ## 3.24.0 (2020-12-17) diff --git a/packages/nux/README.md b/packages/nux/README.md index 1c234c87350a3..5a9b14bfa9829 100644 --- a/packages/nux/README.md +++ b/packages/nux/README.md @@ -14,7 +14,7 @@ Install the module npm install @wordpress/nux --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## DotTip diff --git a/packages/nux/package.json b/packages/nux/package.json index 58eb17b82a238..e2d0f3bf7e487 100644 --- a/packages/nux/package.json +++ b/packages/nux/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/nux", - "version": "3.25.3", + "version": "3.25.2", "description": "NUX (New User eXperience) module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md index fbf82f47f5037..457a3ce544d09 100644 --- a/packages/plugins/CHANGELOG.md +++ b/packages/plugins/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.25.0 (2021-03-17) ### New Features diff --git a/packages/plugins/README.md b/packages/plugins/README.md index c47c77206fb55..dc435b4ed157c 100644 --- a/packages/plugins/README.md +++ b/packages/plugins/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/plugins --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ### Plugins API diff --git a/packages/plugins/package.json b/packages/plugins/package.json index 48c081536c58a..c6f73a4a85572 100644 --- a/packages/plugins/package.json +++ b/packages/plugins/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/plugins", - "version": "2.25.3", + "version": "2.25.2", "description": "Plugins module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md index 41cdf92a91b1e..cc06c5ef3ab02 100644 --- a/packages/postcss-plugins-preset/CHANGELOG.md +++ b/packages/postcss-plugins-preset/CHANGELOG.md @@ -2,8 +2,6 @@ ## Unreleased -## 3.0.0 (2021-04-29) - ### Breaking Changes - The bundled `autoprefixer` dependency has been updated from requiring `^9.8.6` to requiring `^10.2.5` (see [Breaking Changes](https://github.com/postcss/autoprefixer/releases/tag/10.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)). diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index 41822d70016a5..f6ebaa1a7b932 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/postcss-plugins-preset", - "version": "3.0.0", + "version": "2.1.2", "description": "PostCSS sharable plugins preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md index 0c2760e1ee29e..d284f625e8c57 100644 --- a/packages/postcss-themes/CHANGELOG.md +++ b/packages/postcss-themes/CHANGELOG.md @@ -2,8 +2,6 @@ ## Unreleased -## 4.0.0 (2021-04-29) - ### Breaking Changes - The bundled `postcss` dependency requiring `^7.0.32` has been replaced with a peer dependency requiring `^8.0.0` (see [Breaking Changes](https://github.com/postcss/postcss/releases/tag/8.0.0), [#27821](https://github.com/WordPress/gutenberg/pull/27821)). diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json index ea375ad516838..12b65a47c3426 100644 --- a/packages/postcss-themes/package.json +++ b/packages/postcss-themes/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/postcss-themes", - "version": "4.0.0", + "version": "3.0.3", "description": "PostCSS plugin to generate theme colors.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index f1ebf4df95e36..54ed36be26154 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.12.0 (2021-03-17) ## 1.5.0 (2020-05-14) diff --git a/packages/primitives/README.md b/packages/primitives/README.md index 1056276d28906..66ed22d7518db 100644 --- a/packages/primitives/README.md +++ b/packages/primitives/README.md @@ -27,6 +27,6 @@ const myElement = ( ); ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

Code is Poetry.

diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 3acc331d77d06..669f0816a55f3 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/primitives", - "version": "1.12.3", + "version": "1.12.2", "description": "WordPress cross-platform primitives.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md index 05aed26bd13be..b8200a8672179 100644 --- a/packages/priority-queue/CHANGELOG.md +++ b/packages/priority-queue/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.11.0 (2021-03-17) ## 1.6.0 (2020-04-15) diff --git a/packages/priority-queue/README.md b/packages/priority-queue/README.md index 64e13011238ce..600a82240cbb8 100644 --- a/packages/priority-queue/README.md +++ b/packages/priority-queue/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/priority-queue --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json index 14dcc2be92c1a..d9b8f1d7b684d 100644 --- a/packages/priority-queue/package.json +++ b/packages/priority-queue/package.json @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json index 9dc47cf9e3652..7ed9b8d335ea1 100644 --- a/packages/project-management-automation/package.json +++ b/packages/project-management-automation/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/project-management-automation", - "version": "1.12.3", + "version": "1.12.2", "description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md deleted file mode 100644 index 0644a892242f9..0000000000000 --- a/packages/react-i18n/CHANGELOG.md +++ /dev/null @@ -1,12 +0,0 @@ - - -## Unreleased - -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - -## 1.0.0 (2021-03-17) - -- Initial version of the package. diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md index 16b9341d4180b..68dbf54a7a0c5 100644 --- a/packages/react-i18n/README.md +++ b/packages/react-i18n/README.md @@ -10,7 +10,7 @@ Install the module: npm install @wordpress/react-i18n ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json index 25d64bb9cc46c..e78ecb2d609de 100644 --- a/packages/react-i18n/package.json +++ b/packages/react-i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-i18n", - "version": "1.0.3", + "version": "1.0.2", "description": "React bindings for @wordpress/i18n.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle index dbda1050272c0..41e40c63c9e15 100644 --- a/packages/react-native-aztec/android/build.gradle +++ b/packages/react-native-aztec/android/build.gradle @@ -27,15 +27,19 @@ buildscript { } } +plugins { + id "com.jfrog.bintray" +} + apply plugin: 'com.android.library' apply plugin: 'kotlin-android' apply plugin: 'com.github.dcendents.android-maven' -apply plugin: 'maven-publish' +apply plugin: 'maven-publish' // this enables publishing via Bintray // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' -group = 'org.wordpress-mobile.gutenberg-mobile' +group = 'com.github.wordpress-mobile.gutenberg-mobile' // The sample build uses multiple directories to // keep boilerplate and common code separate from @@ -82,7 +86,6 @@ repositories { google() maven { url "https://jitpack.io" } - maven { url "https://a8c-libs.s3.amazonaws.com/android" } if (willPublishReactNativeAztecBinary) { maven { url "https://dl.bintray.com/wordpress-mobile/react-native-mirror/" } @@ -117,28 +120,37 @@ dependencies { } if (willPublishReactNativeAztecBinary) { + bintray { + user = project.hasProperty('bintrayUser') ? project.property('bintrayUser') : System.getenv('BINTRAY_USER') + key = project.hasProperty('bintrayKey') ? project.property('bintrayKey') : System.getenv('BINTRAY_KEY') + publications = ['ReactNativeAztecPublication'] + publish = true + pkg { + repo = 'maven' + name = 'react-native-aztec' + licenses = ['GPL-2.0'] + userOrg = 'wordpress-mobile' + vcsUrl = 'https://github.com/wordpress-mobile/gutenberg-mobile.git' + version { + name = publishReactNativeAztecVersion + released = new Date() + } + } + } + project.afterEvaluate { publishing { publications { ReactNativeAztecPublication(MavenPublication) { artifact bundleReleaseAar - groupId 'org.wordpress-mobile.gutenberg-mobile' + groupId 'com.github.wordpress-mobile.gutenberg-mobile' artifactId 'react-native-aztec' version publishReactNativeAztecVersion addDependenciesToPom(pom) } } - repositories { - maven { - url "s3://a8c-libs.s3.amazonaws.com/android" - credentials(AwsCredentials) { - accessKey project.hasProperty('awsAccessKey') ? project.properties['awsAccessKey'] : System.getenv('AWS_ACCESS_KEY') - secretKey project.hasProperty('awsSecretKey') ? project.properties['awsSecretKey'] : System.getenv('AWS_SECRET_KEY') - } - } - } } } } @@ -160,23 +172,3 @@ def addDependenciesToPom(pom) { } } -tasks.register('checkIfVersionIsAlreadyPublished') { - def pomUrl = "https://a8c-libs.s3.amazonaws.com/android/org/wordpress-mobile/gutenberg-mobile/react-native-aztec/${publishReactNativeAztecVersion}/react-native-aztec-${publishReactNativeAztecVersion}.pom" - def responseCode = new URL(pomUrl).openConnection().with { connection -> - requestMethod = 'HEAD' - connect() - responseCode - } - - if (responseCode == 200) { - throw new GradleException("'$publishReactNativeAztecVersion' is already published, please use a different version name. If this happened in CI for a PR, a new commit is necessary. If this happened for a tag, the existing version needs to be manually removed from S3.") - } else if (responseCode == 403) { - // S3 returns 403 status code if a file doesn't exist, which is what we want. Proceed to publish.. - } else { - throw new GradleException("An unexpected status code ($responseCode) was received while checking if the version ($publishReactNativeAztecVersion) is already published to S3. If this issue persists, please contact Platform 9 team for help.") - } -} - -publish.dependsOn(tasks.named('checkIfVersionIsAlreadyPublished')) -publish.doLast { println "Successfully published 'react-native-aztec' version '$publishReactNativeAztecVersion'" } - diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle index b589da9e83838..7d1b2c5a696c6 100644 --- a/packages/react-native-aztec/android/settings.gradle +++ b/packages/react-native-aztec/android/settings.gradle @@ -1,2 +1,8 @@ +pluginManagement { + plugins { + id 'com.jfrog.bintray' version '1.8.5' + } +} + rootProject.name = '@wordpress_react-native-aztec' diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index 828636de411c5..abf4de763cd95 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.52.0", + "version": "1.51.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index 042df52e20db5..8cfc502b6587e 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -13,6 +13,10 @@ buildscript { } } +plugins { + id 'com.jfrog.bintray' apply false +} + allprojects { repositories { if (willPublishReactNativeBridgeBinary) { diff --git a/packages/react-native-bridge/android/publish-aztec-and-bridge.sh b/packages/react-native-bridge/android/publish-aztec-and-bridge.sh index 246019de4cf9f..c17ed9c4be3c1 100755 --- a/packages/react-native-bridge/android/publish-aztec-and-bridge.sh +++ b/packages/react-native-bridge/android/publish-aztec-and-bridge.sh @@ -15,7 +15,7 @@ fi # 2. Verify the version argument is passed. We use the same version for react-native-aztec and react-native-bridge libraries. VERSION=$1 if [[ -z $VERSION ]]; then - echo "This script requires the publish version to be passed as an argument." + echo "This script requires the Bintray version to be passed as an argument." echo "Example usage: './publish-aztec-and-bridge.sh \$VERSION'" exit 1 fi @@ -30,23 +30,26 @@ if [ $? -ne 0 ]; then exit 1 fi -# 4. Publish 'react-native-aztec` library to S3 +# 4. Publish 'react-native-aztec` library to Bintray echo "Publishing 'react-native-aztec' version '$VERSION'" -./gradlew :react-native-aztec:publish -q -PpublishReactNativeAztecVersion=$VERSION +./gradlew :react-native-aztec:bintrayUpload -q -PpublishReactNativeAztecVersion=$VERSION if [ $? -eq 0 ]; then + echo "Successfully published 'react-native-aztec' version '$VERSION'." echo "Wait 30 seconds for the new 'react-native-aztec' version to be available" sleep 30 else echo "Failed to publish 'react-native-aztec' version '$VERSION'." - exit 1 + echo "We'll still proceed to build and publish 'react-native-bridge' since this failure might be due to this version being published already, for example when the CI task is restarted." fi -# 5. Publish 'react-native-bridge` library to S3 +# 5. Publish 'react-native-bridge` library to Bintray echo "Publishing react-native-bridge version '$VERSION'" -./gradlew :react-native-bridge:publish -q -PpublishReactNativeBridgeVersion=$VERSION -PreactNativeAztecVersion=$VERSION +./gradlew :react-native-bridge:bintrayUpload -q -PpublishReactNativeBridgeVersion=$VERSION -PreactNativeAztecVersion=$VERSION -if [ $? -ne 0 ]; then +if [ $? -eq 0 ]; then + echo "Successfully published 'react-native-bridge' version '$VERSION'." +else echo "Failed to publish 'react-native-bridge' version '$VERSION'." exit 1 fi 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 9fa38111e7034..1e018263e3438 100644 --- a/packages/react-native-bridge/android/react-native-bridge/build.gradle +++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle @@ -13,10 +13,14 @@ buildscript { } } +plugins { + id "com.jfrog.bintray" +} + apply plugin: 'com.android.library' apply plugin: 'com.github.dcendents.android-maven' apply plugin: 'kotlin-android' -apply plugin: 'maven-publish' +apply plugin: 'maven-publish' // this enables publishing via Bintray // import the `readReactNativeVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle' @@ -24,7 +28,7 @@ apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80 // import the `readHashedVersion()` function apply from: 'https://gist.githubusercontent.com/hypest/ceaf20a8e7d9b8404e4a5ff2e6c36650/raw/e1460a128e4b9863963410d719c7d44c3adefd02/readHashedVersion.gradle' -group='org.wordpress-mobile.gutenberg-mobile' +group='com.github.wordpress-mobile.gutenberg-mobile' def buildAssetsFolder = 'build/assets' @@ -51,7 +55,7 @@ android { sourceSets { main { assets.srcDirs += buildAssetsFolder - assets.srcDirs += '../../../../../src/block-support' + assets.srcDirs += '../../../../src/block-support' // Despite being in a folder called "resources", the files in // unsupported-block-editor are accessed as assets by their // consumers: the WordPressEditor library. @@ -79,7 +83,7 @@ dependencies { def rnVersion = readReactNativeVersion('../../../../package.json', 'devDependencies') println "react-native version for react-native-bridge: $rnVersion" implementation "com.facebook.react:react-native:$rnVersion" - implementation "org.wordpress-mobile.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion" + implementation "com.github.wordpress-mobile.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion" implementation "com.github.wordpress-mobile:react-native-svg:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-svg', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-video:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-video', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-linear-gradient:${readHashedVersion('../../../react-native-editor/package.json', 'react-native-linear-gradient', 'dependencies')}" @@ -120,28 +124,37 @@ preBuild.doFirst { } if (willPublishReactNativeBridgeBinary) { + bintray { + user = project.hasProperty('bintrayUser') ? project.property('bintrayUser') : System.getenv('BINTRAY_USER') + key = project.hasProperty('bintrayKey') ? project.property('bintrayKey') : System.getenv('BINTRAY_KEY') + publications = ['ReactNativeBridgePublication'] + publish = true + pkg { + repo = 'maven' + name = 'react-native-gutenberg-bridge' + licenses = ['GPL-2.0'] + userOrg = 'wordpress-mobile' + vcsUrl = 'https://github.com/wordpress-mobile/gutenberg-mobile.git' + version { + name = publishReactNativeBridgeVersion + released = new Date() + } + } + } + project.afterEvaluate { publishing { publications { ReactNativeBridgePublication(MavenPublication) { artifact bundleReleaseAar - groupId 'org.wordpress-mobile.gutenberg-mobile' + groupId 'com.github.wordpress-mobile.gutenberg-mobile' artifactId 'react-native-gutenberg-bridge' version publishReactNativeBridgeVersion addDependenciesToPom(pom) } } - repositories { - maven { - url "s3://a8c-libs.s3.amazonaws.com/android" - credentials(AwsCredentials) { - accessKey project.hasProperty('awsAccessKey') ? project.properties['awsAccessKey'] : System.getenv('AWS_ACCESS_KEY') - secretKey project.hasProperty('awsSecretKey') ? project.properties['awsSecretKey'] : System.getenv('AWS_SECRET_KEY') - } - } - } } } } @@ -170,22 +183,3 @@ def addDependenciesToPom(pom) { } } -tasks.register('checkIfVersionIsAlreadyPublished') { - def pomUrl = "https://a8c-libs.s3.amazonaws.com/android/org/wordpress-mobile/gutenberg-mobile/react-native-bridge/${publishReactNativeBridgeVersion}/react-native-bridge-${publishReactNativeBridgeVersion}.pom" - def responseCode = new URL(pomUrl).openConnection().with { connection -> - requestMethod = 'HEAD' - connect() - responseCode - } - - if (responseCode == 200) { - throw new GradleException("'$publishReactNativeBridgeVersion' is already published, please use a different version name. If this happened in CI for a PR, a new commit is necessary. If this happened for a tag, the existing version needs to be manually removed from S3.") - } else if (responseCode == 403) { - // S3 returns 403 status code if a file doesn't exist, which is what we want. Proceed to publish.. - } else { - throw new GradleException("An unexpected status code ($responseCode) was received while checking if the version ($publishReactNativeBridgeVersion) is already published to S3. If this issue persists, please contact Platform 9 team for help.") - } -} - -publish.dependsOn(tasks.named('checkIfVersionIsAlreadyPublished')) -publish.doLast { println "Successfully published 'react-native-bridge' version '$publishReactNativeBridgeVersion'" } diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle index cf66a4e82d23b..cbabc35ea7026 100644 --- a/packages/react-native-bridge/android/settings.gradle +++ b/packages/react-native-bridge/android/settings.gradle @@ -1,3 +1,9 @@ +pluginManagement { + plugins { + id 'com.jfrog.bintray' version '1.8.5' + } +} + rootProject.name = '@wordpress_react-native-bridge' include ':react-native-bridge' diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index bbc4079fad609..2b41fbc858fcd 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.52.0", + "version": "1.51.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 3be2c7a79ac1f..3c92b6e424af6 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,16 +11,11 @@ For each user feature we should also add a importance categorization label to i ## Unreleased -## 1.52.0 - -- [***] Search block now available on mobile! [https://github.com/WordPress/gutenberg/pull/30783] - [*] Image block: Add a "featured" banner. (Android only) [#30806] - [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546] - [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025] -## 1.51.1 -- [*] Updates relative block-support asset path [#31184] ## 1.51.0 diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js deleted file mode 100644 index 41400c8b3558c..0000000000000 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js +++ /dev/null @@ -1,179 +0,0 @@ -/** - * Internal dependencies - */ -import { blockNames } from './pages/editor-page'; -import testData from './helpers/test-data'; -import { isAndroid } from './helpers/utils'; - -const testIds = { - label: 'search-block-label', - input: 'search-block-input', - button: 'search-block-button', -}; - -const searchBlockHtml = ``; - -describe( 'Gutenberg Editor Search Block tests.', () => { - describe( 'Editing Search Block elements.', () => { - it( 'Add search block via HTML', async () => { - await editorPage.setHtmlContent( searchBlockHtml ); - } ); - - it( 'Able to customize label text', async () => { - await editorPage.sendTextToSearchBlockChild( - testIds.label, - testData.shortText - ); - - let actual; - let expected; - - if ( isAndroid() ) { - // Android pads the string entered into the `PlainText` component so we'll get the - // value a different way by asking for it directly. - const input = await editorPage.getSearchBlockTextElement( - testIds.label - ); - const inputValue = await input.text(); - actual = inputValue.trim(); - expected = testData.shortText; - } else { - actual = await editorPage.getHtmlContent(); - expected = `"label":"${ testData.shortText }"`; - } - - expect( actual ).toContain( expected ); - } ); - - it( 'Able to customize placeholder text', async () => { - await editorPage.sendTextToSearchBlockChild( - testIds.input, - testData.shortText - ); - - let actual; - let expected; - - if ( isAndroid() ) { - // Android pads the string entered into the `PlainText` component so we'll get the - // value a different way by asking for it directly. - const input = await editorPage.getSearchBlockTextElement( - testIds.input - ); - const inputValue = await input.text(); - actual = inputValue.trim(); - expected = testData.shortText; - } else { - actual = await editorPage.getHtmlContent(); - expected = `"placeholder":"${ testData.shortText }"`; - } - - expect( actual ).toContain( expected ); - } ); - - it( 'Able to customize button text', async () => { - await editorPage.sendTextToSearchBlockChild( - testIds.button, - testData.shortButtonText - ); - - let actual; - let expected; - - if ( isAndroid() ) { - // Android pads the string entered into the `PlainText` component so we'll get the - // value a different way by asking for it directly. - const input = await editorPage.getSearchBlockTextElement( - testIds.button - ); - const inputValue = await input.text(); - actual = inputValue.trim(); - expected = testData.shortButtonText; - } else { - actual = await editorPage.getHtmlContent(); - expected = `"buttonText":"${ testData.shortButtonText }"`; - } - - expect( actual ).toContain( expected ); - } ); - - it( 'Remove Search block', async () => { - // Remove the search block to end this suite of tests. - await editorPage.removeBlockAtPosition( blockNames.search ); - } ); - } ); - - describe( 'Changing search block settings.', () => { - it( 'Able to add the Search Block.', async () => { - await editorPage.addNewBlock( blockNames.search ); - const searchBlock = await editorPage.getBlockAtPosition( - blockNames.search - ); - - expect( searchBlock ).toBeTruthy(); - } ); - - it( 'Able to hide search block label', async () => { - const searchBlock = await editorPage.getBlockAtPosition( - blockNames.search - ); - - await editorPage.toggleHideSearchLabelSetting( searchBlock ); - await editorPage.dismissBottomSheet(); - - // switch to html and verify - const html = await editorPage.getHtmlContent(); - expect( html ).toContain( `"showLabel":false` ); - } ); - - it( 'Able to change to icon only button', async () => { - const searchBlock = await editorPage.getBlockAtPosition( - blockNames.search - ); - - await editorPage.toggleSearchIconOnlySetting( searchBlock ); - await editorPage.dismissBottomSheet(); - - // switch to html and verify - const html = await editorPage.getHtmlContent(); - expect( html ).toContain( `"buttonUseIcon":true` ); - } ); - - it( 'Able to change button position to inside', async () => { - const searchBlock = await editorPage.getBlockAtPosition( - blockNames.search - ); - - await editorPage.changeSearchButtonPositionSetting( - searchBlock, - 'Button inside' - ); - await editorPage.dismissBottomSheet(); - - // switch to html and verify - const html = await editorPage.getHtmlContent(); - expect( html ).toContain( `"buttonPosition":"button-inside"` ); - } ); - - it( 'Able change button position to no button', async () => { - const searchBlock = await editorPage.getBlockAtPosition( - blockNames.search - ); - - await editorPage.changeSearchButtonPositionSetting( - searchBlock, - 'No button' - ); - await editorPage.dismissBottomSheet(); - - // switch to html and verify - const html = await editorPage.getHtmlContent(); - expect( html ).toContain( `"buttonPosition":"no-button"` ); - } ); - - it( 'Remove search block', async () => { - // Remove the search block to end this suite of tests. - await editorPage.removeBlockAtPosition( blockNames.search ); - } ); - } ); -} ); diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js index b4c5772164ae3..00135400a5dce 100644 --- a/packages/react-native-editor/__device-tests__/helpers/test-data.js +++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js @@ -1,5 +1,3 @@ -exports.shortButtonText = 'Click Me'; - exports.shortText = `Rock music approaches at high velocity.`; exports.mediumText = `The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?`; diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 80061eec35359..83cfd9a21ac07 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -240,19 +240,6 @@ class EditorPage { } } - async openBlockSettings( block ) { - await block.click(); - - const settingsButton = await block.elementByAccessibilityId( - 'Open Settings' - ); - await settingsButton.click(); - } - - async dismissBottomSheet() { - return await swipeDown( this.driver ); - } - // ========================= // Block toolbar functions // ========================= @@ -594,66 +581,6 @@ class EditorPage { } } - // ============================= - // Search Block functions - // ============================= - - async getSearchBlockTextElement( testID ) { - const child = await this.driver.elementByAccessibilityId( testID ); - - if ( isAndroid() ) { - // Get the child EditText element of the ViewGroup returned by - // elementByAccessibilityId. - return await child.elementByClassName( 'android.widget.EditText' ); - } - - return child; - } - - async sendTextToSearchBlockChild( testID, text ) { - const textViewElement = await this.getSearchBlockTextElement( testID ); - return await typeString( this.driver, textViewElement, text ); - } - - async toggleHideSearchLabelSetting( block ) { - await this.openBlockSettings( block ); - - const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther'; - - const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Hide search heading")]`; - return await this.driver - .elementByXPath( locator ) - .click() - .sleep( isAndroid() ? 200 : 0 ); - } - - async changeSearchButtonPositionSetting( block, buttonPosition ) { - await this.openBlockSettings( block ); - - const elementName = isAndroid() ? '//*' : '//XCUIElementTypeButton'; - - const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Button position")]`; - await this.driver.elementByXPath( locator ).click(); - - const optionMenuButtonLocator = `${ elementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ buttonPosition }")]`; - return await this.driver - .elementByXPath( optionMenuButtonLocator ) - .click() - .sleep( isAndroid() ? 500 : 200 ); // sleep a little longer due to multiple menus - } - - async toggleSearchIconOnlySetting( block ) { - await this.openBlockSettings( block ); - - const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther'; - - const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Use icon button")]`; - return await this.driver - .elementByXPath( locator ) - .click() - .sleep( isAndroid() ? 200 : 0 ); - } - // ============================= // Unsupported Block functions // ============================= @@ -717,7 +644,6 @@ const blockNames = { verse: 'Verse', file: 'File', audio: 'Audio', - search: 'Search', }; module.exports = { initializeEditorPage, blockNames }; diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle index a74c55992616e..0b7e06e295203 100644 --- a/packages/react-native-editor/android/app/build.gradle +++ b/packages/react-native-editor/android/app/build.gradle @@ -158,7 +158,7 @@ repositories { } dependencies { - implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", { + implementation("com.github.wordpress-mobile.gutenberg-mobile:react-native-bridge", { exclude group: 'org.wordpress', module: 'utils' }) implementation("org.wordpress:utils:$wordpressUtilsVersion", { diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 937db3693a5df..3ef8fd10ef7d1 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -21,7 +21,7 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - Gutenberg (1.52.0): + - Gutenberg (1.51.0): - React-Core (= 0.61.5) - React-CoreModules (= 0.61.5) - React-RCTImage (= 0.61.5) @@ -253,7 +253,7 @@ PODS: - React-Core - RNSVG (9.13.6-gb): - React-Core - - RNTAztecView (1.52.0): + - RNTAztecView (1.51.0): - React-Core - WordPress-Aztec-iOS (~> 1.19.4) - WordPress-Aztec-iOS (1.19.4) @@ -402,7 +402,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - Gutenberg: 84ebca67faec24fa0f6fdc7d07f009ee81916cb3 + Gutenberg: 74ef5f17bcd712fd31f4c7a666ff1ccd2c871c68 RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 @@ -435,7 +435,7 @@ SPEC CHECKSUMS: RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918 RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b RNSVG: 46c4b680fe18237fa01eb7d7b311d77618fde31f - RNTAztecView: e752cfd696ff6db49be94a8aeca032d2f4a3227e + RNTAztecView: af275654e1326cd8c0678c92aa16b860194155d5 WordPress-Aztec-iOS: 870c93297849072aadfc2223e284094e73023e82 Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 7c9d91be2770e..4c43cd05ab568 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.52.0", + "version": "1.51.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -23,7 +23,7 @@ "url": "https://github.com/WordPress/gutenberg/issues" }, "engines": { - "node": ">=12", + "node": ">=10", "npm": ">=6.9" }, "main": "src/index.js", diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md index ccf16e3dc5c59..41c526aea5525 100644 --- a/packages/redux-routine/CHANGELOG.md +++ b/packages/redux-routine/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 3.14.0 (2021-03-17) ## 3.7.0 (2020-02-04) diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json index b2c6b6c02e359..820bc39e9d97b 100644 --- a/packages/redux-routine/package.json +++ b/packages/redux-routine/package.json @@ -20,9 +20,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md index 6c0dcc88da30f..030bcbce7d6d5 100644 --- a/packages/reusable-blocks/CHANGELOG.md +++ b/packages/reusable-blocks/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.2.0 (2021-03-17) ## 1.1.0 (2020-12-17) diff --git a/packages/reusable-blocks/README.md b/packages/reusable-blocks/README.md index 20aa4982e1c34..9c9c656d2dd93 100644 --- a/packages/reusable-blocks/README.md +++ b/packages/reusable-blocks/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/reusable-blocks --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## How it works diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json index e15ffd694beac..1fea20a2a10cf 100644 --- a/packages/reusable-blocks/package.json +++ b/packages/reusable-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/reusable-blocks", - "version": "1.2.3", + "version": "1.2.2", "description": "Reusable blocks utilities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js index 3635c0d1c3e81..ce5883402896d 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { withSelect } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -25,7 +24,7 @@ function ReusableBlocksMenuItems( { clientIds, rootClientId } ) { } export default withSelect( ( select ) => { - const { getSelectedBlockClientIds } = select( blockEditorStore ); + const { getSelectedBlockClientIds } = select( 'core/block-editor' ); return { clientIds: getSelectedBlockClientIds(), }; diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js index 7ac1a9e34ff30..ec4df75146bc0 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js @@ -5,16 +5,13 @@ import { MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { isReusableBlock } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { - BlockSettingsMenuControls, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { BlockSettingsMenuControls } from '@wordpress/block-editor'; import { addQueryArgs } from '@wordpress/url'; function ReusableBlocksManageButton( { clientId } ) { const { isVisible } = useSelect( ( select ) => { - const { getBlock } = select( blockEditorStore ); + const { getBlock } = select( 'core/block-editor' ); const { canUser } = select( 'core' ); const reusableBlock = getBlock( clientId ); diff --git a/packages/reusable-blocks/src/store/controls.js b/packages/reusable-blocks/src/store/controls.js index 373fbc698931f..e3e75930b5c08 100644 --- a/packages/reusable-blocks/src/store/controls.js +++ b/packages/reusable-blocks/src/store/controls.js @@ -14,7 +14,6 @@ import { } from '@wordpress/blocks'; import { createRegistryControl } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -66,7 +65,7 @@ const controls = { CONVERT_BLOCK_TO_STATIC: createRegistryControl( ( registry ) => ( { clientId } ) => { const oldBlock = registry - .select( blockEditorStore ) + .select( 'core/block-editor' ) .getBlock( clientId ); const reusableBlock = registry .select( 'core' ) @@ -82,7 +81,7 @@ const controls = { : reusableBlock.content ); registry - .dispatch( blockEditorStore ) + .dispatch( 'core/block-editor' ) .replaceBlocks( oldBlock.clientId, newBlocks ); } ), @@ -94,7 +93,7 @@ const controls = { title: title || __( 'Untitled Reusable block' ), content: serialize( registry - .select( blockEditorStore ) + .select( 'core/block-editor' ) .getBlocksByClientId( clientIds ) ), status: 'publish', @@ -108,7 +107,7 @@ const controls = { ref: updatedRecord.id, } ); registry - .dispatch( blockEditorStore ) + .dispatch( 'core/block-editor' ) .replaceBlocks( clientIds, newBlock ); registry .dispatch( reusableBlocksStore ) @@ -133,7 +132,7 @@ const controls = { // Remove any other blocks that reference this reusable block const allBlocks = registry - .select( blockEditorStore ) + .select( 'core/block-editor' ) .getBlocks(); const associatedBlocks = allBlocks.filter( ( block ) => @@ -146,7 +145,7 @@ const controls = { // Remove the parsed block. if ( associatedBlockClientIds.length ) { registry - .dispatch( blockEditorStore ) + .dispatch( 'core/block-editor' ) .removeBlocks( associatedBlockClientIds ); } diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md index 04826c21436f1..b5d3675acd590 100644 --- a/packages/rich-text/CHANGELOG.md +++ b/packages/rich-text/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 3.25.0 (2021-03-17) ## 3.24.0 (2020-12-17) diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index d04817e3a8e30..8f0fc331b27c8 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/rich-text ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API @@ -312,7 +312,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **toggleFormat** diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index 9619520009eb0..f1ff5604a4363 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/rich-text", - "version": "3.25.3", + "version": "3.25.2", "description": "Rich text value and manipulation API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index c87fcf816a0af..1ffd8365dda0a 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -9,7 +9,15 @@ import { useMemo, useLayoutEffect, } from '@wordpress/element'; -import { BACKSPACE, DELETE, ENTER, SPACE, ESCAPE } from '@wordpress/keycodes'; +import { + BACKSPACE, + DELETE, + ENTER, + LEFT, + RIGHT, + SPACE, + ESCAPE, +} from '@wordpress/keycodes'; import { getFilesFromDataTransfer } from '@wordpress/dom'; import { useMergeRefs } from '@wordpress/compose'; @@ -34,7 +42,6 @@ import { useBoundaryStyle } from './use-boundary-style'; import { useInlineWarning } from './use-inline-warning'; import { insert } from '../insert'; import { useCopyHandler } from './use-copy-handler'; -import { useFormatBoundaries } from './use-format-boundaries'; /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */ @@ -530,6 +537,122 @@ function RichText( event.preventDefault(); } + /** + * Handles horizontal keyboard navigation when no modifiers are pressed. The + * navigation is handled separately to move correctly around format + * boundaries. + * + * @param {WPSyntheticEvent} event A synthetic keyboard event. + */ + function handleHorizontalNavigation( event ) { + const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event; + + if ( + // Only override left and right keys without modifiers pressed. + shiftKey || + altKey || + metaKey || + ctrlKey || + ( keyCode !== LEFT && keyCode !== RIGHT ) + ) { + return; + } + + const { + text, + formats, + start, + end, + activeFormats: currentActiveFormats = [], + } = record.current; + const collapsed = isCollapsed( record.current ); + // To do: ideally, we should look at visual position instead. + const { direction } = getWin().getComputedStyle( ref.current ); + const reverseKey = direction === 'rtl' ? RIGHT : LEFT; + const isReverse = event.keyCode === reverseKey; + + // If the selection is collapsed and at the very start, do nothing if + // navigating backward. + // If the selection is collapsed and at the very end, do nothing if + // navigating forward. + if ( collapsed && currentActiveFormats.length === 0 ) { + if ( start === 0 && isReverse ) { + return; + } + + if ( end === text.length && ! isReverse ) { + return; + } + } + + // If the selection is not collapsed, let the browser handle collapsing + // the selection for now. Later we could expand this logic to set + // boundary positions if needed. + if ( ! collapsed ) { + return; + } + + const formatsBefore = formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS; + const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS; + + let newActiveFormatsLength = currentActiveFormats.length; + let source = formatsAfter; + + if ( formatsBefore.length > formatsAfter.length ) { + source = formatsBefore; + } + + // If the amount of formats before the caret and after the caret is + // different, the caret is at a format boundary. + if ( formatsBefore.length < formatsAfter.length ) { + if ( + ! isReverse && + currentActiveFormats.length < formatsAfter.length + ) { + newActiveFormatsLength++; + } + + if ( + isReverse && + currentActiveFormats.length > formatsBefore.length + ) { + newActiveFormatsLength--; + } + } else if ( formatsBefore.length > formatsAfter.length ) { + if ( + ! isReverse && + currentActiveFormats.length > formatsAfter.length + ) { + newActiveFormatsLength--; + } + + if ( + isReverse && + currentActiveFormats.length < formatsBefore.length + ) { + newActiveFormatsLength++; + } + } + + if ( newActiveFormatsLength === currentActiveFormats.length ) { + record.current._newActiveFormats = isReverse + ? formatsBefore + : formatsAfter; + return; + } + + event.preventDefault(); + + const newActiveFormats = source.slice( 0, newActiveFormatsLength ); + const newValue = { + ...record.current, + activeFormats: newActiveFormats, + }; + record.current = newValue; + applyRecord( newValue ); + setActiveFormats( newActiveFormats ); + } + function handleKeyDown( event ) { if ( event.defaultPrevented ) { return; @@ -538,6 +661,7 @@ function RichText( handleDelete( event ); handleEnter( event ); handleSpace( event ); + handleHorizontalNavigation( event ); } const lastHistoryValue = useRef( value ); @@ -940,7 +1064,6 @@ function RichText( forwardedRef, ref, useCopyHandler( { record, multilineTag, preserveWhiteSpace } ), - useFormatBoundaries( { record, applyRecord, setActiveFormats } ), ] ), style: defaultStyle, className: 'rich-text', diff --git a/packages/rich-text/src/component/use-format-boundaries.js b/packages/rich-text/src/component/use-format-boundaries.js deleted file mode 100644 index 0383337f95449..0000000000000 --- a/packages/rich-text/src/component/use-format-boundaries.js +++ /dev/null @@ -1,144 +0,0 @@ -/** - * WordPress dependencies - */ -import { useRefEffect } from '@wordpress/compose'; - -import { LEFT, RIGHT } from '@wordpress/keycodes'; - -/** - * Internal dependencies - */ -import { isCollapsed } from '../is-collapsed'; - -const EMPTY_ACTIVE_FORMATS = []; - -export function useFormatBoundaries( { - record, - applyRecord, - setActiveFormats, -} ) { - return useRefEffect( - ( element ) => { - function onKeyDown( event ) { - const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event; - - if ( - // Only override left and right keys without modifiers pressed. - shiftKey || - altKey || - metaKey || - ctrlKey || - ( keyCode !== LEFT && keyCode !== RIGHT ) - ) { - return; - } - - const { - text, - formats, - start, - end, - activeFormats: currentActiveFormats = [], - } = record.current; - const collapsed = isCollapsed( record.current ); - const { ownerDocument } = element; - const { defaultView } = ownerDocument; - // To do: ideally, we should look at visual position instead. - const { direction } = defaultView.getComputedStyle( element ); - const reverseKey = direction === 'rtl' ? RIGHT : LEFT; - const isReverse = event.keyCode === reverseKey; - - // If the selection is collapsed and at the very start, do nothing if - // navigating backward. - // If the selection is collapsed and at the very end, do nothing if - // navigating forward. - if ( collapsed && currentActiveFormats.length === 0 ) { - if ( start === 0 && isReverse ) { - return; - } - - if ( end === text.length && ! isReverse ) { - return; - } - } - - // If the selection is not collapsed, let the browser handle collapsing - // the selection for now. Later we could expand this logic to set - // boundary positions if needed. - if ( ! collapsed ) { - return; - } - - const formatsBefore = - formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS; - const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS; - - let newActiveFormatsLength = currentActiveFormats.length; - let source = formatsAfter; - - if ( formatsBefore.length > formatsAfter.length ) { - source = formatsBefore; - } - - // If the amount of formats before the caret and after the caret is - // different, the caret is at a format boundary. - if ( formatsBefore.length < formatsAfter.length ) { - if ( - ! isReverse && - currentActiveFormats.length < formatsAfter.length - ) { - newActiveFormatsLength++; - } - - if ( - isReverse && - currentActiveFormats.length > formatsBefore.length - ) { - newActiveFormatsLength--; - } - } else if ( formatsBefore.length > formatsAfter.length ) { - if ( - ! isReverse && - currentActiveFormats.length > formatsAfter.length - ) { - newActiveFormatsLength--; - } - - if ( - isReverse && - currentActiveFormats.length < formatsBefore.length - ) { - newActiveFormatsLength++; - } - } - - if ( newActiveFormatsLength === currentActiveFormats.length ) { - record.current._newActiveFormats = isReverse - ? formatsBefore - : formatsAfter; - return; - } - - event.preventDefault(); - - const newActiveFormats = source.slice( - 0, - newActiveFormatsLength - ); - const newValue = { - ...record.current, - activeFormats: newActiveFormats, - }; - record.current = newValue; - applyRecord( newValue ); - setActiveFormats( newActiveFormats ); - } - - element.addEventListener( 'keydown', onKeyDown ); - return () => { - element.removeEventListener( 'keydown', onKeyDown ); - }; - }, - [ record, applyRecord, setActiveFormats ] - ); -} diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 7dcf7e65c79ce..f928b4c2bc8a4 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,24 +2,6 @@ ## Unreleased -### Bug Fix - -- Add `postcss` as a dependency to ensure that the correct version gets installed. - -## 15.0.0 (2021-04-29) - -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. -- The bundled `puppeteer-core` (`^5.5.0`) dependency has been upgraded to version `^9.0.0`. Puppeteer uses Chromium v91 instead of Chromium v88. See the full list of breaking changes of [9.0.0](https://github.com/puppeteer/puppeteer/releases/tag/v9.0.0) and lower versions ([#31138](https://github.com/WordPress/gutenberg/pull/31138)). - -### New Features - -- Include a Jest Reporter that formats test results for GitHub Actions annotations ([#31041](https://github.com/WordPress/gutenberg/pull/31041)). -- Have the `format` command ignore files listed in a `.prettierignore` file, add a fallback `.prettierignore` to the package ([30844](https://github.com/WordPress/gutenberg/pull/30844)). -- The e2e tests are now using [`jest-circus`](https://github.com/facebook/jest/tree/master/packages/jest-circus) as the test runner. This enable us to capture screenshots at the time the tests failed. The unit tests are also using the same test runner for consistency ([#28449](https://github.com/WordPress/gutenberg/pull/28449), [#31178](https://github.com/WordPress/gutenberg/pull/31178)). - ### Breaking Changes - Rename `format-js` script to `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)). diff --git a/packages/scripts/README.md b/packages/scripts/README.md index ab94f94cdb6c4..ea507e8625c1d 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -150,7 +150,7 @@ This is how you execute the script with presented setup: When you run commands similar to the `npm run format:src` example above, you can provide a file, a directory, or `glob` syntax or any combination of them. -By default, files located in `build`, `node_modules`, and `vendor` folders are ignored. You can customize the list of ignored files and directories by adding them to a `.prettierignore` file in your project. +By default, files located in `build`, `node_modules`, and `vendor` folders are ignored. ### `lint-js` diff --git a/packages/scripts/config/.prettierignore b/packages/scripts/config/.prettierignore deleted file mode 100644 index 411a5b8a43744..0000000000000 --- a/packages/scripts/config/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -build -vendor diff --git a/packages/scripts/config/jest-e2e.config.js b/packages/scripts/config/jest-e2e.config.js index 9714664ca7f53..05b10123a7b87 100644 --- a/packages/scripts/config/jest-e2e.config.js +++ b/packages/scripts/config/jest-e2e.config.js @@ -20,10 +20,6 @@ const jestE2EConfig = { setupFilesAfterEnv: [ 'expect-puppeteer' ], testMatch: [ '**/specs/**/*.[jt]s', '**/?(*.)spec.[jt]s' ], testPathIgnorePatterns: [ '/node_modules/' ], - reporters: [ - 'default', - path.join( __dirname, 'jest-github-actions-reporter.js' ), - ], }; if ( ! hasBabelConfig() ) { diff --git a/packages/scripts/config/jest-environment-puppeteer/index.js b/packages/scripts/config/jest-environment-puppeteer/index.js index bb8d5bbda00c9..76f1b4db2ba69 100644 --- a/packages/scripts/config/jest-environment-puppeteer/index.js +++ b/packages/scripts/config/jest-environment-puppeteer/index.js @@ -205,11 +205,11 @@ class PuppeteerEnvironment extends NodeEnvironment { replacement: '-', } ); await writeFile( - path.join( ARTIFACTS_PATH, `${ fileName }-snapshot.html` ), + `${ ARTIFACTS_PATH }/${ fileName }-snapshot.html`, await this.global.page.content() ); await this.global.page.screenshot( { - path: path.join( ARTIFACTS_PATH, `${ fileName }.jpg` ), + path: `${ ARTIFACTS_PATH }/${ fileName }.jpg`, } ); } diff --git a/packages/scripts/config/jest-github-actions-reporter.js b/packages/scripts/config/jest-github-actions-reporter.js deleted file mode 100644 index 9a8f292beb80c..0000000000000 --- a/packages/scripts/config/jest-github-actions-reporter.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Based on https://github.com/facebook/jest/pull/11320. - * - * We might be able to remove this file once the Jest PR is merged, and a - * version of Jest that includes the GithubActionsReporter is released. - */ - -/** - * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const newLine = /\n/g; -const encodedNewLine = '%0A'; -const lineAndColumnInStackTrace = /^.*?:([0-9]+):([0-9]+).*$/; - -class GithubActionsReporter { - async onRunComplete( _contexts, _aggregatedResults ) { - if ( ! process.env.GITHUB_ACTIONS ) { - return; - } - - if ( ! _aggregatedResults ) { - return; - } - const messages = getMessages( _aggregatedResults.testResults ); - - for ( const message of messages ) { - // eslint-disable-next-line no-console - console.log( message ); - } - } -} - -function getMessages( results ) { - if ( ! results ) return []; - - return results.reduce( - flatMap( ( { testFilePath, testResults } ) => - testResults - .filter( ( r ) => r.status === 'failed' ) - .reduce( - flatMap( ( r ) => r.failureMessages ), - [] - ) - .map( ( m ) => m.replace( newLine, encodedNewLine ) ) - .map( ( m ) => lineAndColumnInStackTrace.exec( m ) ) - .filter( ( m ) => m !== null ) - .map( - ( [ message, line, col ] ) => - `::error file=${ testFilePath },line=${ line },col=${ col }::${ message }` - ) - ), - [] - ); -} - -function flatMap( fn ) { - return ( out, entry ) => out.concat( ...fn( entry ) ); -} - -module.exports = GithubActionsReporter; diff --git a/packages/scripts/config/jest-unit.config.js b/packages/scripts/config/jest-unit.config.js index a6228f60b02d5..3244e163925d6 100644 --- a/packages/scripts/config/jest-unit.config.js +++ b/packages/scripts/config/jest-unit.config.js @@ -9,12 +9,7 @@ const path = require( 'path' ); const { hasBabelConfig } = require( '../utils' ); const jestUnitConfig = { - testRunner: 'jest-circus/runner', preset: '@wordpress/jest-preset-default', - reporters: [ - 'default', - path.join( __dirname, 'jest-github-actions-reporter.js' ), - ], }; if ( ! hasBabelConfig() ) { diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 16b7ac9d3d11b..604cf6d7c30f2 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/scripts", - "version": "15.0.0", + "version": "14.1.1", "description": "Collection of reusable scripts for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -66,10 +66,9 @@ "mini-css-extract-plugin": "^1.3.9", "minimist": "^1.2.0", "npm-package-json-lint": "^5.0.0", - "postcss": "^8.2.2", "postcss-loader": "^4.2.0", "prettier": "npm:wp-prettier@2.2.1-beta-1", - "puppeteer-core": "^9.0.0", + "puppeteer-core": "^5.5.0", "read-pkg-up": "^1.0.1", "resolve-bin": "^0.4.0", "sass": "^1.26.11", diff --git a/packages/scripts/scripts/format.js b/packages/scripts/scripts/format.js index 7ac808de4457a..6dd655bdab701 100644 --- a/packages/scripts/scripts/format.js +++ b/packages/scripts/scripts/format.js @@ -79,13 +79,13 @@ if ( ! hasPrettierConfig() ) { ]; } -// If `--ignore-path` is not explicitly specified, use the project's or global .prettierignore. +// If `--ignore-path` is not explicitly specified, use the project's or global .eslintignore let ignorePath = getArgFromCLI( '--ignore-path' ); if ( ! ignorePath ) { - if ( hasProjectFile( '.prettierignore' ) ) { - ignorePath = fromProjectRoot( '.prettierignore' ); + if ( hasProjectFile( '.eslintignore' ) ) { + ignorePath = fromProjectRoot( '.eslintignore' ); } else { - ignorePath = fromConfigRoot( '.prettierignore' ); + ignorePath = fromConfigRoot( '.eslintignore' ); } } const ignoreArgs = [ '--ignore-path', ignorePath ]; diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md index 72e9b497991c9..609237ab7a4ff 100644 --- a/packages/server-side-render/CHANGELOG.md +++ b/packages/server-side-render/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.21.0 (2021-03-17) ## 1.17.0 (2020-09-03) diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index 50743c8281370..26d33cd94def4 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -18,7 +18,7 @@ Install the module npm install @wordpress/server-side-render --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json index 3e1742bc3a4a9..287b1bd1b750a 100644 --- a/packages/server-side-render/package.json +++ b/packages/server-side-render/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/server-side-render", - "version": "1.21.3", + "version": "1.21.2", "description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md index a0c8f7e6fd4c7..d58f344a74522 100644 --- a/packages/shortcode/CHANGELOG.md +++ b/packages/shortcode/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.13.0 (2021-03-17) ## 2.0.1 (2018-09-30) diff --git a/packages/shortcode/README.md b/packages/shortcode/README.md index 1beaba7e6ec34..1179a3a3d2472 100644 --- a/packages/shortcode/README.md +++ b/packages/shortcode/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/shortcode --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json index 3afa85126b5e5..008e69cf9867d 100644 --- a/packages/shortcode/package.json +++ b/packages/shortcode/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md index 765b546d3b8c0..966d1c8214ffa 100644 --- a/packages/token-list/CHANGELOG.md +++ b/packages/token-list/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.15.0 (2021-03-17) ## 1.10.0 (2020-04-15) diff --git a/packages/token-list/README.md b/packages/token-list/README.md index e47cc35e04101..2a80ee8667283 100644 --- a/packages/token-list/README.md +++ b/packages/token-list/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/token-list ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/token-list/package.json b/packages/token-list/package.json index 18072bd5b39d3..8fde438611e74 100644 --- a/packages/token-list/package.json +++ b/packages/token-list/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/token-list", - "version": "1.15.3", + "version": "1.15.2", "description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md index e1291501bdec9..e7562fd0d66d0 100644 --- a/packages/url/CHANGELOG.md +++ b/packages/url/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.22.0 (2021-03-17) ## 2.21.0 (2021-01-05) diff --git a/packages/url/README.md b/packages/url/README.md index bec8886687b66..84d5aa67961ea 100644 --- a/packages/url/README.md +++ b/packages/url/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/url --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage diff --git a/packages/url/package.json b/packages/url/package.json index 2b096aa44db2c..ba52c6cfd8faf 100644 --- a/packages/url/package.json +++ b/packages/url/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md index 165cd623f8c8e..a119f0d02b9b2 100644 --- a/packages/viewport/CHANGELOG.md +++ b/packages/viewport/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.26.0 (2021-03-17) ## 2.25.0 (2020-12-17) diff --git a/packages/viewport/README.md b/packages/viewport/README.md index a7e8ab7fdb381..6c15ad6aa1570 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/viewport --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Usage @@ -92,7 +92,7 @@ _Related_ _Type_ -- `Object` +- `Object` # **withViewportMatch** diff --git a/packages/viewport/package.json b/packages/viewport/package.json index 4debf58baa7f5..e2d35d8013f8d 100644 --- a/packages/viewport/package.json +++ b/packages/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/viewport", - "version": "2.26.3", + "version": "2.26.2", "description": "Viewport module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md index 415e85b7b30f8..a2b38504a9018 100644 --- a/packages/warning/CHANGELOG.md +++ b/packages/warning/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 1.4.0 (2021-03-17) ## 1.1.0 (2020-04-15) diff --git a/packages/warning/README.md b/packages/warning/README.md index 47a7270550692..034991251c89c 100644 --- a/packages/warning/README.md +++ b/packages/warning/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/warning --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## Reducing bundle size diff --git a/packages/warning/package.json b/packages/warning/package.json index 524b524d29276..699bdcc3c098a 100644 --- a/packages/warning/package.json +++ b/packages/warning/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md index 898626b951046..73641a2ccea9e 100644 --- a/packages/wordcount/CHANGELOG.md +++ b/packages/wordcount/CHANGELOG.md @@ -2,11 +2,6 @@ ## Unreleased -### Breaking Changes - -- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/. -- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/. - ## 2.15.0 (2021-03-17) ## 2.0.3 (2018-10-29) diff --git a/packages/wordcount/README.md b/packages/wordcount/README.md index ace076c97108c..9ffff147f474c 100644 --- a/packages/wordcount/README.md +++ b/packages/wordcount/README.md @@ -10,7 +10,7 @@ Install the module npm install @wordpress/wordcount --save ``` -_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._ +_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ ## API diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json index 4dea2f52a5fea..2640fa5fb4fd1 100644 --- a/packages/wordcount/package.json +++ b/packages/wordcount/package.json @@ -18,9 +18,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", diff --git a/phpunit/class-rest-widget-types-controller-test.php b/phpunit/class-rest-widget-types-controller-test.php index 00529dd13d23e..55601fae72eed 100644 --- a/phpunit/class-rest-widget-types-controller-test.php +++ b/phpunit/class-rest-widget-types-controller-test.php @@ -265,16 +265,6 @@ public function test_encode_form_data_with_no_input() { "\t\t

", $data['form'] ); - $this->assertStringMatchesFormat( - "
\n" . - "\t\t\t\t
\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t
\n" . - "\t\t\t
", - $data['preview'] - ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array() ) ), @@ -304,16 +294,6 @@ public function test_encode_form_data_with_instance() { "\t\t

", $data['form'] ); - $this->assertStringMatchesFormat( - "

Test title

\n" . - "\t\t\t\t
\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t
\n" . - "\t\t\t
", - $data['preview'] - ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Test title' ) ) ), @@ -337,16 +317,6 @@ public function test_encode_form_data_with_form_data() { "\t\t

", $data['form'] ); - $this->assertStringMatchesFormat( - "

Updated title

\n" . - "\t\t\t\t
\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t
\n" . - "\t\t\t
", - $data['preview'] - ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Updated title' ) ) ), @@ -378,16 +348,6 @@ public function test_encode_form_data_no_raw() { "\t\t

", $data['form'] ); - $this->assertStringMatchesFormat( - "

Test title

\n" . - "\t\t\t\t
\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t\t\n" . - "\t\t\t\t
\n" . - "\t\t\t
", - $data['preview'] - ); $this->assertEqualSets( array( 'encoded' => base64_encode( serialize( array( 'title' => 'Test title' ) ) ), diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 372f6c7a7ba55..fa9f95a0d207e 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -8,6 +8,143 @@ class WP_Theme_JSON_Test extends WP_UnitTestCase { + function test_schema_validation_subtree_is_removed_if_key_invalid() { + $theme_json = new WP_Theme_JSON( + array( + 'invalid/key' => 'content', + 'styles' => array( + 'invalid/key' => array( + 'color' => array( + 'custom' => 'false', + ), + ), + 'core/group' => array( + 'invalid/key' => array( + 'custom' => false, + 'background' => 'red', + ), + 'color' => array( + 'invalid/key' => true, + 'background' => 'red', + ), + 'spacing' => array( + 'padding' => array( + 'invalid/key' => false, + 'top' => '10px', + ), + ), + ), + ), + ) + ); + $result = $theme_json->get_raw_data(); + + $expected = array( + 'styles' => array( + 'core/group' => array( + 'color' => array( + 'background' => 'red', + ), + 'spacing' => array( + 'padding' => array( + 'top' => '10px', + ), + ), + ), + ), + ); + + $this->assertEqualSetsWithIndex( $expected, $result ); + } + + function test_schema_validation_subtree_is_removed_if_not_array() { + $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; + $theme_json = new WP_Theme_JSON( + array( + 'settings' => 'invalid/not/array', + 'styles' => array( + $root_name => 'invalid/not/array', + 'core/paragraph' => array( + 'invalid/not/array' => false, + ), + 'core/group' => array( + 'invalid/not/array' => false, + 'color' => array( + 'link' => 'pink', + ), + 'typography' => array( + 'invalid/key' => false, + ), + 'spacing' => array( + 'padding' => array( + 'invalid/key' => '10px', + ), + ), + ), + ), + ) + ); + + $actual = $theme_json->get_raw_data(); + $expected = array( + 'styles' => array( + 'core/group' => array( + 'color' => array( + 'link' => 'pink', + ), + ), + ), + ); + + $this->assertEqualSetsWithIndex( $expected, $actual ); + } + + function test_schema_validation_subtree_is_removed_if_empty() { + $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; + $theme_json = new WP_Theme_JSON( + array( + 'settings' => array( + 'invalid/key' => array( + 'color' => array( + 'custom' => false, + ), + ), + $root_name => array( + 'invalid/key' => false, + ), + ), + 'styles' => array( + $root_name => array( + 'color' => array( + 'link' => 'blue', + ), + 'typography' => array( + 'invalid/key' => false, + ), + 'spacing' => array( + 'padding' => array( + 'invalid/key' => '10px', + ), + ), + ), + ), + ) + ); + $result = $theme_json->get_raw_data(); + + $expected = array( + 'styles' => array( + $root_name => array( + 'color' => array( + 'link' => 'blue', + ), + ), + ), + ); + + $this->assertEqualSetsWithIndex( $expected, $result ); + } + function test_get_settings() { $root_name = WP_Theme_JSON::ROOT_BLOCK_NAME; // See schema at WP_Theme_JSON::SCHEMA. @@ -108,15 +245,15 @@ function test_get_stylesheet() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet() ); $this->assertEquals( - 'body{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + ':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet( 'block_styles' ) ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}', + ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}', $theme_json->get_stylesheet( 'css_variables' ) ); } @@ -187,7 +324,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', + ':root{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}', $theme_json->get_stylesheet() ); } @@ -889,4 +1026,105 @@ function test_get_editor_settings_custom_units_can_be_filtered() { $this->assertEqualSetsWithIndex( $expected, $actual['settings']['defaults']['spacing'] ); } + function test_get_style_nodes() { + $theme_json = array( + 'styles' => array( + 'defaults' => array( 'color' => array( 'background' => 'red' ) ), + 'root' => array( 'color' => array( 'background' => 'green' ) ), + 'core/paragraph' => array( 'color' => array( 'background' => 'blue' ) ), + 'core/heading/h1' => array( 'color' => array( 'background' => 'yellow' ) ), + 'core/group' => array( 'color' => array( 'background' => 'pink' ) ), + 'core/post-title' => array( 'color' => array( 'background' => 'white' ) ), + ), + ); + $selectors = array( + 'defaults' => array( 'selector' => ':root' ), + 'root' => array( 'selector' => ':root' ), + 'core/paragraph' => array( 'selector' => 'p' ), + 'core/heading/h1' => array( 'selector' => 'h1' ), + 'core/group' => array( 'selector' => '.wp-block-group' ), + ); + + $actual = WP_Theme_JSON::get_style_nodes( $theme_json, $selectors ); + + $expected = array( + array( + 'path' => array( 'styles', 'defaults' ), + 'selector' => ':root', + ), + array( + 'path' => array( 'styles', 'root' ), + 'selector' => ':root', + ), + array( + 'path' => array( 'styles', 'core/paragraph' ), + 'selector' => 'p', + ), + array( + 'path' => array( 'styles', 'core/heading/h1' ), + 'selector' => 'h1', + ), + array( + 'path' => array( 'styles', 'core/group' ), + 'selector' => '.wp-block-group', + ), + array( + 'path' => array( 'styles', 'core/post-title' ), + 'selector' => null, + ), + ); + + $this->assertEqualSets( $expected, $actual ); + } + + function test_get_setting_nodes() { + $theme_json = array( + 'settings' => array( + 'defaults' => array( 'border' => array( 'customRadius' => true ) ), + 'root' => array( 'border' => array( 'customRadius' => false ) ), + 'core/paragraph' => array( 'border' => array( 'customRadius' => true ) ), + 'core/heading/h1' => array( 'border' => array( 'customRadius' => false ) ), + 'core/group' => array( 'border' => array( 'customRadius' => true ) ), + 'core/post-title' => array( 'border' => array( 'customRadius' => false ) ), + ), + ); + $selectors = array( + 'defaults' => array( 'selector' => ':root' ), + 'root' => array( 'selector' => ':root' ), + 'core/paragraph' => array( 'selector' => 'p' ), + 'core/heading/h1' => array( 'selector' => 'h1' ), + 'core/group' => array( 'selector' => '.wp-block-group' ), + ); + + $actual = WP_Theme_JSON::get_setting_nodes( $theme_json, $selectors ); + + $expected = array( + array( + 'path' => array( 'settings', 'defaults' ), + 'selector' => ':root', + ), + array( + 'path' => array( 'settings', 'root' ), + 'selector' => ':root', + ), + array( + 'path' => array( 'settings', 'core/paragraph' ), + 'selector' => 'p', + ), + array( + 'path' => array( 'settings', 'core/heading/h1' ), + 'selector' => 'h1', + ), + array( + 'path' => array( 'settings', 'core/group' ), + 'selector' => '.wp-block-group', + ), + array( + 'path' => array( 'settings', 'core/post-title' ), + 'selector' => null, + ), + ); + + $this->assertEqualSets( $expected, $actual ); + } } diff --git a/readme.txt b/readme.txt index b490335e4aad4..c26c54e06da4f 100644 --- a/readme.txt +++ b/readme.txt @@ -55,4 +55,4 @@ View release page. +To read the changelog for Gutenberg 10.5.0-rc.1, please navigate to the release page. diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js index 84277c929d817..346c2f288efd4 100644 --- a/test/unit/jest.config.js +++ b/test/unit/jest.config.js @@ -43,8 +43,4 @@ module.exports = { 'jest-watch-typeahead/filename', 'jest-watch-typeahead/testname', ], - reporters: [ - 'default', - 'packages/scripts/config/jest-github-actions-reporter.js', - ], }; From bc087bae52dc6d455686c47acc1be54f5cb8e24d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 5 May 2021 10:25:05 +0200 Subject: [PATCH 10/16] try to solve merge conflict --- lib/class-wp-theme-json.php | 10 +- lib/experimental-default-theme.json | 484 +++++++++++++++------------- 2 files changed, 267 insertions(+), 227 deletions(-) diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index 1ec295a06dc77..d8320a810c21c 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -89,10 +89,10 @@ class WP_Theme_JSON { 'fontSize' => null, 'fontStyle' => null, 'fontWeight' => null, + 'letterSpacing' => null, 'lineHeight' => null, 'textDecoration' => null, 'textTransform' => null, - 'letterSpacing' => null, ), ); @@ -117,6 +117,7 @@ class WP_Theme_JSON { ), 'typography' => array( 'customFontSize' => null, + 'customLetterSpacing' => null, 'customLineHeight' => null, 'dropCap' => null, 'fontFamilies' => null, @@ -125,7 +126,6 @@ class WP_Theme_JSON { 'customFontWeight' => null, 'customTextDecorations' => null, 'customTextTransforms' => null, - 'customLetterSpacing' => null, ), 'custom' => null, 'layout' => null, @@ -258,6 +258,9 @@ class WP_Theme_JSON { 'font-weight' => array( 'value' => array( 'typography', 'fontWeight' ), ), + 'letter-spacing' => array( + 'value' => array( 'typography', 'letterSpacing' ), + ), 'line-height' => array( 'value' => array( 'typography', 'lineHeight' ), ), @@ -271,9 +274,6 @@ class WP_Theme_JSON { 'text-transform' => array( 'value' => array( 'typography', 'textTransform' ), ), - 'letter-spacing' => array( - 'value' => array( 'typography', 'letterSpacing' ), - ), ); /** diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 052e396aa734f..15bf5a6533b29 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -1,228 +1,268 @@ { + "version": 1, "settings": { - "defaults": { - "color": { - "palette": [ - { - "name": "Black", - "slug": "black", - "color": "#000000" - }, - { - "name": "Cyan bluish gray", - "slug": "cyan-bluish-gray", - "color": "#abb8c3" - }, - { - "name": "White", - "slug": "white", - "color": "#ffffff" - }, - { - "name": "Pale pink", - "slug": "pale-pink", - "color": "#f78da7" - }, - { - "name": "Vivid red", - "slug": "vivid-red", - "color": "#cf2e2e" - }, - { - "name": "Luminous vivid orange", - "slug": "luminous-vivid-orange", - "color": "#ff6900" - }, - { - "name": "Luminous vivid amber", - "slug": "luminous-vivid-amber", - "color": "#fcb900" - }, - { - "name": "Light green cyan", - "slug": "light-green-cyan", - "color": "#7bdcb5" - }, - { - "name": "Vivid green cyan", - "slug": "vivid-green-cyan", - "color": "#00d084" - }, - { - "name": "Pale cyan blue", - "slug": "pale-cyan-blue", - "color": "#8ed1fc" - }, - { - "name": "Vivid cyan blue", - "slug": "vivid-cyan-blue", - "color": "#0693e3" - }, - { - "name": "Vivid purple", - "slug": "vivid-purple", - "color": "#9b51e0" - } - ], - "gradients": [ - { - "name": "Vivid cyan blue to vivid purple", - "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)", - "slug": "vivid-cyan-blue-to-vivid-purple" - }, - { - "name": "Light green cyan to vivid green cyan", - "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", - "slug": "light-green-cyan-to-vivid-green-cyan" - }, - { - "name": "Luminous vivid amber to luminous vivid orange", - "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", - "slug": "luminous-vivid-amber-to-luminous-vivid-orange" - }, - { - "name": "Luminous vivid orange to vivid red", - "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", - "slug": "luminous-vivid-orange-to-vivid-red" - }, - { - "name": "Very light gray to cyan bluish gray", - "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", - "slug": "very-light-gray-to-cyan-bluish-gray" - }, - { - "name": "Cool to warm spectrum", - "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", - "slug": "cool-to-warm-spectrum" - }, - { - "name": "Blush light purple", - "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", - "slug": "blush-light-purple" - }, - { - "name": "Blush bordeaux", - "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", - "slug": "blush-bordeaux" - }, - { - "name": "Luminous dusk", - "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", - "slug": "luminous-dusk" - }, - { - "name": "Pale ocean", - "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", - "slug": "pale-ocean" - }, - { - "name": "Electric grass", - "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", - "slug": "electric-grass" - }, - { - "name": "Midnight", - "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", - "slug": "midnight" - } - ], - "duotone": [ - { - "name": "Dark grayscale" , - "colors": [ "#000000", "#7f7f7f" ], - "slug": "dark-grayscale" - }, - { - "name": "Grayscale" , - "colors": [ "#000000", "#ffffff" ], - "slug": "grayscale" - }, - { - "name": "Purple and yellow" , - "colors": [ "#8c00b7", "#fcff41" ], - "slug": "purple-yellow" - }, - { - "name": "Blue and red" , - "colors": [ "#000097", "#ff4747" ], - "slug": "blue-red" - }, - { - "name": "Midnight" , - "colors": [ "#000000", "#00a5ff" ], - "slug": "midnight" - }, - { - "name": "Magenta and yellow" , - "colors": [ "#c7005a", "#fff278" ], - "slug": "magenta-yellow" - }, - { - "name": "Purple and green" , - "colors": [ "#a60072", "#67ff66" ], - "slug": "purple-green" - }, - { - "name": "Blue and orange" , - "colors": [ "#1900d8", "#ffa96b" ], - "slug": "blue-orange" - } - ], - "custom": true, - "link": false, - "customGradient": true - }, - "typography": { - "dropCap": true, - "customFontSize": true, - "customLineHeight": false, - "customFontStyle": true, - "customFontWeight": true, - "customTextTransforms": true, - "customTextDecorations": true, - "customLetterSpacing": true, - "fontSizes": [ - { - "name": "Small", - "slug": "small", - "size": "13px" - }, - { - "name": "Normal", - "slug": "normal", - "size": "16px" - }, - { - "name": "Medium", - "slug": "medium", - "size": "20px" - }, - { - "name": "Large", - "slug": "large", - "size": "36px" - }, - { - "name": "Huge", - "slug": "huge", - "size": "42px" - } - ] - }, - "spacing": { - "customPadding": false, - "units": [ "px", "em", "rem", "vh", "vw" ] - }, - "border": { - "customColor": false, - "customRadius": false, - "customStyle": false, - "customWidth": false - } + "color": { + "palette": [ + { + "name": "Black", + "slug": "black", + "color": "#000000" + }, + { + "name": "Cyan bluish gray", + "slug": "cyan-bluish-gray", + "color": "#abb8c3" + }, + { + "name": "White", + "slug": "white", + "color": "#ffffff" + }, + { + "name": "Pale pink", + "slug": "pale-pink", + "color": "#f78da7" + }, + { + "name": "Vivid red", + "slug": "vivid-red", + "color": "#cf2e2e" + }, + { + "name": "Luminous vivid orange", + "slug": "luminous-vivid-orange", + "color": "#ff6900" + }, + { + "name": "Luminous vivid amber", + "slug": "luminous-vivid-amber", + "color": "#fcb900" + }, + { + "name": "Light green cyan", + "slug": "light-green-cyan", + "color": "#7bdcb5" + }, + { + "name": "Vivid green cyan", + "slug": "vivid-green-cyan", + "color": "#00d084" + }, + { + "name": "Pale cyan blue", + "slug": "pale-cyan-blue", + "color": "#8ed1fc" + }, + { + "name": "Vivid cyan blue", + "slug": "vivid-cyan-blue", + "color": "#0693e3" + }, + { + "name": "Vivid purple", + "slug": "vivid-purple", + "color": "#9b51e0" + } + ], + "gradients": [ + { + "name": "Vivid cyan blue to vivid purple", + "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)", + "slug": "vivid-cyan-blue-to-vivid-purple" + }, + { + "name": "Light green cyan to vivid green cyan", + "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", + "slug": "light-green-cyan-to-vivid-green-cyan" + }, + { + "name": "Luminous vivid amber to luminous vivid orange", + "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", + "slug": "luminous-vivid-amber-to-luminous-vivid-orange" + }, + { + "name": "Luminous vivid orange to vivid red", + "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", + "slug": "luminous-vivid-orange-to-vivid-red" + }, + { + "name": "Very light gray to cyan bluish gray", + "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", + "slug": "very-light-gray-to-cyan-bluish-gray" + }, + { + "name": "Cool to warm spectrum", + "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", + "slug": "cool-to-warm-spectrum" + }, + { + "name": "Blush light purple", + "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", + "slug": "blush-light-purple" + }, + { + "name": "Blush bordeaux", + "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", + "slug": "blush-bordeaux" + }, + { + "name": "Luminous dusk", + "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", + "slug": "luminous-dusk" + }, + { + "name": "Pale ocean", + "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", + "slug": "pale-ocean" + }, + { + "name": "Electric grass", + "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", + "slug": "electric-grass" + }, + { + "name": "Midnight", + "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", + "slug": "midnight" + } + ], + "duotone": [ + { + "name": "Dark grayscale", + "colors": [ + "#000000", + "#7f7f7f" + ], + "slug": "dark-grayscale" + }, + { + "name": "Grayscale", + "colors": [ + "#000000", + "#ffffff" + ], + "slug": "grayscale" + }, + { + "name": "Purple and yellow", + "colors": [ + "#8c00b7", + "#fcff41" + ], + "slug": "purple-yellow" + }, + { + "name": "Blue and red", + "colors": [ + "#000097", + "#ff4747" + ], + "slug": "blue-red" + }, + { + "name": "Midnight", + "colors": [ + "#000000", + "#00a5ff" + ], + "slug": "midnight" + }, + { + "name": "Magenta and yellow", + "colors": [ + "#c7005a", + "#fff278" + ], + "slug": "magenta-yellow" + }, + { + "name": "Purple and green", + "colors": [ + "#a60072", + "#67ff66" + ], + "slug": "purple-green" + }, + { + "name": "Blue and orange", + "colors": [ + "#1900d8", + "#ffa96b" + ], + "slug": "blue-orange" + } + ], + "custom": true, + "link": false, + "customGradient": true + }, + "typography": { + "dropCap": true, + "customFontSize": true, + "customLineHeight": false, + "customFontStyle": true, + "customFontWeight": true, + "customTextTransforms": true, + "customTextDecorations": true, + "customLetterSpacing": true, + "fontSizes": [ + { + "name": "Small", + "slug": "small", + "size": "13px" + }, + { + "name": "Normal", + "slug": "normal", + "size": "16px" + }, + { + "name": "Medium", + "slug": "medium", + "size": "20px" + }, + { + "name": "Large", + "slug": "large", + "size": "36px" + }, + { + "name": "Huge", + "slug": "huge", + "size": "42px" + } + ] + }, + "spacing": { + "customPadding": false, + "units": [ + "px", + "em", + "rem", + "vh", + "vw" + ] }, - "core/button": { - "border": { - "customRadius": true + "border": { + "customColor": false, + "customRadius": false, + "customStyle": false, + "customWidth": false + }, + "blocks": { + "core/button": { + "border": { + "customRadius": true + } + } + } + }, + "styles": { + "elements": { + "link": { + "color": { + "text": "#00E" + } } } } From cb62a80a6636c6b131c7ddc63655831fe5ca9fef Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 5 May 2021 13:18:35 +0200 Subject: [PATCH 11/16] Remove the reset button Remove the reset button. Add style.scss in order to position the visible label. Remove the limit on the negative value. --- .../letter-spacing-control/index.js | 35 ++++--------------- .../letter-spacing-control/style.scss | 4 +++ packages/block-editor/src/style.scss | 1 + 3 files changed, 12 insertions(+), 28 deletions(-) create mode 100644 packages/block-editor/src/components/letter-spacing-control/style.scss diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 9f4954900171d..5f9b1f4a2aa6a 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -2,10 +2,6 @@ * WordPress dependencies */ import { - Button, - Flex, - FlexItem, - FlexBlock, BaseControl, __experimentalUnitControl as UnitControl, } from '@wordpress/components'; @@ -46,30 +42,13 @@ export default function LetterSpacingControl( { value, onChange } ) { { __( 'Letter-spacing' ) } - - - - - - - - + ); } diff --git a/packages/block-editor/src/components/letter-spacing-control/style.scss b/packages/block-editor/src/components/letter-spacing-control/style.scss new file mode 100644 index 0000000000000..34917ec0a3454 --- /dev/null +++ b/packages/block-editor/src/components/letter-spacing-control/style.scss @@ -0,0 +1,4 @@ +.block-editor-letter-spacing-control .components-base-control__label { + display: block; + margin-bottom: 8px; +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 0d9b9b01cbde1..159c96d112ae1 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -37,6 +37,7 @@ @import "./components/duotone-control/style.scss"; @import "./components/font-appearance-control/style.scss"; @import "./components/justify-content-control/style.scss"; +@import "./components/letter-spacing-control/style.scss"; @import "./components/link-control/style.scss"; @import "./components/line-height-control/style.scss"; @import "./components/image-size-control/style.scss"; From 384457206986fa1b0636608c2c3f74f0605180e5 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Sat, 8 May 2021 05:33:38 +0200 Subject: [PATCH 12/16] linting --- lib/class-wp-theme-json.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index 5050c921c6cc9..cc381f393f15f 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -99,7 +99,7 @@ class WP_Theme_JSON { 'customFontSize' => null, 'customFontStyle' => null, 'customFontWeight' => null, - 'customLetterSpacing' => null, + 'customLetterSpacing' => null, 'customLineHeight' => null, 'customTextDecorations' => null, 'customTextTransforms' => null, From fdebc10e52435e13264e7952c12b9317aeb29a8d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 11 May 2021 04:59:31 +0200 Subject: [PATCH 13/16] Remove BaseControl --- .../letter-spacing-control/index.js | 24 +++++++------------ .../letter-spacing-control/style.scss | 4 ---- packages/block-editor/src/style.scss | 1 - 3 files changed, 8 insertions(+), 21 deletions(-) delete mode 100644 packages/block-editor/src/components/letter-spacing-control/style.scss diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 5f9b1f4a2aa6a..4aba5958c9f4a 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - BaseControl, - __experimentalUnitControl as UnitControl, -} from '@wordpress/components'; +import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; import { Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -38,17 +35,12 @@ const CSS_UNITS = [ */ export default function LetterSpacingControl( { value, onChange } ) { return ( - - - { __( 'Letter-spacing' ) } - - - + ); } diff --git a/packages/block-editor/src/components/letter-spacing-control/style.scss b/packages/block-editor/src/components/letter-spacing-control/style.scss deleted file mode 100644 index 34917ec0a3454..0000000000000 --- a/packages/block-editor/src/components/letter-spacing-control/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.block-editor-letter-spacing-control .components-base-control__label { - display: block; - margin-bottom: 8px; -} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 159c96d112ae1..0d9b9b01cbde1 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -37,7 +37,6 @@ @import "./components/duotone-control/style.scss"; @import "./components/font-appearance-control/style.scss"; @import "./components/justify-content-control/style.scss"; -@import "./components/letter-spacing-control/style.scss"; @import "./components/link-control/style.scss"; @import "./components/line-height-control/style.scss"; @import "./components/image-size-control/style.scss"; From aec6ade279ed119771c75c0c2404c8d6d0cc97a1 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 May 2021 13:26:03 +0200 Subject: [PATCH 14/16] Replace useEditorFeature --- packages/block-editor/src/hooks/letter-spacing.js | 4 ++-- packages/block-library/src/site-title/block.json | 2 ++ packages/edit-site/src/components/sidebar/typography-panel.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js index 0b4b2d844fab0..73f9aabd9bb4d 100644 --- a/packages/block-editor/src/hooks/letter-spacing.js +++ b/packages/block-editor/src/hooks/letter-spacing.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import LetterSpacingControl from '../components/letter-spacing-control'; -import useEditorFeature from '../components/use-editor-feature'; +import useSetting from '../components/use-setting'; import { cleanEmptyObject } from './utils'; /** @@ -65,7 +65,7 @@ export function useIsLetterSpacingDisabled( { name: blockName } = {} ) { blockName, LETTER_SPACING_SUPPORT_KEY ); - const hasLetterSpacing = useEditorFeature( + const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' ); diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 1b1b2fdaba471..2992edfa9ad63 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -29,6 +29,8 @@ "lineHeight": true, "__experimentalFontFamily": true, "__experimentalTextTransform": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, "__experimentalLetterSpacing": true } } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index ea45ad02dda8d..36785fd34ca9d 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -46,7 +46,7 @@ function useHasAppearanceControl( { supports, name } ) { function useHasLetterSpacingControl( { supports, name } ) { return ( - useEditorFeature( 'typography.customLetterSpacing', name ) && + useSetting( 'typography.customLetterSpacing', name ) && supports.includes( 'letterSpacing' ) ); } From 888fc1c86489283a764db350ab5401e6c6abb67f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 May 2021 13:55:36 +0200 Subject: [PATCH 15/16] linting --- packages/block-editor/src/hooks/letter-spacing.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js index 73f9aabd9bb4d..0a70474c47803 100644 --- a/packages/block-editor/src/hooks/letter-spacing.js +++ b/packages/block-editor/src/hooks/letter-spacing.js @@ -65,9 +65,7 @@ export function useIsLetterSpacingDisabled( { name: blockName } = {} ) { blockName, LETTER_SPACING_SUPPORT_KEY ); - const hasLetterSpacing = useSetting( - 'typography.customLetterSpacing' - ); + const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' ); return notSupported || ! hasLetterSpacing; } From a84084512ee9265cc60915bf9575030d334cd142 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 26 May 2021 12:06:16 +0200 Subject: [PATCH 16/16] try to resolve merge conflict --- ...heme-json.php => class-wp-theme-json-gutenberg.php} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename lib/{class-wp-theme-json.php => class-wp-theme-json-gutenberg.php} (99%) diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json-gutenberg.php similarity index 99% rename from lib/class-wp-theme-json.php rename to lib/class-wp-theme-json-gutenberg.php index 95a2a58abfaf4..b78ba435f28fc 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -9,7 +9,7 @@ * Class that encapsulates the processing of * structures that adhere to the theme.json spec. */ -class WP_Theme_JSON { +class WP_Theme_JSON_Gutenberg { /** * Container of data in theme.json format. @@ -240,7 +240,7 @@ class WP_Theme_JSON { 'font-weight' => array( 'value' => array( 'typography', 'fontWeight' ), ), - 'letter-spacing' => array( + 'letter-spacing' => array( 'value' => array( 'typography', 'letterSpacing' ), ), 'line-height' => array( @@ -1080,9 +1080,9 @@ public function get_stylesheet( $type = 'all' ) { /** * Merge new incoming data. * - * @param WP_Theme_JSON $incoming Data to merge. - * @param string $update_or_remove Whether update or remove existing colors - * for which the incoming data has a duplicated slug. + * @param WP_Theme_JSON_Gutenberg $incoming Data to merge. + * @param string $update_or_remove Whether update or remove existing colors + * for which the incoming data has a duplicated slug. */ public function merge( $incoming, $update_or_remove = 'remove' ) { $incoming_data = $incoming->get_raw_data();