diff --git a/changelog.txt b/changelog.txt index f681205d6b98e9..68c2da5e451984 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,325 @@ == Changelog == += 16.9.0-rc.1 = + +## Changelog + +### Features + +#### Create Block +- [Create Block] Introduce the transformer property. ([55423](https://github.com/WordPress/gutenberg/pull/55423)) + +#### Data Views +- Enable users to sort by `date`. ([55388](https://github.com/WordPress/gutenberg/pull/55388)) + +#### Block Library +- Enable Block Renaming support for (almost) all blocks. ([54426](https://github.com/WordPress/gutenberg/pull/54426)) + + +### Enhancements + +#### Command API +- Add block-specific commands as contextual suggestions [#53539]. ([53974](https://github.com/WordPress/gutenberg/pull/53974)) + +#### Components +- Add `Tabs` (a composable `TabPanel` v2). ([53960](https://github.com/WordPress/gutenberg/pull/53960)) +- Add `type="button"` to vanilla `'; + style="background: #000" + > + + + + + + + '; $body_content = preg_replace( '/]+>/', $button, $body_content ); diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 2ef602982e57b5..0fde1262fdec2d 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -157,14 +157,28 @@ display: flex; flex-direction: column; + img { + cursor: zoom-in; + } + + img:hover + button { + opacity: 1; + } + button { + opacity: 0; border: none; - background: none; + background: #000; cursor: zoom-in; - width: 100%; - height: 100%; + width: 24px; + height: 24px; position: absolute; z-index: 100; + top: 10px; + right: 10px; + text-align: center; + padding: 0; + border-radius: 10%; &:focus-visible { outline: 5px auto #212121; @@ -172,10 +186,19 @@ outline-offset: 5px; } + &:hover { + cursor: pointer; + opacity: 1; + } + + &:focus { + opacity: 1; + } + &:hover, &:focus, &:not(:hover):not(:active):not(.has-background) { - background: none; + background: #000; border: none; } } diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 3f2242ad737f02..30d1259637e3d9 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -103,12 +103,10 @@ store( context.core.image.lastFocusedElement = window.document.activeElement; context.core.image.scrollDelta = 0; + context.core.image.pointerType = event.pointerType; context.core.image.lightboxEnabled = true; - setStyles( - context, - event.target.previousElementSibling - ); + setStyles( context, context.core.image.imageRef ); context.core.image.scrollTopReset = window.pageYOffset || @@ -137,7 +135,7 @@ store( false ); }, - hideLightbox: async ( { context } ) => { + hideLightbox: async ( { context, event } ) => { context.core.image.hideAnimationEnabled = true; if ( context.core.image.lightboxEnabled ) { // We want to wait until the close animation is completed @@ -154,9 +152,16 @@ store( }, 450 ); context.core.image.lightboxEnabled = false; - context.core.image.lastFocusedElement.focus( { - preventScroll: true, - } ); + + // We want to avoid drawing attention to the button + // after the lightbox closes for mouse and touch users. + // Note that the `event.pointerType` property returns + // as an empty string if a keyboard fired the event. + if ( event.pointerType === '' ) { + context.core.image.lastFocusedElement.focus( { + preventScroll: true, + } ); + } } }, handleKeydown: ( { context, actions, event } ) => { @@ -191,11 +196,12 @@ store( } } }, - handleLoad: ( { state, context, effects, ref } ) => { + // This is fired just by lazily loaded + // images on the page, not all images. + handleLoad: ( { context, effects, ref } ) => { context.core.image.imageLoaded = true; context.core.image.imageCurrentSrc = ref.currentSrc; effects.core.image.setButtonStyles( { - state, context, ref, } ); @@ -258,17 +264,14 @@ store( effects: { core: { image: { - setCurrentSrc: ( { context, ref } ) => { + initOriginImage: ( { context, ref } ) => { + context.core.image.imageRef = ref; if ( ref.complete ) { context.core.image.imageLoaded = true; context.core.image.imageCurrentSrc = ref.currentSrc; } }, initLightbox: async ( { context, ref } ) => { - context.core.image.figureRef = - ref.querySelector( 'figure' ); - context.core.image.imageRef = - ref.querySelector( 'img' ); if ( context.core.image.lightboxEnabled ) { const focusableElements = ref.querySelectorAll( focusableSelectors ); @@ -279,10 +282,17 @@ store( focusableElements.length - 1 ]; - ref.querySelector( '.close-button' ).focus(); + // We want to avoid drawing unnecessary attention to the close + // button for mouse and touch users. Note that even if opening + // the lightbox via keyboard, the event fired is of type + // `pointerEvent`, so we need to rely on the `event.pointerType` + // property, which returns an empty string for keyboard events. + if ( context.core.image.pointerType === '' ) { + ref.querySelector( '.close-button' ).focus(); + } } }, - setButtonStyles: ( { state, context, ref } ) => { + setButtonStyles: ( { context, ref } ) => { const { naturalWidth, naturalHeight, @@ -291,54 +301,71 @@ store( } = ref; // If the image isn't loaded yet, we can't - // calculate how big the button should be. + // calculate where the button should be. if ( naturalWidth === 0 || naturalHeight === 0 ) { return; } - // Subscribe to the window dimensions so we can - // recalculate the styles if the window is resized. - if ( - ( state.core.image.windowWidth || - state.core.image.windowHeight ) && - context.core.image.scaleAttr === 'contain' - ) { - // In the case of an image with object-fit: contain, the - // size of the img element can be larger than the image itself, - // so we need to calculate the size of the button to match. + const figure = ref.parentElement; + const figureWidth = ref.parentElement.clientWidth; + + // We need special handling for the height because + // a caption will cause the figure to be taller than + // the image, which means we need to account for that + // when calculating the placement of the button in the + // top right corner of the image. + let figureHeight = ref.parentElement.clientHeight; + const caption = figure.querySelector( 'figcaption' ); + if ( caption ) { + const captionComputedStyle = + window.getComputedStyle( caption ); + figureHeight = + figureHeight - + caption.offsetHeight - + parseFloat( captionComputedStyle.marginTop ) - + parseFloat( captionComputedStyle.marginBottom ); + } + const buttonOffsetTop = figureHeight - offsetHeight; + const buttonOffsetRight = figureWidth - offsetWidth; + + // In the case of an image with object-fit: contain, the + // size of the element can be larger than the image itself, + // so we need to calculate where to place the button. + if ( context.core.image.scaleAttr === 'contain' ) { // Natural ratio of the image. const naturalRatio = naturalWidth / naturalHeight; // Offset ratio of the image. const offsetRatio = offsetWidth / offsetHeight; - if ( naturalRatio > offsetRatio ) { + if ( naturalRatio >= offsetRatio ) { // If it reaches the width first, keep - // the width and recalculate the height. - context.core.image.imageButtonWidth = - offsetWidth; - const buttonHeight = offsetWidth / naturalRatio; - context.core.image.imageButtonHeight = - buttonHeight; + // the width and compute the height. + const referenceHeight = + offsetWidth / naturalRatio; context.core.image.imageButtonTop = - ( offsetHeight - buttonHeight ) / 2; + ( offsetHeight - referenceHeight ) / 2 + + buttonOffsetTop + + 10; + context.core.image.imageButtonRight = + buttonOffsetRight + 10; } else { // If it reaches the height first, keep - // the height and recalculate the width. - context.core.image.imageButtonHeight = - offsetHeight; - const buttonWidth = offsetHeight * naturalRatio; - context.core.image.imageButtonWidth = - buttonWidth; - context.core.image.imageButtonLeft = - ( offsetWidth - buttonWidth ) / 2; + // the height and compute the width. + const referenceWidth = + offsetHeight * naturalRatio; + context.core.image.imageButtonTop = + buttonOffsetTop + 10; + context.core.image.imageButtonRight = + ( offsetWidth - referenceWidth ) / 2 + + buttonOffsetRight + + 10; } } else { - // In all other cases, we can trust that the size of - // the image is the right size for the button as well. - - context.core.image.imageButtonWidth = offsetWidth; - context.core.image.imageButtonHeight = offsetHeight; + context.core.image.imageButtonTop = + buttonOffsetTop + 10; + context.core.image.imageButtonRight = + buttonOffsetRight + 10; } }, setStylesOnResize: ( { state, context, ref } ) => { diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 40b22757528551..592d188e22ae7c 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -90,6 +90,13 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); $w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' ); + + // This is a fix for Safari. Without it, Safari doesn't change the active + // element when the user clicks on a button. It can be removed once we add + // an overlay to capture the clicks, instead of relying on the focusout + // event. + $w->set_attribute( 'tabindex', '-1' ); + if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { $w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' ); $w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index c0853b2814e2b3..bad36f6240134f 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -13,10 +13,14 @@ const focusableSelectors = [ '[tabindex]:not([tabindex^="-"])', ]; +// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out +// when the user taps in the body. It can be removed once we add an overlay to +// capture the clicks, instead of relying on the focusout event. +document.addEventListener( 'click', () => {} ); + const openMenu = ( store, menuOpenedOn ) => { - const { context, ref, selectors } = store; + const { context, selectors } = store; selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true; - context.core.navigation.previousFocus = ref; if ( context.core.navigation.type === 'overlay' ) { // Add a `has-modal-open` class to the root. document.documentElement.classList.add( 'has-modal-open' ); @@ -33,7 +37,7 @@ const closeMenu = ( store, menuClosedOn ) => { window.document.activeElement ) ) { - context.core.navigation.previousFocus.focus(); + context.core.navigation.previousFocus?.focus(); } context.core.navigation.modal = null; context.core.navigation.previousFocus = null; @@ -130,6 +134,8 @@ wpStore( { closeMenu( store, 'hover' ); }, openMenuOnClick( store ) { + const { context, ref } = store; + context.core.navigation.previousFocus = ref; openMenu( store, 'click' ); }, closeMenuOnClick( store ) { @@ -140,13 +146,16 @@ wpStore( { openMenu( store, 'focus' ); }, toggleMenuOnClick: ( store ) => { - const { selectors } = store; + const { selectors, context, ref } = store; + // Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261 + if ( window.document.activeElement !== ref ) ref.focus(); const menuOpenedBy = selectors.core.navigation.menuOpenedBy( store ); if ( menuOpenedBy.click || menuOpenedBy.focus ) { closeMenu( store, 'click' ); closeMenu( store, 'focus' ); } else { + context.core.navigation.previousFocus = ref; openMenu( store, 'click' ); } }, @@ -194,11 +203,14 @@ wpStore( { // event.relatedTarget === The element receiving focus (if any) // When focusout is outsite the document, // `window.document.activeElement` doesn't change. + + // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari. if ( - ! context.core.navigation.modal?.contains( + event.relatedTarget === null || + ( ! context.core.navigation.modal?.contains( event.relatedTarget ) && - event.target !== window.document.activeElement + event.target !== window.document.activeElement ) ) { closeMenu( store, 'click' ); closeMenu( store, 'focus' ); diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 21f692bd25b263..37a9c2ab9b10a9 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -18,7 +18,7 @@ import { InspectorControls, RichText, useBlockProps, - useSetting, + useSettings, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; @@ -58,7 +58,7 @@ function ParagraphBlock( { clientId, } ) { const { align, content, direction, dropCap, placeholder } = attributes; - const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' ); + const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' ); const blockProps = useBlockProps( { ref: useOnEnter( { clientId, content } ), className: classnames( { diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 5e1204922880c6..03a2d2849dae36 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -10,7 +10,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { InspectorControls, useSetting } from '@wordpress/block-editor'; +import { InspectorControls, useSettings } from '@wordpress/block-editor'; const SCALE_OPTIONS = ( <> @@ -53,9 +53,9 @@ const DimensionControls = ( { setAttributes, imageSizeOptions = [], } ) => { - const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ]; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || defaultUnits, + availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ], } ); const onDimensionChange = ( dimension, nextValue ) => { const parsedValue = parseFloat( nextValue ); diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php index 1b05e9c92c95e3..5e89f21fc3028f 100644 --- a/packages/block-library/src/query/index.php +++ b/packages/block-library/src/query/index.php @@ -48,7 +48,7 @@ function render_block_core_query( $attributes, $content, $block ) { $content = substr_replace( $content, '
diff --git a/packages/block-library/src/query/style.scss b/packages/block-library/src/query/style.scss index 25003dcca5431b..4e9f4741beaed4 100644 --- a/packages/block-library/src/query/style.scss +++ b/packages/block-library/src/query/style.scss @@ -50,14 +50,3 @@ opacity: 0; } } - -.wp-block-query__enhanced-pagination-navigation-announce { - position: absolute; - clip: rect(0, 0, 0, 0); - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - border: 0; -} diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 616478d8013f72..52f89d344cdf02 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -16,7 +16,7 @@ import { getTypographyClassesAndStyles as useTypographyProps, store as blockEditorStore, __experimentalGetElementClassName, - useSetting, + useSettings, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -125,8 +125,10 @@ export default function SearchEdit( { } const colorProps = useColorProps( attributes ); - const fluidTypographySettings = useSetting( 'typography.fluid' ); - const layout = useSetting( 'layout' ); + const [ fluidTypographySettings, layout ] = useSettings( + 'typography.fluid', + 'layout' + ); const typographyProps = useTypographyProps( attributes, { typography: { fluid: fluidTypographySettings, diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index d999550f16f331..91a1e79be173eb 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, - useSetting, + useSettings, __experimentalSpacingSizesControl as SpacingSizesControl, isValueSpacingPreset, } from '@wordpress/block-editor'; @@ -25,22 +25,19 @@ import { MIN_SPACER_SIZE } from './constants'; function DimensionInput( { label, onChange, isResizing, value = '' } ) { const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); - const spacingSizes = useSetting( 'spacing.spacingSizes' ); + const [ spacingSizes, spacingUnits ] = useSettings( + 'spacing.spacingSizes', + 'spacing.units' + ); // In most contexts the spacer size cannot meaningfully be set to a // percentage, since this is relative to the parent container. This // unit is disabled from the UI. - const availableUnitSettings = ( - useSetting( 'spacing.units' ) || undefined - )?.filter( ( availableUnit ) => availableUnit !== '%' ); + const availableUnits = spacingUnits + ? spacingUnits.filter( ( unit ) => unit !== '%' ) + : [ 'px', 'em', 'rem', 'vw', 'vh' ]; const units = useCustomUnits( { - availableUnits: availableUnitSettings || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits, defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 }, } ); diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js index 644359b1072751..6aacfae19fa82a 100644 --- a/packages/block-library/src/spacer/controls.native.js +++ b/packages/block-library/src/spacer/controls.native.js @@ -8,7 +8,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; import { useCallback } from '@wordpress/element'; -import { useSetting } from '@wordpress/block-editor'; +import { useSettings } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -59,14 +59,9 @@ function Controls( { [ height, width ] ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ], defaultValues: DEFAULT_VALUES, } ); diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 1786c435ebbf23..11133732042d3f 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { useBlockProps, - useSetting, + useSettings, getCustomValueFromPreset, getSpacingPresetCssVar, store as blockEditorStore, @@ -107,7 +107,7 @@ const SpacerEdit = ( { const { layout = {} } = blockStyle; const { selfStretch, flexSize } = layout; - const spacingSizes = useSetting( 'spacing.spacingSizes' ); + const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' ); const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index ca5cfa409939bf..614624570a6d95 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -11,7 +11,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import { InspectorControls, isValueSpacingPreset, - useSetting, + useSettings, getCustomValueFromPreset, getPxFromCssUnit, } from '@wordpress/block-editor'; @@ -39,10 +39,11 @@ const Spacer = ( { fontSize: DEFAULT_FONT_SIZE, }; const { height, width } = attributes; - const spacingSizes = [ - { name: 0, slug: '0', size: 0 }, - ...( useSetting( 'spacing.spacingSizes' ) || [] ), - ]; + const spacingSizes = [ { name: 0, slug: '0', size: 0 } ]; + const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' ); + if ( settingsSizes ) { + spacingSizes.push( ...settingsSizes ); + } const { orientation } = context; const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 4dbec86fff520c..a52c68bc6a7390 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, - useSetting, + useSettings, } from '@wordpress/block-editor'; import ServerSideRender from '@wordpress/server-side-render'; import { store as coreStore } from '@wordpress/core-data'; @@ -49,13 +49,9 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { largestFontSize, } = attributes; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem' ], } ); const getTaxonomyOptions = () => { diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index b17428bbdbb40e..146877ee0287cc 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -5,7 +5,7 @@ import { useEntityBlockEditor } from '@wordpress/core-data'; import { InnerBlocks, useInnerBlocksProps, - useSetting, + useSettings, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -21,8 +21,8 @@ export default function TemplatePartInnerBlocks( { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; + const [ defaultLayout ] = useSettings( 'layout' ); + const usedLayout = layout?.inherit ? defaultLayout || {} : layout; const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md index 6d05c5b37fa8fb..871ec167efdee0 100644 --- a/packages/block-serialization-default-parser/CHANGELOG.md +++ b/packages/block-serialization-default-parser/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.44.0 (2023-10-18) + ## 4.43.0 (2023-10-05) ## 4.42.0 (2023-09-20) diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json index 2aa3ba1a4038f6..80e1399de39175 100644 --- a/packages/block-serialization-default-parser/package.json +++ b/packages/block-serialization-default-parser/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-serialization-default-parser", - "version": "4.43.0", + "version": "4.44.0", "description": "Block serialization specification parser for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md index 71d0b962feddd0..b59c4e01cfb8b3 100644 --- a/packages/block-serialization-spec-parser/CHANGELOG.md +++ b/packages/block-serialization-spec-parser/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.44.0 (2023-10-18) + ## 4.43.0 (2023-10-05) ## 4.42.0 (2023-09-20) diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json index 9001a2cca57c75..fdd80bdabf118b 100644 --- a/packages/block-serialization-spec-parser/package.json +++ b/packages/block-serialization-spec-parser/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-serialization-spec-parser", - "version": "4.43.0", + "version": "4.44.0", "description": "Block serialization specification parser for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index a27eb954f1b93c..42eaa3e45c246f 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 12.21.0 (2023-10-18) + ## 12.20.0 (2023-10-05) ## 12.19.0 (2023-09-20) diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 665331a11b866d..6e20a2af9848df 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/blocks", - "version": "12.20.1", + "version": "12.21.0", "description": "Block API for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md index be36d5dacde2ea..e8920dd3541ec3 100644 --- a/packages/browserslist-config/CHANGELOG.md +++ b/packages/browserslist-config/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.27.0 (2023-10-18) + ## 5.26.0 (2023-10-05) ## 5.25.0 (2023-09-20) diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json index dddefa8aa4382b..06cf5cd24c89ca 100644 --- a/packages/browserslist-config/package.json +++ b/packages/browserslist-config/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/browserslist-config", - "version": "5.26.0", + "version": "5.27.0", "description": "WordPress Browserslist shared configuration.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index 5dcd137dd95f87..9f6a2e38e0dee5 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 0.15.0 (2023-10-18) + ## 0.14.0 (2023-10-05) ## 0.13.0 (2023-09-20) diff --git a/packages/commands/package.json b/packages/commands/package.json index 96db63a8e078d1..445307575567d3 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/commands", - "version": "0.14.1", + "version": "0.15.0", "description": "Handles the commands menu.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 00a7558d389bab..3b467cf083e3ff 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 25.10.0 (2023-10-18) + ### Enhancements - `ProgressBar`: use text color to ensure enough contrast against background ([#55285](https://github.com/WordPress/gutenberg/pull/55285)). diff --git a/packages/components/package.json b/packages/components/package.json index b58335943231a9..969bcc63008738 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/components", - "version": "25.9.1", + "version": "25.10.0", "description": "UI components for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", 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 d494ca3cedbdbf..8b0e92e70f5ae3 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -9,7 +9,7 @@ import { Dimensions } from 'react-native'; */ import { getPxFromCssUnit, - useSetting, + useSettings, useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; @@ -357,7 +357,7 @@ export function useMobileGlobalStylesColors( type = 'colors' ) { // Default editor colors/gradients if it's not a block-based theme. const colorPalette = type === 'colors' ? 'color.palette' : 'color.gradients'; - const editorDefaultPalette = useSetting( colorPalette ); + const [ editorDefaultPalette ] = useSettings( colorPalette ); return availableThemeColors.length >= 1 ? availableThemeColors diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 801af829416d15..73f7aedeeafebd 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 6.21.0 (2023-10-18) + ## 6.20.0 (2023-10-05) ## 6.19.0 (2023-09-20) diff --git a/packages/compose/package.json b/packages/compose/package.json index 92da01c1d7959e..c309c5dd72069b 100644 --- a/packages/compose/package.json +++ b/packages/compose/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/compose", - "version": "6.20.0", + "version": "6.21.0", "description": "WordPress higher-order components (HOCs).", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md index 5dc9ed38433e8d..05d313a37d3bbe 100644 --- a/packages/core-commands/CHANGELOG.md +++ b/packages/core-commands/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 0.13.0 (2023-10-18) + ## 0.12.0 (2023-10-05) ## 0.11.0 (2023-09-20) diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json index 40c7efd7dadaa9..aa68a285c973c9 100644 --- a/packages/core-commands/package.json +++ b/packages/core-commands/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/core-commands", - "version": "0.12.1", + "version": "0.13.0", "description": "WordPress core reusable commands.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md index 817a6cc924bb74..c7d93255e15a71 100644 --- a/packages/core-data/CHANGELOG.md +++ b/packages/core-data/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 6.21.0 (2023-10-18) + ## Enhancements - Add `getEntityRecordsTotalItems` and `getEntityRecordsTotalPages` selectors. [#55164](https://github.com/WordPress/gutenberg/pull/55164). diff --git a/packages/core-data/package.json b/packages/core-data/package.json index f5f8fdf7650f3b..0e856f3fcbeda9 100644 --- a/packages/core-data/package.json +++ b/packages/core-data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/core-data", - "version": "6.20.1", + "version": "6.21.0", "description": "Access to and manipulation of core WordPress entities.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md index 41ca854d3d8981..aceb15e54791a1 100644 --- a/packages/create-block-interactive-template/CHANGELOG.md +++ b/packages/create-block-interactive-template/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 1.7.0 (2023-10-18) + ## 1.6.0 (2023-10-05) ## 1.5.0 (2023-09-20) diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json index 697fb3fb1efdd0..5651f7cd0d2b06 100644 --- a/packages/create-block-interactive-template/package.json +++ b/packages/create-block-interactive-template/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block-interactive-template", - "version": "1.6.0", + "version": "1.7.0", "description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md index 19d35f9f07f570..e797e8d1fe3fd2 100644 --- a/packages/create-block-tutorial-template/CHANGELOG.md +++ b/packages/create-block-tutorial-template/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 2.32.0 (2023-10-18) + ## 2.31.0 (2023-10-05) ## 2.30.0 (2023-09-20) diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json index 10aad7983a2bc3..e0ca806a827d07 100644 --- a/packages/create-block-tutorial-template/package.json +++ b/packages/create-block-tutorial-template/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block-tutorial-template", - "version": "2.31.0", + "version": "2.32.0", "description": "Template for @wordpress/create-block used in the official WordPress tutorial.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index fa1fa983085f1f..b6cbfa49382289 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +## 4.28.0 (2023-10-18) + +### New Feature + +- Add new `transformer` property to external templates to allow customization of any values being passed from cli or the template.[#55423](https://github.com/WordPress/gutenberg/pull/55423) + ## 4.27.0 (2023-10-05) ## 4.26.0 (2023-09-20) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 568ec2f0074579..49d3cbf794777a 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -49,52 +49,31 @@ module.exports = async ( customPackageJSON, customBlockJSON, example, + transformer, } ) => { slug = slug.toLowerCase(); namespace = namespace.toLowerCase(); - /** - * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath). - * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that - * doesn't support it. - */ - if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) { - error( - 'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.' - ); - return; - } - info( '' ); - info( - plugin - ? `Creating a new WordPress plugin in the ${ slug } directory.` - : `Creating a new block in the ${ slug } directory.` - ); - - const view = { + const transformedValues = transformer( { $schema, apiVersion, plugin, namespace, - namespaceSnakeCase: snakeCase( namespace ), slug, - slugSnakeCase: snakeCase( slug ), - slugPascalCase: pascalCase( slug ), title, description, dashicon, category, attributes, supports, - version, author, pluginURI, license, licenseURI, - textdomain: slug, domainPath, updateURI, + version, wpScripts, wpEnv, npmDependencies, @@ -106,12 +85,40 @@ module.exports = async ( style, render, viewScript, + variantVars, customPackageJSON, customBlockJSON, example, + textdomain: slug, + } ); + + const view = { + ...transformedValues, + namespaceSnakeCase: snakeCase( transformedValues.slug ), + slugSnakeCase: snakeCase( transformedValues.slug ), + slugPascalCase: pascalCase( transformedValues.slug ), ...variantVars, }; + /** + * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath). + * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that + * doesn't support it. + */ + if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) { + error( + 'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.' + ); + return; + } + + info( '' ); + info( + plugin + ? `Creating a new WordPress plugin in the ${ view.slug } directory.` + : `Creating a new block in the ${ view.slug } directory.` + ); + if ( plugin ) { await Promise.all( Object.keys( pluginOutputTemplates ).map( diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index e835e31c08425e..cf8274a21d3c03 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -241,6 +241,7 @@ const getDefaultValues = ( pluginTemplate, variant ) => { editorScript: 'file:./index.js', editorStyle: 'file:./index.css', style: 'file:./style-index.css', + transformer: ( view ) => view, ...pluginTemplate.defaultValues, ...pluginTemplate.variants?.[ variant ], variantVars: getVariantVars( pluginTemplate.variants, variant ), diff --git a/packages/create-block/package.json b/packages/create-block/package.json index 455eceefd4a9a8..9c23b91852136a 100644 --- a/packages/create-block/package.json +++ b/packages/create-block/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/create-block", - "version": "4.27.0", + "version": "4.28.0", "description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md index 47693bc3365b1b..d995fe6f1bc912 100644 --- a/packages/customize-widgets/CHANGELOG.md +++ b/packages/customize-widgets/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.21.0 (2023-10-18) + ## 4.20.0 (2023-10-05) ## 4.19.0 (2023-09-20) diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json index 48f384c3b55fed..6280483df2e799 100644 --- a/packages/customize-widgets/package.json +++ b/packages/customize-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/customize-widgets", - "version": "4.20.1", + "version": "4.21.0", "description": "Widgets blocks in Customizer Module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md index c0aafcfe59ad43..c38c2640c2b0f3 100644 --- a/packages/data-controls/CHANGELOG.md +++ b/packages/data-controls/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.13.0 (2023-10-18) + ## 3.12.0 (2023-10-05) ## 3.11.0 (2023-09-20) diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json index 4738d79565268a..f65a27e66f69e3 100644 --- a/packages/data-controls/package.json +++ b/packages/data-controls/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/data-controls", - "version": "3.12.1", + "version": "3.13.0", "description": "A set of common controls for the @wordpress/data api.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md index 4c6d4627decfac..3c0e653a96838d 100644 --- a/packages/data/CHANGELOG.md +++ b/packages/data/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 9.14.0 (2023-10-18) + ## 9.13.1 (2023-10-12) ### Bug Fix diff --git a/packages/data/package.json b/packages/data/package.json index 591e9c57397755..ffc77d26a82505 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/data", - "version": "9.13.1", + "version": "9.14.0", "description": "Data module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md index bd72e9e8f327ff..5d5a4e04292c5c 100644 --- a/packages/date/CHANGELOG.md +++ b/packages/date/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.44.0 (2023-10-18) + ## 4.43.0 (2023-10-05) ## 4.42.0 (2023-09-20) diff --git a/packages/date/package.json b/packages/date/package.json index ff0844300ff13d..4cafb25826c708 100644 --- a/packages/date/package.json +++ b/packages/date/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/date", - "version": "4.43.0", + "version": "4.44.0", "description": "Date module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md index d117a5ba9b4168..e643ec36c4f3ac 100644 --- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md +++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.27.0 (2023-10-18) + ## 4.26.0 (2023-10-05) ## 4.25.0 (2023-09-20) diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json index 38fb3006e963c3..b540de32112507 100644 --- a/packages/dependency-extraction-webpack-plugin/package.json +++ b/packages/dependency-extraction-webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/dependency-extraction-webpack-plugin", - "version": "4.26.0", + "version": "4.27.0", "description": "Extract WordPress script dependencies from webpack bundles.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md index 3b4a240cd9e8fa..75c68d9f82fb8a 100644 --- a/packages/deprecated/CHANGELOG.md +++ b/packages/deprecated/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.44.0 (2023-10-18) + ## 3.43.0 (2023-10-05) ## 3.42.0 (2023-09-20) diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json index 57dfa5e41d0a52..5a262e489819b3 100644 --- a/packages/deprecated/package.json +++ b/packages/deprecated/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/deprecated", - "version": "3.43.0", + "version": "3.44.0", "description": "Deprecation utility for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md index f84b1c05aa06cc..98c280d7dc7f0e 100644 --- a/packages/docgen/CHANGELOG.md +++ b/packages/docgen/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 1.53.0 (2023-10-18) + ## 1.52.0 (2023-10-05) ## 1.51.0 (2023-09-20) diff --git a/packages/docgen/package.json b/packages/docgen/package.json index bb277da944da0f..74ecb8461c47d3 100644 --- a/packages/docgen/package.json +++ b/packages/docgen/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/docgen", - "version": "1.52.0", + "version": "1.53.0", "description": "Autogenerate public API documentation from exports and JSDoc comments.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md index 18f892e9be0585..d4a268a7005f43 100644 --- a/packages/dom-ready/CHANGELOG.md +++ b/packages/dom-ready/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.44.0 (2023-10-18) + ## 3.43.0 (2023-10-05) ## 3.42.0 (2023-09-20) diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json index cf43450352ce95..5beb59936ad2d5 100644 --- a/packages/dom-ready/package.json +++ b/packages/dom-ready/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/dom-ready", - "version": "3.43.0", + "version": "3.44.0", "description": "Execute callback after the DOM is loaded.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md index c081283a42c28d..fb0ffb91f99bfc 100644 --- a/packages/dom/CHANGELOG.md +++ b/packages/dom/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.44.0 (2023-10-18) + ## 3.43.0 (2023-10-05) ## 3.42.0 (2023-09-20) diff --git a/packages/dom/package.json b/packages/dom/package.json index f50753fcef62d5..b5c70b293408b7 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/dom", - "version": "3.43.0", + "version": "3.44.0", "description": "DOM utilities module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md index ac22a2b0989d8d..6385b826d8457b 100644 --- a/packages/e2e-test-utils-playwright/CHANGELOG.md +++ b/packages/e2e-test-utils-playwright/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 0.12.0 (2023-10-18) + ## 0.11.0 (2023-10-05) ## 0.10.0 (2023-09-20) diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json index b3827da510b88a..df703296072494 100644 --- a/packages/e2e-test-utils-playwright/package.json +++ b/packages/e2e-test-utils-playwright/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/e2e-test-utils-playwright", - "version": "0.11.0", + "version": "0.12.0", "description": "End-To-End (E2E) test utils for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md index f307772ca76fa1..824c1a6b9e9b6a 100644 --- a/packages/e2e-test-utils/CHANGELOG.md +++ b/packages/e2e-test-utils/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 10.15.0 (2023-10-18) + ## 10.14.0 (2023-10-05) ## 10.13.0 (2023-09-20) diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json index c6758ca4b927dd..1349b9fe5cd3bd 100644 --- a/packages/e2e-test-utils/package.json +++ b/packages/e2e-test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/e2e-test-utils", - "version": "10.14.0", + "version": "10.15.0", "description": "End-To-End (E2E) test utils for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md index cb8d297c1aa046..0cb1c6531476e3 100644 --- a/packages/e2e-tests/CHANGELOG.md +++ b/packages/e2e-tests/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 7.15.0 (2023-10-18) + ## 7.14.0 (2023-10-05) ## 7.13.0 (2023-09-20) diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json index 1e32de88a17b8f..14cb8503d6dc64 100644 --- a/packages/e2e-tests/package.json +++ b/packages/e2e-tests/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/e2e-tests", - "version": "7.14.0", + "version": "7.15.0", "description": "End-To-End (E2E) tests for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md index 4dfa17b2c2a2b4..2de5dfae49eb02 100644 --- a/packages/edit-post/CHANGELOG.md +++ b/packages/edit-post/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 7.21.0 (2023-10-18) + ## 7.20.0 (2023-10-05) ## 7.19.0 (2023-09-20) diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 8691e91d45b1d8..ef6dbd0ff833bc 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-post", - "version": "7.20.1", + "version": "7.21.0", "description": "Edit Post module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 14b6bf475045e1..bd236551c7cf14 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -14,7 +14,7 @@ import { __unstableUseTypewriter as useTypewriter, __unstableUseTypingObserver as useTypingObserver, __experimentalUseResizeCanvas as useResizeCanvas, - useSetting, + useSettings, __experimentalRecursionProvider as RecursionProvider, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; @@ -171,7 +171,7 @@ export default function VisualEditor( { styles } ) { borderBottom: 0, }; const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); - const globalLayoutSettings = useSetting( 'layout' ); + const [ globalLayoutSettings ] = useSettings( 'layout' ); const previewMode = 'is-' + deviceType.toLowerCase() + '-preview'; let animatedStyles = isTemplateMode diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index b946b4c8e1c0d6..73fd0d149a11d6 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.21.0 (2023-10-18) + ## 5.20.0 (2023-10-05) ## 5.19.0 (2023-09-20) diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index b6bd5b05205fe6..6bb2259330d2e4 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/edit-site", - "version": "5.20.1", + "version": "5.21.0", "description": "Edit Site Page module for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md new file mode 100644 index 00000000000000..a1d03a42baab49 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/README.md @@ -0,0 +1,107 @@ +# DataView + +This file aims to document the main APIs related to the DataView component. + +## View + +The view is responsible for configuring how the dataset is visible to the user. For example: + +```js +{ + type: 'list', + page: 1, + perPage: 5, + sort: { + field: 'date', + direction: 'desc', + }, + filters: { + search: '', + author: 2, + status: 'publish, draft' + }, + visibleFilters: [ 'search', 'author', 'status' ], + hiddenFields: [ 'date', 'featured-image' ], + layout: {}, +} +``` + +- `type`: one of `list` or `grid`. +- `page`: the current page. +- `perPage`: number of records per page. +- `sort.field`: field used for sorting. +- `sort.direction`: one of `asc` or `desc`. +- `filters`: the filters applied to the dataset. +- `visibleFilters`: the `id` of the filters that are visible in the UI. +- `hiddenFields`: the `id` of the fields that are hidden in the UI. +- `layout`: ... + +The view configuration is used to retrieve the corresponding entity that holds the dataset: + +```js +const { + records: pages, + isLoading: isLoadingPages, + totalItems, + totalPages +} = useEntityRecords( 'postType', 'page', { + per_page: view.perPage, + page: view.page, + order: view.sort?.direction, + orderby: view.sort?.field + ...view.filters +} ); +``` + +## Fields + +The fields describe the dataset. For example: + +```js +[ + { + id: 'author', + header: __( 'Author' ), + getValue: ( { item } ) => item.author, + render: ( {item} ) => { + return ( + { item.author } + ); + }, + elements: [ + { value: 1, label: 'admin' } + { value: 2, label: 'user' } + ] + filters: [ + { id: 'author', type: 'enumeration' }, + { id: 'author_search', type: 'search' } + ], + }, +] +``` + +- `id`: identifier for the field. Unique. +- `header`: the field name for the UI. +- `getValue`: function that returns the value of the field. +- `render`: function that renders the field. +- `elements`: a set of valid values for the field. +- `filters`: what filters are available. A filter is an object with `id` and `type` as properties: + - `id`: unique identifier for the filter. Matches the entity query param. + - `type`: the type of filter. One of `search` or `enumeration`. + + +## DataViews + +The UI component responsible for rendering the dataset. + +```js + +``` diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 755ce8a2ea348d..b488836a91f3eb 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -5,6 +5,7 @@ import { __experimentalVStack as VStack, __experimentalHStack as HStack, } from '@wordpress/components'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -12,7 +13,7 @@ import { import ViewList from './view-list'; import Pagination from './pagination'; import ViewActions from './view-actions'; -import TextFilter from './text-filter'; +import Filters from './filters'; import { ViewGrid } from './view-grid'; export default function DataViews( { @@ -25,19 +26,33 @@ export default function DataViews( { paginationInfo, } ) { const ViewComponent = view.type === 'list' ? ViewList : ViewGrid; + const _fields = useMemo( () => { + return fields.map( ( field ) => ( { + ...field, + render: field.render || field.getValue, + } ) ); + }, [ fields ] ); return (
- - - + + + + + + + + { () => ( + + { actions.map( ( action ) => ( + action.perform( item ) } + isDestructive={ action.isDesctructive } + > + { action.label } + + ) ) } + + ) } + + ); +} + +export default FieldActions; diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js new file mode 100644 index 00000000000000..8d72852e26bcb4 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -0,0 +1,57 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import TextFilter from './text-filter'; +import InFilter from './in-filter'; + +export default function Filters( { fields, view, onChangeView } ) { + const filters = {}; + fields.forEach( ( field ) => { + if ( ! field.filters ) { + return; + } + + field.filters.forEach( ( f ) => { + filters[ f.id ] = { type: f.type }; + } ); + } ); + + return ( + view.visibleFilters?.map( ( filterName ) => { + const filter = filters[ filterName ]; + + if ( ! filter ) { + return null; + } + + if ( filter.type === 'search' ) { + return ( + + ); + } + if ( filter.type === 'enumeration' ) { + return ( + + ); + } + + return null; + } ) || __( 'No filters available' ) + ); +} diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js new file mode 100644 index 00000000000000..0b62b59a3028b0 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -0,0 +1,47 @@ +/** + * WordPress dependencies + */ +import { + __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, + SelectControl, +} from '@wordpress/components'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { cleanEmptyObject } = unlock( blockEditorPrivateApis ); + +export default ( { id, fields, view, onChangeView } ) => { + const field = fields.find( ( f ) => f.id === id ); + + return ( + + { field.header + ':' } + + } + options={ field?.elements || [] } + onChange={ ( value ) => { + if ( value === '' ) { + value = undefined; + } + + onChangeView( ( currentView ) => ( { + ...currentView, + filters: cleanEmptyObject( { + ...currentView.filters, + [ id ]: value, + } ), + } ) ); + } } + /> + ); +}; diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js index bd6cb503653b07..5fbe4669768e8b 100644 --- a/packages/edit-site/src/components/dataviews/pagination.js +++ b/packages/edit-site/src/components/dataviews/pagination.js @@ -25,7 +25,7 @@ function PageSizeControl( { view, onChangeView } ) { prefix={ { label } @@ -36,7 +36,7 @@ function PageSizeControl( { view, onChangeView } ) { label: pageSize, } ) ) } onChange={ ( value ) => - onChangeView( { ...view, perPage: value } ) + onChangeView( { ...view, perPage: value, page: 1 } ) } /> ); @@ -50,7 +50,6 @@ function Pagination( { onChangeView, paginationInfo: { totalItems = 0, totalPages }, } ) { - const currentPage = view.page + 1; if ( ! totalItems || ! totalPages ) { return null; } @@ -75,8 +74,8 @@ function Pagination( {