From 727b89a4c83146fc8ee25293e674224b34bca707 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 7 Jul 2021 01:43:59 +0300 Subject: [PATCH 01/40] Merge pull request from GHSA-43mp-gc69-2cjm --- lib/compat/wordpress-5.8/index.php | 58 ++++++++++++++----- packages/block-library/src/post-terms/edit.js | 2 +- .../block-library/src/post-terms/index.php | 4 ++ .../src/post-terms/use-post-terms.js | 10 +++- 4 files changed, 57 insertions(+), 17 deletions(-) diff --git a/lib/compat/wordpress-5.8/index.php b/lib/compat/wordpress-5.8/index.php index 6aeac5d21b8271..9427ce463500af 100644 --- a/lib/compat/wordpress-5.8/index.php +++ b/lib/compat/wordpress-5.8/index.php @@ -35,8 +35,11 @@ function build_query_vars_from_query_block( $block, $page ) { ); if ( isset( $block->context['query'] ) ) { - if ( isset( $block->context['query']['postType'] ) ) { - $query['post_type'] = $block->context['query']['postType']; + if ( ! empty( $block->context['query']['postType'] ) ) { + $post_type_param = $block->context['query']['postType']; + if ( is_post_type_viewable( $post_type_param ) ) { + $query['post_type'] = $post_type_param; + } } if ( isset( $block->context['query']['sticky'] ) && ! empty( $block->context['query']['sticky'] ) ) { $sticky = get_option( 'sticky_posts' ); @@ -46,29 +49,54 @@ function build_query_vars_from_query_block( $block, $page ) { $query['post__not_in'] = array_merge( $query['post__not_in'], $sticky ); } } - if ( isset( $block->context['query']['exclude'] ) ) { - $query['post__not_in'] = array_merge( $query['post__not_in'], $block->context['query']['exclude'] ); + if ( ! empty( $block->context['query']['exclude'] ) ) { + $excluded_post_ids = array_map( 'intval', $block->context['query']['exclude'] ); + $excluded_post_ids = array_filter( $excluded_post_ids ); + $query['post__not_in'] = array_merge( $query['post__not_in'], $excluded_post_ids ); } - if ( isset( $block->context['query']['perPage'] ) ) { - $query['offset'] = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset']; - $query['posts_per_page'] = $block->context['query']['perPage']; + if ( + isset( $block->context['query']['perPage'] ) && + is_numeric( $block->context['query']['perPage'] ) + ) { + $per_page = absint( $block->context['query']['perPage'] ); + $offset = 0; + + if ( + isset( $block->context['query']['offset'] ) && + is_numeric( $block->context['query']['offset'] ) + ) { + $offset = absint( $block->context['query']['offset'] ); + } + + $query['offset'] = ( $per_page * ( $page - 1 ) ) + $offset; + $query['posts_per_page'] = $per_page; } - if ( isset( $block->context['query']['categoryIds'] ) ) { - $query['category__in'] = $block->context['query']['categoryIds']; + if ( ! empty( $block->context['query']['categoryIds'] ) ) { + $term_ids = array_map( 'intval', $block->context['query']['categoryIds'] ); + $term_ids = array_filter( $term_ids ); + $query['category__in'] = $term_ids; } - if ( isset( $block->context['query']['tagIds'] ) ) { - $query['tag__in'] = $block->context['query']['tagIds']; + if ( ! empty( $block->context['query']['tagIds'] ) ) { + $term_ids = array_map( 'intval', $block->context['query']['tagIds'] ); + $term_ids = array_filter( $term_ids ); + $query['tag__in'] = $term_ids; } - if ( isset( $block->context['query']['order'] ) ) { + if ( + isset( $block->context['query']['order'] ) && + in_array( strtoupper( $block->context['query']['order'] ), array( 'ASC', 'DESC' ), true ) + ) { $query['order'] = strtoupper( $block->context['query']['order'] ); } if ( isset( $block->context['query']['orderBy'] ) ) { $query['orderby'] = $block->context['query']['orderBy']; } - if ( isset( $block->context['query']['author'] ) ) { - $query['author'] = $block->context['query']['author']; + if ( + isset( $block->context['query']['author'] ) && + (int) $block->context['query']['author'] > 0 + ) { + $query['author'] = (int) $block->context['query']['author']; } - if ( isset( $block->context['query']['search'] ) ) { + if ( ! empty( $block->context['query']['search'] ) ) { $query['s'] = $block->context['query']['search']; } } diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js index da8b2004aa23e2..15b981bf69af6b 100644 --- a/packages/block-library/src/post-terms/edit.js +++ b/packages/block-library/src/post-terms/edit.js @@ -35,7 +35,7 @@ export default function PostTermsEdit( { if ( ! term ) return {}; const { getTaxonomy } = select( coreStore ); const taxonomy = getTaxonomy( term ); - return taxonomy?.visibility?.show_ui ? taxonomy : {}; + return taxonomy?.visibility?.publicly_queryable ? taxonomy : {}; }, [ term ] ); diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php index 0af8742f869b9f..436611d7567042 100644 --- a/packages/block-library/src/post-terms/index.php +++ b/packages/block-library/src/post-terms/index.php @@ -18,6 +18,10 @@ function render_block_core_post_terms( $attributes, $content, $block ) { return ''; } + if ( ! is_taxonomy_viewable( $attributes['term'] ) ) { + return ''; + } + $post_terms = get_the_terms( $block->context['postId'], $attributes['term'] ); if ( is_wp_error( $post_terms ) ) { return ''; diff --git a/packages/block-library/src/post-terms/use-post-terms.js b/packages/block-library/src/post-terms/use-post-terms.js index facfffa21117f8..4539ea1c8df22b 100644 --- a/packages/block-library/src/post-terms/use-post-terms.js +++ b/packages/block-library/src/post-terms/use-post-terms.js @@ -9,6 +9,14 @@ export default function usePostTerms( { postId, postType, term } ) { const [ termIds ] = useEntityProp( 'postType', postType, restBase, postId ); return useSelect( ( select ) => { + const visible = term?.visibility?.publicly_queryable; + if ( ! visible ) { + return { + postTerms: [], + _isLoading: false, + hasPostTerms: false, + }; + } if ( ! termIds ) { // Waiting for post terms to be fetched. return { isLoading: true }; @@ -33,6 +41,6 @@ export default function usePostTerms( { postId, postType, term } ) { hasPostTerms: !! terms?.length, }; }, - [ termIds ] + [ termIds, term?.visibility?.publicly_queryable ] ); } From 9f9192c19a1fb0af2c9dfd20eedc75e503970a62 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 7 Jul 2021 12:03:46 +1000 Subject: [PATCH 02/40] Block Support: Update border support UI (#31585) Refine the controls provided via the border block support feature. --- .../all-input-control.js | 29 +++++ .../components/border-radius-control/index.js | 102 ++++++++++++++++ .../border-radius-control/input-controls.js | 55 +++++++++ .../border-radius-control/linked-button.js | 25 ++++ .../border-radius-control/style.scss | 57 +++++++++ .../components/border-radius-control/utils.js | 112 ++++++++++++++++++ .../components/border-style-control/index.js | 73 +++++------- .../border-style-control/style.scss | 21 ++-- packages/block-editor/src/components/index.js | 1 + .../block-editor/src/hooks/border-color.js | 2 +- .../block-editor/src/hooks/border-radius.js | 38 +----- .../block-editor/src/hooks/border-width.js | 16 +-- packages/block-editor/src/hooks/border.js | 12 +- packages/block-editor/src/hooks/border.scss | 9 ++ packages/block-editor/src/style.scss | 1 + .../src/components/sidebar/border-panel.js | 105 ++++++++-------- .../src/components/sidebar/style.scss | 14 +++ packages/icons/src/index.js | 3 + packages/icons/src/library/line-dashed.js | 16 +++ packages/icons/src/library/line-dotted.js | 16 +++ packages/icons/src/library/line-solid.js | 12 ++ 21 files changed, 557 insertions(+), 162 deletions(-) create mode 100644 packages/block-editor/src/components/border-radius-control/all-input-control.js create mode 100644 packages/block-editor/src/components/border-radius-control/index.js create mode 100644 packages/block-editor/src/components/border-radius-control/input-controls.js create mode 100644 packages/block-editor/src/components/border-radius-control/linked-button.js create mode 100644 packages/block-editor/src/components/border-radius-control/style.scss create mode 100644 packages/block-editor/src/components/border-radius-control/utils.js create mode 100644 packages/icons/src/library/line-dashed.js create mode 100644 packages/icons/src/library/line-dotted.js create mode 100644 packages/icons/src/library/line-solid.js diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js new file mode 100644 index 00000000000000..00073ba297c666 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { getAllValue, hasMixedValues, hasDefinedValues } from './utils'; + +export default function AllInputControl( { onChange, values, ...props } ) { + const allValue = getAllValue( values ); + const hasValues = hasDefinedValues( values ); + const isMixed = hasValues && hasMixedValues( values ); + const allPlaceholder = isMixed ? __( 'Mixed' ) : null; + + return ( + + ); +} diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js new file mode 100644 index 00000000000000..7d5233d5cabe6e --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -0,0 +1,102 @@ +/** + * WordPress dependencies + */ +import { + RangeControl, + __experimentalParseUnit as parseUnit, + __experimentalUseCustomUnits as useCustomUnits, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import AllInputControl from './all-input-control'; +import InputControls from './input-controls'; +import LinkedButton from './linked-button'; +import { + getAllValue, + getAllUnit, + hasDefinedValues, + hasMixedValues, +} from './utils'; + +const DEFAULT_VALUES = { + topLeft: null, + topRight: null, + bottomLeft: null, + bottomRight: null, +}; +const MIN_BORDER_RADIUS_VALUE = 0; +const MAX_BORDER_RADIUS_VALUES = { + px: 100, + em: 20, + rem: 20, +}; + +/** + * Control to display border radius options. + * + * @param {Object} props Component props. + * @param {Function} props.onChange Callback to handle onChange. + * @param {Object} props.values Border radius values. + * + * @return {WPElement} Custom border radius control. + */ +export default function BorderRadiusControl( { onChange, values } ) { + const [ isLinked, setIsLinked ] = useState( + ! hasDefinedValues( values ) || ! hasMixedValues( values ) + ); + + const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ] } ); + const unit = getAllUnit( values ); + const unitConfig = units.find( ( item ) => item.value === unit ); + const step = unitConfig?.step || 1; + + const [ allValue ] = parseUnit( getAllValue( values ) ); + + const toggleLinked = () => setIsLinked( ! isLinked ); + + const handleSliderChange = ( next ) => { + onChange( next !== undefined ? `${ next }${ unit }` : undefined ); + }; + + return ( +
+ { __( 'Radius' ) } +
+ { isLinked ? ( + <> + + + + ) : ( + + ) } + +
+
+ ); +} diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js new file mode 100644 index 00000000000000..db294c7f8bd1b6 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +const CORNERS = { + topLeft: __( 'Top left' ), + topRight: __( 'Top right' ), + bottomLeft: __( 'Bottom left' ), + bottomRight: __( 'Bottom right' ), +}; + +export default function BoxInputControls( { + onChange, + values: valuesProp, + ...props +} ) { + const createHandleOnChange = ( corner ) => ( next ) => { + if ( ! onChange ) { + return; + } + + onChange( { + ...values, + [ corner ]: next ? next : undefined, + } ); + }; + + // For shorthand style & backwards compatibility, handle flat string value. + const values = + typeof valuesProp !== 'string' + ? valuesProp + : { + topLeft: valuesProp, + topRight: valuesProp, + bottomLeft: valuesProp, + bottomRight: valuesProp, + }; + + // Controls are wrapped in tooltips as visible labels aren't desired here. + return ( +
+ { Object.entries( CORNERS ).map( ( [ key, label ] ) => ( + + ) ) } +
+ ); +} diff --git a/packages/block-editor/src/components/border-radius-control/linked-button.js b/packages/block-editor/src/components/border-radius-control/linked-button.js new file mode 100644 index 00000000000000..58fec1012b0651 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/linked-button.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { Button, Tooltip } from '@wordpress/components'; +import { link, linkOff } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export default function LinkedButton( { isLinked, ...props } ) { + const label = isLinked ? __( 'Unlink Radii' ) : __( 'Link Radii' ); + + return ( + +
-
    %2$s
+ %2$s
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 4a5ae3b06c55c6..60b939799bb825 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -6,6 +6,17 @@ .wp-block-navigation { position: relative; + // Horizontal layout + display: flex; + flex-wrap: wrap; + align-items: center; + + // Vertical layout + &.is-vertical { + flex-direction: column; + align-items: flex-start; + } + // Normalize list styles. ul, ul li { diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js index 4c389d1076970f..d5290e710d3fb7 100644 --- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js @@ -348,7 +348,7 @@ describe( 'Navigation', () => { // Scope element selector to the Editor's "Content" region as otherwise it picks up on // block previews. const navBlockItemsLength = await page.$$eval( - '[aria-label="Editor content"][role="region"] li[aria-label="Block: Custom Link"]', + '[aria-label="Editor content"][role="region"] div[aria-label="Block: Custom Link"]', ( els ) => els.length ); diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 301bbae01c705d..fa8bdf21d852ac 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -313,7 +313,7 @@ describe( 'Navigation editor', () => { // Select a link block with nested links in a submenu. const parentLinkXPath = - '//li[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]'; + '//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]'; const linkBlock = await page.waitForXPath( parentLinkXPath ); await linkBlock.click(); @@ -322,7 +322,7 @@ describe( 'Navigation editor', () => { // Submenus are hidden using `visibility: hidden` and shown using // `visibility: visible` so the visible/hidden options must be used // when selecting the elements. - const submenuLinkXPath = `${ parentLinkXPath }//li[@aria-label="Block: Custom Link"]`; + const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`; const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, { visible: true, } ); From 87a696eac7ffc224d883350d0394ad29116a929b Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Tue, 6 Jul 2021 22:15:11 -0700 Subject: [PATCH 04/40] Mobile: update image size picker (#31963) * Update Bottom Sheet Select Control to accept a label icon * Update the Image block to use Bottom Sheet Select Control * Minor code fixes * Fix code style * Make sure that we always recalculate the possible sizeOptions. Before we calculating the sizeOptions in the constructor which didn't happen often enough. And caused an issue when you first inserted the image. * Remove lodash find, isEmpty, map and filter * Double check that we are dealing with arrays before proceeding. * Use the same icon - fullscreen --- .../block-library/src/image/edit.native.js | 58 ++++++++++++------- .../bottom-sheet-select-control/README.md | 7 +++ .../index.native.js | 2 + 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index da026f95422769..5ea885333ad69a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,6 @@ * External dependencies */ import { View, TouchableWithoutFeedback, Platform } from 'react-native'; -import { isEmpty, get, find, map } from 'lodash'; /** * WordPress dependencies @@ -17,7 +16,6 @@ import { setFeaturedImage, } from '@wordpress/react-native-bridge'; import { - CycleSelectControl, Icon, PanelBody, ToolbarButton, @@ -27,6 +25,7 @@ import { LinkSettingsNavigation, BottomSheet, BottomSheetTextControl, + BottomSheetSelectControl, FooterMessageLink, Badge, } from '@wordpress/components'; @@ -67,8 +66,11 @@ import { MEDIA_ID_NO_FEATURED_IMAGE_SET, } from './constants'; -const getUrlForSlug = ( image, { sizeSlug } ) => { - return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ); +const getUrlForSlug = ( image, sizeSlug ) => { + if ( ! sizeSlug ) { + return undefined; + } + return image?.media_details?.sizes?.[ sizeSlug ]?.source_url; }; export class ImageEdit extends Component { @@ -119,11 +121,6 @@ export class ImageEdit extends Component { placeholder: __( 'None' ), }, }; - - this.sizeOptions = map( this.props.imageSizes, ( { name, slug } ) => ( { - value: slug, - name, - } ) ); } componentDidMount() { @@ -176,7 +173,9 @@ export class ImageEdit extends Component { componentDidUpdate( previousProps ) { if ( ! previousProps.image && this.props.image ) { const { image, attributes } = this.props; - const url = getUrlForSlug( image, attributes ) || image.source_url; + const url = + getUrlForSlug( image, attributes?.sizeSlug ) || + image.source_url; this.props.setAttributes( { url } ); } } @@ -190,7 +189,10 @@ export class ImageEdit extends Component { } accessibilityLabelCreator( caption ) { - return isEmpty( caption ) + // Checks if caption is empty. + return ( typeof caption === 'string' && caption.trim().length === 0 ) || + caption === undefined || + caption === null ? /* translators: accessibility text. Empty image caption. */ 'Image caption. Empty' : sprintf( @@ -292,7 +294,7 @@ export class ImageEdit extends Component { onSetSizeSlug( sizeSlug ) { const { image } = this.props; - const url = getUrlForSlug( image, { sizeSlug } ); + const url = getUrlForSlug( image, sizeSlug ); if ( ! url ) { return null; } @@ -494,10 +496,26 @@ export class ImageEdit extends Component { } = this.props; const { align, url, alt, id, sizeSlug, className } = attributes; - const sizeOptionsValid = find( this.sizeOptions, [ - 'value', - imageDefaultSize, - ] ); + const imageSizes = Array.isArray( this.props.imageSizes ) + ? this.props.imageSizes + : []; + // Only map available image sizes for the user to choose. + const sizeOptions = imageSizes + .filter( ( { slug } ) => getUrlForSlug( image, slug ) ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + + let selectedSizeOption = sizeSlug || imageDefaultSize; + let sizeOptionsValid = sizeOptions.find( + ( option ) => option.value === selectedSizeOption + ); + + if ( ! sizeOptionsValid ) { + // Default to 'full' size if the default large size is not available. + sizeOptionsValid = sizeOptions.find( + ( option ) => option.value === 'full' + ); + selectedSizeOption = 'full'; + } // By default, it's only possible to set images that have been uploaded to a site's library as featured. // Images that haven't been uploaded to a site's library have an id of 'undefined', which the 'canImageBeFeatured' check filters out. @@ -533,12 +551,12 @@ export class ImageEdit extends Component { { image && sizeOptionsValid && ( - ) } { this.getAltTextSettings() } diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md index 1eeb6b99bfcaab..ed940baa53409f 100644 --- a/packages/components/src/mobile/bottom-sheet-select-control/README.md +++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md @@ -88,3 +88,10 @@ Can be used to externally control the value of the control, like in the `MyContr - Type: `Object` - Required: No + +#### icon + +The icon for the control. + +- Type: `Icon component` +- Required: No \ No newline at end of file diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js index 3df7f185c77103..5f2ec0aee79979 100644 --- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js +++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js @@ -18,6 +18,7 @@ import styles from './style.scss'; const BottomSheetSelectControl = ( { label, + icon, options: items, onChange, value: selectedValue, @@ -52,6 +53,7 @@ const BottomSheetSelectControl = ( { Date: Wed, 7 Jul 2021 09:37:43 +0200 Subject: [PATCH 05/40] Mobile - Global styles: Block-specific styles (#30997) * Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Add support to block styles * Add reset button in color picker * Fix placeholder colors * Fix paddings and remove Columns placeholder solid background * Don't reset paddings for inner blocks that have paddings already * Mobile - Block styles support * Add fallback text color to blocks * Adds new Prop for Global Styles Settings * Rename updateTheme to be more generic for update settings include GSS (#31566) * Fix wrong naming of subscribeUpdateEditorSettings * Update Gutenberg demo * Updates new props to rawStyles and rawFeatures * Update iOS Bridge for new values * Mobile - Global styles: Pass settings and set color palette and gradients (#30684) * Mobile - Read global styles and set color palette and gradients * Parse all color variables * Fix gradients * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Remove mock data and update code to use latest API changes * Removes Android rawFeatures prop * Mobile - Remove usage of rawFeatures * Remove rawFeatures * Adds raw Styles in React Native Bridge * Mobile - Pass rawStyles on initial props and fix colors and gradients * Add Raw Features back * Revert "Removes Android rawFeatures prop" This reverts commit 32a2b3aff85ed83d2a3c953f94d4f37685b4f2ca. * Add rawFeatures in the mobile editor * Mobile - Global styles: Set theme's background and text color (#30810) * Mobile - Read global styles and set color palette and gradients * Mobile - Enable colors for blocks that support it * Parse all color variables * Mobile - Set background, title, text and link colors * Fix gradients * Add placeholder color * Update global styles mocked data * Move color settings * Removed added spaces * Add tests * Update experimental features path and prepare for rawGlobalStylesBaseStyles * Add missing provider * Get the right color attribute * Remove mock data * Mobile - Fix base global colors * Remove old usage of useEditorFeature * Remove old mock data * Add support for block styles of the Verse block in mobile * Rename mergedStyle to style Co-authored-by: Antonis Lilis Co-authored-by: Chip --- .../src/components/block-list/block.native.js | 5 +- .../block-library/src/button/edit.native.js | 13 ++-- .../src/column/editor.native.scss | 2 - .../block-library/src/columns/edit.native.js | 6 +- .../block-library/src/group/edit.native.js | 8 +-- packages/block-library/src/heading/edit.js | 4 +- packages/block-library/src/list/edit.js | 5 +- .../src/media-text/edit.native.js | 36 +++++----- .../src/media-text/style.native.scss | 4 ++ .../src/paragraph/edit.native.js | 10 ++- packages/block-library/src/quote/edit.js | 4 +- packages/block-library/src/verse/edit.js | 2 + .../src/color-palette/index.native.js | 2 + .../color-settings/palette.screen.native.js | 32 ++++++++- .../mobile/color-settings/style.native.scss | 12 ++++ .../global-styles-context/index.native.js | 13 +++- .../global-styles-context/utils.native.js | 65 +++++++++++++++++-- 17 files changed, 166 insertions(+), 57 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index c81a2d5469ecc1..3f700ec22a2920 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -58,7 +58,8 @@ function BlockForType( { globalStyle, wrapperProps.style, attributes, - defaultColors + defaultColors, + name ); }, [ defaultColors, @@ -85,7 +86,7 @@ function BlockForType( { // Block level styles wrapperProps={ wrapperProps } // inherited styles merged with block level styles - mergedStyle={ mergedStyle } + style={ mergedStyle } clientId={ clientId } parentWidth={ parentWidth } contentStyle={ contentStyle } diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index d4fb5862c80d4d..923ed47282efb8 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -184,7 +184,7 @@ class ButtonEdit extends Component { } getBackgroundColor() { - const { attributes, colors, gradients } = this.props; + const { attributes, colors, gradients, style } = this.props; const { backgroundColor, gradient } = attributes; // Return named gradient value if available. @@ -207,12 +207,13 @@ class ButtonEdit extends Component { colorObject?.color || colorProps.style?.backgroundColor || colorProps.style?.background || + style?.backgroundColor || styles.defaultButton.backgroundColor ); } getTextColor() { - const { attributes, colors } = this.props; + const { attributes, colors, style } = this.props; const colorProps = getColorClassesAndStyles( attributes ); // Retrieve named color object to force inline styles for themes that @@ -225,6 +226,7 @@ class ButtonEdit extends Component { return ( colorObject?.color || colorProps.style?.color || + style?.color || styles.defaultButton.color ); } @@ -375,11 +377,12 @@ class ButtonEdit extends Component { mergeBlocks, parentWidth, setAttributes, + style, } = this.props; const { placeholder, text, - style, + style: buttonStyle, url, align = 'center', width, @@ -391,7 +394,7 @@ class ButtonEdit extends Component { return null; } - const borderRadius = style?.border?.radius; + const borderRadius = buttonStyle?.border?.radius; const borderRadiusValue = Number.isInteger( borderRadius ) ? borderRadius @@ -463,7 +466,7 @@ class ButtonEdit extends Component { } } textAlign={ align } placeholderTextColor={ - styles.placeholderTextColor.color + style?.color || styles.placeholderTextColor.color } identifier="text" tagName="p" diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss index 7beba9942dc70d..ef937134a43c3f 100644 --- a/packages/block-library/src/column/editor.native.scss +++ b/packages/block-library/src/column/editor.native.scss @@ -5,13 +5,11 @@ .columnPlaceholder { flex: 1; padding: $block-selected-to-content; - background-color: $white; border: $border-width dashed $gray; border-radius: 4px; } .columnPlaceholderDark { - background-color: $black; border: $border-width dashed $gray-70; } diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index b387febedf3699..40afe71538fdef 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -442,7 +442,7 @@ const ColumnsEditContainerWrapper = withDispatch( )( memo( ColumnsEditContainer ) ); const ColumnsEdit = ( props ) => { - const { clientId, isSelected } = props; + const { clientId, isSelected, style } = props; const { columnCount, isDefaultColumns, @@ -505,7 +505,7 @@ const ColumnsEdit = ( props ) => { }, [] ); return ( - <> + { clientId={ clientId } isVisible={ isVisible } /> - + ); }; diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js index 791c95ff079697..23b5628cb219dc 100644 --- a/packages/block-library/src/group/edit.native.js +++ b/packages/block-library/src/group/edit.native.js @@ -32,7 +32,7 @@ function GroupEdit( { isSelected, isLastInnerBlockSelected, getStylesFromColorScheme, - mergedStyle, + style, blockWidth, } ) { const { align } = attributes; @@ -79,13 +79,13 @@ function GroupEdit( { diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 0f8d900b62c4cf..023184969babd6 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -25,7 +25,7 @@ function HeadingEdit( { setAttributes, mergeBlocks, onReplace, - mergedStyle, + style, clientId, } ) { const { textAlign, content, level, placeholder } = attributes; @@ -34,7 +34,7 @@ function HeadingEdit( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), - style: mergedStyle, + style, } ); return ( diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index c64041fe8d9b95..8d39252aee128b 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -41,6 +41,7 @@ export default function ListEdit( { setAttributes, mergeBlocks, onReplace, + style, } ) { const { ordered, values, type, reversed, start, placeholder } = attributes; const tagName = ordered ? 'ol' : 'ul'; @@ -132,7 +133,9 @@ export default function ListEdit( { ); - const blockProps = useBlockProps(); + const blockProps = useBlockProps( { + style, + } ); return ( <> diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js index 49239ae4d0c303..895dc40e7d7be1 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/packages/block-library/src/media-text/edit.native.js @@ -254,7 +254,7 @@ class MediaTextEdit extends Component { setAttributes, isSelected, isRTL, - wrapperProps, + style, blockWidth, } = this.props; const { @@ -273,14 +273,21 @@ class MediaTextEdit extends Component { ? 100 : this.state.mediaWidth || mediaWidth; const widthString = `${ temporaryMediaWidth }%`; + const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth; + const innerBlockWidthString = `${ innerBlockWidth }%`; - const innerBlockContainerStyle = ! shouldStack - ? styles.innerBlock - : { - ...( mediaPosition === 'left' - ? styles.innerBlockStackMediaLeft - : styles.innerBlockStackMediaRight ), - }; + const innerBlockContainerStyle = [ + { width: innerBlockWidthString }, + ! shouldStack + ? styles.innerBlock + : { + ...( mediaPosition === 'left' + ? styles.innerBlockStackMediaLeft + : styles.innerBlockStackMediaRight ), + }, + ( style?.backgroundColor || backgroundColor.color ) && + styles.innerBlockPaddings, + ]; const containerStyles = { ...styles[ 'wp-block-media-text' ], @@ -295,14 +302,10 @@ class MediaTextEdit extends Component { ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ), ...( isSelected && styles[ 'is-selected' ] ), - backgroundColor: - wrapperProps?.style?.backgroundColor || backgroundColor.color, + backgroundColor: style?.backgroundColor || backgroundColor.color, paddingBottom: 0, }; - const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth; - const innerBlockWidthString = `${ innerBlockWidth }%`; - const mediaContainerStyle = [ { flex: 1 }, shouldStack @@ -375,12 +378,7 @@ class MediaTextEdit extends Component { > { this.renderMediaArea( shouldStack ) } - + { const route = useRoute(); const navigation = useNavigation(); @@ -50,6 +52,10 @@ const PaletteScreen = () => { styles.horizontalSeparator, styles.horizontalSeparatorDark ); + const clearButtonStyle = usePreferredColorSchemeStyle( + styles.clearButton, + styles.clearButtonDark + ); const isSolidSegment = currentSegment === segments[ 0 ]; const isCustomGadientShown = ! isSolidSegment && isGradientColor; @@ -67,6 +73,15 @@ const PaletteScreen = () => { } }; + function onClear() { + setCurrentValue( undefined ); + if ( isSolidSegment ) { + onColorChange( '' ); + } else { + onGradientChange( '' ); + } + } + function onCustomPress() { if ( isSolidSegment ) { navigation.navigate( colorsUtils.screens.picker, { @@ -82,6 +97,16 @@ const PaletteScreen = () => { } } + function getClearButton() { + return ( + + + { __( 'Reset' ) } + + + ); + } + function getFooter() { if ( onGradientChange ) { return ( @@ -97,6 +122,7 @@ const PaletteScreen = () => { /> ) } + addonRight={ currentValue && getClearButton() } /> ); } @@ -116,7 +142,9 @@ const PaletteScreen = () => { > { __( 'Select a color' ) } - + + { currentValue && getClearButton() } + ); } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 5ea2417761c2da..a86ebe02388d7d 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -33,3 +33,15 @@ flex: 1; } +.clearButtonContainer { + align-items: flex-end; +} + +.clearButton { + color: $blue-50; + font-size: 17px; +} + +.clearButtonDark { + color: $blue-30; +} diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js index 1d4d0d45be6761..2626e0cec5ba61 100644 --- a/packages/components/src/mobile/global-styles-context/index.native.js +++ b/packages/components/src/mobile/global-styles-context/index.native.js @@ -26,7 +26,8 @@ export const getMergedGlobalStyles = ( globalStyle, wrapperPropsStyle, blockAttributes, - defaultColors + defaultColors, + blockName ) => { const baseGlobalColors = { baseColors: baseGlobalStyles || {}, @@ -40,12 +41,18 @@ export const getMergedGlobalStyles = ( ...globalStyle, ...wrapperPropsStyle, }; + const blockColors = getBlockColors( + blockStyleAttributes, + defaultColors, + blockName, + baseGlobalStyles + ); const blockPaddings = getBlockPaddings( mergedStyle, wrapperPropsStyle, - blockStyleAttributes + blockStyleAttributes, + blockColors ); - const blockColors = getBlockColors( blockStyleAttributes, defaultColors ); return { ...mergedStyle, ...blockPaddings, ...blockColors }; }; diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index 0cf5bee75c4c75..bdf4064f00146b 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -3,26 +3,37 @@ */ import { find, startsWith } from 'lodash'; -export const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', 'backgroundColor' ]; +export const BLOCK_STYLE_ATTRIBUTES = [ + 'textColor', + 'backgroundColor', + 'style', +]; // Mapping style properties name to native const BLOCK_STYLE_ATTRIBUTES_MAPPING = { textColor: 'color', + text: 'color', + background: 'backgroundColor', + link: 'linkColor', + placeholder: 'placeholderColor', }; -const PADDING = 12; // solid-border-space +const PADDING = 12; // $solid-border-space +const UNKNOWN_VALUE = 'undefined'; export function getBlockPaddings( mergedStyle, wrapperPropsStyle, - blockStyleAttributes + blockStyleAttributes, + blockColors ) { const blockPaddings = {}; if ( ! mergedStyle.padding && ( wrapperPropsStyle?.backgroundColor || - blockStyleAttributes?.backgroundColor ) + blockStyleAttributes?.backgroundColor || + blockColors?.backgroundColor ) ) { blockPaddings.padding = PADDING; return blockPaddings; @@ -32,7 +43,8 @@ export function getBlockPaddings( if ( mergedStyle?.padding && ! wrapperPropsStyle?.backgroundColor && - ! blockStyleAttributes?.backgroundColor + ! blockStyleAttributes?.backgroundColor && + ! blockColors?.backgroundColor ) { blockPaddings.padding = undefined; } @@ -40,9 +52,44 @@ export function getBlockPaddings( return blockPaddings; } -export function getBlockColors( blockStyleAttributes, defaultColors ) { +export function getBlockColors( + blockStyleAttributes, + defaultColors, + blockName, + baseGlobalStyles +) { const blockStyles = {}; + const customBlockStyles = blockStyleAttributes?.style?.color || {}; + const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ]; + + // Global styles colors + if ( blockGlobalStyles?.color ) { + Object.entries( blockGlobalStyles.color ).forEach( + ( [ key, value ] ) => { + const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ key ]; + + if ( styleKey && value !== UNKNOWN_VALUE ) { + const color = customBlockStyles[ key ] ?? value; + blockStyles[ styleKey ] = color; + } + } + ); + } else if ( baseGlobalStyles?.styles?.color?.text ) { + blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.text ] = + baseGlobalStyles?.styles?.color?.text; + } + // Global styles elements + if ( blockGlobalStyles?.elements ) { + const linkColor = blockGlobalStyles.elements?.link?.color?.text; + const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link; + + if ( styleKey && linkColor && linkColor !== UNKNOWN_VALUE ) { + blockStyles[ styleKey ] = linkColor; + } + } + + // Custom colors Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => { const isCustomColor = startsWith( value, '#' ); let styleKey = key; @@ -64,6 +111,12 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) { } } ); + // Color placeholder + if ( blockStyles?.color ) { + blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] = + blockStyles.color; + } + return blockStyles; } From 1be4a40d0f1d8dcc57b4eda3b847bcc8a9ee11c7 Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Wed, 7 Jul 2021 09:46:50 +0200 Subject: [PATCH 06/40] Try: Polish labels and consolidate options in preferences. (#33133) * Try: Polish labels and consolidate options in preferences. * Fix typo. * Rephrase text labels option. * Update snapshots. --- .../src/components/preferences-modal/index.js | 51 +++++++++---------- .../test/__snapshots__/index.js.snap | 40 ++++----------- 2 files changed, 35 insertions(+), 56 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index eec907a073ed62..3a536a74140bde 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -81,7 +81,10 @@ export default function PreferencesModal() { <> { isLargeViewport && (
) } -
+
+ + { showBlockBreadcrumbsOption && ( ), }, - { - name: 'appearance', - tabLabel: __( 'Appearance' ), - content: ( -
- - -
- ), - }, { name: 'blocks', tabLabel: __( 'Blocks' ), content: ( <>
-
- -
- - - - -
+
@@ -131,7 +110,8 @@ exports[`PreferencesModal should match snapshot when the modal is active small v >
Date: Wed, 7 Jul 2021 09:23:01 +0100 Subject: [PATCH 07/40] Latest Posts block: Refactor to drop apiFetch usage in favor of using the data module (#33063) --- .../block-library/src/latest-posts/edit.js | 76 ++++++------------- 1 file changed, 24 insertions(+), 52 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 4ac570c83c2686..0f8d41b758957a 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, RawHTML, useEffect, useRef } from '@wordpress/element'; +import { RawHTML } from '@wordpress/element'; import { BaseControl, PanelBody, @@ -19,8 +19,6 @@ import { ToggleControl, ToolbarGroup, } from '@wordpress/components'; -import apiFetch from '@wordpress/api-fetch'; -import { addQueryArgs } from '@wordpress/url'; import { __, sprintf } from '@wordpress/i18n'; import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date'; import { @@ -49,10 +47,12 @@ import { */ const CATEGORIES_LIST_QUERY = { per_page: -1, + context: 'view', }; const USERS_LIST_QUERY = { per_page: -1, has_published_posts: [ 'post' ], + context: 'view', }; export default function LatestPostsEdit( { attributes, setAttributes } ) { @@ -81,9 +81,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { latestPosts, defaultImageWidth, defaultImageHeight, + categoriesList, + authorList, } = useSelect( ( select ) => { - const { getEntityRecords, getMedia } = select( coreStore ); + const { getEntityRecords, getMedia, getUsers } = select( + coreStore + ); const { getSettings } = select( blockEditorStore ); const { imageSizes, imageDimensions } = getSettings(); const catIds = @@ -150,6 +154,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { }; return { ...post, featuredImageInfo }; } ), + categoriesList: getEntityRecords( + 'taxonomy', + 'category', + CATEGORIES_LIST_QUERY + ), + authorList: getUsers( USERS_LIST_QUERY ), }; }, [ @@ -161,15 +171,14 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { selectedAuthor, ] ); - const [ categoriesList, setCategoriesList ] = useState( [] ); - const [ authorList, setAuthorList ] = useState( [] ); - const categorySuggestions = categoriesList.reduce( - ( accumulator, category ) => ( { - ...accumulator, - [ category.name ]: category, - } ), - {} - ); + const categorySuggestions = + categoriesList?.reduce( + ( accumulator, category ) => ( { + ...accumulator, + [ category.name ]: category, + } ), + {} + ) ?? {}; const selectCategories = ( tokens ) => { const hasNoSuggestion = tokens.some( ( token ) => @@ -193,43 +202,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { setAttributes( { categories: allCategories } ); }; - const isStillMounted = useRef(); - - useEffect( () => { - isStillMounted.current = true; - - apiFetch( { - path: addQueryArgs( `/wp/v2/categories`, CATEGORIES_LIST_QUERY ), - } ) - .then( ( data ) => { - if ( isStillMounted.current ) { - setCategoriesList( data ); - } - } ) - .catch( () => { - if ( isStillMounted.current ) { - setCategoriesList( [] ); - } - } ); - apiFetch( { - path: addQueryArgs( `/wp/v2/users`, USERS_LIST_QUERY ), - } ) - .then( ( data ) => { - if ( isStillMounted.current ) { - setAuthorList( data ); - } - } ) - .catch( () => { - if ( isStillMounted.current ) { - setAuthorList( [] ); - } - } ); - - return () => { - isStillMounted.current = false; - }; - }, [] ); - const hasPosts = !! latestPosts?.length; const inspectorControls = ( @@ -377,7 +349,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { '' !== value ? Number( value ) : undefined, } ) } - authorList={ authorList } + authorList={ authorList ?? [] } selectedAuthorId={ selectedAuthor } /> @@ -466,7 +438,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { 'trim', ] ); let excerpt = post.excerpt.rendered; - const currentAuthor = authorList.find( + const currentAuthor = authorList?.find( ( author ) => author.id === post.author ); From 0c9900f64eb0cceefb3e6dc49da7e8c4a5ffcc54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 7 Jul 2021 10:27:51 +0200 Subject: [PATCH 08/40] Fix a typo in the docs for block supports (gradient) (#33247) --- docs/reference-guides/block-api/block-supports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 6750e3681d42d0..7eb3c756655c01 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -267,7 +267,7 @@ When the block declares support for `color.gradient`, the attributes definition type: 'object', default: { color: { - background: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)', + gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)', } } } From b9203cab6d02c76996c617160cd02960f995f3bb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 7 Jul 2021 09:33:32 +0100 Subject: [PATCH 09/40] Refactor the user autocompleter to avoid apiFetch and rely on the data module (#33028) --- .../components/autocompleters/test/user.js | 61 ++++++------- .../src/components/autocompleters/user.js | 89 ++++++++++++------- 2 files changed, 83 insertions(+), 67 deletions(-) diff --git a/packages/editor/src/components/autocompleters/test/user.js b/packages/editor/src/components/autocompleters/test/user.js index f699ebfbfd2022..3ef0e41549c7e9 100644 --- a/packages/editor/src/components/autocompleters/test/user.js +++ b/packages/editor/src/components/autocompleters/test/user.js @@ -1,34 +1,31 @@ /** * Internal dependencies */ -import userCompleter from '../user'; +import { getUserLabel } from '../user'; describe( 'user', () => { - describe( 'getOptionLabel', () => { + describe( 'getUserLabel', () => { it( 'should return user details fragment', () => { const user = { name: 'Smithers Jones', slug: 'userSlug', avatar_urls: { 24: 'http://my.avatar' }, }; - const userLabel = userCompleter.getOptionLabel( user ); - expect( userLabel[ 0 ] ).toEqual( - - ); - expect( userLabel[ 1 ] ).toEqual( - - Smithers Jones - - ); - expect( userLabel[ 2 ] ).toEqual( - - userSlug - + const userLabel = getUserLabel( user ); + expect( userLabel ).toEqual( + <> + + + Smithers Jones + + + userSlug + + ); } ); it( 'should return user details fragment without default avatar dashicon if avatar_urls array not set', () => { @@ -36,19 +33,17 @@ describe( 'user', () => { name: 'Smithers Jones', slug: 'userSlug', }; - const userLabel = userCompleter.getOptionLabel( user ); - expect( userLabel[ 0 ] ).toEqual( - - ); - expect( userLabel[ 1 ] ).toEqual( - - Smithers Jones - - ); - expect( userLabel[ 2 ] ).toEqual( - - userSlug - + const userLabel = getUserLabel( user ); + expect( userLabel ).toEqual( + <> + + + Smithers Jones + + + userSlug + + ); } ); } ); diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js index 4b8c1f2dbcf374..e176d3fb6b05a2 100644 --- a/packages/editor/src/components/autocompleters/user.js +++ b/packages/editor/src/components/autocompleters/user.js @@ -1,10 +1,37 @@ /** * WordPress dependencies */ -import apiFetch from '@wordpress/api-fetch'; +import { useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; /** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */ +export function getUserLabel( user ) { + const avatar = + user.avatar_urls && user.avatar_urls[ 24 ] ? ( + + ) : ( + + ); + + return ( + <> + { avatar } + + { user.name } + + + { user.slug } + + + ); +} + /** * A user mentions completer. * @@ -14,40 +41,34 @@ export default { name: 'users', className: 'editor-autocompleters__user', triggerPrefix: '@', - options( search ) { - let payload = ''; - if ( search ) { - payload = '?search=' + encodeURIComponent( search ); - } - return apiFetch( { path: '/wp/v2/users' + payload } ); - }, - isDebounced: true, - getOptionKeywords( user ) { - return [ user.slug, user.name ]; - }, - getOptionLabel( user ) { - const avatar = - user.avatar_urls && user.avatar_urls[ 24 ] ? ( - - ) : ( - - ); - - return [ - avatar, - - { user.name } - , - - { user.slug } - , - ]; + + useItems( filterValue ) { + const users = useSelect( + ( select ) => { + const { getUsers } = select( coreStore ); + return getUsers( { + context: 'view', + search: encodeURIComponent( filterValue ), + } ); + }, + [ filterValue ] + ); + + const options = useMemo( + () => + users + ? users.map( ( user ) => ( { + key: `user-${ user.slug }`, + value: user, + label: getUserLabel( user ), + } ) ) + : [], + [ users ] + ); + + return [ options ]; }, + getOptionCompletion( user ) { return `@${ user.slug }`; }, From 8499a38f6d5f0cdfd86c4bf17d42f37232c72125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 7 Jul 2021 10:49:02 +0200 Subject: [PATCH 10/40] Handbook: Clarify the type of `apiVersion` in block metadata (#33249) --- .../reference-guides/block-api/block-metadata.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index d2ae2cf090b3f2..c1a1a695650ceb 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -79,6 +79,22 @@ register_block_type( This section describes all the properties that can be added to the `block.json` file to define the behavior and metadata of block types. +### API Version + +- Type: `number` +- Optional +- Localized: No +- Property: `apiVersion` +- Default: `1` + +```json +{ "apiVersion": 2 } +``` + +The version of the Block API used by the block. The most recent version is `2` and it was introduced in WordPress 5.6. + +See the [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details. + ### Name - Type: `string` From 059cb23d05a23311e9fe80372a3a1dfa8107c001 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 7 Jul 2021 12:45:26 +0200 Subject: [PATCH 11/40] Tools: Update CopyWebpackPlugin to v6 (#33220) --- package-lock.json | 491 ++++++++++++++++++++++++++++++---------------- package.json | 2 +- webpack.config.js | 219 ++++++++++----------- 3 files changed, 431 insertions(+), 281 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a229adef64274..e4954bfdaff6ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26291,38 +26291,49 @@ } }, "cacache": { - "version": "12.0.4", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", - "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==", + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.2.0.tgz", + "integrity": "sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw==", "dev": true, "requires": { - "bluebird": "^3.5.5", - "chownr": "^1.1.1", - "figgy-pudding": "^3.5.1", + "@npmcli/move-file": "^1.0.1", + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", "glob": "^7.1.4", - "graceful-fs": "^4.1.15", - "infer-owner": "^1.0.3", - "lru-cache": "^5.1.1", - "mississippi": "^3.0.0", - "mkdirp": "^0.5.1", - "move-concurrently": "^1.0.1", + "infer-owner": "^1.0.4", + "lru-cache": "^6.0.0", + "minipass": "^3.1.1", + "minipass-collect": "^1.0.2", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.2", + "mkdirp": "^1.0.3", + "p-map": "^4.0.0", "promise-inflight": "^1.0.1", - "rimraf": "^2.6.3", - "ssri": "^6.0.1", - "unique-filename": "^1.1.1", - "y18n": "^4.0.0" + "rimraf": "^3.0.2", + "ssri": "^8.0.1", + "tar": "^6.0.2", + "unique-filename": "^1.1.1" }, "dependencies": { - "bluebird": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", - "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "dev": true }, + "fs-minipass": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", + "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", + "dev": true, + "requires": { + "minipass": "^3.0.0" + } + }, "glob": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", - "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", + "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", "dev": true, "requires": { "fs.realpath": "^1.0.0", @@ -26333,40 +26344,67 @@ "path-is-absolute": "^1.0.0" } }, - "graceful-fs": { - "version": "4.2.6", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", - "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", - "dev": true - }, "lru-cache": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", - "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, "requires": { - "yallist": "^3.0.2" + "yallist": "^4.0.0" } }, - "rimraf": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", - "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "minipass": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz", + "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==", "dev": true, "requires": { - "glob": "^7.1.3" + "yallist": "^4.0.0" } }, - "y18n": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", - "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==", + "minizlib": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", + "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", + "dev": true, + "requires": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + } + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true }, + "p-map": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", + "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", + "dev": true, + "requires": { + "aggregate-error": "^3.0.0" + } + }, + "tar": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", + "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", + "dev": true, + "requires": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^3.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + } + }, "yallist": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true } } @@ -28100,38 +28138,73 @@ } }, "copy-webpack-plugin": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz", - "integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.0.tgz", + "integrity": "sha512-p4eIA0ZWk4UI+xewyxOBTDCSDfjK6nCkr3zhDenoi7SFd+NgDNH/D14IZeFaCEFcK/psNDcAUMOB+sAxZ3SsAA==", "dev": true, "requires": { - "cacache": "^12.0.3", - "find-cache-dir": "^2.1.0", - "glob-parent": "^3.1.0", - "globby": "^7.1.1", - "is-glob": "^4.0.1", - "loader-utils": "^1.2.3", - "minimatch": "^3.0.4", + "cacache": "^15.0.5", + "fast-glob": "^3.2.4", + "find-cache-dir": "^3.3.1", + "glob-parent": "^5.1.1", + "globby": "^11.0.1", + "loader-utils": "^2.0.0", "normalize-path": "^3.0.0", - "p-limit": "^2.2.1", - "schema-utils": "^1.0.0", - "serialize-javascript": "^4.0.0", - "webpack-log": "^2.0.0" + "p-limit": "^3.0.2", + "schema-utils": "^3.0.0", + "serialize-javascript": "^5.0.1", + "webpack-sources": "^1.4.3" }, "dependencies": { + "@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true + }, + "@types/json-schema": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", + "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", + "dev": true + }, + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true + }, + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "dev": true }, - "dir-glob": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz", - "integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==", + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "dev": true, "requires": { - "path-type": "^3.0.0" + "fill-range": "^7.0.1" } }, "emojis-list": { @@ -28140,18 +28213,55 @@ "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", "dev": true }, + "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==", + "dev": true + }, + "fast-glob": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz", + "integrity": "sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==", + "dev": true, + "requires": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, "globby": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz", - "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=", + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz", + "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==", "dev": true, "requires": { - "array-union": "^1.0.1", - "dir-glob": "^2.0.0", - "glob": "^7.1.2", - "ignore": "^3.3.5", - "pify": "^3.0.0", - "slash": "^1.0.0" + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.1.1", + "ignore": "^5.1.4", + "merge2": "^1.3.0", + "slash": "^3.0.0" } }, "is-glob": { @@ -28163,24 +28273,46 @@ "is-extglob": "^2.1.1" } }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", + "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", "dev": true, "requires": { - "minimist": "^1.2.0" + "minimist": "^1.2.5" } }, "loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", "dev": true, "requires": { "big.js": "^5.2.2", "emojis-list": "^3.0.0", - "json5": "^1.0.1" + "json5": "^2.1.2" + } + }, + "merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true + }, + "micromatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", + "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", + "dev": true, + "requires": { + "braces": "^3.0.1", + "picomatch": "^2.2.3" } }, "normalize-path": { @@ -28190,25 +28322,64 @@ "dev": true }, "p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", "dev": true, "requires": { - "p-try": "^2.0.0" + "yocto-queue": "^0.1.0" } }, - "p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "picomatch": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", + "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", "dev": true }, - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "schema-utils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz", + "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.7", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + }, + "serialize-javascript": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz", + "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, + "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 + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + }, + "webpack-sources": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", + "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==", + "dev": true, + "requires": { + "source-list-map": "^2.0.0", + "source-map": "~0.6.1" + } } } }, @@ -33199,43 +33370,42 @@ } }, "find-cache-dir": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz", - "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", + "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", "dev": true, "requires": { "commondir": "^1.0.1", - "make-dir": "^2.0.0", - "pkg-dir": "^3.0.0" + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" }, "dependencies": { "find-up": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", - "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", "dev": true, "requires": { - "locate-path": "^3.0.0" + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" } }, "locate-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", - "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", "dev": true, "requires": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" + "p-locate": "^4.1.0" } }, "make-dir": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", - "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", "dev": true, "requires": { - "pify": "^4.0.1", - "semver": "^5.6.0" + "semver": "^6.0.0" } }, "p-limit": { @@ -33248,12 +33418,12 @@ } }, "p-locate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", - "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", "dev": true, "requires": { - "p-limit": "^2.0.0" + "p-limit": "^2.2.0" } }, "p-try": { @@ -33262,25 +33432,25 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "pify": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", - "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true }, "pkg-dir": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", - "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", "dev": true, "requires": { - "find-up": "^3.0.0" + "find-up": "^4.0.0" } }, "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true } } @@ -35494,9 +35664,9 @@ "dev": true }, "ignore": { - "version": "3.3.10", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", - "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", + "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==", "dev": true }, "ignore-emit-webpack-plugin": { @@ -44527,36 +44697,6 @@ "minipass": "^2.2.1" } }, - "mississippi": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", - "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==", - "dev": true, - "requires": { - "concat-stream": "^1.5.0", - "duplexify": "^3.4.2", - "end-of-stream": "^1.1.0", - "flush-write-stream": "^1.0.0", - "from2": "^2.1.0", - "parallel-transform": "^1.1.0", - "pump": "^3.0.0", - "pumpify": "^1.3.3", - "stream-each": "^1.1.0", - "through2": "^2.0.0" - }, - "dependencies": { - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - } - } - }, "mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -54155,9 +54295,9 @@ "dev": true }, "slash": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", - "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", "dev": true }, "slice-ansi": { @@ -54584,12 +54724,29 @@ } }, "ssri": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", - "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", + "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==", "dev": true, "requires": { - "figgy-pudding": "^3.5.1" + "minipass": "^3.1.1" + }, + "dependencies": { + "minipass": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz", + "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + } } }, "stable": { diff --git a/package.json b/package.json index 8a97fc28d8e97e..8f60c962dfa7b8 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "chalk": "4.1.1", "commander": "4.1.0", "concurrently": "3.5.0", - "copy-webpack-plugin": "5.1.2", + "copy-webpack-plugin": "6.4.0", "core-js-builder": "3.11.0", "cross-env": "3.2.4", "css-loader": "5.1.3", diff --git a/webpack.config.js b/webpack.config.js index 20885587050e3a..79240ac2b514b7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); const TerserPlugin = require( 'terser-webpack-plugin' ); const postcss = require( 'postcss' ); const { escapeRegExp, compact } = require( 'lodash' ); -const { sep } = require( 'path' ); +const { join, sep } = require( 'path' ); const fastGlob = require( 'fast-glob' ); /** @@ -205,122 +205,115 @@ module.exports = { 'shortcode', 'warning', ] ), - new CopyWebpackPlugin( - gutenbergPackages.map( ( packageName ) => ( { - from: `./packages/${ packageName }/build-style/*.css`, - to: `./build/${ packageName }/`, - flatten: true, - transform: stylesTransform, - } ) ) - ), - new CopyWebpackPlugin( [ - { - from: './packages/block-library/build-style/*/style.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }style\\.css$` - ), - to: 'build/block-library/blocks/[1]/style.css', - transform: stylesTransform, - }, - { - from: './packages/block-library/build-style/*/style-rtl.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }style-rtl\\.css$` - ), - to: 'build/block-library/blocks/[1]/style-rtl.css', - transform: stylesTransform, - }, - { - from: './packages/block-library/build-style/*/editor.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }editor\\.css$` - ), - to: 'build/block-library/blocks/[1]/editor.css', - transform: stylesTransform, - }, - { - from: './packages/block-library/build-style/*/editor-rtl.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }editor-rtl\\.css$` - ), - to: 'build/block-library/blocks/[1]/editor-rtl.css', - transform: stylesTransform, - }, - { - from: './packages/block-library/build-style/*/theme.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }theme\\.css$` - ), - to: 'build/block-library/blocks/[1]/theme.css', - transform: stylesTransform, - }, - { - from: './packages/block-library/build-style/*/theme-rtl.css', - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }theme-rtl\\.css$` - ), - to: 'build/block-library/blocks/[1]/theme-rtl.css', - transform: stylesTransform, - }, - ] ), - new CopyWebpackPlugin( - Object.entries( { - './packages/block-library/src/': 'build/block-library/blocks/', - './packages/edit-widgets/src/blocks/': - 'build/edit-widgets/blocks/', - './packages/widgets/src/blocks/': 'build/widgets/blocks/', - } ).flatMap( ( [ from, to ] ) => [ - { - from: `${ from }/**/index.php`, - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }index\\.php$` - ), - to: `${ to }/[1].php`, - transform: ( content ) => { - content = content.toString(); + new CopyWebpackPlugin( { + patterns: [].concat( + gutenbergPackages.map( ( packageName ) => ( { + from: `./packages/${ packageName }/build-style/*.css`, + to: `./build/${ packageName }/`, + flatten: true, + transform: stylesTransform, + noErrorOnMissing: true, + } ) ), + [ + 'style', + 'style-rtl', + 'editor', + 'editor-rtl', + 'theme', + 'theme-rtl', + ].map( ( filename ) => ( { + from: `./packages/block-library/build-style/*/${ filename }.css`, + to( { absoluteFilename } ) { + const [ , dirname ] = absoluteFilename.match( + new RegExp( + `([\\w-]+)${ escapeRegExp( + sep + ) }${ filename }\\.css$` + ) + ); - // Within content, search for any function definitions. For - // each, replace every other reference to it in the file. - return ( - content - .match( /^function [^\(]+/gm ) - .reduce( ( result, functionName ) => { - // Trim leading "function " prefix from match. - functionName = functionName.slice( 9 ); + return join( + 'build/block-library/blocks', + dirname, + filename + '.css' + ); + }, + transform: stylesTransform, + } ) ), + Object.entries( { + './packages/block-library/src/': + 'build/block-library/blocks/', + './packages/edit-widgets/src/blocks/': + 'build/edit-widgets/blocks/', + './packages/widgets/src/blocks/': 'build/widgets/blocks/', + } ).flatMap( ( [ from, to ] ) => [ + { + from: `${ from }/**/index.php`, + to( { absoluteFilename } ) { + const [ , dirname ] = absoluteFilename.match( + new RegExp( + `([\\w-]+)${ escapeRegExp( + sep + ) }index\\.php$` + ) + ); - // Prepend the Gutenberg prefix, substituting any - // other core prefix (e.g. "wp_"). - return result.replace( - new RegExp( functionName, 'g' ), - ( match ) => - 'gutenberg_' + - match.replace( /^wp_/, '' ) - ); - }, content ) - // The core blocks override procedure takes place in - // the init action default priority to ensure that core - // blocks would have been registered already. Since the - // blocks implementations occur at the default priority - // and due to WordPress hooks behavior not considering - // mutations to the same priority during another's - // callback, the Gutenberg build blocks are modified - // to occur at a later priority. - .replace( - /(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/, - '$1, 20' + return join( to, `${ dirname }.php` ); + }, + transform: ( content ) => { + content = content.toString(); + + // Within content, search for any function definitions. For + // each, replace every other reference to it in the file. + return ( + content + .match( /^function [^\(]+/gm ) + .reduce( ( result, functionName ) => { + // Trim leading "function " prefix from match. + functionName = functionName.slice( 9 ); + + // Prepend the Gutenberg prefix, substituting any + // other core prefix (e.g. "wp_"). + return result.replace( + new RegExp( functionName, 'g' ), + ( match ) => + 'gutenberg_' + + match.replace( /^wp_/, '' ) + ); + }, content ) + // The core blocks override procedure takes place in + // the init action default priority to ensure that core + // blocks would have been registered already. Since the + // blocks implementations occur at the default priority + // and due to WordPress hooks behavior not considering + // mutations to the same priority during another's + // callback, the Gutenberg build blocks are modified + // to occur at a later priority. + .replace( + /(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/, + '$1, 20' + ) + ); + }, + noErrorOnMissing: true, + }, + { + from: `${ from }/*/block.json`, + to( { absoluteFilename } ) { + const [ , dirname ] = absoluteFilename.match( + new RegExp( + `([\\w-]+)${ escapeRegExp( + sep + ) }block\\.json$` ) - ); + ); + + return join( to, dirname, 'block.json' ); + }, }, - }, - { - from: `${ from }/*/block.json`, - test: new RegExp( - `([\\w-]+)${ escapeRegExp( sep ) }block\\.json$` - ), - to: `${ to }/[1]/block.json`, - }, - ] ) - ), + ] ) + ), + } ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), mode === 'production' && new ReadableJsAssetsWebpackPlugin(), ].filter( Boolean ), From e41403da4417e064ec010913ed2c24d03dcc1605 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 7 Jul 2021 12:52:34 +0200 Subject: [PATCH 12/40] [Mobile] - Changelog update for color/background customization (#33250) * Mobile - Update CHANGELOG: For color/background customization feature * Add changelog PR id --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 2f4626499794b5..d38318bc6303d6 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Update loading and failed screens for web version of the editor [#32395] - [*] Handle floating keyboard case - Fix issue with the block selector on iPad. [#33089] +- [**] Added color/background customization for text blocks. [#33250] ## 1.56.0 - [*] Tweaks to the badge component's styling, including change of background color and reduced padding. [#32865] From 3ceb0f977b1f33117812640a313e4740777b8c4d Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 7 Jul 2021 10:54:58 +0000 Subject: [PATCH 13/40] Bump plugin version to 11.0.0 --- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index ab7049ffb7bf9e..231314448aa1b7 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: 11.0.0-rc.1 + * Version: 11.0.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index e4954bfdaff6ff..6561dea5ba26c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0-rc.1", + "version": "11.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8f60c962dfa7b8..8b5e3209e39c85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0-rc.1", + "version": "11.0.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index 94bfddb91a1420..40b9644edb4123 100644 --- a/readme.txt +++ b/readme.txt @@ -55,4 +55,4 @@ View release page. +To read the changelog for Gutenberg 11.0.0, please navigate to the release page. From d249fada4d1b07863befcf40d23b1919ffee412c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 7 Jul 2021 13:02:19 +0200 Subject: [PATCH 14/40] Update the package-lock.json file --- package-lock.json | 9 --------- 1 file changed, 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6561dea5ba26c1..6787845515c1cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53797,15 +53797,6 @@ "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz", "integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=" }, - "serialize-javascript": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", - "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", - "dev": true, - "requires": { - "randombytes": "^2.1.0" - } - }, "serve-favicon": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz", From 2356b2d3165acd0af980d52bc93fb1e42748bb25 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 7 Jul 2021 12:10:07 +0100 Subject: [PATCH 15/40] Add a SearchControl component and reuse accross the UI (#32935) --- docs/manifest.json | 6 ++ packages/block-editor/src/components/index.js | 1 - .../src/components/inserter/menu.js | 6 +- .../src/components/inserter/menu.native.js | 9 +- .../src/components/inserter/quick-inserter.js | 6 +- .../src/components/inserter/search-form.js | 65 -------------- .../src/components/inserter/style.native.scss | 31 ------- .../src/components/inserter/style.scss | 47 +--------- .../src/template-part/edit/selection/index.js | 4 +- packages/components/src/index.js | 1 + packages/components/src/index.native.js | 1 + .../components/src/search-control/README.md | 87 +++++++++++++++++++ .../components/src/search-control/index.js | 70 +++++++++++++++ .../src/search-control/index.native.js} | 13 ++- .../src/search-control/stories/index.js | 36 ++++++++ .../src/search-control/style.native.scss | 30 +++++++ .../components/src/search-control/style.scss | 52 +++++++++++ packages/components/src/style.scss | 1 + packages/e2e-test-utils/src/inserter.js | 2 +- .../specs/editor/plugins/cpt-locking.test.js | 4 +- .../editor/various/inserting-blocks.test.js | 8 +- .../specs/editor/various/writing-flow.test.js | 4 +- .../src/components/block-manager/index.js | 15 +--- .../src/components/block-manager/style.scss | 13 --- 24 files changed, 322 insertions(+), 190 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter/search-form.js create mode 100644 packages/components/src/search-control/README.md create mode 100644 packages/components/src/search-control/index.js rename packages/{block-editor/src/components/inserter/search-form.native.js => components/src/search-control/index.native.js} (91%) create mode 100644 packages/components/src/search-control/stories/index.js create mode 100644 packages/components/src/search-control/style.native.scss create mode 100644 packages/components/src/search-control/style.scss diff --git a/docs/manifest.json b/docs/manifest.json index 5d71772ac69dd1..42f2c0ae80a8ed 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1145,6 +1145,12 @@ "markdown_source": "../packages/components/src/scrollable/README.md", "parent": "components" }, + { + "title": "SearchControl", + "slug": "search-control", + "markdown_source": "../packages/components/src/search-control/README.md", + "parent": "components" + }, { "title": "SelectControl", "slug": "select-control", diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index a781b86dc25242..6daa8ddd4df354 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -121,7 +121,6 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; export { default as __experimentalLibrary } from './inserter/library'; -export { default as __experimentalSearchForm } from './inserter/search-form'; export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts'; export { MultiSelectScrollIntoView } from './selection-scroll-into-view'; export { default as NavigableToolbar } from './navigable-toolbar'; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 9db480c49d5b09..19b01b5a66b3eb 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useState, useCallback, useMemo } from '@wordpress/element'; -import { VisuallyHidden } from '@wordpress/components'; +import { VisuallyHidden, SearchControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -10,7 +10,6 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import Tips from './tips'; -import InserterSearchForm from './search-form'; import InserterPreviewPanel from './preview-panel'; import BlockTypesTab from './block-types-tab'; import BlockPatternsTabs from './block-patterns-tab'; @@ -171,7 +170,8 @@ function InserterMenu( {
{ /* the following div is necessary to fix the sticky position of the search form */ }
- { if ( hoveredItem ) setHoveredItem( null ); setFilterValue( value ); diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index ffac41438fb03c..afaffa950028f3 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -14,13 +14,16 @@ import { import { useEffect, useState, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; -import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; +import { + BottomSheet, + BottomSheetConsumer, + SearchControl, +} from '@wordpress/components'; /** * Internal dependencies */ import InserterSearchResults from './search-results'; -import InserterSearchForm from './search-form'; import { store as blockEditorStore } from '../../store'; import InserterTabs from './tabs'; import styles from './style.scss'; @@ -192,7 +195,7 @@ function InserterMenu( { header={ <> { showSearchForm && ( - diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index ca4ff4c2fa2743..e9060e827a938f 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -8,13 +8,12 @@ import classnames from 'classnames'; */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button, SearchControl } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import InserterSearchForm from './search-form'; import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import usePatternsState from './hooks/use-patterns-state'; @@ -87,7 +86,8 @@ export default function QuickInserter( { } ) } > { showSearch && ( - { setFilterValue( value ); diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js deleted file mode 100644 index 7914e842fd3dcd..00000000000000 --- a/packages/block-editor/src/components/inserter/search-form.js +++ /dev/null @@ -1,65 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { useInstanceId } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; -import { VisuallyHidden, Button } from '@wordpress/components'; -import { Icon, search, closeSmall } from '@wordpress/icons'; -import { useRef } from '@wordpress/element'; - -function InserterSearchForm( { - className, - onChange, - value, - label, - placeholder, -} ) { - const instanceId = useInstanceId( InserterSearchForm ); - const searchInput = useRef(); - - return ( -
- - { label || placeholder } - - onChange( event.target.value ) } - autoComplete="off" - value={ value || '' } - /> -
- { !! value && ( -
-
- ); -} - -export default InserterSearchForm; diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index a0f017931a62aa..1ed3d8ab6a3bc9 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -13,37 +13,6 @@ padding-top: 8; } -.searchForm { - height: 46px; - border-radius: 8px; - color: $gray-dark; - margin: $grid-unit-30; - background-color: $gray-light; - flex-direction: row; - justify-content: space-between; -} - -.searchFormDark { - background-color: rgba($white, 0.07); -} - -.searchFormInput { - color: $gray-dark; - flex: 2; -} - -.searchFormInputDark { - color: $white; -} - -.searchFormPlaceholder { - color: $gray; -} - -.searchFormPlaceholderDark { - color: rgba($white, 0.8); -} - .inserter-tabs__wrapper { overflow: hidden; } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index cb8f94f93eb6e0..8792dfe9699094 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -99,55 +99,14 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__search { + background: $white; padding: $grid-unit-20; position: sticky; top: 0; - background: $white; z-index: z-index(".block-editor-inserter__search"); - input[type="search"].block-editor-inserter__search-input { - @include input-control; - display: block; - padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; - background: $gray-100; - border: none; - width: 100%; - height: $grid-unit-60; - - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; - @include break-small { - font-size: $default-font-size; - } - - &:focus { - background: $white; - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - - &::placeholder { - color: $gray-700; - } - - &::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration { - -webkit-appearance: none; - } - } -} - -.block-editor-inserter__search-icon { - position: absolute; - top: 0; - right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2; - bottom: 0; - display: flex; - align-items: center; - - > svg { - margin: $grid-unit-10; + .components-search-control__icon { + right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2; } } diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js index 2ed5ac835f81f2..4bdef9130e33d0 100644 --- a/packages/block-library/src/template-part/edit/selection/index.js +++ b/packages/block-library/src/template-part/edit/selection/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor'; +import { SearchControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; /** @@ -34,7 +34,7 @@ export default function TemplatePartSelection( { onKeyPress={ stopKeyPropagation } onKeyDown={ preventArrowKeysPropagation } > - + ); +} +``` + +### Props + +The set of props accepted by the component will be specified below. +Props not included in this set will be applied to the input element. + +#### label + +If this property is added, a label will be generated using label property as the content. + +- Type: `String` +- Required: Yes + +#### placeholder + +If this property is added, a specific placeholder will be used for the input. + +- Type: `String` +- Required: No +#### value + +The current value of the input. + +- Type: `String | Number` +- Required: Yes + +#### className + +The class that will be added to the classes of the wrapper div. + +- Type: `String` +- Required: No + +#### onChange + +A function that receives the value of the input. + +- Type: `function` +- Required: Yes + +#### help + +If this property is added, a help text will be generated using help property as the content. + +- Type: `String|WPElement` +- Required: No +### hideLabelFromVision + +If true, the label will only be visible to screen readers. + +- Type: `Boolean` +- Required: No + +## Related components + +- To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl. diff --git a/packages/components/src/search-control/index.js b/packages/components/src/search-control/index.js new file mode 100644 index 00000000000000..fc0bd900f3b158 --- /dev/null +++ b/packages/components/src/search-control/index.js @@ -0,0 +1,70 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useInstanceId } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; +import { Icon, search, closeSmall } from '@wordpress/icons'; +import { useRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Button } from '../'; +import BaseControl from '../base-control'; + +function SearchControl( { + className, + onChange, + value, + label, + placeholder = __( 'Search' ), + hideLabelFromVision = true, + help, +} ) { + const instanceId = useInstanceId( SearchControl ); + const searchInput = useRef(); + const id = `components-search-control-${ instanceId }`; + + return ( + +
+ onChange( event.target.value ) } + autoComplete="off" + value={ value || '' } + /> +
+ { !! value && ( +
+
+ + ); +} + +export default SearchControl; diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/components/src/search-control/index.native.js similarity index 91% rename from packages/block-editor/src/components/inserter/search-form.native.js rename to packages/components/src/search-control/index.native.js index f23d6b95b91001..0ab3e4e69112b5 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/components/src/search-control/index.native.js @@ -22,7 +22,12 @@ import { */ import styles from './style.scss'; -function InserterSearchForm( { value, onChange } ) { +function SearchControl( { + value, + onChange, + label, + placeholder = __( 'Search' ), +} ) { const [ isActive, setIsActive ] = useState( false ); const inputRef = useRef(); @@ -57,7 +62,7 @@ function InserterSearchForm( { value, onChange } ) { /> ) : ( { inputRef.current.focus(); @@ -72,7 +77,7 @@ function InserterSearchForm( { value, onChange } ) { onChangeText={ onChange } onFocus={ () => setIsActive( true ) } value={ value } - placeholder={ __( 'Search blocks' ) } + placeholder={ placeholder } /> { !! value && ( @@ -89,4 +94,4 @@ function InserterSearchForm( { value, onChange } ) { ); } -export default InserterSearchForm; +export default SearchControl; diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js new file mode 100644 index 00000000000000..2710542a5d6a25 --- /dev/null +++ b/packages/components/src/search-control/stories/index.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { boolean, text } from '@storybook/addon-knobs'; + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import SearchControl from '../'; + +export default { + title: 'Components/SearchControl', + component: SearchControl, +}; + +export const _default = () => { + const [ value, setValue ] = useState(); + const label = text( 'Label', 'Label Text' ); + const hideLabelFromVision = boolean( 'Hide Label From Vision', true ); + const help = text( 'Help Text', 'Help text to explain the input.' ); + + return ( + + ); +}; diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss new file mode 100644 index 00000000000000..8617ad232552f7 --- /dev/null +++ b/packages/components/src/search-control/style.native.scss @@ -0,0 +1,30 @@ +.searchForm { + height: 46px; + border-radius: 8px; + color: $gray-dark; + margin: $grid-unit-30; + background-color: $gray-light; + flex-direction: row; + justify-content: space-between; +} + +.searchFormDark { + background-color: rgba($white, 0.07); +} + +.searchFormInput { + color: $gray-dark; + flex: 2; +} + +.searchFormInputDark { + color: $white; +} + +.searchFormPlaceholder { + color: $gray; +} + +.searchFormPlaceholderDark { + color: rgba($white, 0.8); +} diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss new file mode 100644 index 00000000000000..247b726fc9dd93 --- /dev/null +++ b/packages/components/src/search-control/style.scss @@ -0,0 +1,52 @@ +.components-search-control { + position: relative; + + input[type="search"].components-search-control__input { + @include input-control; + display: block; + padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; + background: $gray-100; + border: none; + width: 100%; + height: $grid-unit-60; + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + + &:focus { + background: $white; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + } + + &::placeholder { + color: $gray-700; + } + + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + -webkit-appearance: none; + } + } +} + +.components-search-control__icon { + position: absolute; + top: 0; + right: ( $grid-unit-60 - $icon-size ) / 2; + bottom: 0; + display: flex; + align-items: center; + + > svg { + margin: $grid-unit-10 0; + } +} + +.components-search-control__input-wrapper { + position: relative; +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 13c2049b894bf5..21f13e7d492f55 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -35,6 +35,7 @@ @import "./responsive-wrapper/style.scss"; @import "./sandbox/style.scss"; @import "./scroll-lock/style.scss"; +@import "./search-control/style.scss"; @import "./select-control/style.scss"; @import "./snackbar/style.scss"; @import "./swatch/style.scss"; diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index 48a4985bfe62fe..1bcce329f07dff 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -7,7 +7,7 @@ import { canvas } from './canvas'; // This selector is written to support the current and old inserter markup // because the performance tests need to be able to run across versions. const INSERTER_SEARCH_SELECTOR = - '.block-editor-inserter__search-input,input.block-editor-inserter__search'; + '.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search'; /** * Opens the global block inserter. diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index aee6398871a9b1..03abfc56d189b8 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -123,12 +123,12 @@ describe( 'cpt locking', () => { await page.click( '.wp-block-column .block-editor-button-block-appender' ); - await page.type( '.block-editor-inserter__search-input', 'image' ); + await page.type( '.block-editor-inserter__search input', 'image' ); await pressKeyTimes( 'Tab', 2 ); await page.keyboard.press( 'Enter' ); await page.click( '.edit-post-header-toolbar__inserter-toggle' ); await page.type( - '.block-editor-inserter__search-input', + '.block-editor-inserter__search input', 'gallery' ); await pressKeyTimes( 'Tab', 2 ); diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js index e4a0e07a13d81d..acc7965c5621d2 100644 --- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js @@ -147,7 +147,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement && document.activeElement.classList.contains( - 'block-editor-inserter__search-input' + 'components-search-control__input' ) ); await page.keyboard.type( 'para' ); @@ -185,7 +185,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-inserter__search-input' + 'components-search-control__input' ); // Try using the up arrow key (vertical navigation triggers the issue described in #9583). @@ -196,7 +196,7 @@ describe( 'Inserting blocks', () => { () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-inserter__search-input' + 'components-search-control__input' ); // Tab to the block list @@ -250,7 +250,7 @@ describe( 'Inserting blocks', () => { ); // Insert a paragraph block. - await page.waitForSelector( '.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input' ); // Search for the paragraph block if it's not in the list of blocks shown. if ( ! page.$( '.editor-block-list-item-paragraph' ) ) { diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 3b8e6746ac866a..566303fabfeaf2 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -29,7 +29,7 @@ const addParagraphsAndColumnsDemo = async () => { await page.keyboard.press( 'Enter' ); await page.click( ':focus [aria-label="Two columns; equal split"]' ); await page.click( ':focus .block-editor-button-block-appender' ); - await page.waitForSelector( ':focus.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph. @@ -40,7 +40,7 @@ const addParagraphsAndColumnsDemo = async () => { // is a temporary solution. await page.focus( '.wp-block[data-type="core/column"]:nth-child(2)' ); await page.click( ':focus .block-editor-button-block-appender' ); - await page.waitForSelector( ':focus.block-editor-inserter__search-input' ); + await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph. diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js index 8dc3aea8ec91dc..b183f8f7e18749 100644 --- a/packages/edit-post/src/components/block-manager/index.js +++ b/packages/edit-post/src/components/block-manager/index.js @@ -8,10 +8,9 @@ import { filter, includes, isArray } from 'lodash'; */ import { store as blocksStore } from '@wordpress/blocks'; import { withSelect } from '@wordpress/data'; -import { VisuallyHidden, TextControl } from '@wordpress/components'; +import { SearchControl } from '@wordpress/components'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -27,7 +26,6 @@ function BlockManager( { numberOfHiddenBlocks, } ) { const [ search, setSearch ] = useState( '' ); - const instanceId = useInstanceId( BlockManager ); // Filtering occurs here (as opposed to `withSelect`) to avoid // wasted renders by consequence of `Array#filter` producing @@ -55,15 +53,8 @@ function BlockManager( { ) }
) } - - { __( 'Search for a block' ) } - - setSearch( nextSearch ) } diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss index e375b5091df2b8..3905eeea059f7a 100644 --- a/packages/edit-post/src/components/block-manager/style.scss +++ b/packages/edit-post/src/components/block-manager/style.scss @@ -6,19 +6,6 @@ .edit-post-block-manager__search { margin: $grid-unit-20 0; - - .components-base-control__field { - margin-bottom: 0; - } - - .components-base-control__label { - margin-top: -0.25 * $grid-unit-20; - } - - input[type="search"].components-text-control__input { - padding: $grid-unit-10; - border-radius: $radius-block-ui; - } } .edit-post-block-manager__disabled-blocks-count { From 76ee72db4126ed8f4879e68b6e040eacb56d4fa6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 7 Jul 2021 12:29:37 +0100 Subject: [PATCH 16/40] =?UTF-8?q?Changelog=20generation:=20remove=20?= =?UTF-8?q?=E2=80=9Cexperimental=E2=80=9D=20status=20from=20WP=205.8=20sta?= =?UTF-8?q?ble=20items=20(#33214)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Remove “experimental” status from items to be released as stable in WP 5.8 * Remove additional blocks to implicit stable status --- bin/plugin/commands/changelog.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/bin/plugin/commands/changelog.js b/bin/plugin/commands/changelog.js index 11d962def06496..9384bc6540f439 100644 --- a/bin/plugin/commands/changelog.js +++ b/bin/plugin/commands/changelog.js @@ -61,18 +61,13 @@ const manifest = require( '../../../package.json' ); */ const LABEL_TYPE_MAPPING = { '[Block] Navigation': 'Experiments', - '[Block] Query': 'Experiments', '[Block] Post Comments Count': 'Experiments', '[Block] Post Comments Form': 'Experiments', '[Block] Post Comments': 'Experiments', - '[Block] Post Featured Image': 'Experiments', '[Block] Post Hierarchical Terms': 'Experiments', - '[Block] Post Title': 'Experiments', - '[Block] Site Logo': 'Experiments', '[Feature] Full Site Editing': 'Experiments', 'Global Styles': 'Experiments', '[Feature] Navigation Screen': 'Experiments', - '[Feature] Widgets Screen': 'Experiments', '[Package] Dependency Extraction Webpack Plugin': 'Tools', '[Package] Jest Puppeteer aXe': 'Tools', '[Package] E2E Tests': 'Tools', From f3f532015d3200f8b5b84dc2978e423b72c1fa98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 7 Jul 2021 13:42:02 +0200 Subject: [PATCH 17/40] Plugin: Remove deprecated APIs that are no longer supported in version 11.0 (#33258) --- packages/blocks/CHANGELOG.md | 4 ++++ packages/blocks/README.md | 15 --------------- packages/blocks/src/api/index.js | 1 - packages/blocks/src/api/registration.js | 22 ---------------------- 4 files changed, 4 insertions(+), 38 deletions(-) diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index d0f78b62e5e5cc..83a96ddaddc5e9 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- The deprecated `registerBlockTypeFromMetadata` function was removed. Please use `registerBlockType` that covers the same functionality ([#32030](https://github.com/WordPress/gutenberg/pull/32030)). + ## 9.1.0 (2021-05-20) ### New API diff --git a/packages/blocks/README.md b/packages/blocks/README.md index 4b7109bd1fe311..22c6a6db40cb9e 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -713,21 +713,6 @@ _Returns_ - `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`. -# **registerBlockTypeFromMetadata** - -> **Deprecated** Use `registerBlockType` instead. - -Registers a new block provided from metadata stored in `block.json` file. - -_Parameters_ - -- _metadata_ `Object`: Block metadata loaded from `block.json`. -- _additionalSettings_ `Object`: Additional block settings. - -_Returns_ - -- `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`. - # **registerBlockVariation** Registers a new block variation for the given block type. diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 073fee3396cc98..0cba447e71736a 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -108,7 +108,6 @@ export { getCategories, setCategories, updateCategory } from './categories'; // children of another block. export { registerBlockType, - registerBlockTypeFromMetadata, registerBlockCollection, unregisterBlockType, setFreeformContentHandlerName, diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js index 924267b9ad07c8..c253f34f04d1a8 100644 --- a/packages/blocks/src/api/registration.js +++ b/packages/blocks/src/api/registration.js @@ -22,7 +22,6 @@ import { /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { applyFilters } from '@wordpress/hooks'; import { select, dispatch } from '@wordpress/data'; import { _x } from '@wordpress/i18n'; @@ -424,27 +423,6 @@ function translateBlockSettingUsingI18nSchema( return settingValue; } -/** - * Registers a new block provided from metadata stored in `block.json` file. - * - * @deprecated Use `registerBlockType` instead. - * - * @param {Object} metadata Block metadata loaded from `block.json`. - * @param {Object} additionalSettings Additional block settings. - * - * @return {?WPBlock} The block, if it has been successfully registered; - * otherwise `undefined`. - */ -export function registerBlockTypeFromMetadata( metadata, additionalSettings ) { - deprecated( 'wp.blocks.registerBlockTypeFromMetadata', { - since: '10.7', - plugin: 'Gutenberg', - alternative: 'wp.blocks.registerBlockType', - version: '11.0', - } ); - return registerBlockType( metadata, additionalSettings ); -} - /** * Registers a new block collection to group blocks in the same namespace in the inserter. * From 1eaad3cbad327e9fad5d8eef93c46aa773b7080b Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 7 Jul 2021 22:59:57 +1000 Subject: [PATCH 18/40] Columns block: Add stack on mobile setting to allow for columns without mobile breakpoints (#31816) * Columns block: Add stack on mobile setting * Update selector to specify the direct child * Fix deprecations to include the new attribute, add another set of test fixtures * Add nowrap to is-not-stacked-on-mobile Co-authored-by: Andrew Serong --- packages/block-library/src/columns/block.json | 4 + .../block-library/src/columns/deprecated.js | 14 ++- packages/block-library/src/columns/edit.js | 20 ++- packages/block-library/src/columns/save.js | 3 +- packages/block-library/src/columns/style.scss | 119 +++++++++++------- .../fixtures/blocks/core__columns.json | 1 + .../blocks/core__columns__deprecated.json | 4 +- ...re__columns__is-not-stacked-on-mobile.html | 24 ++++ ...re__columns__is-not-stacked-on-mobile.json | 76 +++++++++++ ...umns__is-not-stacked-on-mobile.parsed.json | 83 ++++++++++++ ...__is-not-stacked-on-mobile.serialized.html | 21 ++++ 11 files changed, 315 insertions(+), 54 deletions(-) create mode 100644 packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index f3bc49d3d24971..79b82f4b7a5952 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -8,6 +8,10 @@ "attributes": { "verticalAlignment": { "type": "string" + }, + "isStackedOnMobile": { + "type": "boolean", + "default": true } }, "supports": { diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 34b3076904a63f..8c3f7a27d2b6d4 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -52,6 +52,7 @@ const migrateCustomColors = ( attributes ) => { return { ...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ), style, + isStackedOnMobile: true, }; }; @@ -166,7 +167,13 @@ export default [ createBlock( 'core/column', {}, columnBlocks ) ); - return [ omit( attributes, [ 'columns' ] ), migratedInnerBlocks ]; + return [ + { + ...omit( attributes, [ 'columns' ] ), + isStackedOnMobile: true, + }, + migratedInnerBlocks, + ]; }, save( { attributes } ) { const { columns } = attributes; @@ -186,7 +193,10 @@ export default [ }, }, migrate( attributes, innerBlocks ) { - attributes = omit( attributes, [ 'columns' ] ); + attributes = { + ...omit( attributes, [ 'columns' ] ), + isStackedOnMobile: true, + }; return [ attributes, innerBlocks ]; }, diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 0f77c3f843dbe8..35534d503bb727 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -8,7 +8,12 @@ import { dropRight, get, times } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl, Notice } from '@wordpress/components'; +import { + Notice, + PanelBody, + RangeControl, + ToggleControl, +} from '@wordpress/components'; import { InspectorControls, @@ -49,11 +54,12 @@ const ALLOWED_BLOCKS = [ 'core/column' ]; function ColumnsEditContainer( { attributes, + setAttributes, updateAlignment, updateColumns, clientId, } ) { - const { verticalAlignment } = attributes; + const { isStackedOnMobile, verticalAlignment } = attributes; const { count } = useSelect( ( select ) => { @@ -66,6 +72,7 @@ function ColumnsEditContainer( { const classes = classnames( { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + [ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile, } ); const blockProps = useBlockProps( { @@ -101,6 +108,15 @@ function ColumnsEditContainer( { ) } ) } + + setAttributes( { + isStackedOnMobile: ! isStackedOnMobile, + } ) + } + />
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index a9826c10089899..3c80d0edc21f51 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -9,10 +9,11 @@ import classnames from 'classnames'; import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { verticalAlignment } = attributes; + const { isStackedOnMobile, verticalAlignment } = attributes; const className = classnames( { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + [ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile, } ); return ( diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index dc744f46eb2db6..aba4c99297a191 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -28,17 +28,82 @@ &.are-vertically-aligned-bottom { align-items: flex-end; } + + &:not(.is-not-stacked-on-mobile) > .wp-block-column { + @media (max-width: #{ ($break-small - 1) }) { + // Responsiveness: Show at most one columns on mobile. This must be + // important since the Column assigns its own width as an inline style. + flex-basis: 100% !important; + } + + // Between mobile and large viewports, allow 2 columns. + @media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) { + // Only add two column styling if there are two or more columns + &:not(:only-child) { + // As with mobile styles, this must be important since the Column + // assigns its own width as an inline style, which should take effect + // starting at `break-medium`. + flex-basis: calc(50% - 1em) !important; + flex-grow: 0; + } + + // Add space between the multiple columns. Themes can customize this if they wish to work differently. + // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. + &:nth-child(even) { + margin-left: 2em; + } + } + + // At large viewports, show all columns horizontally. + @include break-medium() { + // Available space should be divided equally amongst columns without an + // assigned width. This is achieved by assigning a flex basis that is + // consistent (equal), would not cause the sum total of column widths to + // exceed 100%, and which would cede to a column with an assigned width. + // The `flex-grow` allows columns to maximally and equally occupy space + // remaining after subtracting the space occupied by columns with + // explicit widths (if any exist). + flex-basis: 0; + flex-grow: 1; + + // Columns with an explicitly-assigned width should maintain their + // `flex-basis` width and not grow. + &[style*="flex-basis"] { + flex-grow: 0; + } + + // When columns are in a single row, add space before all except the first. + &:not(:first-child) { + margin-left: 2em; + } + } + } + + &.is-not-stacked-on-mobile { + flex-wrap: nowrap; + + > .wp-block-column { + // Available space should be divided equally amongst columns. + flex-basis: 0; + flex-grow: 1; + + // Columns with an explicitly-assigned width should maintain their + // `flex-basis` width and not grow. + &[style*="flex-basis"] { + flex-grow: 0; + } + + // When columns are in a single row, add space before all except the first. + &:not(:first-child) { + margin-left: 2em; + } + } + } } .wp-block-column { flex-grow: 1; - @media (max-width: #{ ($break-small - 1) }) { - // Responsiveness: Show at most one columns on mobile. This must be - // important since the Column assigns its own width as an inline style. - flex-basis: 100% !important; - } - // Prevent the columns from growing wider than their distributed sizes. min-width: 0; @@ -46,48 +111,6 @@ word-break: break-word; // For back-compat. overflow-wrap: break-word; // New standard. - // Between mobile and large viewports, allow 2 columns. - @media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) { - // Only add two column styling if there are two or more columns - &:not(:only-child) { - // As with mobile styles, this must be important since the Column - // assigns its own width as an inline style, which should take effect - // starting at `break-medium`. - flex-basis: calc(50% - 1em) !important; - flex-grow: 0; - } - - // Add space between the multiple columns. Themes can customize this if they wish to work differently. - // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. - &:nth-child(even) { - margin-left: 2em; - } - } - - // At large viewports, show all columns horizontally. - @include break-medium() { - // Available space should be divided equally amongst columns without an - // assigned width. This is achieved by assigning a flex basis that is - // consistent (equal), would not cause the sum total of column widths to - // exceed 100%, and which would cede to a column with an assigned width. - // The `flex-grow` allows columns to maximally and equally occupy space - // remaining after subtracting the space occupied by columns with - // explicit widths (if any exist). - flex-basis: 0; - flex-grow: 1; - - // Columns with an explicitly-assigned width should maintain their - // `flex-basis` width and not grow. - &[style*="flex-basis"] { - flex-grow: 0; - } - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: 2em; - } - } - /** * Individual Column Alignment */ diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json index b6e16b848abffa..6413a0cea75d75 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns.json @@ -4,6 +4,7 @@ "name": "core/columns", "isValid": true, "attributes": { + "isStackedOnMobile": true, "backgroundColor": "secondary" }, "innerBlocks": [ diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json index ab71d35d661776..d577a0fd6b96c9 100644 --- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json +++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json @@ -3,7 +3,9 @@ "clientId": "_clientId_0", "name": "core/columns", "isValid": true, - "attributes": {}, + "attributes": { + "isStackedOnMobile": true + }, "innerBlocks": [ { "clientId": "_clientId_0", diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html new file mode 100644 index 00000000000000..e28fd69aa1611b --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html @@ -0,0 +1,24 @@ + +
+ +
+ +

Column One, Paragraph One

+ + +

Column One, Paragraph Two

+ +
+ + +
+ +

Column Two, Paragraph One

+ + +

Column Three, Paragraph One

+ +
+ +
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json new file mode 100644 index 00000000000000..72f1585d5177ea --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json @@ -0,0 +1,76 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/columns", + "isValid": true, + "attributes": { + "isStackedOnMobile": false, + "backgroundColor": "secondary" + }, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/column", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Column One, Paragraph One", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Column One, Paragraph One

" + }, + { + "clientId": "_clientId_1", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Column One, Paragraph Two", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Column One, Paragraph Two

" + } + ], + "originalContent": "
\n\t\t\n\t\t\n\t
" + }, + { + "clientId": "_clientId_1", + "name": "core/column", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Column Two, Paragraph One", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Column Two, Paragraph One

" + }, + { + "clientId": "_clientId_1", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Column Three, Paragraph One", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Column Three, Paragraph One

" + } + ], + "originalContent": "
\n\t\t\n\t\t\n\t
" + } + ], + "originalContent": "
\n\t\n\t\n
" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json new file mode 100644 index 00000000000000..6e12b92b39aa53 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json @@ -0,0 +1,83 @@ +[ + { + "blockName": "core/columns", + "attrs": { + "isStackedOnMobile": false, + "backgroundColor": "secondary" + }, + "innerBlocks": [ + { + "blockName": "core/column", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\t

Column One, Paragraph One

\n\t\t", + "innerContent": [ + "\n\t\t

Column One, Paragraph One

\n\t\t" + ] + }, + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\t

Column One, Paragraph Two

\n\t\t", + "innerContent": [ + "\n\t\t

Column One, Paragraph Two

\n\t\t" + ] + } + ], + "innerHTML": "\n\t
\n\t\t\n\t\t\n\t
\n\t", + "innerContent": [ + "\n\t
\n\t\t", + null, + "\n\t\t", + null, + "\n\t
\n\t" + ] + }, + { + "blockName": "core/column", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\t

Column Two, Paragraph One

\n\t\t", + "innerContent": [ + "\n\t\t

Column Two, Paragraph One

\n\t\t" + ] + }, + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t\t

Column Three, Paragraph One

\n\t\t", + "innerContent": [ + "\n\t\t

Column Three, Paragraph One

\n\t\t" + ] + } + ], + "innerHTML": "\n\t
\n\t\t\n\t\t\n\t
\n\t", + "innerContent": [ + "\n\t
\n\t\t", + null, + "\n\t\t", + null, + "\n\t
\n\t" + ] + } + ], + "innerHTML": "\n
\n\t\n\t\n
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\t", + null, + "\n
\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html new file mode 100644 index 00000000000000..ca77f7df2961f6 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html @@ -0,0 +1,21 @@ + +
+
+

Column One, Paragraph One

+ + + +

Column One, Paragraph Two

+
+ + + +
+

Column Two, Paragraph One

+ + + +

Column Three, Paragraph One

+
+
+ From fbfb8bcc26a5acf21f626d7085e907b27061c634 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 7 Jul 2021 15:37:46 +0200 Subject: [PATCH 19/40] Revert "Bump plugin version to 11.0.0" This reverts commit 3ceb0f977b1f33117812640a313e4740777b8c4d. --- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index 231314448aa1b7..ab7049ffb7bf9e 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: 11.0.0 + * Version: 11.0.0-rc.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index 6787845515c1cc..f34656290d3c11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0", + "version": "11.0.0-rc.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8b5e3209e39c85..8f60c962dfa7b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0", + "version": "11.0.0-rc.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index 40b9644edb4123..94bfddb91a1420 100644 --- a/readme.txt +++ b/readme.txt @@ -55,4 +55,4 @@ View release page. +To read the changelog for Gutenberg 11.0.0-rc.1, please navigate to the release page. From 891d448992c536447ad718c758a92dd35bd39ffe Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Wed, 7 Jul 2021 08:53:16 -0500 Subject: [PATCH 20/40] Bail out if get_current_screen() returns null. (#33261) --- lib/widgets-customize.php | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php index 24b546d5948750..fce4d6dc576809 100644 --- a/lib/widgets-customize.php +++ b/lib/widgets-customize.php @@ -156,15 +156,20 @@ function gutenberg_customize_widgets_init() { * @return bool Filtered decision about loading block assets. */ function gutenberg_widgets_customize_load_block_editor_scripts_and_styles( $is_block_editor_screen ) { - if ( - gutenberg_use_widgets_block_editor() && - is_callable( 'get_current_screen' ) && - 'customize' === get_current_screen()->base - ) { - return true; + if ( ! gutenberg_use_widgets_block_editor() ) { + return $is_block_editor_screen; + } + + if ( ! is_callable( 'get_current_screen' ) ) { + return $is_block_editor_screen; + } + + $current_screen = get_current_screen(); + if ( is_null( $current_screen ) ) { + return $is_block_editor_screen; } - return $is_block_editor_screen; + return 'customize' === $current_screen->base ? true : $is_block_editor_screen; } // Test for wp_use_widgets_block_editor(), as the existence of this in core From e4dd9b394ae9b48a3345d6292066c02a06ee7ac4 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 7 Jul 2021 18:34:04 +0400 Subject: [PATCH 21/40] Documentation: Remove withState HOC references part 2 (#33222) * Update Popover component docs * Update FormTokenField component docs * Update FormToggle component docs * Update Disabled component docs * Update TextControl component docs * Update MenuItem component docs * Update FontSizePicker component docs --- packages/components/src/disabled/README.md | 12 +++--- .../components/src/font-size-picker/README.md | 39 +++++++++---------- packages/components/src/form-toggle/README.md | 14 +++---- .../components/src/form-token-field/README.md | 39 ++++++++++--------- packages/components/src/menu-item/README.md | 30 +++++++------- packages/components/src/popover/README.md | 12 +++--- .../components/src/text-control/README.md | 24 ++++++------ 7 files changed, 86 insertions(+), 84 deletions(-) diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md index e5bb9a96f2e87e..1598fee6ad48ca 100644 --- a/packages/components/src/disabled/README.md +++ b/packages/components/src/disabled/README.md @@ -8,18 +8,18 @@ Assuming you have a form component, you can disable all form inputs by wrapping ```jsx import { Button, Disabled, TextControl } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; + +const MyDisabled = () => { + const [ isDisabled, setIsDisabled ] = useState( true ); -const MyDisabled = withState( { - isDisabled: true, -} )( ( { isDisabled, setState } ) => { let input = {} } />; if ( isDisabled ) { input = { input }; } const toggleDisabled = () => { - setState( ( state ) => ( { isDisabled: ! state.isDisabled } ) ); + setIsDisabled( ( state ) => ! state ); }; return ( @@ -30,7 +30,7 @@ const MyDisabled = withState( {
); -} ); +}; ``` A component can detect if it has been wrapped in a `` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Consumer`. diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 7287e202ad4bf2..0b9f050394cf87 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -7,26 +7,25 @@ The component renders a user interface that allows the user to select predefined ```jsx import { FontSizePicker } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -... -const MyFontSizePicker = withState( { - fontSize: 16, -} )( ( { fontSize, setState } ) => { - const fontSizes = [ - { - name: __( 'Small' ), - slug: 'small', - size: 12, - }, - { - name: __( 'Big' ), - slug: 'big', - size: 26, - }, - ]; - const fallbackFontSize = 16; +const fontSizes = [ + { + name: __( 'Small' ), + slug: 'small', + size: 12, + }, + { + name: __( 'Big' ), + slug: 'big', + size: 26, + }, +]; +const fallbackFontSize = 16; + +const MyFontSizePicker = () => { + const [ fontSize, setFontSize ] = useState( 12 ); return ( { - setState( { fontSize: newFontSize } ); + setFontSize( newFontSize ); } } /> ); -} ); +}; ... diff --git a/packages/components/src/form-toggle/README.md b/packages/components/src/form-toggle/README.md index bf646cdb14bd4e..60a8a62477389b 100644 --- a/packages/components/src/form-toggle/README.md +++ b/packages/components/src/form-toggle/README.md @@ -55,18 +55,16 @@ When a user switches a toggle, its corresponding action takes effect immediately ```jsx import { FormToggle } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; + +const MyFormToggle = () => { + const [ isChecked, setChecked ] = useState( true ); -const MyFormToggle = withState( { - checked: true, -} )( ( { checked, setState } ) => ( - setState( ( state ) => ( { checked: ! state.checked } ) ) - } + onChange={ () => setChecked( ( state ) => ! state ) } /> -) ); +}; ``` ### Props diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md index 3ec38f78314168..e24f2f2ed7d8c4 100644 --- a/packages/components/src/form-token-field/README.md +++ b/packages/components/src/form-token-field/README.md @@ -64,23 +64,26 @@ The `value` property is handled in a manner similar to controlled form component ```jsx import { FormTokenField } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; -const MyFormTokenField = withState( { - tokens: [], - suggestions: [ - 'Africa', - 'America', - 'Antarctica', - 'Asia', - 'Europe', - 'Oceania', - ], -} )( ( { tokens, suggestions, setState } ) => ( - setState( { tokens } ) } - /> -) ); +const continents = [ + 'Africa', + 'America', + 'Antarctica', + 'Asia', + 'Europe', + 'Oceania', +]; + +const MyFormTokenField = () => { + const [ selectedContinents, setSelectedContinents ] = useState( [] ); + + return( + setSelectedContinents( tokens ) } + /> + ); +}; ``` diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md index 259a929ee66fb6..94087548619613 100644 --- a/packages/components/src/menu-item/README.md +++ b/packages/components/src/menu-item/README.md @@ -6,21 +6,21 @@ MenuItem is a component which renders a button intended to be used in combinatio ```jsx import { MenuItem } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; - -const MyMenuItem = withState( { - isActive: true, -} )( ( { isActive, setState } ) => ( - - setState( ( state ) => ( { isActive: ! state.isActive } ) ) - } - > - Toggle - -) ); +import { useState } from '@wordpress/element'; + +const MyMenuItem = () => { + const [ isActive, setIsActive ] = useState( true ); + + return ( + setIsActive( ( state ) => ! state ) } + > + Toggle + + ); +}; ``` ## Props diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md index 2518f35ea8bd3c..f39e5f79e4e3b7 100644 --- a/packages/components/src/popover/README.md +++ b/packages/components/src/popover/README.md @@ -8,21 +8,21 @@ Render a Popover within the parent to which it should anchor: ```jsx import { Button, Popover } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; -const MyPopover = withState( { - isVisible: false, -} )( ( { isVisible, setState } ) => { +const MyPopover = () => { + const [ isVisible, setIsVisible ] = useState( false ); const toggleVisible = () => { - setState( ( state ) => ( { isVisible: ! state.isVisible } ) ); + setIsVisible( ( state ) => ! state ); }; + return ( ); -} ); +}; ``` If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value. diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md index 562c6375e14a93..11834ddefbd21e 100644 --- a/packages/components/src/text-control/README.md +++ b/packages/components/src/text-control/README.md @@ -61,17 +61,19 @@ Render a user interface to input the name of an additional css class. ```js import { TextControl } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; - -const MyTextControl = withState( { - className: '', -} )( ( { className, setState } ) => ( - setState( { className } ) } - /> -) ); +import { useState } from '@wordpress/element'; + +const MyTextControl = () => { + const [ className, setClassName ] = useState( '' ); + + return ( + setClassName( value ) } + /> + ); +}; ``` ### Props From 505277281db723360d997bbe36d3a4241ec8147c Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 7 Jul 2021 14:40:51 +0000 Subject: [PATCH 22/40] Bump plugin version to 11.0.0 --- gutenberg.php | 2 +- package-lock.json | 2 +- package.json | 2 +- readme.txt | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/gutenberg.php b/gutenberg.php index ab7049ffb7bf9e..231314448aa1b7 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: 11.0.0-rc.1 + * Version: 11.0.0 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/package-lock.json b/package-lock.json index f34656290d3c11..6787845515c1cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0-rc.1", + "version": "11.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8f60c962dfa7b8..8b5e3209e39c85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "11.0.0-rc.1", + "version": "11.0.0", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", diff --git a/readme.txt b/readme.txt index 94bfddb91a1420..40b9644edb4123 100644 --- a/readme.txt +++ b/readme.txt @@ -55,4 +55,4 @@ View release page. +To read the changelog for Gutenberg 11.0.0, please navigate to the release page. From 2f25d1cdf1b89b80fc2ed90af1304b35398c67a7 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 7 Jul 2021 16:46:30 +0200 Subject: [PATCH 23/40] [RNMobile] Embed block: Enable replace option (#33253) * Add replace option to native version of embed block * Add invalid and empty URL cases to replace action --- packages/block-library/src/embed/edit.js | 1 + .../block-library/src/embed/embed-bottom-sheet.native.js | 9 ++++++++- .../block-library/src/embed/embed-placeholder.native.js | 3 ++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 66b65a05fc3ee3..958c19c1f0c2b3 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -238,6 +238,7 @@ const EmbedEdit = ( props ) => { invalidateResolution( 'getEmbedPreview', [ url ] ); } } isSelected={ isSelected } + isEditingURL={ isEditingURL } /> ); diff --git a/packages/block-library/src/embed/embed-bottom-sheet.native.js b/packages/block-library/src/embed/embed-bottom-sheet.native.js index 473961b5a9778c..754cfc1816e930 100644 --- a/packages/block-library/src/embed/embed-bottom-sheet.native.js +++ b/packages/block-library/src/embed/embed-bottom-sheet.native.js @@ -41,9 +41,16 @@ const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => { createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) ); + // If the URL was already defined, we submit it to stop showing the embed placeholder. + if ( value !== '' ) { + onSubmit( value ); + } } + } else if ( value !== '' ) { + // Resets the URL when new value is empty and URL was already defined. + onSubmit( '' ); } - }, [ url, onSubmit ] ); + }, [ url, onSubmit, value ] ); function setAttributes( attributes ) { setURL( attributes.url ); diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js index 043fd22c36862f..b1cef4c0b0e037 100644 --- a/packages/block-library/src/embed/embed-placeholder.native.js +++ b/packages/block-library/src/embed/embed-placeholder.native.js @@ -23,6 +23,7 @@ import styles from './styles.scss'; const EmbedPlaceholder = ( { icon, + isEditingURL, isSelected, label, onFocus, @@ -39,7 +40,7 @@ const EmbedPlaceholder = ( { [ clientId ] ); const [ isEmbedSheetVisible, setIsEmbedSheetVisible ] = useState( - isSelected && wasBlockJustInserted && ! value + isSelected && ( ( wasBlockJustInserted && ! value ) || isEditingURL ) ); const containerStyle = usePreferredColorSchemeStyle( From e8971e428fe25be8714974dc79cfaca245951cbd Mon Sep 17 00:00:00 2001 From: Gutenberg Repository Automation Date: Wed, 7 Jul 2021 15:04:02 +0000 Subject: [PATCH 24/40] Update Changelog for 11.0.0 --- changelog.txt | 335 ++++++++++++++++++++++++++++---------------------- 1 file changed, 190 insertions(+), 145 deletions(-) diff --git a/changelog.txt b/changelog.txt index a8e1c97339697f..e4751d16264dac 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,175 +1,220 @@ == Changelog == -= 11.0.0-rc.1 = - - += 11.0.0 = ### Enhancements -- Polish block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922)) -- Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810)) -- [Block Library - Query Loop]: Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737)) -- Remove the widget switcher block toolbar button. ([32733](https://github.com/WordPress/gutenberg/pull/32733)) -- Block categories: Clean these up by moving several blocks from Design to Theme. ([32568](https://github.com/WordPress/gutenberg/pull/32568)) -- Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641)) -- Media & Text: Allow drag n drop media replacement. ([29710](https://github.com/WordPress/gutenberg/pull/29710)) +- Template Parts & Reusable Blocks: Add editing overlay. ([31109](https://github.com/WordPress/gutenberg/pull/31109)) +- General UI: Improve UI/UX for block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922)) +- Widgets editor: + - Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757)) + - Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953)) + - Set Legacy Widget form to display only when not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015)) + - Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905)) + - Add ability for Legacy custom HTML widget to transform into custom HTML block. ([32862](https://github.com/WordPress/gutenberg/pull/32862)) + - Remove the widget switcher block toolbar button for the Legacy Widget. ([32733](https://github.com/WordPress/gutenberg/pull/32733)) + - Wire `handle_legacy_widget_preview_iframe` to `admin_init_hook`. ([32854](https://github.com/WordPress/gutenberg/pull/32854)) + - Add to WidgetAreasBlockEditorProvider. ([33166](https://github.com/WordPress/gutenberg/pull/33166)) + - Replace "technical" error notice with a user-friendly version. ([33165](https://github.com/WordPress/gutenberg/pull/33165)) + - Replace legacy widget icon with its new version. ([33041](https://github.com/WordPress/gutenberg/pull/33041)) +- Block Library: + - Media Text block: allow drag and drop media replacement for Media & Text. ([29710](https://github.com/WordPress/gutenberg/pull/29710)) + - Categories block: Add a label for screen readers. ([33060](https://github.com/WordPress/gutenberg/pull/33060)) + - Post Template Block: Add post-classes in the loop for Post Template block. ([30497](https://github.com/WordPress/gutenberg/pull/30497)) +- Global Styles and Templates: + - Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810)) + - Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641)) + - Add filters to `get_block_templates` functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806)) +- Core Data: + - Allow making context-specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961)) + - Make `apiFetch` requests abortable via `AbortController` in `@wordpress/api-fetch`. ([32530](https://github.com/WordPress/gutenberg/pull/32530)) ### New APIs -- Allow making context specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961)) - Add an API to define the default template used for the template mode. ([32771](https://github.com/WordPress/gutenberg/pull/32771)) ### Bug Fixes -- Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066)) -- Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058)) -- Group Block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045)) -- [Block Library - Query Loop] Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037)) -- Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031)) -- Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024)) -- Button: Update to use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017)) -- [Block Library - Categories]: Fix handling for low privileged users. ([32994](https://github.com/WordPress/gutenberg/pull/32994)) -- [Block Library - Categories]: Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989)) -- Fix to remove default indent from Latest Posts and Latest Comments block in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983)) -- Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979)) -- Add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971)) -- [Block Library - Post Terms]: Fix handling for low privileged users. ([32947](https://github.com/WordPress/gutenberg/pull/32947)) -- Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938)) -- Fix glitchy block focus style when multiselecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927)) -- Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898)) -- Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894)) -- Fix unintended search http request in . ([32857](https://github.com/WordPress/gutenberg/pull/32857)) -- CI: Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856)) -- Fixed a problem with double encoding of URLs. ([32840](https://github.com/WordPress/gutenberg/pull/32840)) -- Fix incorrect block insertion point after blurring post title. ([32831](https://github.com/WordPress/gutenberg/pull/32831)) -- RNMobile: Fix column wrapping. ([32830](https://github.com/WordPress/gutenberg/pull/32830)) -- [Block Library - Site Title, Site Tagline] - Readonly view when user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817)) -- useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816)) -- Block Library: Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814)) -- Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809)) -- Remove @wordpress/editor as a dependency from @wordpress/block-library. ([32801](https://github.com/WordPress/gutenberg/pull/32801)) -- Fix drag and drop indices when block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776)) -- Customize Widgets: Fix block toolbar deselection when clicking scrollbar. ([32762](https://github.com/WordPress/gutenberg/pull/32762)) -- Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749)) -- components: Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745)) -- TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744)) -- Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729)) -- Fix: Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692)) -- Ensure only valid URLs or anchors within text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663)) -- [Image Block]: Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524)) -- Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479)) -- Image Block: Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364)) -- Fix: Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089)) +- Widgets Editor: + + - Adjust widget form margins in the new Widgets Editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040)) + - Adjust Legacy Widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974)) + - Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978)) + - Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976)) + - Fix to allow adding the same image twice in Widgets Editor. ([32951](https://github.com/WordPress/gutenberg/pull/32951)) + - Fix Legacy Widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871)) + - Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066)) + - Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683)) + - Fix widget preview not working if widget registered via an instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781)) + - Don't display admin notices on the Widgets Editor. ([32877](https://github.com/WordPress/gutenberg/pull/32877)) + - Remove classic block in Widgets Editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800)) + - Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761)) + - Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738)) + - Fix move to widget area checkmark. ([33213](https://github.com/WordPress/gutenberg/pull/33213)) + - Fix Widget Block: `widget_id` is undefined when a widget is placed. ([33152](https://github.com/WordPress/gutenberg/pull/33152)) + - Reset z-index on focused widget form. ([33122](https://github.com/WordPress/gutenberg/pull/33122)) + - Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. ([33200](https://github.com/WordPress/gutenberg/pull/33200)) + - Fix legacy widget height overflow. ([33191](https://github.com/WordPress/gutenberg/pull/33191)) + - Fix pasting blocks by setting html block as freeform content handler. ([33164](https://github.com/WordPress/gutenberg/pull/33164)) + - Fix slash inserter for widgets screen. ([33161](https://github.com/WordPress/gutenberg/pull/33161)) + - Add `width: 100%` to `components-base-control` inside `wp-block-legacy-widget`. ([33141](https://github.com/WordPress/gutenberg/pull/33141)) + - Fix error message - bail out if `get_current_screen()` returns null. ([33261](https://github.com/WordPress/gutenberg/pull/33261)) + - Customizer: + - Fix block toolbar deselection when clicking scrollbar. ([32762] + - Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979)) + (https://github.com/WordPress/gutenberg/pull/32762)) + - Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749)) + - Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479)) + +- Block Library + - [Regression] Button block: Add deprecation for `style.border.radius` `number`. ([33117](https://github.com/WordPress/gutenberg/pull/33117)) + - Query loop: + - Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737)) + - Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037)) + - Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892)) + - Set default block variations not to inherit from global query. ([33163](https://github.com/WordPress/gutenberg/pull/33163)) + - Group block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045)) + - Button block: + - Use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017)) + - Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089)) + - Categories block: + - Fix broken experience for lower privileged users when fetching Categories . ([32994](https://github.com/WordPress/gutenberg/pull/32994)) + - Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989)) + - Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983)) + - Archives block: add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971)) + - Post terms block: Fix broken experience for lower privileged users when fetching Terms. ([32947](https://github.com/WordPress/gutenberg/pull/32947)) + - Site Title and Site Tagline blocks: `readonly` view when the user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817)) + - Image block: + - Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524)) + - Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364)) + - Site Logo block: fix broken experience for lower privileged users via permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919)) + - Site Logo block: Update Site Logo block UI and option syncing. ([33179](https://github.com/WordPress/gutenberg/pull/33179)) + - Show fewer warnings when blocks try to render themselves. ([33032](https://github.com/WordPress/gutenberg/pull/33032)) +- Block editor: + - Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031)) + - Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024)) + - Fix glitchy block focus style when multi selecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927)) + - Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894)) + - Fix unintended HTTP search request in `` when `showSuggestions` is `false`. ([32857](https://github.com/WordPress/gutenberg/pull/32857)) + - Ensure only valid URLs or anchors within the text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663)) + - Fix drag and drop indices when a block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776)) + - Consistent border with focus styles for block appender. ([33022](https://github.com/WordPress/gutenberg/pull/33022)) + - Improve scrolling experience in Safari ([32824](https://github.com/WordPress/gutenberg/pull/32824)) + - Avoid flash of background color when scrolling in Safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747)) + - Refactor appender margin. ([33088](https://github.com/WordPress/gutenberg/pull/33088)) + - Block Inserter: Prevent page scroll when searching a block. ([33012](https://github.com/WordPress/gutenberg/pull/33012)) +- Components: + - useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816)) + - Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745)) + - Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729)) + - Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692)) +- CSS and styling: + - Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058)) + - Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732)) + - Rename `.interface-interface-skeleton__body` `z-index` to `.interface-interface-skeleton__content`. ([32869](https://github.com/WordPress/gutenberg/pull/32869)) +- Template editor: + - Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938)) + - Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809)) + - TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744)) +- Global styles: + - Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898)) + - Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840)) +- Editor + - Fix "Select all" behavior in the editor. ([33167](https://github.com/WordPress/gutenberg/pull/33167)) + - Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889)) + - Revert "Prepublish Panel: Disable the Publish and Cancel buttons while saving". ([33113](https://github.com/WordPress/gutenberg/pull/33113)) -### Experiments +### WordPress Core compatibility -- Navigation: Skip flakey tests. ([33074](https://github.com/WordPress/gutenberg/pull/33074)) -- Adjust widget form margins in the new widget editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040)) -- Set display only when form not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015)) -- Widgets: Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978)) -- Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976)) -- Adjust legacy widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974)) -- Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953)) -- Widget Editor: Fix allow adding same image twice. ([32951](https://github.com/WordPress/gutenberg/pull/32951)) -- [Block Library - Site Logo]: Add permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919)) -- Navigation: Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918)) -- Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905)) -- Don't display admin notices on widgets screen. ([32877](https://github.com/WordPress/gutenberg/pull/32877)) -- Fix legacy widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871)) -- Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. ([32869](https://github.com/WordPress/gutenberg/pull/32869)) -- Legacy custom html widget should have option to transform to custom html block. ([32862](https://github.com/WordPress/gutenberg/pull/32862)) -- Wire handle_legacy_widget_preview_iframe to admin_init_hook. ([32854](https://github.com/WordPress/gutenberg/pull/32854)) -- Remove classic block in widgets editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800)) -- Fix: Logic error on site editor useSetting. ([32793](https://github.com/WordPress/gutenberg/pull/32793)) -- Widget preivew not working if widget registered via a instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781)) -- Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761)) -- Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759)) -- Widgets editor: Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757)) -- Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732)) -- Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683)) -- Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491)) -- Fix oembeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331)) -- Global Styles: Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840)) -- Add post-classes in the loop. ([30497](https://github.com/WordPress/gutenberg/pull/30497)) +- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977)) +- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858)) +- Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814)) ### Documentation -- ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030)) -- Add some technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026)) -- Docs: Add link color suppots to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936)) -- Add a schema explaining the relationship between the packages that make the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921)) -- Handbook: Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770)) -- Fix abort error thrown by `api-fetch` and add documentation. ([32530](https://github.com/WordPress/gutenberg/pull/32530)) -- Update the block toolbar ESnext code. ([32422](https://github.com/WordPress/gutenberg/pull/32422)) -- Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850)) +- Handbook: + - Update ESnext code in the block toolbar documentation. ([32422](https://github.com/WordPress/gutenberg/pull/32422)) + - Fix "Gutenberg" typo in dynamic blocks tutorial. ([33013](https://github.com/WordPress/gutenberg/pull/33013)) + - Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770)) + - Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759)) + - Block Editor and Block API: + - Add link color supports to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936)) + - Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850)) + - Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921)) + - Testing: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829)) +- Components: + - ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030)) + - Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746)) +- Widgets: Add technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026)) ### Code Quality -- data: Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967)) -- data: Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965)) -- data: Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942)) -- Block Library: Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866)) -- data: Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855)) -- components: Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852)) -- Correct the case of navigation __unstableLocation. ([32783](https://github.com/WordPress/gutenberg/pull/32783)) -- Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774)) -- Quality: Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537)) -- Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516)) -- Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313)) +- Block Library: + - Query Loop: use plain `div` for wrapper element in patterns. ([32867](https://github.com/WordPress/gutenberg/pull/32867)) + - Post Template block: remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804)) + - Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866)) + - Improve block categories by moving several blocks from `Design` to `Theme`. ([32568](https://github.com/WordPress/gutenberg/pull/32568)) +- Typings: + - Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855)) + - Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967)) + - Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965)) + - Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942)) + - Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313)) +- Card component refactor: + - Remove the g2 implementation of `Card`. ([32764](https://github.com/WordPress/gutenberg/pull/32764)) + - Update `Card` component Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763)) + - Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743)) + - Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566)) +- Components: + - Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852)) + - Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774)) + - Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796)) +- Editors & Interface: + - Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874)) + - Update `FullscreenMode` from class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925)) + - Remove `@wordpress/editor` as a dependency from `@wordpress/block-library`. ([32801](https://github.com/WordPress/gutenberg/pull/32801)) +- Testing: + - Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008)) + - Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797)) + - Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904)) +- Linting: + - Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537)) + - Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516)) +- Data: Handle `context` state updates in `core-data` reducer on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991)) +- APIs: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258)) ### Tools -- components: Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051)) -- end-to-end Test Utils: Add getCurrentUser(), and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050)) -- Disable Android end-to-end tests while we investigate foundational breakage. ([32934](https://github.com/WordPress/gutenberg/pull/32934)) -- [E2E Tests]: Fix WP editor metabox test. ([32915](https://github.com/WordPress/gutenberg/pull/32915)) -- Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906)) -- Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904)) -- Testing: Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888)) -- Skip failing image caption caret test. ([32847](https://github.com/WordPress/gutenberg/pull/32847)) -- @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834)) -- Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832)) -- Docs: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829)) -- Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633)) -- Workflows: Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560)) +- Testing: + - Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832)) + - Add `getCurrentUser()` to e2e test utils: , and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050)) + - Fix WP editor metabox e2e test. ([32915](https://github.com/WordPress/gutenberg/pull/32915)) + - Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888)) +- CSS & Styling: + - Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051)) + - `@wordpress/scripts`: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834)) + - Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930)) +- Linting: + - Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906)) + - Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633)) +- Workflows: + - Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856)) + - Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560)) -### Various +### Performance -- Add a label for screen reader in categories block. ([33060](https://github.com/WordPress/gutenberg/pull/33060)) -- Focus style followup. ([33022](https://github.com/WordPress/gutenberg/pull/33022)) -- Typo correction. ([33013](https://github.com/WordPress/gutenberg/pull/33013)) -- Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008)) -- Handle context on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991)) -- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977)) -- Revert mistaken push to trunk. ([32948](https://github.com/WordPress/gutenberg/pull/32948)) -- Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930)) -- Replace FullscreenMode from Class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925)) -- Query block: Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892)) -- Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889)) -- Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874)) -- Query Loop Patterns: Use plain `div` for wrapper element. ([32867](https://github.com/WordPress/gutenberg/pull/32867)) -- Properly handle 404 errors while publishing Android artifacts. ([32860](https://github.com/WordPress/gutenberg/pull/32860)) -- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858)) -- Safari: See if compositing layer size is more reasonable when position fixed divs are not inserted into content. ([32824](https://github.com/WordPress/gutenberg/pull/32824)) -- Remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804)) -- Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797)) -- components: Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796)) -- Revert accidental commit. ([32777](https://github.com/WordPress/gutenberg/pull/32777)) -- Card: Delete old version of the g2 implementation. ([32764](https://github.com/WordPress/gutenberg/pull/32764)) -- Card: Update Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763)) -- Avoid flash of background color when scrolling in safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747)) -- Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746)) -- Components: Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743)) -- Implement basic in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741)) -- Rename native editor onboarding properties for clarity. ([32739](https://github.com/WordPress/gutenberg/pull/32739)) -- Try: Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738)) -- Card: Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566)) -- Rnmobile/fix/disable controls when template lock is set. ([32495](https://github.com/WordPress/gutenberg/pull/32495)) -- Added filters to get block templates functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806)) -- Template Parts & Reusable Blocks - try overlay element for clickthrough to edit pattern. ([31109](https://github.com/WordPress/gutenberg/pull/31109)) -- [RN Mobile][Global Styles] Adds new Prop for Global Styles Settings. ([30544](https://github.com/WordPress/gutenberg/pull/30544)) +- Add in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741)) +### Experiments +- Navigation Block and Editor: + - Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918)) + - Correct the case of navigation `__unstableLocation`. ([32783](https://github.com/WordPress/gutenberg/pull/32783) + - Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491)) + - Avoid double encoding of URLs in Navigation Link block. ([32840](https://github.com/WordPress/gutenberg/pull/32840)) +- Site Editor: + - Fix logic error on site editor `useSetting`. ([32793](https://github.com/WordPress/gutenberg/pull/32793)) + - Fix oEmbeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331)) = 10.9.1 = From 2f09068331422e8398d7fb73e5225f790c47fb23 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 7 Jul 2021 17:30:17 +0200 Subject: [PATCH 25/40] Workflows: Re-enable manually triggered workflows on forks (#32821) * Remove repository checks Most of these job are only run manually anyway, so we shouldn't need to prohibit them from running on forks. Furthermore, these checks make it much harder to test changes to this workflow on a fork. See https://github.com/WordPress/gutenberg/pull/32114#issuecomment-864013314 * Run build job only on manual trigger, or on gutenberg repo * Only run compute-stable-branches branch if triggered manually --- .github/workflows/build-plugin-zip.yml | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index b88059c56e44ce..df11d86f673f88 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -21,6 +21,7 @@ jobs: compute-stable-branches: name: Compute current and next stable release branches runs-on: ubuntu-latest + if: ${{ github.event_name == 'workflow_dispatch' }} outputs: current_stable_branch: ${{ steps.get_branches.outputs.current_stable_branch }} next_stable_branch: ${{ steps.get_branches.outputs.next_stable_branch }} @@ -47,7 +48,6 @@ jobs: runs-on: ubuntu-latest needs: compute-stable-branches if: | - github.repository == 'WordPress/gutenberg' && github.event_name == 'workflow_dispatch' && ( ( github.ref == 'refs/heads/trunk' || @@ -148,7 +148,12 @@ jobs: name: Build Release Artifact runs-on: ubuntu-latest needs: bump-version - if: ${{ ( github.repository == 'WordPress/gutenberg' && always() ) || ( github.event_name == 'pull_request' && always() ) }} + if: | + always() && ( + github.event_name == 'pull_request' || + github.event_name == 'workflow_dispatch' || + github.repository == 'WordPress/gutenberg' + ) steps: - name: Checkout code @@ -200,7 +205,6 @@ jobs: name: Create Release Draft and Attach Asset needs: [bump-version, build] runs-on: ubuntu-latest - if: ${{ github.repository == 'WordPress/gutenberg' }} steps: - name: Set Release Version From 123debc4efda3afae7992b0ea6cb78ab4cdcec7d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 7 Jul 2021 23:45:22 +0800 Subject: [PATCH 26/40] Refactor of navigation block rendering using location attribute (#33244) * Return result straight from render_menu_from_location * Try converting menu items to WP_Blocks * Pass context * Refactor into separate functions * Add doc blocks * Fix typo * Return an empty string --- .../src/navigation-link/index.php | 2 +- .../block-library/src/navigation/index.php | 132 ++++++++++++++---- 2 files changed, 106 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index a770c48d185e5f..a7e7c239b5eddc 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -199,7 +199,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { $html .= ''; - if ( $block->context['showSubmenuIcon'] && $has_submenu ) { + if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) { // The submenu icon can be hidden by a CSS rule on the Navigation Block. $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; } diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 65600551763e88..efc18558ca3f7c 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -86,30 +86,100 @@ function block_core_navigation_build_css_font_sizes( $attributes ) { } /** - * Renders a Navigation Block derived from data from the theme_location assigned - * via the block attribute 'location'. + * Returns the menu items for a WordPress menu location. * - * If no location was provided as a block attribute then false is returned. - * - * @param string $location The location of the classic menu to display. - * @param object $attributes The block attributes. - * @return string|false HTML markup of a generated Navigation Block or false if no location is specified. + * @param string $location The menu location. + * @return array Menu items for the location. */ -function gutenberg_render_menu_from_location( $location, $attributes ) { +function gutenberg_get_menu_items_at_location( $location ) { if ( empty( $location ) ) { - return false; + return; } - return wp_nav_menu( - array( - 'theme_location' => $location, - 'container' => '', - 'items_wrap' => '%3$s', - 'block_attributes' => $attributes, - 'fallback_cb' => false, - 'echo' => false, - ) - ); + // Build menu data. The following approximates the code in + // `wp_nav_menu()` and `gutenberg_output_block_nav_menu`. + + // Find the location in the list of locations, returning early if the + // location can't be found. + $locations = get_nav_menu_locations(); + if ( ! isset( $locations[ $location ] ) ) { + return; + } + + // Get the menu from the location, returning early if there is no + // menu or there was an error. + $menu = wp_get_nav_menu_object( $locations[ $location ] ); + if ( ! $menu || is_wp_error( $menu ) ) { + return; + } + + $menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) ); + _wp_menu_item_classes_by_context( $menu_items ); + + return $menu_items; +} + +/** + * Sorts a standard array of menu items into a nested structure keyed by the + * id of the parent menu. + * + * @param array $menu_items Menu items to sort. + * @return array An array keyed by the id of the parent menu where each element + * is an array of menu items that belong to that parent. + */ +function gutenberg_sort_menu_items_by_parent_id( $menu_items ) { + $sorted_menu_items = array(); + foreach ( (array) $menu_items as $menu_item ) { + $sorted_menu_items[ $menu_item->menu_order ] = $menu_item; + } + unset( $menu_items, $menu_item ); + + $menu_items_by_parent_id = array(); + foreach ( $sorted_menu_items as $menu_item ) { + $menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item; + } + + return $menu_items_by_parent_id; +} + +/** + * Turns menu item data into a nested array of parsed blocks + * + * @param array $menu_items An array of menu items that represent + * an individual level of a menu. + * @param array $menu_items_by_parent_id An array keyed by the id of the + * parent menu where each element is an + * array of menu items that belong to + * that parent. + * @return array An array of parsed block data. + */ +function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) { + if ( empty( $menu_items ) ) { + return array(); + } + + $blocks = array(); + + foreach ( $menu_items as $menu_item ) { + $block = array( + 'blockName' => 'core/navigation-link', + 'attrs' => array( + 'label' => $menu_item->title, + 'url' => $menu_item->url, + ), + ); + + $block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items( + isset( $menu_items_by_parent_id[ $menu_item->ID ] ) + ? $menu_items_by_parent_id[ $menu_item->ID ] + : array(), + $menu_items_by_parent_id + ); + + $blocks[] = $block; + } + + return $blocks; } /** @@ -153,15 +223,23 @@ function render_block_core_navigation( $attributes, $content, $block ) { wp_enqueue_script( 'wp-block-navigation-view' ); } - if ( empty( $block->inner_blocks ) ) { - if ( array_key_exists( '__unstableLocation', $attributes ) ) { - $location = $attributes['__unstableLocation']; - $maybe_classic_navigation = gutenberg_render_menu_from_location( $location, $attributes ); - if ( $maybe_classic_navigation ) { - return $maybe_classic_navigation; - } + $inner_blocks = $block->inner_blocks; + + if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) { + $menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] ); + if ( empty( $menu_items ) ) { + return ''; } + $menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items ); + $parsed_blocks = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id ); + + // TODO - this uses the full navigation block attributes for the + // context which could be refined. + $inner_blocks = new WP_Block_List( $parsed_blocks, $attributes ); + } + + if ( empty( $inner_blocks ) ) { return ''; } @@ -177,7 +255,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { $inner_blocks_html = ''; $is_list_open = false; - foreach ( $block->inner_blocks as $inner_block ) { + foreach ( $inner_blocks as $inner_block ) { if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name ) && false === $is_list_open ) { $is_list_open = true; $inner_blocks_html .= '
    '; From cba842a101df8a0cc0c2476768facc0c1e017532 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 7 Jul 2021 21:42:13 +0400 Subject: [PATCH 27/40] Duotone: Avoid rendering duplicate stylesheet and SVG (#33233) --- lib/block-supports/duotone.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index f3b4743832f0ae..fcf9191dc32775 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -361,4 +361,7 @@ function ( $selector ) use ( $duotone_id ) { 'register_attribute' => 'gutenberg_register_duotone_support', ) ); + +// Remove WordPress core filter to avoid rendering duplicate support elements. +remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 ); add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 ); From 63eb4c0e6109323db81250226ffd5bddb45d4088 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 7 Jul 2021 13:38:54 -0700 Subject: [PATCH 28/40] components: Add normalizeArrowKey (#33208) * components: Add normalizeArrowKey * Add tests * Improve the test --- packages/components/src/utils/keyboard.js | 28 +++++++++++++++ .../components/src/utils/test/keyboard.js | 34 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 packages/components/src/utils/keyboard.js create mode 100644 packages/components/src/utils/test/keyboard.js diff --git a/packages/components/src/utils/keyboard.js b/packages/components/src/utils/keyboard.js new file mode 100644 index 00000000000000..977b87ada21004 --- /dev/null +++ b/packages/components/src/utils/keyboard.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { RIGHT, UP, DOWN, LEFT } from '@wordpress/keycodes'; + +/** + * @type {number[]} + */ +const arrowKeys = [ RIGHT, UP, DOWN, LEFT ]; + +/** + * Normalizes the 'key' property of a KeyboardEvent in IE/Edge + * + * Source: + * https://github.com/downshift-js/downshift/blob/a71005bd879d05d7dcb892d1e0dc5c6ca74e9d39/src/utils.js#L279 + * + * @param {import('react').KeyboardEvent} event A keyboardEvent object + * + * @return {string} The keyboard key + */ +export function normalizeArrowKey( event ) { + const { key, keyCode } = event; + + if ( arrowKeys.includes( keyCode ) && key.indexOf( 'Arrow' ) !== 0 ) { + return `Arrow${ key }`; + } + return key; +} diff --git a/packages/components/src/utils/test/keyboard.js b/packages/components/src/utils/test/keyboard.js new file mode 100644 index 00000000000000..8ef46d8fec8603 --- /dev/null +++ b/packages/components/src/utils/test/keyboard.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { RIGHT, UP, DOWN, LEFT, SPACE } from '@wordpress/keycodes'; + +/** + * Internal dependencies + */ +import { normalizeArrowKey } from '../keyboard'; + +describe( 'normalizeArrowKey', () => { + it.each` + keyCode | key | normalized + ${ RIGHT } | ${ 'Right' } | ${ 'ArrowRight' } + ${ UP } | ${ 'Up' } | ${ 'ArrowUp' } + ${ DOWN } | ${ 'Down' } | ${ 'ArrowDown' } + ${ LEFT } | ${ 'Left' } | ${ 'ArrowLeft' } + ${ RIGHT } | ${ 'ArrowRight' } | ${ 'ArrowRight' } + ${ UP } | ${ 'ArrowUp' } | ${ 'ArrowUp' } + ${ DOWN } | ${ 'ArrowDown' } | ${ 'ArrowDown' } + ${ LEFT } | ${ 'ArrowLeft' } | ${ 'ArrowLeft' } + ${ SPACE } | ${ 'Space' } | ${ 'Space' } + `( + 'should return $normalized for $key with keycode $keyCode', + ( { keyCode, key, normalized } ) => { + const e = new window.KeyboardEvent( 'keydown', { + key, + keyCode, + } ); + + expect( normalizeArrowKey( e ) ).toEqual( normalized ); + } + ); +} ); From 3b31957897302c9274afe259e59d1737098d6f8d Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 8 Jul 2021 00:01:21 +0100 Subject: [PATCH 29/40] Update: stabilises GradientPicker and CustomGradientPicker components (#31440) --- .../components/colors-gradients/control.js | 2 +- .../src/components/gradient-picker/control.js | 49 ------------------- .../src/components/gradient-picker/index.js | 39 --------------- .../src/components/gradient-picker/panel.js | 28 ----------- packages/block-editor/src/components/index.js | 3 -- packages/components/src/index.js | 4 +- 6 files changed, 3 insertions(+), 122 deletions(-) delete mode 100644 packages/block-editor/src/components/gradient-picker/control.js delete mode 100644 packages/block-editor/src/components/gradient-picker/index.js delete mode 100644 packages/block-editor/src/components/gradient-picker/panel.js diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 1fca410bc121f8..b69ab19d1aedd0 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -14,7 +14,7 @@ import { ButtonGroup, ColorIndicator, ColorPalette, - __experimentalGradientPicker as GradientPicker, + GradientPicker, } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js deleted file mode 100644 index dcbf3ec090a707..00000000000000 --- a/packages/block-editor/src/components/gradient-picker/control.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ -import { BaseControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import GradientPicker from './'; -import useSetting from '../use-setting'; - -export default function GradientPickerControl( { - className, - value, - onChange, - label = __( 'Gradient Presets' ), - ...props -} ) { - const gradients = useSetting( 'color.gradients' ); - const disableCustomGradients = ! useSetting( 'color.customGradient' ); - if ( isEmpty( gradients ) && disableCustomGradients ) { - return null; - } - return ( - - { label } - - - ); -} diff --git a/packages/block-editor/src/components/gradient-picker/index.js b/packages/block-editor/src/components/gradient-picker/index.js deleted file mode 100644 index 6a18fb516b9a14..00000000000000 --- a/packages/block-editor/src/components/gradient-picker/index.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalGradientPicker as GradientPicker } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import useSetting from '../use-setting'; - -const EMPTY_ARRAY = []; - -function GradientPickerWithGradients( props ) { - const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; - const disableCustomGradients = ! useSetting( 'color.customGradient' ); - - return ( - - ); -} - -export default function ( props ) { - const ComponentToUse = - props.gradients !== undefined && - props.disableCustomGradients !== undefined - ? GradientPicker - : GradientPickerWithGradients; - return ; -} diff --git a/packages/block-editor/src/components/gradient-picker/panel.js b/packages/block-editor/src/components/gradient-picker/panel.js deleted file mode 100644 index 57e93273a5d2ba..00000000000000 --- a/packages/block-editor/src/components/gradient-picker/panel.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import GradientPicker from './control'; -import useSetting from '../use-setting'; - -export default function GradientPanel( props ) { - const gradients = useSetting( 'color.gradients' ); - if ( isEmpty( gradients ) ) { - return null; - } - return ( - - - - ); -} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 6daa8ddd4df354..76d13b62221580 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -45,9 +45,6 @@ export { default as ColorPalette } from './color-palette'; export { default as ColorPaletteControl } from './color-palette/control'; export { default as ContrastChecker } from './contrast-checker'; export { default as __experimentalDuotoneControl } from './duotone-control'; -export { default as __experimentalGradientPicker } from './gradient-picker'; -export { default as __experimentalGradientPickerControl } from './gradient-picker/control'; -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'; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 5d41c2c7c66e95..a97f0743c58d23 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -69,8 +69,8 @@ export { default as FontSizePicker } from './font-size-picker'; export { default as FormFileUpload } from './form-file-upload'; export { default as FormToggle } from './form-toggle'; export { default as FormTokenField } from './form-token-field'; -export { default as __experimentalGradientPicker } from './gradient-picker'; -export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker'; +export { default as GradientPicker } from './gradient-picker'; +export { default as CustomGradientPicker } from './custom-gradient-picker'; export { Grid as __experimentalGrid } from './grid'; export { default as Guide } from './guide'; export { default as GuidePage } from './guide/page'; From 6160b5d54d98ab5e57808f65e45781c8b19e10ba Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 8 Jul 2021 08:42:32 +0800 Subject: [PATCH 30/40] Fix moving inner blocks in the Widgets Customizer (#33243) --- .../use-sidebar-block-editor.js | 91 +------------- .../src/filters/move-to-sidebar.js | 44 +++++-- packages/customize-widgets/src/utils.js | 112 ++++++++++++++++++ .../specs/widgets/customizing-widgets.test.js | 63 ++++++++++ 4 files changed, 217 insertions(+), 93 deletions(-) diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js index 340aca24cb61d7..d91ec2ac092ca0 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js @@ -1,100 +1,19 @@ /** * External dependencies */ -import { omit, isEqual } from 'lodash'; +import { isEqual } from 'lodash'; /** * WordPress dependencies */ -import { serialize, parse, createBlock } from '@wordpress/blocks'; import { useState, useEffect, useCallback } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; import { getWidgetIdFromBlock, addWidgetIdToBlock } from '@wordpress/widgets'; -function blockToWidget( block, existingWidget = null ) { - let widget; - - const isValidLegacyWidgetBlock = - block.name === 'core/legacy-widget' && - ( block.attributes.id || block.attributes.instance ); - - if ( isValidLegacyWidgetBlock ) { - if ( block.attributes.id ) { - // Widget that does not extend WP_Widget. - widget = { - id: block.attributes.id, - }; - } else { - const { encoded, hash, raw, ...rest } = block.attributes.instance; - - // Widget that extends WP_Widget. - widget = { - idBase: block.attributes.idBase, - instance: { - ...existingWidget?.instance, - // Required only for the customizer. - is_widget_customizer_js_value: true, - encoded_serialized_instance: encoded, - instance_hash_key: hash, - raw_instance: raw, - ...rest, - }, - }; - } - } else { - const instance = { - content: serialize( block ), - }; - widget = { - idBase: 'block', - widgetClass: 'WP_Widget_Block', - instance: { - raw_instance: instance, - }, - }; - } - - return { - ...omit( existingWidget, [ 'form', 'rendered' ] ), - ...widget, - }; -} - -function widgetToBlock( { id, idBase, number, instance } ) { - let block; - - const { - encoded_serialized_instance: encoded, - instance_hash_key: hash, - raw_instance: raw, - ...rest - } = instance; - - if ( idBase === 'block' ) { - const parsedBlocks = parse( raw.content ); - block = parsedBlocks.length - ? parsedBlocks[ 0 ] - : createBlock( 'core/paragraph', {} ); - } else if ( number ) { - // Widget that extends WP_Widget. - block = createBlock( 'core/legacy-widget', { - idBase, - instance: { - encoded, - hash, - raw, - ...rest, - }, - } ); - } else { - // Widget that does not extend WP_Widget. - block = createBlock( 'core/legacy-widget', { - id, - } ); - } - - return addWidgetIdToBlock( block, id ); -} +/** + * Internal dependencies + */ +import { blockToWidget, widgetToBlock } from '../../utils'; function widgetsToBlocks( widgets ) { return widgets.map( ( widget ) => widgetToBlock( widget ) ); diff --git a/packages/customize-widgets/src/filters/move-to-sidebar.js b/packages/customize-widgets/src/filters/move-to-sidebar.js index e91dafe09aa0f5..9e7910ce785a6a 100644 --- a/packages/customize-widgets/src/filters/move-to-sidebar.js +++ b/packages/customize-widgets/src/filters/move-to-sidebar.js @@ -11,7 +11,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; import { MoveToWidgetArea, getWidgetIdFromBlock } from '@wordpress/widgets'; @@ -22,14 +22,17 @@ import { useSidebarControls, useActiveSidebarControl, } from '../components/sidebar-controls'; +import { useFocusControl } from '../components/focus-control'; +import { blockToWidget } from '../utils'; const withMoveToSidebarToolbarItem = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const widgetId = getWidgetIdFromBlock( props ); + let widgetId = getWidgetIdFromBlock( props ); const sidebarControls = useSidebarControls(); const activeSidebarControl = useActiveSidebarControl(); const hasMultipleSidebars = sidebarControls?.length > 1; const blockName = props.name; + const clientId = props.clientId; const canInsertBlockInSidebar = useSelect( ( select ) => { // Use an empty string to represent the root block list, which @@ -41,19 +44,46 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent( }, [ blockName ] ); + const block = useSelect( + ( select ) => select( blockEditorStore ).getBlock( clientId ), + [ clientId ] + ); + const { removeBlock } = useDispatch( blockEditorStore ); + const [ , focusWidget ] = useFocusControl(); function moveToSidebar( sidebarControlId ) { const newSidebarControl = sidebarControls.find( ( sidebarControl ) => sidebarControl.id === sidebarControlId ); - const oldSetting = activeSidebarControl.setting; - const newSetting = newSidebarControl.setting; + if ( widgetId ) { + /** + * If there's a widgetId, move it to the other sidebar. + */ + const oldSetting = activeSidebarControl.setting; + const newSetting = newSidebarControl.setting; + + oldSetting( without( oldSetting(), widgetId ) ); + newSetting( [ ...newSetting(), widgetId ] ); + } else { + /** + * If there isn't a widgetId, it's most likely a inner block. + * First, remove the block in the original sidebar, + * then, create a new widget in the new sidebar and get back its widgetId. + */ + const sidebarAdapter = newSidebarControl.sidebarAdapter; - oldSetting( without( oldSetting(), widgetId ) ); - newSetting( [ ...newSetting(), widgetId ] ); + removeBlock( clientId ); + const addedWidgetIds = sidebarAdapter.setWidgets( [ + ...sidebarAdapter.getWidgets(), + blockToWidget( block ), + ] ); + // The last non-null id is the added widget's id. + widgetId = addedWidgetIds.reverse().find( ( id ) => !! id ); + } - newSidebarControl.expand(); + // Move focus to the moved widget and expand the sidebar. + focusWidget( widgetId ); } return ( diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js index baa8c70b01ac2b..68fc6b2fe2d71a 100644 --- a/packages/customize-widgets/src/utils.js +++ b/packages/customize-widgets/src/utils.js @@ -1,4 +1,14 @@ // @ts-check +/** + * WordPress dependencies + */ +import { serialize, parse, createBlock } from '@wordpress/blocks'; +import { addWidgetIdToBlock } from '@wordpress/widgets'; + +/** + * External dependencies + */ +import { omit } from 'lodash'; /** * Convert settingId to widgetId. @@ -18,3 +28,105 @@ export function settingIdToWidgetId( settingId ) { return settingId; } + +/** + * Transform a block to a customizable widget. + * + * @param {WPBlock} block The block to be transformed from. + * @param {Object} existingWidget The widget to be extended from. + * @return {Object} The transformed widget. + */ +export function blockToWidget( block, existingWidget = null ) { + let widget; + + const isValidLegacyWidgetBlock = + block.name === 'core/legacy-widget' && + ( block.attributes.id || block.attributes.instance ); + + if ( isValidLegacyWidgetBlock ) { + if ( block.attributes.id ) { + // Widget that does not extend WP_Widget. + widget = { + id: block.attributes.id, + }; + } else { + const { encoded, hash, raw, ...rest } = block.attributes.instance; + + // Widget that extends WP_Widget. + widget = { + idBase: block.attributes.idBase, + instance: { + ...existingWidget?.instance, + // Required only for the customizer. + is_widget_customizer_js_value: true, + encoded_serialized_instance: encoded, + instance_hash_key: hash, + raw_instance: raw, + ...rest, + }, + }; + } + } else { + const instance = { + content: serialize( block ), + }; + widget = { + idBase: 'block', + widgetClass: 'WP_Widget_Block', + instance: { + raw_instance: instance, + }, + }; + } + + return { + ...omit( existingWidget, [ 'form', 'rendered' ] ), + ...widget, + }; +} + +/** + * Transform a widget to a block. + * + * @param {Object} widget The widget to be transformed from. + * @param {string} widget.id The widget id. + * @param {string} widget.idBase The id base of the widget. + * @param {number} widget.number The number/index of the widget. + * @param {Object} widget.instance The instance of the widget. + * @return {WPBlock} The transformed block. + */ +export function widgetToBlock( { id, idBase, number, instance } ) { + let block; + + const { + encoded_serialized_instance: encoded, + instance_hash_key: hash, + raw_instance: raw, + ...rest + } = instance; + + if ( idBase === 'block' ) { + const parsedBlocks = parse( raw.content ); + block = parsedBlocks.length + ? parsedBlocks[ 0 ] + : createBlock( 'core/paragraph', {} ); + } else if ( number ) { + // Widget that extends WP_Widget. + block = createBlock( 'core/legacy-widget', { + idBase, + instance: { + encoded, + hash, + raw, + ...rest, + }, + } ); + } else { + // Widget that does not extend WP_Widget. + block = createBlock( 'core/legacy-widget', { + id, + } ); + } + + return addWidgetIdToBlock( block, id ); +} diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js index 701ece8f38220b..960d93ce1b2992 100644 --- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js @@ -700,6 +700,69 @@ describe( 'Widgets Customizer', () => { "The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored." ); } ); + + it( 'should move (inner) blocks to another sidebar', async () => { + const widgetsPanel = await find( { + role: 'heading', + name: /Widgets/, + level: 3, + } ); + await widgetsPanel.click(); + + const footer1Section = await find( { + role: 'heading', + name: /Footer #1/, + level: 3, + } ); + await footer1Section.click(); + + await addBlock( 'Paragraph' ); + await page.keyboard.type( 'First Paragraph' ); + + await showBlockToolbar(); + await clickBlockToolbarButton( 'Options' ); + const groupButton = await find( { + role: 'menuitem', + name: 'Group', + } ); + await groupButton.click(); + + // Refocus the paragraph block. + const paragraphBlock = await find( { + role: 'group', + name: 'Paragraph block', + value: 'First Paragraph', + } ); + await paragraphBlock.focus(); + await showBlockToolbar(); + await clickBlockToolbarButton( 'Move to widget area' ); + + const footer2Option = await find( { + role: 'menuitemradio', + name: 'Footer #2', + } ); + await footer2Option.click(); + + // Should switch to and expand Footer #2. + await expect( { + role: 'heading', + name: 'Customizing ▸ Widgets Footer #2', + } ).toBeFound(); + + // The paragraph block should be moved to the new sidebar and have focus. + const movedParagraphBlockQuery = { + role: 'group', + name: 'Paragraph block', + value: 'First Paragraph', + }; + await expect( movedParagraphBlockQuery ).toBeFound(); + const movedParagraphBlock = await find( movedParagraphBlockQuery ); + await expect( movedParagraphBlock ).toHaveFocus(); + + expect( console ).toHaveWarned( + "The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored." + ); + } ); } ); /** From e512bd3e362fda9a30df1ef75deef8aafc8a1913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Thu, 8 Jul 2021 08:17:47 +0200 Subject: [PATCH 31/40] Block API: Apply enhancements included in WordPress 5.8 (#33252) * Block API: Apply enhancements included in WordPress 5.8 See https://make.wordpress.org/core/2021/06/23/block-api-enhancements-in-wordpress-5-8/. * Document two new server-side filters to use when registering a block --- .../tutorials/create-block/block-code.md | 2 +- .../tutorials/create-block/wp-plugin.md | 6 +- .../block-api/block-metadata.md | 56 ++++++++++++-- .../block-api/block-registration.md | 2 +- .../reference-guides/filters/block-filters.md | 77 ++++++++++++------- .../filters/editor-filters.md | 24 ++++++ .../CHANGELOG.md | 5 ++ .../templates/$slug.php.mustache | 4 +- packages/create-block/CHANGELOG.md | 5 ++ .../lib/templates/esnext/$slug.php.mustache | 4 +- 10 files changed, 141 insertions(+), 44 deletions(-) diff --git a/docs/getting-started/tutorials/create-block/block-code.md b/docs/getting-started/tutorials/create-block/block-code.md index 441d847e582515..8a82d6c975dfdb 100644 --- a/docs/getting-started/tutorials/create-block/block-code.md +++ b/docs/getting-started/tutorials/create-block/block-code.md @@ -12,7 +12,7 @@ In the `gutenpride.php` file, the enqueue process is already setup from the gene ```php function create_block_gutenpride_block_init() { - register_block_type_from_metadata( __DIR__ ); + register_block_type( __DIR__ ); } add_action( 'init', 'create_block_gutenpride_block_init' ); ``` diff --git a/docs/getting-started/tutorials/create-block/wp-plugin.md b/docs/getting-started/tutorials/create-block/wp-plugin.md index d2993aa7c65f83..b3d4a4a636e8c0 100644 --- a/docs/getting-started/tutorials/create-block/wp-plugin.md +++ b/docs/getting-started/tutorials/create-block/wp-plugin.md @@ -92,12 +92,12 @@ To load the built script, so it is run within the editor, you need to tell WordP ```php function create_block_gutenpride_block_init() { - register_block_type_from_metadata( __DIR__ ); + register_block_type( __DIR__ ); } add_action( 'init', 'create_block_gutenpride_block_init' ); ``` -The `register_block_type_from_metadata` function registers the block we are going to create and specifies the `editor_script` file handle registered from the metadata provided in `block.json` file. So now when the editor loads it will load this script. +The `register_block_type` function registers the block we are going to create and specifies the editor script handle registered from the metadata provided in `block.json` file with the `editorScript` field. So now when the editor loads it will load this script. ```json { @@ -137,6 +137,6 @@ For more info, see the build section of the [Getting Started with JavaScript tut ## Summary -Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor. +Hopefully, at this point, you have your plugin created and activated. We have the `package.json` with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor. Next Section: [Anatomy of a Block](/docs/getting-started/tutorials/create-block/block-anatomy.md) diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md index c1a1a695650ceb..aef09b567a1d4c 100644 --- a/docs/reference-guides/block-api/block-metadata.md +++ b/docs/reference-guides/block-api/block-metadata.md @@ -1,11 +1,6 @@ # Metadata -To register a new block type using metadata that can be shared between codebase that uses JavaScript and PHP, start by creating a `block.json` file. This file: - -- Gives a name to the block type. -- Defines some important metadata about the registered block type (title, category, icon, description, keywords). -- Defines the attributes of the block type. -- Registers all the scripts and styles for your block type. +Starting in WordPress 5.8 release, we encourage using the `block.json` metadata file as the canonical way to register block types. Here is an example `block.json` file that would define the metadata for a plugin create a notice block. **Example:** @@ -50,9 +45,19 @@ To register a new block type using metadata that can be shared between codebase } ``` -The same file is also used when [submitting block to Block Directory](/docs/getting-started/tutorials/create-block/submitting-to-block-directory.md). +## Benefits using the metadata file + +The block definition allows code sharing between JavaScript, PHP, and other languages when processing block types stored as JSON, and registering blocks with the `block.json` metadata file provides multiple benefits on top of it. + +From a performance perspective, when themes support lazy loading assets, blocks registered with `block.json` will have their asset enqueuing optimized out of the box. The frontend CSS and JavaScript assets listed in the `style` or `script` properties will only be enqueued when the block is present on the page, resulting in reduced page sizes. + +Furthermore, because the [Block Type REST API Endpoint](https://developer.wordpress.org/rest-api/reference/block-types/) can only list blocks registered on the server, registering blocks server-side is recommended; using the `block.json` file simplifies this registration. + +Last, but not least, the [WordPress Plugins Directory](https://wordpress.org/plugins/) can detect `block.json` files, highlight blocks included in plugins, and extract their metadata. If you wish to [submit your block(s) to the Block Directory](/docs/getting-started/tutorials/create-block/submitting-to-block-directory.md), all blocks contained in your plugin must have a `block.json` file for the Block Directory to recognize them. -## Server-side registration +## Block registration + +### PHP (server-side) The [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) function that aims to simplify the block type registration on the server, can read metadata stored in the `block.json` file. @@ -75,6 +80,41 @@ register_block_type( ); ``` +### JavaScript (client-side) + +When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. + +**Example:** + +```js +registerBlockType( 'my-plugin/notice', { + edit: Edit, + // ...other client-side settings +} ); +``` + +Although registering the block also on the server with PHP is still recommended for the reasons above, if you want to register it only client-side you can now use `registerBlockType` method from `@wordpress/blocks` package to register a block type using the metadata loaded from `block.json` file. + +The function takes two params: + +- `$blockNameOrMetadata` (`string`|`Object`) – block type name (supported previously) or the metadata object loaded from the `block.json` file with a bundler (e.g., webpack) or a custom Babel plugin. +- `$settings` (`Object`) – client-side block settings. + +It returns the registered block type (`WPBlock`) on success or `undefined` on failure. + +**Example:** + +```js +import { registerBlockType } from '@wordpress/blocks'; +import Edit from './edit'; +import metadata from './block.json'; + +registerBlockType( metadata, { + edit: Edit, + // ...other client-side settings +} ); +``` + ## Block API This section describes all the properties that can be added to the `block.json` file to define the behavior and metadata of block types. diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md index 23723ffe2f1efa..a290d4b7d48731 100644 --- a/docs/reference-guides/block-api/block-registration.md +++ b/docs/reference-guides/block-api/block-registration.md @@ -2,7 +2,7 @@ Block registration API reference. -**Note:** You can use the functions documented on this page, but a flexible method to register new block types is to use the block.json metadata file. See [metadata documentation for complete information](/docs/reference-guides/block-api/block-metadata.md). +**Note:** You can use the functions documented on this page to register a block on the client-side only, but a flexible method to register new block types is to use the `block.json` metadata file. See [metadata documentation for complete information](/docs/reference-guides/block-api/block-metadata.md). ## `registerBlockType` diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md index e44016ed3bbd23..02a28e8f433830 100644 --- a/docs/reference-guides/filters/block-filters.md +++ b/docs/reference-guides/filters/block-filters.md @@ -2,13 +2,56 @@ To modify the behavior of existing blocks, WordPress exposes several APIs: -## Filters +## Registration -The following filters are available to extend the settings for existing blocks. +The following filters are available to extend the settings for blocks during their registration. + +### `block_type_metadata` + +Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows applying modifications before the metadata gets processed. + +The filter takes one param: + +- `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type. + +_Example_: + +```php +`, `