$initial_image_content
- $enlarged_image_content
+ $enlarged_image_content
HTML;
@@ -309,8 +340,6 @@ function block_core_image_render_lightbox( $block_content, $block ) {
* @since 6.4.0
*
* @global WP_Scripts $wp_scripts
- *
- * @return void
*/
function block_core_image_ensure_interactivity_dependency() {
global $wp_scripts;
@@ -326,8 +355,6 @@ function block_core_image_ensure_interactivity_dependency() {
/**
* Registers the `core/image` block on server.
- *
- * @return void
*/
function register_block_core_image() {
register_block_type_from_metadata(
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 3eb47dcc7cab4b..331c0e79c731fc 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -103,9 +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 );
+ setStyles( context, context.core.image.imageRef );
context.core.image.scrollTopReset =
window.pageYOffset ||
@@ -148,12 +149,15 @@ store(
'scroll',
scrollCallback
);
+ // If we don't delay before changing the focus,
+ // the focus ring will appear on Firefox before
+ // the image has finished animating, which looks broken.
+ context.core.image.lightboxTriggerRef.focus( {
+ preventScroll: true,
+ } );
}, 450 );
context.core.image.lightboxEnabled = false;
- context.core.image.lastFocusedElement.focus( {
- preventScroll: true,
- } );
}
},
handleKeydown: ( { context, actions, event } ) => {
@@ -188,11 +192,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,
} );
@@ -255,17 +260,18 @@ store(
effects: {
core: {
image: {
- setCurrentSrc: ( { context, ref } ) => {
+ initOriginImage: ( { context, ref } ) => {
+ context.core.image.imageRef = ref;
+ context.core.image.lightboxTriggerRef =
+ ref.parentElement.querySelector(
+ '.lightbox-trigger'
+ );
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 );
@@ -276,10 +282,11 @@ store(
focusableElements.length - 1
];
- ref.querySelector( '.close-button' ).focus();
+ // Move focus to the dialog when opening it.
+ ref.focus();
}
},
- setButtonStyles: ( { state, context, ref } ) => {
+ setButtonStyles: ( { context, ref } ) => {
const {
naturalWidth,
naturalHeight,
@@ -288,54 +295,80 @@ 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 | 1 | 2 |
| 3 | 4 |
| 1 | 2 |
| 3 | 4 |
| 1 | 2 |
| 3 | 4 |
+ '
+
-
-
+
+
@@ -741,7 +762,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
esc_attr( implode( ' ', $responsive_container_classes ) ),
esc_attr( implode( ' ', $open_button_classes ) ),
esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
- __( 'Menu' ),
$toggle_button_content,
$toggle_close_button_content,
$open_button_directives,
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index eb8ef7683e1988..0b70ebb656cfa8 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -317,7 +317,9 @@ button.wp-block-navigation-item__content {
// When set to open on click, a button element is used.
// We pad it to include the arrow icon in the clickable area.
// The padding can be blanket for click, since you can't set click and hide the icon.
+// This is only applied to the submenu in the page list block.
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+ padding-left: 0; // Remove the browser default padding.
padding-right: 0.6em + 0.25em; // Same size as icon plus margin.
+ .wp-block-navigation__submenu-icon {
@@ -325,7 +327,10 @@ button.wp-block-navigation-item__content {
pointer-events: none; // Make the icon inert to allow click on the button.
}
}
-
+// Remove the browser default padding on the button element used in the navigation link submenu.
+.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
+ padding: 0;
+}
/**
* Margins
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 6a8e4979983b8a..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;
@@ -87,6 +91,13 @@ wpStore( {
? 'true'
: null;
},
+ ariaLabel: ( store ) => {
+ const { context, selectors } = store;
+ return context.core.navigation.type === 'overlay' &&
+ selectors.core.navigation.isMenuOpen( store )
+ ? context.core.navigation.ariaLabel
+ : null;
+ },
isMenuOpen: ( { context } ) =>
// The menu is opened if either `click`, `hover` or `focus` is true.
Object.values(
@@ -123,6 +134,8 @@ wpStore( {
closeMenu( store, 'hover' );
},
openMenuOnClick( store ) {
+ const { context, ref } = store;
+ context.core.navigation.previousFocus = ref;
openMenu( store, 'click' );
},
closeMenuOnClick( store ) {
@@ -133,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' );
}
},
@@ -187,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/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
index b99e602c590933..dda1ab155816f5 100644
--- a/packages/block-library/src/page-list-item/edit.js
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -64,6 +64,7 @@ export default function PageListItemEdit( { context, attributes } ) {
{ hasChildren && context.openSubmenusOnClick ? (
<>
}>
+ Dropdown menu item
+
+ );
+
+ const toggleButton = screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } );
+
+ // DropdownMenu closed
+ expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+
+ // Click to open the menu
+ await click( toggleButton );
+
+ // DropdownMenu open, focus is on the menu wrapper
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+ } );
+
+ it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
+ render(
+ Open dropdown }>
+ First item
+ Second item
+ Third item
+
+ );
+
+ const toggleButton = screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } );
+
+ // Move focus on the toggle
+ await press.Tab();
+
+ expect( toggleButton ).toHaveFocus();
+
+ // DropdownMenu closed
+ expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+ await press.ArrowDown();
+
+ // DropdownMenu open, focus is on the first focusable item
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Second item' } )
+ ).toHaveFocus();
+ } );
+
+ it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
+ render(
+ Open dropdown }>
+ First item
+ Second item
+ Third item
+
+ );
+
+ const toggleButton = screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } );
+
+ // Move focus on the toggle
+ await press.Tab();
+
+ expect( toggleButton ).toHaveFocus();
+
+ // DropdownMenu closed
+ expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+ await press.Space();
+
+ // DropdownMenu open, focus is on the first focusable item
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Second item' } )
+ ).toHaveFocus();
+ } );
+
+ it( 'should close when pressing the escape key', async () => {
+ render(
+ Open dropdown }>
+ Dropdown menu item
+
+ );
+
+ const trigger = screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } );
+
+ await click( trigger );
+
+ // Focuses menu on mouse click, focuses first item on keyboard press
+ // Can be changed with a custom useEffect
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // Pressing esc will close the menu and move focus to the toggle
+ await press.Escape();
+
+ expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+
+ await waitFor( () =>
+ expect(
+ screen.getByRole( 'button', { name: 'Open dropdown' } )
+ ).toHaveFocus()
+ );
+ } );
+
+ it( 'should not close when pressing the escape key if the `hideOnEscape` prop is set to `false`', async () => {
+ render(
+ Open dropdown }
+ hideOnEscape={ false }
+ >
+ Dropdown menu item
+
+ );
+
+ const trigger = screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } );
+
+ await click( trigger );
+
+ // Focuses menu on mouse click, focuses first item on keyboard press
+ // Can be changed with a custom useEffect
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // Pressing esc will close the menu and move focus to the toggle
+ await press.Escape();
+
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+ } );
+
+ it( 'should close when clicking outside of the content', async () => {
+ render(
+ Open dropdown }
+ >
+ Dropdown menu item
+
+ );
+
+ expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+ // Click on the body (ie. outside of the dropdown menu)
+ await click( document.body );
+
+ expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+ } );
+
+ it( 'should close when clicking on a menu item', async () => {
+ render(
+ Open dropdown }
+ >
+ Dropdown menu item
+
+ );
+
+ expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+ // Clicking a menu item will close the menu
+ await click( screen.getByRole( 'menuitem' ) );
+
+ expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+ } );
+
+ it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
+ render(
+ Open dropdown }
+ >
+
+ Dropdown menu item
+
+
+ );
+
+ expect( screen.getByRole( 'menu' ) ).toBeVisible();
+
+ // Clicking a menu item will close the menu
+ await click( screen.getByRole( 'menuitem' ) );
+
+ expect( screen.getByRole( 'menu' ) ).toBeVisible();
+ } );
+
+ it( 'should not close when clicking on a disabled menu item', async () => {
+ render(
+ Open dropdown }
+ >
+
+ Dropdown menu item
+
+
+ );
+
+ expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+ // Clicking a disabled menu item won't close the menu
+ await click( screen.getByRole( 'menuitem' ) );
+
+ expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+ } );
+
+ it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
+ render(
+ Open dropdown }
+ >
+ Dropdown menu item 1
+ Dropdown menu item 2
+
+ Dropdown submenu
+
+ }
+ >
+
+ Dropdown submenu item 1
+
+
+ Dropdown submenu item 2
+
+
+ Dropdown menu item 3
+
+ );
+
+ // Before hover, submenu items are not rendered
+ expect(
+ screen.queryByRole( 'menuitem', {
+ name: 'Dropdown submenu item 1',
+ } )
+ ).not.toBeInTheDocument();
+
+ await hover(
+ screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+ );
+
+ // After hover, submenu items are rendered
+ // Reason for `findByRole`: due to the animation, we've got to wait
+ // a short amount of time for the submenu to appear
+ await screen.findByRole( 'menuitem', {
+ name: 'Dropdown submenu item 1',
+ } );
+ } );
+
+ it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
+ render(
+ Open dropdown }
+ >
+ Dropdown menu item 1
+ Dropdown menu item 2
+
+ Dropdown submenu
+
+ }
+ >
+
+ Dropdown submenu item 1
+
+
+ Dropdown submenu item 2
+
+
+ Dropdown menu item 3
+
+ );
+
+ // The menu is focused automatically when `defaultOpen` is set.
+ await waitFor( () =>
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus()
+ );
+
+ // Arrow up/down selects menu items
+ // The selection wraps around from last to first and viceversa
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
+ ).toHaveFocus();
+
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown menu item 2' } )
+ ).toHaveFocus();
+
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+ ).toHaveFocus();
+
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
+ ).toHaveFocus();
+
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
+ ).toHaveFocus();
+
+ await press.ArrowUp();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
+ ).toHaveFocus();
+
+ await press.ArrowUp();
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+ ).toHaveFocus();
+
+ // Arrow right/left can be used to enter/leave submenus
+ await press.ArrowRight();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu item 1',
+ } )
+ ).toHaveFocus();
+
+ await press.ArrowDown();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu item 2',
+ } )
+ ).toHaveFocus();
+
+ await press.ArrowLeft();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu',
+ } )
+ ).toHaveFocus();
+
+ // Spacebar or enter key can also be used to enter a submenu
+ await press.Enter();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu item 1',
+ } )
+ ).toHaveFocus();
+
+ await press.ArrowLeft();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu',
+ } )
+ ).toHaveFocus();
+
+ await press.Space();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu item 1',
+ } )
+ ).toHaveFocus();
+
+ await press.ArrowLeft();
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown submenu',
+ } )
+ ).toHaveFocus();
+ } );
+
+ it( 'should check radio items and keep the menu open when clicking (controlled)', async () => {
+ const onRadioValueChangeSpy = jest.fn();
+
+ const ControlledRadioGroup = () => {
+ const [ radioValue, setRadioValue ] = useState( 'two' );
+ const onRadioChange: React.ComponentProps<
+ typeof DropdownMenuRadioItem
+ >[ 'onChange' ] = ( e ) => {
+ onRadioValueChangeSpy( e.target.value );
+ setRadioValue( e.target.value );
+ };
+ return (
+ Open dropdown }>
+
+
+ Radio group label
+
+
+ Radio item one
+
+
+ Radio item two
+
+
+
+ );
+ };
+
+ render( Open dropdown }>
+
+
+ Radio group label
+
+
+ onRadioValueChangeSpy( e.target.value )
+ }
+ >
+ Radio item one
+
+
+ onRadioValueChangeSpy( e.target.value )
+ }
+ >
+ Radio item two
+
+
+
+ );
+
+ // Open dropdown
+ await click(
+ screen.getByRole( 'button', { name: 'Open dropdown' } )
+ );
+
+ // Radio item two should be checked (`defaultChecked` prop)
+ expect( screen.getAllByRole( 'menuitemradio' ) ).toHaveLength( 2 );
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+ ).not.toBeChecked();
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+ ).toBeChecked();
+
+ // Click first radio item, make sure that the callback fires
+ await click(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+ );
+ expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+ expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+ 'radio-one'
+ );
+
+ // Make sure that first radio is checked
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+ ).toBeChecked();
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+ ).not.toBeChecked();
+
+ // Click second radio item, make sure that the callback fires
+ await click(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+ );
+ expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+ expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+ 'radio-two'
+ );
+
+ // Make sure that second radio is selected
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+ ).not.toBeChecked();
+ expect(
+ screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+ ).toBeChecked();
+ } );
+
+ it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
+ const onCheckboxValueChangeSpy = jest.fn();
+
+ const ControlledRadioGroup = () => {
+ const [ itemOneChecked, setItemOneChecked ] =
+ useState< boolean >();
+ const [ itemTwoChecked, setItemTwoChecked ] =
+ useState< boolean >();
+
+ return (
+ Open dropdown }>
+ {
+ onCheckboxValueChangeSpy(
+ e.target.name,
+ e.target.value,
+ e.target.checked
+ );
+ setItemOneChecked( e.target.checked );
+ } }
+ >
+ Checkbox item one
+
+
+ {
+ onCheckboxValueChangeSpy(
+ e.target.name,
+ e.target.value,
+ e.target.checked
+ );
+ setItemTwoChecked( e.target.checked );
+ } }
+ >
+ Checkbox item two
+
+
+ );
+ };
+
+ render( Open dropdown }>
+ {
+ onCheckboxValueChangeSpy(
+ e.target.name,
+ e.target.value,
+ e.target.checked
+ );
+ } }
+ >
+ Checkbox item one
+
+
+ {
+ onCheckboxValueChangeSpy(
+ e.target.name,
+ e.target.value,
+ e.target.checked
+ );
+ } }
+ >
+ Checkbox item two
+
+
+ );
+
+ // Open dropdown
+ await click(
+ screen.getByRole( 'button', { name: 'Open dropdown' } )
+ );
+
+ // Checkbox item two should be checked (`defaultChecked`)
+ expect( screen.getAllByRole( 'menuitemcheckbox' ) ).toHaveLength(
+ 2
+ );
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item one',
+ } )
+ ).not.toBeChecked();
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item two',
+ } )
+ ).toBeChecked();
+
+ // Click first checkbox item, make sure that the callback fires
+ await click(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item one',
+ } )
+ );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+ 'item-one',
+ 'item-one-value',
+ true
+ );
+
+ // Make sure that first checkbox is checked
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item one',
+ } )
+ ).toBeChecked();
+
+ // Click second checkbox item, make sure that the callback fires
+ await click(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item two',
+ } )
+ );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+ 'item-two',
+ 'item-two-value',
+ false
+ );
+
+ // Make sure that second checkbox is unchecked
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item two',
+ } )
+ ).not.toBeChecked();
+
+ // Click second checkbox item, make sure that the callback fires
+ await click(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item two',
+ } )
+ );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
+ expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+ 'item-two',
+ 'item-two-value',
+ true
+ );
+
+ // Make sure that second checkbox is unselected
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item two',
+ } )
+ ).toBeChecked();
+ } );
+ } );
+
+ describe( 'modality', () => {
+ it( 'should be modal by default', async () => {
+ render(
+ <>
+ Open dropdown }>
+ Dropdown menu item
+
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // DropdownMenu open, focus is on the menu wrapper
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ expect(
+ screen.queryByRole( 'button', {
+ name: 'Button outside of dropdown',
+ } )
+ ).not.toBeInTheDocument();
+ } );
+
+ it( 'should not be modal when the `modal` prop is set to `false`', async () => {
+ render(
+ <>
+ Open dropdown }
+ modal={ false }
+ >
+ Dropdown menu item
+
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // DropdownMenu open, focus is on the menu wrapper
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // DropdownMenu is not modal, therefore the outer button is part of the
+ // accessibility tree and can be found.
+ const outerButton = screen.getByRole( 'button', {
+ name: 'Button outside of dropdown',
+ } );
+
+ // The outer button can be focused by pressing tab. Doing so will cause
+ // the DropdownMenu to close.
+ await press.Tab();
+ expect( outerButton ).toBeInTheDocument();
+ expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+ } );
+ } );
+
+ describe( 'items prefix and suffix', () => {
+ it( 'should display a prefix on regular items', async () => {
+ render(
+ Open dropdown }>
+ Item prefix }>
+ Dropdown menu item
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // The contents of the prefix are rendered before the item's children
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Item prefix Dropdown menu item',
+ } )
+ ).toBeInTheDocument();
+ } );
+
+ it( 'should display a suffix on regular items', async () => {
+ render(
+ Open dropdown }>
+ Item suffix }>
+ Dropdown menu item
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // The contents of the suffix are rendered after the item's children
+ expect(
+ screen.getByRole( 'menuitem', {
+ name: 'Dropdown menu item Item suffix',
+ } )
+ ).toBeInTheDocument();
+ } );
+
+ it( 'should display a suffix on radio items', async () => {
+ render(
+ Open dropdown }>
+
+ Radio item one
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // The contents of the suffix are rendered after the item's children
+ expect(
+ screen.getByRole( 'menuitemradio', {
+ name: 'Radio item oneRadio suffix',
+ } )
+ ).toBeInTheDocument();
+ } );
+
+ it( 'should display a suffix on checkbox items', async () => {
+ render(
+ Open dropdown }>
+
+ Checkbox item one
+
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+
+ // The contents of the suffix are rendered after the item's children
+ expect(
+ screen.getByRole( 'menuitemcheckbox', {
+ name: 'Checkbox item one Checkbox suffix',
+ } )
+ ).toBeInTheDocument();
+ } );
+ } );
+
+ describe( 'typeahead', () => {
+ it( 'should highlight matching item', async () => {
+ render(
+ Open dropdown }>
+ One
+ Two
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // Type "tw", it should match and focus the item with content "Two"
+ await type( 'tw' );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Two' } )
+ ).toHaveFocus();
+
+ // Wait for the typeahead timer to reset and interpret
+ // the next keystrokes as a new search
+ await delay( 500 );
+
+ // Type "on", it should match and focus the item with content "One"
+ await type( 'on' );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'One' } )
+ ).toHaveFocus();
+ } );
+
+ it( 'should keep previous focus when no matches are found', async () => {
+ render(
+ Open dropdown }>
+ One
+ Two
+
+ );
+
+ // Click to open the menu
+ await click(
+ screen.getByRole( 'button', {
+ name: 'Open dropdown',
+ } )
+ );
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // Type a string that doesn't match any items. Focus shouldn't move.
+ await type( 'abc' );
+ expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+ // Wait for the typeahead timer to reset and interpret
+ // the next keystrokes as a new search
+ await delay( 500 );
+
+ // Type "on", it should match and focus the item with content "One"
+ await type( 'on' );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'One' } )
+ ).toHaveFocus();
+
+ // Wait for the typeahead timer to reset and interpret
+ // the next keystrokes as a new search
+ await delay( 500 );
+
+ // Type a string that doesn't match any items. Focus shouldn't move.
+ await type( 'abc' );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'One' } )
+ ).toHaveFocus();
+
+ // Wait for the typeahead timer to reset and interpret
+ // the next keystrokes as a new search
+ await delay( 500 );
+
+ // Type "tw", it should match and focus the item with content "Two"
+ await type( 'tw' );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'Two' } )
+ ).toHaveFocus();
+ } );
+ } );
+} );
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/types.ts b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
new file mode 100644
index 00000000000000..198b112faa3120
--- /dev/null
+++ b/packages/components/src/dropdown-menu-v2-ariakit/types.ts
@@ -0,0 +1,186 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+import type { Placement } from '@floating-ui/react-dom';
+
+export interface DropdownMenuContext {
+ /**
+ * The ariakit store shared across all DropdownMenu subcomponents.
+ */
+ store: Ariakit.MenuStore;
+ /**
+ * The variant used by the underlying menu popover.
+ */
+ variant?: 'toolbar';
+}
+
+export interface DropdownMenuProps {
+ /**
+ * The trigger button.
+ */
+ trigger: React.ReactElement;
+ /**
+ * The contents of the dropdown.
+ */
+ children?: React.ReactNode;
+ /**
+ * The open state of the dropdown menu when it is initially rendered. Use when
+ * not wanting to control its open state.
+ *
+ * @default false
+ */
+ defaultOpen?: boolean;
+ /**
+ * The controlled open state of the dropdown menu. Must be used in conjunction
+ * with `onOpenChange`.
+ */
+ open?: boolean;
+ /**
+ * Event handler called when the open state of the dropdown menu changes.
+ */
+ onOpenChange?: ( open: boolean ) => void;
+ /**
+ * The modality of the dropdown menu. When set to true, interaction with
+ * outside elements will be disabled and only menu content will be visible to
+ * screen readers.
+ *
+ * @default true
+ */
+ modal?: boolean;
+ /**
+ * The placement of the dropdown menu popover.
+ *
+ * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
+ */
+ placement?: Placement;
+ /**
+ * The distance between the popover and the anchor element.
+ *
+ * @default 8 for root-level menus, 16 for nested menus
+ */
+ gutter?: number;
+ /**
+ * The skidding of the popover along the anchor element. Can be set to
+ * negative values to make the popover shift to the opposite side.
+ *
+ * @default 0 for root-level menus, -8 for nested menus
+ */
+ shift?: number;
+ /**
+ * Determines whether the menu popover will be hidden when the user presses
+ * the Escape key.
+ *
+ * @default true
+ */
+ hideOnEscape?:
+ | boolean
+ | ( (
+ event: KeyboardEvent | React.KeyboardEvent< Element >
+ ) => boolean );
+}
+
+export interface DropdownMenuGroupProps {
+ /**
+ * The contents of the dropdown menu group.
+ */
+ children: React.ReactNode;
+}
+
+export interface DropdownMenuGroupLabelProps {
+ /**
+ * The contents of the dropdown menu group label.
+ */
+ children: React.ReactNode;
+}
+
+export interface DropdownMenuItemProps {
+ /**
+ * The contents of the menu item.
+ */
+ children: React.ReactNode;
+ /**
+ * The contents of the menu item's prefix.
+ */
+ prefix?: React.ReactNode;
+ /**
+ * The contents of the menu item's suffix.
+ */
+ suffix?: React.ReactNode;
+ /**
+ * Whether to hide the parent menu when the item is clicked.
+ *
+ * @default true
+ */
+ hideOnClick?: boolean;
+ /**
+ * Determines if the element is disabled.
+ */
+ disabled?: boolean;
+}
+
+export interface DropdownMenuCheckboxItemProps
+ extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+ /**
+ * Whether to hide the dropdown menu when the item is clicked.
+ *
+ * @default false
+ */
+ hideOnClick?: boolean;
+ /**
+ * The checkbox menu item's name.
+ */
+ name: string;
+ /**
+ * The checkbox item's value, useful when using multiple checkbox menu items
+ * associated to the same `name`.
+ */
+ value?: string;
+ /**
+ * The controlled checked state of the checkbox menu item.
+ */
+ checked?: boolean;
+ /**
+ * The checked state of the checkbox menu item when it is initially rendered.
+ * Use when not wanting to control its checked state.
+ */
+ defaultChecked?: boolean;
+ /**
+ * Event handler called when the checked state of the checkbox menu item changes.
+ */
+ onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface DropdownMenuRadioItemProps
+ extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+ /**
+ * Whether to hide the dropdown menu when the item is clicked.
+ *
+ * @default false
+ */
+ hideOnClick?: boolean;
+ /**
+ * The radio item's name.
+ */
+ name: string;
+ /**
+ * The radio item's value.
+ */
+ value: string | number;
+ /**
+ * The controlled checked state of the radio menu item.
+ */
+ checked?: boolean;
+ /**
+ * The checked state of the radio menu item when it is initially rendered.
+ * Use when not wanting to control its checked state.
+ */
+ defaultChecked?: boolean;
+ /**
+ * Event handler called when the checked radio menu item changes.
+ */
+ onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface DropdownMenuSeparatorProps {}
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
index 492f47b7c62ace..cf81c7ed27b182 100644
--- a/packages/components/src/font-size-picker/utils.ts
+++ b/packages/components/src/font-size-picker/utils.ts
@@ -19,7 +19,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control';
export function isSimpleCssValue(
value: NonNullable< FontSizePickerProps[ 'value' ] >
) {
- const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
+ const sizeRegex =
+ /^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
return sizeRegex.test( String( value ) );
}
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 85331d85cd20ed..e4f4c3664e1d9b 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -149,9 +149,9 @@ export const getSizeConfig = ( {
if ( ! __next40pxDefaultSize ) {
sizes.default = {
- height: 30,
+ height: 32,
lineHeight: 1,
- minHeight: 30,
+ minHeight: 32,
paddingLeft: space( 2 ),
paddingRight: space( 2 ),
};
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/components/src/notice/style.scss b/packages/components/src/notice/style.scss
index ebd76d35ce7065..a2d6aca530a93c 100644
--- a/packages/components/src/notice/style.scss
+++ b/packages/components/src/notice/style.scss
@@ -4,7 +4,6 @@
font-size: $default-font-size;
background-color: $white;
border-left: 4px solid $components-color-accent;
- margin: 5px 15px 2px;
padding: 8px 12px;
align-items: center;
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 9061222567103a..b3b8b626ce3b4a 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -121,6 +121,10 @@ function ColorPickerPopover< T extends Color | Gradient >( {
() => ( {
shift: true,
offset: 20,
+ // Disabling resize as it would otherwise cause the popover to show
+ // scrollbars while dragging the color picker's handle close to the
+ // popover edge.
+ resize: false,
placement: 'left-start',
...receivedPopoverProps,
className: classnames(
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 19df26e0777ee1..709d4b9884b5ec 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -53,6 +53,11 @@ import {
placementToMotionAnimationProps,
getReferenceElement,
} from './utils';
+import {
+ contextConnect,
+ useContextSystem,
+ ContextSystemProvider,
+} from '../context';
import type { WordPressComponentProps } from '../context';
import type {
PopoverProps,
@@ -108,7 +113,7 @@ const getPopoverFallbackContainer = () => {
return container;
};
-const UnforwardedPopover = (
+const UnconnectedPopover = (
props: Omit<
WordPressComponentProps< PopoverProps, 'div', false >,
// To avoid overlaps between the standard HTML attributes and the props
@@ -148,7 +153,7 @@ const UnforwardedPopover = (
// Rest
...contentProps
- } = props;
+ } = useContextSystem( props, 'Popover' );
let computedFlipProp = flip;
let computedResizeProp = resize;
@@ -383,63 +388,100 @@ const UnforwardedPopover = (
const isPositioned =
( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
+ // In case a `ColorPicker` component is rendered as a child of `Popover`,
+ // the `Popover` component can be notified of when the user is dragging
+ // parts of the `ColorPicker` UI (this is possible because the `ColorPicker`
+ // component exposes the `onPickerDragStart` and `onPickerDragEnd` props
+ // via internal context).
+ // While the user is performing a pointer drag, the `Popover` will render
+ // a transparent backdrop element that will serve as a "pointer events trap",
+ // making sure that no pointer events reach any potential `iframe` element
+ // underneath (like, for example, the editor canvas in the WordPress editor).
+ const [ showBackdrop, setShowBackdrop ] = useState( false );
+ const contextValue = useMemo(
+ () => ( {
+ ColorPicker: {
+ onPickerDragStart() {
+ setShowBackdrop( true );
+ },
+ onPickerDragEnd() {
+ setShowBackdrop( false );
+ },
+ },
+ } ),
+ []
+ );
+
let content = (
-
- { /* Prevents scroll on the document */ }
- { isExpanded &&
+
+ { /* Prevents scroll on the document */ }
+ { isExpanded &&
+
);
const shouldRenderWithinSlot = slot.ref && ! inline;
@@ -489,7 +531,7 @@ const UnforwardedPopover = (
* ```
*
*/
-export const Popover = forwardRef( UnforwardedPopover );
+export const Popover = contextConnect( UnconnectedPopover, 'Popover' );
function PopoverSlot(
{ name = SLOT_NAME }: { name?: string },
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 790b840e6a648b..2e8a766829f3a6 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -133,3 +133,12 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
stroke: $gray-900;
}
}
+
+.components-popover-pointer-events-trap {
+ // Same z-index as popover, but rendered before the popover element
+ // in DOM order = it will display just under the popover
+ z-index: z-index(".components-popover");
+ position: fixed;
+ inset: 0;
+ background-color: transparent;
+}
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index fd61c2564e6b06..e39ccbdacc2f54 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -29,12 +29,22 @@ import {
DropdownSubMenu as DropdownSubMenuV2,
DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
} from './dropdown-menu-v2';
+import {
+ DropdownMenu as DropdownMenuV2Ariakit,
+ DropdownMenuGroup as DropdownMenuGroupV2Ariakit,
+ DropdownMenuGroupLabel as DropdownMenuGroupLabelV2Ariakit,
+ DropdownMenuItem as DropdownMenuItemV2Ariakit,
+ DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2Ariakit,
+ DropdownMenuRadioItem as DropdownMenuRadioItemV2Ariakit,
+ DropdownMenuSeparator as DropdownMenuSeparatorV2Ariakit,
+} from './dropdown-menu-v2-ariakit';
import { ComponentsContext } from './context/context-system-provider';
import Theme from './theme';
+import Tabs from './tabs';
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/components'
);
@@ -60,5 +70,13 @@ lock( privateApis, {
DropdownSubMenuV2,
DropdownSubMenuTriggerV2,
ProgressBar,
+ Tabs,
Theme,
+ DropdownMenuV2Ariakit,
+ DropdownMenuGroupV2Ariakit,
+ DropdownMenuGroupLabelV2Ariakit,
+ DropdownMenuItemV2Ariakit,
+ DropdownMenuCheckboxItemV2Ariakit,
+ DropdownMenuRadioItemV2Ariakit,
+ DropdownMenuSeparatorV2Ariakit,
} );
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index e983797d3d92bc..041b2402f0324e 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -27,11 +27,17 @@ export const Track = styled.div`
width: 100%;
max-width: 160px;
height: ${ CONFIG.borderWidthFocus };
- background-color: var(
- --wp-components-color-gray-300,
- ${ COLORS.gray[ 300 ] }
+ /* Text color at 10% opacity */
+ background-color: color-mix(
+ in srgb,
+ var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+ transparent 90%
);
border-radius: ${ CONFIG.radiusBlockUi };
+
+ // Windows high contrast mode.
+ outline: 2px solid transparent;
+ outline-offset: 2px;
`;
export const Indicator = styled.div< {
@@ -43,7 +49,16 @@ export const Indicator = styled.div< {
top: 0;
height: 100%;
border-radius: ${ CONFIG.radiusBlockUi };
- background-color: ${ COLORS.theme.accent };
+ /* Text color at 90% opacity */
+ background-color: color-mix(
+ in srgb,
+ var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+ transparent 10%
+ );
+
+ // Windows high contrast mode.
+ outline: 2px solid transparent;
+ outline-offset: -2px;
${ ( { isIndeterminate, value } ) =>
isIndeterminate
diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js
index 0b1b0eb88f2def..b9bbc9a4e3281f 100644
--- a/packages/components/src/sandbox/index.native.js
+++ b/packages/components/src/sandbox/index.native.js
@@ -68,7 +68,7 @@ const observeAndResizeJS = `
style
) {
if (
- /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+ /^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test( ruleOrNode.style[ style ] )
) {
ruleOrNode.style[ style ] = '';
}
diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
index 66c2c9cd865634..4ad971cb63ca90 100644
--- a/packages/components/src/sandbox/index.tsx
+++ b/packages/components/src/sandbox/index.tsx
@@ -55,7 +55,9 @@ const observeAndResizeJS = function () {
[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
).forEach( function ( style ) {
if (
- /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+ /^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+ ruleOrNode.style[ style ]
+ )
) {
ruleOrNode.style[ style ] = '';
}
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index 7d0ddb502abd74..d23c689e2901ee 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -85,8 +85,8 @@ const sizeStyles = ( {
if ( ! __next40pxDefaultSize ) {
sizes.default = {
- height: 30,
- minHeight: 30,
+ height: 32,
+ minHeight: 32,
paddingTop: 0,
paddingBottom: 0,
};
diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index 54f547ad2f52d7..59eb83f5240590 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -8,7 +8,7 @@ import * as Ariakit from '@ariakit/react';
* WordPress dependencies
*/
import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -104,7 +104,7 @@ function Tabs( {
] );
// Handle the currently selected tab becoming disabled.
- useEffect( () => {
+ useLayoutEffect( () => {
if ( ! selectedTab?.dimmed ) {
return;
}
@@ -136,7 +136,7 @@ function Tabs( {
] );
// Clear `selectedId` if the active tab is removed from the DOM in controlled mode.
- useEffect( () => {
+ useLayoutEffect( () => {
if ( ! isControlled ) {
return;
}
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
index 1b437966239a07..a89e680e244d8c 100644
--- a/packages/components/src/tabs/test/index.tsx
+++ b/packages/components/src/tabs/test/index.tsx
@@ -471,10 +471,13 @@ describe( 'Tabs', () => {
// Because all other tabs should have `tabindex=-1`, pressing Tab
// should NOT move the focus to the next tab, which is Beta.
+ // Instead, focus should go to the currently selected tabpanel (alpha).
await user.keyboard( '[Tab]' );
expect(
- await screen.findByRole( 'tab', { name: 'Beta' } )
- ).not.toHaveFocus();
+ await screen.findByRole( 'tabpanel', {
+ name: 'Alpha',
+ } )
+ ).toHaveFocus();
} );
it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
@@ -497,6 +500,9 @@ describe( 'Tabs', () => {
// Click on Alpha and make sure it is selected.
// onSelect shouldn't fire since the selected tab didn't change.
await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+ expect(
+ await screen.findByRole( 'tab', { name: 'Alpha' } )
+ ).toHaveFocus();
expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
@@ -505,10 +511,10 @@ describe( 'Tabs', () => {
// or enter key. onSelect shouldn't fire since the selected tab
// didn't change.
await user.keyboard( '[ArrowRight]' );
- expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
expect(
await screen.findByRole( 'tab', { name: 'Beta' } )
).toHaveFocus();
+ expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
await user.keyboard( '[Enter]' );
expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
@@ -519,6 +525,9 @@ describe( 'Tabs', () => {
// spacebar or enter key. onSelect shouldn't fire since the selected
// tab didn't change.
await user.keyboard( '[ArrowRight]' );
+ expect(
+ await screen.findByRole( 'tab', { name: 'Gamma' } )
+ ).toHaveFocus();
expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
expect(
screen.getByRole( 'tab', { name: 'Gamma' } )
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 786038c5de893c..91cd85dc80e750 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -255,6 +255,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-8-20"
role="radio"
+ type="button"
+ value="uppercase"
>
-
- { headerTitle }
-
-
-
- ) }
- { children }
- { hasArrow && (
+ <>
+ { showBackdrop && (
-
+ className="components-popover-pointer-events-trap"
+ aria-hidden="true"
+ onClick={ () => setShowBackdrop( false ) }
+ />
) }
-
+
+ { headerTitle }
+
+
+
+ ) }
+
+
+ { children }
+
+
+ { hasArrow && (
+
+
+ ) }
+ {
onFocusProp?.( event );
diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx
index 2eecf54a4a4939..e4fb3b07e1c904 100644
--- a/packages/components/src/toolbar/stories/index.story.tsx
+++ b/packages/components/src/toolbar/stories/index.story.tsx
@@ -52,6 +52,10 @@ const meta: Meta< typeof Toolbar > = {
},
argTypes: {
children: { control: { type: null } },
+ variant: {
+ options: [ undefined, 'unstyled' ],
+ control: { type: 'radio' },
+ },
},
parameters: {
controls: { expanded: true },
@@ -181,3 +185,14 @@ WithoutGroup.args = {
),
};
+
+/**
+ * Set the variant to `unstyled` to remove default border styles.
+ * Otherwise, leave it as `undefined` for default styles.
+ */
+
+export const Unstyled = Template.bind( {} );
+Unstyled.args = {
+ ...Default.args,
+ variant: 'unstyled',
+};
diff --git a/packages/components/src/toolbar/test/index.tsx b/packages/components/src/toolbar/test/index.tsx
index c9e58edc8a80e8..74c58804fc0991 100644
--- a/packages/components/src/toolbar/test/index.tsx
+++ b/packages/components/src/toolbar/test/index.tsx
@@ -25,5 +25,13 @@ describe( 'Toolbar', () => {
screen.getByLabelText( 'control2', { selector: 'button' } )
).toBeInTheDocument();
} );
+
+ it( 'should apply the unstyled variant correctly via the `variant` prop', () => {
+ render(
+
.components-toolbar-group:last-child {
border-right: none;
}
+
+ &.is-unstyled {
+ border: none;
+
+ & > .components-toolbar-group {
+ border-right: none;
+ }
+
+ }
}
.components-accessible-toolbar,
diff --git a/packages/components/src/toolbar/toolbar/types.ts b/packages/components/src/toolbar/toolbar/types.ts
index f6a6b9667ab4b4..681f1ab2d1af2d 100644
--- a/packages/components/src/toolbar/toolbar/types.ts
+++ b/packages/components/src/toolbar/toolbar/types.ts
@@ -12,4 +12,14 @@ export type ToolbarProps = {
* An accessible label for the toolbar.
*/
label: string;
+ /**
+ * Specifies the toolbar's style.
+ *
+ * Leave undefined for the default style. Or `'unstyled'` which
+ * removes the border from the toolbar, but keeps the default
+ * popover style.
+ *
+ * @default undefined
+ */
+ variant?: 'unstyled' | undefined;
};
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts
index 95958ae9f48608..23701afdfcfd07 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts
@@ -176,18 +176,16 @@ export function useToolsPanelItem(
const cx = useCx();
const classes = useMemo( () => {
- const placeholderStyle =
- shouldRenderPlaceholder &&
- ! isShown &&
- styles.ToolsPanelItemPlaceholder;
+ const shouldApplyPlaceholderStyles =
+ shouldRenderPlaceholder && ! isShown;
const firstItemStyle =
firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
const lastItemStyle =
lastDisplayedItem === label && __experimentalLastVisibleItemClass;
return cx(
styles.ToolsPanelItem,
- placeholderStyle,
- className,
+ shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
+ ! shouldApplyPlaceholderStyles && className,
firstItemStyle,
lastItemStyle
);
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index 6802a6436875ad..0ee251592d67b1 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -191,5 +191,8 @@ A function to call when the `Reset all` menu option is selected. As an argument,
Advises the `ToolsPanel` that all of its `ToolsPanelItem` children should render
placeholder content (instead of `null`) when they are toggled off and hidden.
+Note that placeholder items won't apply the `className` that would be
+normally applied to a visible `ToolsPanelItem` via the `className` prop.
+
- Required: No
- Default: `false`
diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
index 183ed3254fe80a..3156137e580442 100644
--- a/packages/components/src/tools-panel/types.ts
+++ b/packages/components/src/tools-panel/types.ts
@@ -50,6 +50,8 @@ export type ToolsPanelProps = {
/**
* Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
* placeholder content instead of null when they are toggled off and hidden.
+ * Note that placeholder items won't apply the `className` that would be
+ * normally applied to a visible `ToolsPanelItem` via the `className` prop.
*
* @default false
*/
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 9ea7b88a65db03..80407def54cd45 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -69,8 +69,6 @@ function Tooltip( props: TooltipProps ) {
timeout: delay,
} );
- const isTooltipOpen = tooltipStore.useState( 'open' );
-
return (
<>
{ isOnlyChild ? undefined : children }
- { isOnlyChild && ( text || shortcut ) && isTooltipOpen && (
+ { isOnlyChild && ( text || shortcut ) && (
= {
a11yLabel: __( 'Points (pt)' ),
step: 1,
},
+ svw: {
+ value: 'svw',
+ label: isWeb ? 'svw' : __( 'Small viewport width (svw)' ),
+ a11yLabel: __( 'Small viewport width (svw)' ),
+ step: 0.1,
+ },
+ svh: {
+ value: 'svh',
+ label: isWeb ? 'svh' : __( 'Small viewport height (svh)' ),
+ a11yLabel: __( 'Small viewport height (svh)' ),
+ step: 0.1,
+ },
+ svi: {
+ value: 'svi',
+ label: isWeb
+ ? 'svi'
+ : __( 'Viewport smallest size in the inline direction (svi)' ),
+ a11yLabel: __( 'Small viewport width or height (svi)' ),
+ step: 0.1,
+ },
+ svb: {
+ value: 'svb',
+ label: isWeb
+ ? 'svb'
+ : __( 'Viewport smallest size in the block direction (svb)' ),
+ a11yLabel: __( 'Small viewport width or height (svb)' ),
+ step: 0.1,
+ },
+ svmin: {
+ value: 'svmin',
+ label: isWeb
+ ? 'svmin'
+ : __( 'Small viewport smallest dimension (svmin)' ),
+ a11yLabel: __( 'Small viewport smallest dimension (svmin)' ),
+ step: 0.1,
+ },
+ lvw: {
+ value: 'lvw',
+ label: isWeb ? 'lvw' : __( 'Large viewport width (lvw)' ),
+ a11yLabel: __( 'Large viewport width (lvw)' ),
+ step: 0.1,
+ },
+ lvh: {
+ value: 'lvh',
+ label: isWeb ? 'lvh' : __( 'Large viewport height (lvh)' ),
+ a11yLabel: __( 'Large viewport height (lvh)' ),
+ step: 0.1,
+ },
+ lvi: {
+ value: 'lvi',
+ label: isWeb ? 'lvi' : __( 'Large viewport width or height (lvi)' ),
+ a11yLabel: __( 'Large viewport width or height (lvi)' ),
+ step: 0.1,
+ },
+ lvb: {
+ value: 'lvb',
+ label: isWeb ? 'lvb' : __( 'Large viewport width or height (lvb)' ),
+ a11yLabel: __( 'Large viewport width or height (lvb)' ),
+ step: 0.1,
+ },
+ lvmin: {
+ value: 'lvmin',
+ label: isWeb
+ ? 'lvmin'
+ : __( 'Large viewport smallest dimension (lvmin)' ),
+ a11yLabel: __( 'Large viewport smallest dimension (lvmin)' ),
+ step: 0.1,
+ },
+ dvw: {
+ value: 'dvw',
+ label: isWeb ? 'dvw' : __( 'Dynamic viewport width (dvw)' ),
+ a11yLabel: __( 'Dynamic viewport width (dvw)' ),
+ step: 0.1,
+ },
+ dvh: {
+ value: 'dvh',
+ label: isWeb ? 'dvh' : __( 'Dynamic viewport height (dvh)' ),
+ a11yLabel: __( 'Dynamic viewport height (dvh)' ),
+ step: 0.1,
+ },
+ dvi: {
+ value: 'dvi',
+ label: isWeb ? 'dvi' : __( 'Dynamic viewport width or height (dvi)' ),
+ a11yLabel: __( 'Dynamic viewport width or height (dvi)' ),
+ step: 0.1,
+ },
+ dvb: {
+ value: 'dvb',
+ label: isWeb ? 'dvb' : __( 'Dynamic viewport width or height (dvb)' ),
+ a11yLabel: __( 'Dynamic viewport width or height (dvb)' ),
+ step: 0.1,
+ },
+ dvmin: {
+ value: 'dvmin',
+ label: isWeb
+ ? 'dvmin'
+ : __( 'Dynamic viewport smallest dimension (dvmin)' ),
+ a11yLabel: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+ step: 0.1,
+ },
+ dvmax: {
+ value: 'dvmax',
+ label: isWeb
+ ? 'dvmax'
+ : __( 'Dynamic viewport largest dimension (dvmax)' ),
+ a11yLabel: __( 'Dynamic viewport largest dimension (dvmax)' ),
+ step: 0.1,
+ },
+ svmax: {
+ value: 'svmax',
+ label: isWeb
+ ? 'svmax'
+ : __( 'Small viewport largest dimension (svmax)' ),
+ a11yLabel: __( 'Small viewport largest dimension (svmax)' ),
+ step: 0.1,
+ },
+ lvmax: {
+ value: 'lvmax',
+ label: isWeb
+ ? 'lvmax'
+ : __( 'Large viewport largest dimension (lvmax)' ),
+ a11yLabel: __( 'Large viewport largest dimension (lvmax)' ),
+ step: 0.1,
+ },
};
/**
diff --git a/packages/components/src/utils/unit-values.ts b/packages/components/src/utils/unit-values.ts
index e38c65494c1a36..7bd09ab67ec97f 100644
--- a/packages/components/src/utils/unit-values.ts
+++ b/packages/components/src/utils/unit-values.ts
@@ -1,5 +1,5 @@
const UNITED_VALUE_REGEX =
- /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
+ /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
/**
* Parses a number and unit from a value.
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 fbdd0afe888466..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.0",
+ "version": "0.13.0",
"description": "WordPress core reusable commands.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/core-commands/src/lock-unlock.js b/packages/core-commands/src/lock-unlock.js
index 24973274f1897c..6f0712a8069fdd 100644
--- a/packages/core-commands/src/lock-unlock.js
+++ b/packages/core-commands/src/lock-unlock.js
@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/core-commands'
);
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 99ad93050f6478..c7d93255e15a71 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,12 @@
## Unreleased
+## 6.21.0 (2023-10-18)
+
+## Enhancements
+
+- Add `getEntityRecordsTotalItems` and `getEntityRecordsTotalPages` selectors. [#55164](https://github.com/WordPress/gutenberg/pull/55164).
+
## 6.20.0 (2023-10-05)
## 6.19.0 (2023-09-20)
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 87233a2c206bf0..a20e86e9695a26 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -40,6 +40,122 @@ function MyAuthorsListBase() {
}
```
+## What's an entity?
+
+An entity represents a data source. Each item within the entity is called an entity record. Available entities are defined in `rootEntitiesConfig` at ./src/entities.js.
+
+As of right now, the default entities defined by this package map to the [REST API handbook](https://developer.wordpress.org/rest-api/reference/), though there is nothing in the design that prevents it from being used to interact with any other API.
+
+What follows is a description of some of the properties of `rootEntitiesConfig`.
+
+### Connecting the entity with the data source
+
+#### baseURL
+
+- Type: string.
+- Example: `'/wp/v2/users'`.
+
+This property maps the entity to a given endpoint, taking its relative URL as value.
+
+#### baseURLParams
+
+- Type: `object`.
+- Example: `{ context: 'edit' }`.
+
+Additional parameters to the request, added as a query string. Each property will be converted into a field/value pair. For example, given the `baseURL: '/wp/v2/users'` and the `baseURLParams: { context: 'edit' }` the URL would be `/wp/v2/users?context=edit`.
+
+#### key
+
+- Type: `string`.
+- Example: `'slug'`.
+
+The entity engine aims to convert the API response into a number of entity records. Responses can come in different shapes, which are processed differently.
+
+Responses that represent a single object map to a single entity record. For example:
+
+```json
+{
+ "title": "...",
+ "description": "...",
+ "...": "..."
+}
+```
+
+Responses that represent a collection shaped as an array, map to as many entity records as elements of the array. For example:
+
+```json
+[
+ { "id": 1, "name": "...", "...": "..." },
+ { "id": 2, "name": "...", "...": "..." },
+ { "id": 3, "name": "...", "...": "..." }
+]
+```
+
+There are also cases in which a response represents a collection shaped as an object, whose key is one of the property's values. Each of the nested objects should be its own entity record. For this case not to be confused with single object/entities, the entity configuration must provide the property key that holds the value acting as the object key. In the following example, the `slug` property's value is acting as the object key, hence the entity config must declare `key: 'slug'` for each nested object to be processed as an individual entity record:
+
+```json
+{
+ "publish": { "slug": "publish", "name": "Published", "...": "..." },
+ "draft": { "slug": "draft", "name": "Draft", "...": "..." },
+ "future": { "slug": "future", "name": "Future", "...": "..." }
+}
+```
+
+### Interacting with entity records
+
+Entity records are unique. For entities that are collections, it's assumed that each record has an `id` property which serves as an identifier to manage it. If the entity defines a `key`, that property would be used as its identifier instead of the assumed `id`.
+
+#### name
+
+- Type: `string`.
+- Example: `user`.
+
+The name of the entity. To be used in the utilities that interact with it (selectors, actions, hooks).
+
+#### kind
+
+- Type: `string`.
+- Example: `root`.
+
+Entities can be grouped by `kind`. To be used in the utilities that interact with them (selectors, actions, hooks).
+
+The package provides general methods to interact with the entities (`getEntityRecords`, `getEntityRecord`, etc.) by leveraging the `kind` and `name` properties:
+
+```js
+// Get the record collection for the user entity.
+wp.data.select( 'core' ).getEntityRecords( 'root' 'user' );
+
+// Get a single record for the user entity.
+wp.data.select( 'core' ).getEntityRecord( 'root', 'user', recordId );
+```
+
+#### plural
+
+- Type: `string`.
+- Example: `statuses`.
+
+In addition to the general utilities (`getEntityRecords`, `getEntityRecord`, etc.), the package dynamically creates nicer-looking methods to interact with the entity records of the `root` kind, both the collection and single records. Compare the general and nicer-looking methods as follows:
+
+```js
+// Collection
+wp.data.select( 'core' ).getEntityRecords( 'root' 'user' );
+wp.data.select( 'core' ).getUsers();
+
+// Single record
+wp.data.select( 'core' ).getEntityRecord( 'root', 'user', recordId );
+wp.data.select( 'core' ).getUser( recordId );
+```
+
+Sometimes, the pluralized form of an entity is not regular (it is not formed by adding a `-s` suffix). The `plural` property of the entity config allows to declare an alternative pluralized form for the dynamic methods created for the entity. For example, given the `status` entity that declares the `statuses` plural, there are the following methods created for it:
+
+```js
+// Collection
+wp.data.select( 'core' ).getStatuses();
+
+// Single record
+wp.data.select( 'core' ).getStatus( recordId );
+```
+
## Actions
The following set of dispatching action creators are available on the object returned by `wp.data.dispatch( 'core' )`:
@@ -101,6 +217,7 @@ _Parameters_
- _query_ `?Object`: Query Object.
- _invalidateCache_ `?boolean`: Should invalidate query caches.
- _edits_ `?Object`: Edits to reset.
+- _meta_ `?Object`: Meta information about pagination.
_Returns_
@@ -476,6 +593,36 @@ _Returns_
- `EntityRecord[] | null`: Records.
+### getEntityRecordsTotalItems
+
+Returns the Entity's total available records for a given query (ignoring pagination).
+
+_Parameters_
+
+- _state_ `State`: State tree
+- _kind_ `string`: Entity kind.
+- _name_ `string`: Entity name.
+- _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+- `number | null`: number | null.
+
+### getEntityRecordsTotalPages
+
+Returns the number of available pages for the given query.
+
+_Parameters_
+
+- _state_ `State`: State tree
+- _kind_ `string`: Entity kind.
+- _name_ `string`: Entity name.
+- _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+- `number | null`: number | null.
+
### getLastEntityDeleteError
Returns the specified entity record's last delete error.
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 9fa2ab5e5d5348..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.0",
+ "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/core-data/src/actions.js b/packages/core-data/src/actions.js
index 3f6c3c12432f58..c4b19819ed7a41 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -80,6 +80,7 @@ export function addEntities( entities ) {
* @param {?Object} query Query Object.
* @param {?boolean} invalidateCache Should invalidate query caches.
* @param {?Object} edits Edits to reset.
+ * @param {?Object} meta Meta information about pagination.
* @return {Object} Action object.
*/
export function receiveEntityRecords(
@@ -88,7 +89,8 @@ export function receiveEntityRecords(
records,
query,
invalidateCache = false,
- edits
+ edits,
+ meta
) {
// Auto drafts should not have titles, but some plugins rely on them so we can't filter this
// on the server.
@@ -102,9 +104,9 @@ export function receiveEntityRecords(
}
let action;
if ( query ) {
- action = receiveQueriedItems( records, query, edits );
+ action = receiveQueriedItems( records, query, edits, meta );
} else {
- action = receiveItems( records, edits );
+ action = receiveItems( records, edits, meta );
}
return {
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index 3fb3af96eb9ad0..af8829d0bc852c 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -120,6 +120,7 @@ export const rootEntitiesConfig = [
plural: 'mediaItems',
label: __( 'Media' ),
rawAttributes: [ 'caption', 'title', 'description' ],
+ supportsPagination: true,
},
{
name: 'taxonomy',
@@ -224,12 +225,12 @@ export const rootEntitiesConfig = [
key: 'plugin',
},
{
- label: __( 'Post status' ),
+ label: __( 'Status' ),
name: 'status',
kind: 'root',
baseURL: '/wp/v2/statuses',
baseURLParams: { context: 'edit' },
- plural: 'postStatuses',
+ plural: 'statuses',
key: 'slug',
},
];
@@ -326,6 +327,7 @@ async function loadPostTypeEntities() {
},
syncObjectType: 'postType/' + postType.name,
getSyncObjectId: ( id ) => id,
+ supportsPagination: true,
};
} );
}
diff --git a/packages/core-data/src/hooks/test/use-entity-records.js b/packages/core-data/src/hooks/test/use-entity-records.js
index d75d2e8af849c9..af490b65096290 100644
--- a/packages/core-data/src/hooks/test/use-entity-records.js
+++ b/packages/core-data/src/hooks/test/use-entity-records.js
@@ -51,6 +51,8 @@ describe( 'useEntityRecords', () => {
hasResolved: false,
isResolving: false,
status: 'IDLE',
+ totalItems: null,
+ totalPages: null,
} );
// Fetch request should have been issued
@@ -65,6 +67,8 @@ describe( 'useEntityRecords', () => {
hasResolved: true,
isResolving: false,
status: 'SUCCESS',
+ totalItems: null,
+ totalPages: null,
} );
} );
} );
diff --git a/packages/core-data/src/hooks/use-entity-records.ts b/packages/core-data/src/hooks/use-entity-records.ts
index ff72ea4078c0e4..5d643ab8896925 100644
--- a/packages/core-data/src/hooks/use-entity-records.ts
+++ b/packages/core-data/src/hooks/use-entity-records.ts
@@ -3,6 +3,7 @@
*/
import { addQueryArgs } from '@wordpress/url';
import deprecated from '@wordpress/deprecated';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
@@ -28,6 +29,16 @@ interface EntityRecordsResolution< RecordType > {
/** Resolution status */
status: Status;
+
+ /**
+ * The total number of available items (if not paginated).
+ */
+ totalItems: number | null;
+
+ /**
+ * The total number of pages.
+ */
+ totalPages: number | null;
}
const EMPTY_ARRAY = [];
@@ -97,8 +108,34 @@ export default function useEntityRecords< RecordType >(
[ kind, name, queryAsString, options.enabled ]
);
+ const { totalItems, totalPages } = useSelect(
+ ( select ) => {
+ if ( ! options.enabled ) {
+ return {
+ totalItems: null,
+ totalPages: null,
+ };
+ }
+ return {
+ totalItems: select( coreStore ).getEntityRecordsTotalItems(
+ kind,
+ name,
+ queryArgs
+ ),
+ totalPages: select( coreStore ).getEntityRecordsTotalPages(
+ kind,
+ name,
+ queryArgs
+ ),
+ };
+ },
+ [ kind, name, queryAsString, options.enabled ]
+ );
+
return {
records,
+ totalItems,
+ totalPages,
...rest,
};
}
diff --git a/packages/core-data/src/private-apis.js b/packages/core-data/src/private-apis.js
index a5b93a25dbf778..53f0dc2dfa133d 100644
--- a/packages/core-data/src/private-apis.js
+++ b/packages/core-data/src/private-apis.js
@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/core-data'
);
diff --git a/packages/core-data/src/queried-data/actions.js b/packages/core-data/src/queried-data/actions.js
index 58416713aebdb4..5a1a1acb48c64c 100644
--- a/packages/core-data/src/queried-data/actions.js
+++ b/packages/core-data/src/queried-data/actions.js
@@ -3,14 +3,16 @@
*
* @param {Array} items Items received.
* @param {?Object} edits Optional edits to reset.
+ * @param {?Object} meta Meta information about pagination.
*
* @return {Object} Action object.
*/
-export function receiveItems( items, edits ) {
+export function receiveItems( items, edits, meta ) {
return {
type: 'RECEIVE_ITEMS',
items: Array.isArray( items ) ? items : [ items ],
persistedEdits: edits,
+ meta,
};
}
@@ -41,12 +43,13 @@ export function removeItems( kind, name, records, invalidateCache = false ) {
* @param {Array} items Queried items received.
* @param {?Object} query Optional query object.
* @param {?Object} edits Optional edits to reset.
+ * @param {?Object} meta Meta information about pagination.
*
* @return {Object} Action object.
*/
-export function receiveQueriedItems( items, query = {}, edits ) {
+export function receiveQueriedItems( items, query = {}, edits, meta ) {
return {
- ...receiveItems( items, edits ),
+ ...receiveItems( items, edits, meta ),
query,
};
}
diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js
index 8dfdca404e1a8c..40b0a9ba1f080b 100644
--- a/packages/core-data/src/queried-data/reducer.js
+++ b/packages/core-data/src/queried-data/reducer.js
@@ -222,19 +222,22 @@ const receiveQueries = compose( [
// Queries shape is shared, but keyed by query `stableKey` part. Original
// reducer tracks only a single query object.
onSubKey( 'stableKey' ),
-] )( ( state = null, action ) => {
+] )( ( state = {}, action ) => {
const { type, page, perPage, key = DEFAULT_ENTITY_KEY } = action;
if ( type !== 'RECEIVE_ITEMS' ) {
return state;
}
- return getMergedItemIds(
- state || [],
- action.items.map( ( item ) => item[ key ] ),
- page,
- perPage
- );
+ return {
+ itemIds: getMergedItemIds(
+ state?.itemIds || [],
+ action.items.map( ( item ) => item[ key ] ),
+ page,
+ perPage
+ ),
+ meta: action.meta,
+ };
} );
/**
@@ -263,9 +266,13 @@ const queries = ( state = {}, action ) => {
Object.entries( contextQueries ).map(
( [ query, queryItems ] ) => [
query,
- queryItems.filter(
- ( queryId ) => ! removedItems[ queryId ]
- ),
+ {
+ ...queryItems,
+ itemIds: queryItems.itemIds.filter(
+ ( queryId ) =>
+ ! removedItems[ queryId ]
+ ),
+ },
]
)
),
diff --git a/packages/core-data/src/queried-data/selectors.js b/packages/core-data/src/queried-data/selectors.js
index 562aab7ce6b79b..e1f52f721abf6e 100644
--- a/packages/core-data/src/queried-data/selectors.js
+++ b/packages/core-data/src/queried-data/selectors.js
@@ -33,7 +33,7 @@ function getQueriedItemsUncached( state, query ) {
let itemIds;
if ( state.queries?.[ context ]?.[ stableKey ] ) {
- itemIds = state.queries[ context ][ stableKey ];
+ itemIds = state.queries[ context ][ stableKey ].itemIds;
}
if ( ! itemIds ) {
@@ -118,3 +118,9 @@ export const getQueriedItems = createSelector( ( state, query = {} ) => {
queriedItemsCache.set( query, items );
return items;
} );
+
+export function getQueriedTotalItems( state, query = {} ) {
+ const { stableKey, context } = getQueryParts( query );
+
+ return state.queries?.[ context ]?.[ stableKey ]?.meta?.totalItems ?? null;
+}
diff --git a/packages/core-data/src/queried-data/test/reducer.js b/packages/core-data/src/queried-data/test/reducer.js
index 76657fca61da1b..4271f8d80a4a3e 100644
--- a/packages/core-data/src/queried-data/test/reducer.js
+++ b/packages/core-data/src/queried-data/test/reducer.js
@@ -159,7 +159,7 @@ describe( 'reducer', () => {
default: { 1: true },
},
queries: {
- default: { 's=a': [ 1 ] },
+ default: { 's=a': { itemIds: [ 1 ] } },
},
} );
} );
@@ -200,8 +200,8 @@ describe( 'reducer', () => {
},
queries: {
default: {
- '': [ 1, 2, 3, 4 ],
- 's=a': [ 1, 3 ],
+ '': { itemIds: [ 1, 2, 3, 4 ] },
+ 's=a': { itemIds: [ 1, 3 ] },
},
},
} );
@@ -218,8 +218,8 @@ describe( 'reducer', () => {
},
queries: {
default: {
- '': [ 1, 2, 4 ],
- 's=a': [ 1 ],
+ '': { itemIds: [ 1, 2, 4 ] },
+ 's=a': { itemIds: [ 1 ] },
},
},
} );
@@ -238,8 +238,8 @@ describe( 'reducer', () => {
},
queries: {
default: {
- '': [ 'foo//bar1', 'foo//bar2', 'foo//bar3' ],
- 's=2': [ 'foo//bar2' ],
+ '': { itemIds: [ 'foo//bar1', 'foo//bar2', 'foo//bar3' ] },
+ 's=2': { itemIds: [ 'foo//bar2' ] },
},
},
} );
@@ -258,8 +258,8 @@ describe( 'reducer', () => {
},
queries: {
default: {
- '': [ 'foo//bar1', 'foo//bar3' ],
- 's=2': [],
+ '': { itemIds: [ 'foo//bar1', 'foo//bar3' ] },
+ 's=2': { itemIds: [] },
},
},
} );
diff --git a/packages/core-data/src/queried-data/test/selectors.js b/packages/core-data/src/queried-data/test/selectors.js
index f0a38aab2887e1..3ec1e085c47bb2 100644
--- a/packages/core-data/src/queried-data/test/selectors.js
+++ b/packages/core-data/src/queried-data/test/selectors.js
@@ -32,7 +32,7 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '': [ 1, 2 ],
+ '': { itemIds: [ 1, 2 ] },
},
},
};
@@ -56,7 +56,7 @@ describe( 'getQueriedItems', () => {
2: true,
},
},
- queries: [ 1, 2 ],
+ queries: { itemIds: [ 1, 2 ] },
};
const resultA = getQueriedItems( state, {} );
@@ -81,8 +81,8 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '': [ 1, 2 ],
- 'include=1': [ 1 ],
+ '': { itemIds: [ 1, 2 ] },
+ 'include=1': { itemIds: [ 1 ] },
},
},
};
@@ -116,7 +116,7 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '_fields=content': [ 1, 2 ],
+ '_fields=content': { itemIds: [ 1, 2 ] },
},
},
};
@@ -161,7 +161,7 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '_fields=content%2Cmeta.template': [ 1, 2 ],
+ '_fields=content%2Cmeta.template': { itemIds: [ 1, 2 ] },
},
},
};
@@ -198,7 +198,7 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '': [ 1, 2 ],
+ '': { itemIds: [ 1, 2 ] },
},
},
};
@@ -230,7 +230,7 @@ describe( 'getQueriedItems', () => {
},
queries: {
default: {
- '': [ 1, 2 ],
+ '': { itemIds: [ 1, 2 ] },
},
},
};
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index e8cf4e34a120ff..5fc7cd14f35c0b 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -7,6 +7,7 @@ import { camelCase } from 'change-case';
* WordPress dependencies
*/
import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
import apiFetch from '@wordpress/api-fetch';
/**
@@ -228,7 +229,19 @@ export const getEntityRecords =
...query,
} );
- let records = Object.values( await apiFetch( { path } ) );
+ let records, meta;
+ if ( entityConfig.supportsPagination && query.per_page !== -1 ) {
+ const response = await apiFetch( { path, parse: false } );
+ records = Object.values( await response.json() );
+ meta = {
+ totalItems: parseInt(
+ response.headers.get( 'X-WP-Total' )
+ ),
+ };
+ } else {
+ records = Object.values( await apiFetch( { path } ) );
+ }
+
// If we request fields but the result doesn't contain the fields,
// explicitly set these fields as "undefined"
// that way we consider the query "fullfilled".
@@ -244,7 +257,15 @@ export const getEntityRecords =
} );
}
- dispatch.receiveEntityRecords( kind, name, records, query );
+ dispatch.receiveEntityRecords(
+ kind,
+ name,
+ records,
+ query,
+ false,
+ undefined,
+ meta
+ );
// When requesting all fields, the list of results can be used to
// resolve the `getEntityRecord` selector in addition to `getEntityRecords`.
@@ -630,13 +651,14 @@ export const getUserPatternCategories =
{
per_page: -1,
_fields: 'id,name,description,slug',
+ context: 'view',
}
);
const mappedPatternCategories =
patternCategories?.map( ( userCategory ) => ( {
...userCategory,
- label: userCategory.name,
+ label: decodeEntities( userCategory.name ),
name: userCategory.slug,
} ) ) || [];
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index 4e582bcf8a34ba..b6b36fad2ee934 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -14,12 +14,13 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import { STORE_NAME } from './name';
-import { getQueriedItems } from './queried-data';
+import { getQueriedItems, getQueriedTotalItems } from './queried-data';
import { DEFAULT_ENTITY_KEY } from './entities';
import {
getNormalizedCommaSeparable,
isRawAttribute,
setNestedValue,
+ isNumericID,
} from './utils';
import type * as ET from './entity-types';
import type { UndoManager } from '@wordpress/undo-manager';
@@ -95,6 +96,13 @@ type Optional< T > = T | undefined;
*/
type GetRecordsHttpQuery = Record< string, any >;
+/**
+ * Arguments for EntityRecord selectors.
+ */
+type EntityRecordArgs =
+ | [ string, string, EntityRecordKey ]
+ | [ string, string, EntityRecordKey, GetRecordsHttpQuery ];
+
/**
* Shared reference to an empty object for cases where it is important to avoid
* returning a new object reference on every invocation, as in a connected or
@@ -292,6 +300,7 @@ export interface GetEntityRecord {
key: EntityRecordKey,
query?: GetRecordsHttpQuery
) => EntityRecord | undefined;
+ __unstableNormalizeArgs?: ( args: EntityRecordArgs ) => EntityRecordArgs;
}
/**
@@ -365,6 +374,24 @@ export const getEntityRecord = createSelector(
}
) as GetEntityRecord;
+/**
+ * Normalizes `recordKey`s that look like numeric IDs to numbers.
+ *
+ * @param args EntityRecordArgs the selector arguments.
+ * @return EntityRecordArgs the normalized arguments.
+ */
+getEntityRecord.__unstableNormalizeArgs = (
+ args: EntityRecordArgs
+): EntityRecordArgs => {
+ const newArgs = [ ...args ] as EntityRecordArgs;
+ const recordKey = newArgs?.[ 2 ];
+
+ // If recordKey looks to be a numeric ID then coerce to number.
+ newArgs[ 2 ] = isNumericID( recordKey ) ? Number( recordKey ) : recordKey;
+
+ return newArgs;
+};
+
/**
* Returns the Entity's record object by key. Doesn't trigger a resolver nor requests the entity records from the API if the entity record isn't available in the local state.
*
@@ -523,6 +550,63 @@ export const getEntityRecords = ( <
return getQueriedItems( queriedState, query );
} ) as GetEntityRecords;
+/**
+ * Returns the Entity's total available records for a given query (ignoring pagination).
+ *
+ * @param state State tree
+ * @param kind Entity kind.
+ * @param name Entity name.
+ * @param query Optional terms query. If requesting specific
+ * fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+ *
+ * @return number | null.
+ */
+export const getEntityRecordsTotalItems = (
+ state: State,
+ kind: string,
+ name: string,
+ query: GetRecordsHttpQuery
+): number | null => {
+ // Queried data state is prepopulated for all known entities. If this is not
+ // assigned for the given parameters, then it is known to not exist.
+ const queriedState =
+ state.entities.records?.[ kind ]?.[ name ]?.queriedData;
+ if ( ! queriedState ) {
+ return null;
+ }
+ return getQueriedTotalItems( queriedState, query );
+};
+
+/**
+ * Returns the number of available pages for the given query.
+ *
+ * @param state State tree
+ * @param kind Entity kind.
+ * @param name Entity name.
+ * @param query Optional terms query. If requesting specific
+ * fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+ *
+ * @return number | null.
+ */
+export const getEntityRecordsTotalPages = (
+ state: State,
+ kind: string,
+ name: string,
+ query: GetRecordsHttpQuery
+): number | null => {
+ // Queried data state is prepopulated for all known entities. If this is not
+ // assigned for the given parameters, then it is known to not exist.
+ const queriedState =
+ state.entities.records?.[ kind ]?.[ name ]?.queriedData;
+ if ( ! queriedState ) {
+ return null;
+ }
+ if ( query.per_page === -1 ) return 1;
+ const totalItems = getQueriedTotalItems( queriedState, query );
+ if ( ! totalItems ) return totalItems;
+ return Math.ceil( totalItems / query.per_page );
+};
+
type DirtyEntityRecord = {
title: string;
key: EntityRecordKey;
diff --git a/packages/core-data/src/sync.js b/packages/core-data/src/sync.js
index 89ebdd605208d2..fdc421a6bd70e9 100644
--- a/packages/core-data/src/sync.js
+++ b/packages/core-data/src/sync.js
@@ -4,14 +4,23 @@
import {
createSyncProvider,
connectIndexDb,
- connectWebRTC,
+ createWebRTCConnection,
} from '@wordpress/sync';
let syncProvider;
export function getSyncProvider() {
if ( ! syncProvider ) {
- syncProvider = createSyncProvider( connectIndexDb, connectWebRTC );
+ syncProvider = createSyncProvider(
+ connectIndexDb,
+ createWebRTCConnection( {
+ signaling: [
+ //'ws://localhost:4444',
+ window?.wp?.ajax?.settings?.url,
+ ],
+ password: window?.__experimentalCollaborativeEditingSecret,
+ } )
+ );
}
return syncProvider;
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index 77487071d3f139..544caad0c2dbc4 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -172,7 +172,10 @@ describe( 'getEntityRecords', () => {
'root',
'postType',
Object.values( POST_TYPES ),
- {}
+ {},
+ false,
+ undefined,
+ undefined
);
} );
diff --git a/packages/core-data/src/test/selectors.js b/packages/core-data/src/test/selectors.js
index 5ae7a81fa144e9..b7c583098c4a5c 100644
--- a/packages/core-data/src/test/selectors.js
+++ b/packages/core-data/src/test/selectors.js
@@ -28,6 +28,29 @@ describe.each( [
[ getEntityRecord ],
[ __experimentalGetEntityRecordNoResolver ],
] )( '%p', ( selector ) => {
+ describe( 'normalizing Post ID passed as recordKey', () => {
+ it( 'normalizes any Post ID recordKey argument to a Number via `__unstableNormalizeArgs` method', async () => {
+ const normalized = getEntityRecord.__unstableNormalizeArgs( [
+ 'postType',
+ 'some_post',
+ '123',
+ ] );
+ expect( normalized ).toEqual( [ 'postType', 'some_post', 123 ] );
+ } );
+
+ it( 'does not normalize recordKey argument unless it is a Post ID', async () => {
+ const normalized = getEntityRecord.__unstableNormalizeArgs( [
+ 'postType',
+ 'some_post',
+ 'i-am-a-slug-with-a-number-123',
+ ] );
+ expect( normalized ).toEqual( [
+ 'postType',
+ 'some_post',
+ 'i-am-a-slug-with-a-number-123',
+ ] );
+ } );
+ } );
it( 'should return undefined for unknown entity kind, name', () => {
const state = deepFreeze( {
entities: {
@@ -226,7 +249,7 @@ describe( 'hasEntityRecords', () => {
},
queries: {
default: {
- '': [ 'post', 'page' ],
+ '': { itemIds: [ 'post', 'page' ] },
},
},
},
@@ -361,7 +384,7 @@ describe( 'getEntityRecords', () => {
},
queries: {
default: {
- '': [ 'post', 'page' ],
+ '': { itemIds: [ 'post', 'page' ] },
},
},
},
@@ -399,7 +422,9 @@ describe( 'getEntityRecords', () => {
},
queries: {
default: {
- '_fields=id%2Ccontent': [ 1 ],
+ '_fields=id%2Ccontent': {
+ itemIds: [ 1 ],
+ },
},
},
},
diff --git a/packages/core-data/src/utils/index.js b/packages/core-data/src/utils/index.js
index f37efe6eee7fda..d4d491fab9827d 100644
--- a/packages/core-data/src/utils/index.js
+++ b/packages/core-data/src/utils/index.js
@@ -8,3 +8,4 @@ export { default as withWeakMapCache } from './with-weak-map-cache';
export { default as isRawAttribute } from './is-raw-attribute';
export { default as setNestedValue } from './set-nested-value';
export { default as getNestedValue } from './get-nested-value';
+export { default as isNumericID } from './is-numeric-id';
diff --git a/packages/core-data/src/utils/is-numeric-id.js b/packages/core-data/src/utils/is-numeric-id.js
new file mode 100644
index 00000000000000..1bc05575d0aeda
--- /dev/null
+++ b/packages/core-data/src/utils/is-numeric-id.js
@@ -0,0 +1,10 @@
+/**
+ * Checks argument to determine if it's a numeric ID.
+ * For example, '123' is a numeric ID, but '123abc' is not.
+ *
+ * @param {any} id the argument to determine if it's a numeric ID.
+ * @return {boolean} true if the string is a numeric ID, false otherwise.
+ */
+export default function isNumericID( id ) {
+ return /^\s*\d+\s*$/.test( id );
+}
diff --git a/packages/core-data/src/utils/test/is-numeric-id.js b/packages/core-data/src/utils/test/is-numeric-id.js
new file mode 100644
index 00000000000000..ac879887742561
--- /dev/null
+++ b/packages/core-data/src/utils/test/is-numeric-id.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import isNumericID from '../is-numeric-id';
+
+describe( 'isNumericID', () => {
+ test.each( [
+ [ true, '12345' ],
+ [ true, '42' ],
+ [ true, ' 42 ' ],
+ [ false, 'abc123' ],
+ [ false, '123abc' ],
+ [ false, '' ],
+ [ false, '123-abc' ],
+ [ false, 'abc-123' ],
+ [ false, '42-test-123' ],
+ [ false, '3.42' ],
+ [ true, 123 ],
+ ] )( `should return %s for input "%s"`, ( expected, input ) => {
+ expect( isNumericID( input ) ).toBe( expected );
+ } );
+} );
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-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
index 2322881ab0d710..52c9c4966646fa 100644
--- a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
+++ b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
@@ -30,6 +30,10 @@
* @package {{namespace}}
*/
+if ( ! defined( 'ABSPATH' ) ) {
+ exit; // Exit if accessed directly.
+}
+
/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
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-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
index 2322881ab0d710..52c9c4966646fa 100644
--- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
+++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
@@ -30,6 +30,10 @@
* @package {{namespace}}
*/
+if ( ! defined( 'ABSPATH' ) ) {
+ exit; // Exit if accessed directly.
+}
+
/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
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/README.md b/packages/create-block/README.md
index 184fabd4bc8131..6a3a006c6e6a1b 100644
--- a/packages/create-block/README.md
+++ b/packages/create-block/README.md
@@ -66,9 +66,9 @@ $ npm start
```
-指定した `slug` (この例では `todo-list`) は、ひな形プラグインのフォルダ名と内部のブロック名を定義します。生成された WordPress プラグインは、[手動でインストールする](https://wordpress.org/documentation/article/manage-plugins/#manual-plugin-installation)必要があります。
+指定した `slug` (この例では `todo-list`) は、ひな形プラグインのフォルダ名と内部のブロック名を定義します。生成された WordPress プラグインは、[手動でインストールする](https://wordpress.org/documentation/article/manage-plugins/#manual-plugin-installation-1)必要があります。
-
.components-button {
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 5265cac569239f..9c854dc33636db 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -22,6 +22,7 @@ import {
useBlockCommands,
BlockBreadcrumb,
privateApis as blockEditorPrivateApis,
+ store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button, ScrollLock } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
@@ -37,6 +38,12 @@ import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+
+const { useCommands } = unlock( coreCommandsPrivateApis );
+const { useCommandContext } = unlock( commandsPrivateApis );
+
/**
* Internal dependencies
*/
@@ -56,6 +63,7 @@ import ActionsPanel from './actions-panel';
import StartPageOptions from '../start-page-options';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';
+import useCommonCommands from '../../hooks/commands/use-common-commands';
const { getLayoutStyles } = unlock( blockEditorPrivateApis );
@@ -124,7 +132,10 @@ function useEditorStyles() {
}
function Layout() {
+ useCommands();
+ useCommonCommands();
useBlockCommands();
+
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const isLargeViewport = useViewportMatch( 'large' );
@@ -184,9 +195,17 @@ function Layout() {
),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+ hasBlockSelected:
+ select( blockEditorStore ).getBlockSelectionStart(),
};
}, [] );
+ // Set the right context for the command palette
+ const commandContext = hasBlockSelected
+ ? 'block-selection-edit'
+ : 'post-editor-edit';
+ useCommandContext( commandContext );
+
const styles = useEditorStyles();
const openSidebarPanel = () =>
diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss
index c3068746b419bb..fbc3bd465e2a66 100644
--- a/packages/edit-post/src/components/sidebar/last-revision/style.scss
+++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss
@@ -4,6 +4,7 @@
height: $grid-unit-60;
}
-.editor-post-last-revision__title.components-button {
+// Needs specificity to override button styles.
+.editor-post-last-revision__title.components-button.components-button {
padding: $grid-unit-20;
}
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js b/packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js
new file mode 100644
index 00000000000000..2bef6bc3452145
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/plugin-post-excerpt/index.js
@@ -0,0 +1,61 @@
+/**
+ * Defines as extensibility slot for the Excerpt panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
+
+/**
+ * Renders a post excerpt panel in the post sidebar.
+ *
+ * @param {Object} props Component properties.
+ * @param {string} [props.className] An optional class name added to the row.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginPostExcerpt = wp.editPost.PluginPostExcerpt;
+ *
+ * function MyPluginPostExcerpt() {
+ * return React.createElement(
+ * PluginPostExcerpt,
+ * {
+ * className: 'my-plugin-post-excerpt',
+ * },
+ * __( 'Post excerpt custom content' )
+ * )
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostExcerpt } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostExcerpt = () => (
+ *
+ * { __( 'Post excerpt custom content' ) }
+ *
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPostExcerpt = ( { children, className } ) => {
+ return (
+
+ { children }
+
+ );
+};
+
+PluginPostExcerpt.Slot = Slot;
+
+export default PluginPostExcerpt;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-excerpt/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-excerpt/test/index.js
new file mode 100644
index 00000000000000..4b81a1326d5176
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/plugin-post-excerpt/test/index.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostExcerptPanel from '../';
+
+describe( 'PluginPostExcerptPanel', () => {
+ test( 'renders fill properly', () => {
+ render(
+
+
+ Post Excerpt - Custom content
+
+
+ );
+
+ expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+ 'Post Excerpt - Custom content'
+ );
+ expect(
+ screen.getByText( 'Post Excerpt - Custom content' )
+ ).toHaveClass( 'my-plugin-post-excerpt-custom-content' );
+ } );
+} );
diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
index b2d56808d64c79..c2b9c0c48370eb 100644
--- a/packages/edit-post/src/components/sidebar/post-excerpt/index.js
+++ b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
@@ -7,20 +7,33 @@ import {
PostExcerpt as PostExcerptForm,
PostExcerptCheck,
} from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';
+import PluginPostExcerpt from '../plugin-post-excerpt';
/**
* Module Constants
*/
const PANEL_NAME = 'post-excerpt';
-function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
+export default function PostExcerpt() {
+ const { isOpened, isEnabled } = useSelect( ( select ) => {
+ const { isEditorPanelOpened, isEditorPanelEnabled } =
+ select( editPostStore );
+
+ return {
+ isOpened: isEditorPanelOpened( PANEL_NAME ),
+ isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+ };
+ }, [] );
+
+ const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+ const toggleExcerptPanel = () => toggleEditorPanelOpened( PANEL_NAME );
+
if ( ! isEnabled ) {
return null;
}
@@ -30,27 +43,17 @@ function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
-
+ { ( fills ) => (
+ <>
+
);
}
-
-export default compose( [
- withSelect( ( select ) => {
- return {
- isEnabled:
- select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
- isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
- };
- } ),
- withDispatch( ( dispatch ) => ( {
- onTogglePanel() {
- return dispatch( editPostStore ).toggleEditorPanelOpened(
- PANEL_NAME
- );
- },
- } ) ),
-] )( PostExcerpt );
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-post/src/editor.js b/packages/edit-post/src/editor.js
index 6668001b76773d..d1ef111e7dc4c3 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -14,7 +14,6 @@ import { SlotFillProvider } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { store as preferencesStore } from '@wordpress/preferences';
import { CommandMenu } from '@wordpress/commands';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
/**
* Internal dependencies
@@ -23,14 +22,10 @@ import Layout from './components/layout';
import EditorInitialization from './components/editor-initialization';
import { store as editPostStore } from './store';
import { unlock } from './lock-unlock';
-import useCommonCommands from './hooks/commands/use-common-commands';
const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { useCommands } = unlock( coreCommandsPrivateApis );
function Editor( { postId, postType, settings, initialEdits, ...props } ) {
- useCommands();
- useCommonCommands();
const {
hasFixedToolbar,
focusMode,
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 9dec0c6cd5e357..fe967eeeed337f 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -206,4 +206,5 @@ export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
+export { default as __experimentalPluginPostExcerpt } from './components/sidebar/plugin-post-excerpt';
export { store } from './store';
diff --git a/packages/edit-post/src/lock-unlock.js b/packages/edit-post/src/lock-unlock.js
index 172d18df7d1ba4..bf65b262d9f484 100644
--- a/packages/edit-post/src/lock-unlock.js
+++ b/packages/edit-post/src/lock-unlock.js
@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/edit-post'
);
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 e58e0d9fb33e74..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.0",
+ "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/actions/index.js b/packages/edit-site/src/components/actions/index.js
new file mode 100644
index 00000000000000..00712567a24dc1
--- /dev/null
+++ b/packages/edit-site/src/components/actions/index.js
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { external, trash } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export function useTrashPostAction() {
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ const { deleteEntityRecord } = useDispatch( coreStore );
+
+ return useMemo(
+ () => ( {
+ id: 'move-to-trash',
+ label: __( 'Move to Trash' ),
+ isPrimary: true,
+ icon: trash,
+ isEligible( { status } ) {
+ return status !== 'trash';
+ },
+ async perform( post ) {
+ try {
+ await deleteEntityRecord(
+ 'postType',
+ post.type,
+ post.id,
+ {},
+ { throwOnError: true }
+ );
+ createSuccessNotice(
+ sprintf(
+ /* translators: The page's title. */
+ __( '"%s" moved to the Trash.' ),
+ decodeEntities( post.title.rendered )
+ ),
+ {
+ type: 'snackbar',
+ id: 'edit-site-page-trashed',
+ }
+ );
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __(
+ 'An error occurred while moving the page to the trash.'
+ );
+
+ createErrorNotice( errorMessage, { type: 'snackbar' } );
+ }
+ },
+ } ),
+ [ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+ );
+}
+
+export const viewPostAction = {
+ id: 'view-post',
+ label: __( 'View' ),
+ isPrimary: true,
+ icon: external,
+ isEligible( post ) {
+ return post.status !== 'trash';
+ },
+ perform( post ) {
+ document.location.href = post.link;
+ },
+};
+
+export function useEditPostAction() {
+ const history = useHistory();
+ return useMemo(
+ () => ( {
+ id: 'edit-post',
+ label: __( 'Edit' ),
+ isEligible( { status } ) {
+ return status !== 'trash';
+ },
+ perform( post ) {
+ history.push( {
+ postId: post.id,
+ postType: post.type,
+ canvas: 'edit',
+ } );
+ },
+ } ),
+ [ history ]
+ );
+}
+export const postRevisionsAction = {
+ id: 'view-post-revisions',
+ label: __( 'View revisions' ),
+ isPrimary: false,
+ isEligible: ( post ) => {
+ if ( post.status === 'trash' ) {
+ return false;
+ }
+ const lastRevisionId =
+ post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+ const revisionsCount =
+ post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+ return lastRevisionId && revisionsCount > 1;
+ },
+ perform( post ) {
+ const href = addQueryArgs( 'revision.php', {
+ revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+ } );
+ document.location.href = href;
+ },
+};
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 80a20939dec251..643f1e6f818662 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -9,11 +9,9 @@ import {
FlexItem,
SearchControl,
TextHighlight,
+ privateApis as componentsPrivateApis,
__experimentalText as Text,
__experimentalVStack as VStack,
- __unstableComposite as Composite,
- __unstableUseCompositeState as useCompositeState,
- __unstableCompositeItem as CompositeItem,
} from '@wordpress/components';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
@@ -21,9 +19,16 @@ import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
+import { unlock } from '../../lock-unlock';
import useDebouncedInput from '../../utils/use-debounced-input';
import { mapToIHasNameAndId } from './utils';
+const {
+ CompositeV2: Composite,
+ CompositeItemV2: CompositeItem,
+ useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
const EMPTY_ARRAY = [];
function SuggestionListItem( {
@@ -31,22 +36,23 @@ function SuggestionListItem( {
search,
onSelect,
entityForSuggestions,
- composite,
} ) {
const baseCssClass =
'edit-site-custom-template-modal__suggestions_list__list-item';
return (
- onSelect(
- entityForSuggestions.config.getSpecificTemplate(
- suggestion
- )
- )
+ render={
+
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..460235c8df3df4
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/README.md
@@ -0,0 +1,204 @@
+# DataView
+
+This file documents the DataViews UI component, which provides an API to render datasets using different view types (table, grid, etc.).
+
+```js
+
+ { filter.name + ':' }
+
+ }
+ options={ filter.elements }
+ onChange={ ( value ) => {
+ if ( value === '' ) {
+ value = undefined;
+ }
+
+ onChangeView( ( currentView ) => ( {
+ ...currentView,
+ filters: cleanEmptyObject( {
+ ...currentView.filters,
+ [ filter.id ]: value,
+ } ),
+ } ) );
+ } }
+ />
+ );
+};
diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/edit-site/src/components/dataviews/index.js
index 3fea6fd63714b7..422d128b1461d0 100644
--- a/packages/edit-site/src/components/dataviews/index.js
+++ b/packages/edit-site/src/components/dataviews/index.js
@@ -1,2 +1 @@
export { default as DataViews } from './dataviews';
-export { PAGE_SIZE_VALUES } from './view-actions';
diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
new file mode 100644
index 00000000000000..2b7837ae4a3829
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ DropdownMenu,
+ MenuGroup,
+ MenuItem,
+ Button,
+ __experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+
+export default function ItemActions( { item, actions } ) {
+ const { primaryActions, secondaryActions } = useMemo( () => {
+ return actions.reduce(
+ ( accumulator, action ) => {
+ // If an action is eligible for all items, doesn't need
+ // to provide the `isEligible` function.
+ if ( action.isEligible && ! action.isEligible( item ) ) {
+ return accumulator;
+ }
+ if ( action.isPrimary && !! action.icon ) {
+ accumulator.primaryActions.push( action );
+ } else {
+ accumulator.secondaryActions.push( action );
+ }
+ return accumulator;
+ },
+ { primaryActions: [], secondaryActions: [] }
+ );
+ }, [ actions, item ] );
+ if ( ! primaryActions.length && ! secondaryActions.length ) {
+ return null;
+ }
+ return (
+
+ { !! primaryActions.length &&
+ primaryActions.map( ( action ) => (
+
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js
deleted file mode 100644
index 55a871d3df8c9b..00000000000000
--- a/packages/edit-site/src/components/dataviews/list-view.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { flexRender } from '@tanstack/react-table';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-
-const sortIcons = { asc: chevronUp, desc: chevronDown };
-function Header( { header } ) {
- if ( header.isPlaceholder ) {
- return null;
- }
- const text = flexRender(
- header.column.columnDef.header,
- header.getContext()
- );
- if ( ! header.column.getCanSort() ) {
- return text;
- }
- const sortDirection = header.column.getIsSorted();
- return (
-
- );
-}
-
-function ListView( { dataView, className, isLoading = false }, ref ) {
- const { rows } = dataView.getRowModel();
- const hasRows = !! rows?.length;
- if ( isLoading ) {
- // TODO:Add spinner or progress bar..
- return
- { !! _totalItems && (
-
-
-
+ { !! totalItems && (
+
+
+
{ createInterpolateElement(
sprintf(
// translators: %1$s: Current page number, %2$s: Total number of pages.
_x( ' {
- if ( value > numPages ) return;
- dataView.setPageIndex( value - 1 );
+ if (
+ ! value ||
+ value < 1 ||
+ value > totalPages
+ ) {
+ return;
+ }
+ onChangeView( {
+ ...view,
+ page: value,
+ } );
} }
step="1"
- value={ currentPage }
+ value={ view.page }
isDragEnabled={ false }
spinControls="none"
/>
@@ -92,27 +104,36 @@ export function Pagination( {
}
) }
-
-
+
) }
-
);
}
+
+export default Pagination;
diff --git a/packages/edit-site/src/components/dataviews/provider.js b/packages/edit-site/src/components/dataviews/provider.js
new file mode 100644
index 00000000000000..f418f8d91834d9
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/provider.js
@@ -0,0 +1,270 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+ useEffect,
+ useState,
+ useRef,
+ useMemo,
+ Fragment,
+} from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import DataviewsContext from './context';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+// DEFAULT_STATUSES is intentionally sorted. Items do not have spaces in between them.
+// The reason for that is to match the default statuses coming from the endpoint
+// (entity request and useEffect to update the view).
+export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All statuses but 'trash'.
+
+const DEFAULT_VIEWS = {
+ page: {
+ type: 'list',
+ filters: {
+ search: '',
+ status: DEFAULT_STATUSES,
+ },
+ page: 1,
+ perPage: 5,
+ sort: {
+ field: 'date',
+ direction: 'desc',
+ },
+ visibleFilters: [ 'search', 'author', 'status' ],
+ // All fields are visible by default, so it's
+ // better to keep track of the hidden ones.
+ hiddenFields: [ 'date', 'featured-image' ],
+ layout: {},
+ },
+};
+
+const PATH_TO_DATAVIEW_TYPE = {
+ '/pages': 'page',
+};
+
+function useDataviewTypeTaxonomyId( type ) {
+ const isCreatingATerm = useRef( false );
+ const {
+ dataViewTypeRecords,
+ dataViewTypeIsResolving,
+ dataViewTypeIsSaving,
+ } = useSelect(
+ ( select ) => {
+ const { getEntityRecords, isResolving, isSavingEntityRecord } =
+ select( coreStore );
+ const dataViewTypeQuery = { slug: type };
+ return {
+ dataViewTypeRecords: getEntityRecords(
+ 'taxonomy',
+ 'wp_dataviews_type',
+ dataViewTypeQuery
+ ),
+ dataViewTypeIsResolving: isResolving( 'getEntityRecords', [
+ 'taxonomy',
+ 'wp_dataviews_type',
+ dataViewTypeQuery,
+ ] ),
+ dataViewTypeIsSaving: isSavingEntityRecord(
+ 'taxonomy',
+ 'wp_dataviews_type'
+ ),
+ };
+ },
+ [ type ]
+ );
+ const { saveEntityRecord } = useDispatch( coreStore );
+ useEffect( () => {
+ if (
+ dataViewTypeRecords?.length === 0 &&
+ ! dataViewTypeIsResolving &&
+ ! dataViewTypeIsSaving &&
+ ! isCreatingATerm.current
+ ) {
+ isCreatingATerm.current = true;
+ saveEntityRecord( 'taxonomy', 'wp_dataviews_type', { name: type } );
+ }
+ }, [
+ type,
+ dataViewTypeRecords,
+ dataViewTypeIsResolving,
+ dataViewTypeIsSaving,
+ saveEntityRecord,
+ ] );
+ useEffect( () => {
+ if ( dataViewTypeRecords?.length > 0 ) {
+ isCreatingATerm.current = false;
+ }
+ }, [ dataViewTypeRecords ] );
+ useEffect( () => {
+ isCreatingATerm.current = false;
+ }, [ type ] );
+ if ( dataViewTypeRecords?.length > 0 ) {
+ return dataViewTypeRecords[ 0 ].id;
+ }
+ return null;
+}
+
+function useDataviews( type, typeTaxonomyId ) {
+ const isCreatingADefaultView = useRef( false );
+ const { dataViewRecords, dataViewIsLoading, dataViewIsSaving } = useSelect(
+ ( select ) => {
+ const { getEntityRecords, isResolving, isSavingEntityRecord } =
+ select( coreStore );
+ if ( ! typeTaxonomyId ) {
+ return {};
+ }
+ const dataViewQuery = {
+ wp_dataviews_type: typeTaxonomyId,
+ orderby: 'date',
+ order: 'asc',
+ };
+ return {
+ dataViewRecords: getEntityRecords(
+ 'postType',
+ 'wp_dataviews',
+ dataViewQuery
+ ),
+ dataViewIsLoading: isResolving( 'getEntityRecords', [
+ 'postType',
+ 'wp_dataviews',
+ dataViewQuery,
+ ] ),
+ dataViewIsSaving: isSavingEntityRecord(
+ 'postType',
+ 'wp_dataviews'
+ ),
+ };
+ },
+ [ typeTaxonomyId ]
+ );
+ const { saveEntityRecord } = useDispatch( coreStore );
+ useEffect( () => {
+ if (
+ dataViewRecords?.length === 0 &&
+ ! dataViewIsLoading &&
+ ! dataViewIsSaving &&
+ ! isCreatingADefaultView.current
+ ) {
+ isCreatingADefaultView.current = true;
+ saveEntityRecord( 'postType', 'wp_dataviews', {
+ title: 'All',
+ status: 'publish',
+ wp_dataviews_type: typeTaxonomyId,
+ content: JSON.stringify( DEFAULT_VIEWS[ type ] ),
+ } );
+ }
+ }, [
+ type,
+ dataViewIsLoading,
+ dataViewRecords,
+ dataViewIsSaving,
+ typeTaxonomyId,
+ saveEntityRecord,
+ ] );
+ useEffect( () => {
+ if ( dataViewRecords?.length > 0 ) {
+ isCreatingADefaultView.current = false;
+ }
+ }, [ dataViewRecords ] );
+ useEffect( () => {
+ isCreatingADefaultView.current = false;
+ }, [ typeTaxonomyId ] );
+ if ( dataViewRecords?.length > 0 ) {
+ return dataViewRecords;
+ }
+ return null;
+}
+
+function DataviewsProviderInner( { type, children } ) {
+ const [ currentViewId, setCurrentViewId ] = useState( null );
+ const dataviewTypeTaxonomyId = useDataviewTypeTaxonomyId( type );
+ const dataviews = useDataviews( type, dataviewTypeTaxonomyId );
+ const { editEntityRecord } = useDispatch( coreStore );
+ useEffect( () => {
+ if ( ! currentViewId && dataviews?.length > 0 ) {
+ setCurrentViewId( dataviews[ 0 ].id );
+ }
+ }, [ currentViewId, dataviews ] );
+ const editedViewRecord = useSelect(
+ ( select ) => {
+ if ( ! currentViewId ) {
+ return;
+ }
+ const { getEditedEntityRecord } = select( coreStore );
+ const dataviewRecord = getEditedEntityRecord(
+ 'postType',
+ 'wp_dataviews',
+ currentViewId
+ );
+ return dataviewRecord;
+ },
+ [ currentViewId ]
+ );
+
+ const value = useMemo( () => {
+ return {
+ taxonomyId: dataviewTypeTaxonomyId,
+ dataviews,
+ currentViewId,
+ setCurrentViewId,
+ view: editedViewRecord?.content
+ ? JSON.parse( editedViewRecord?.content )
+ : DEFAULT_VIEWS[ type ],
+ setView( view ) {
+ if ( ! currentViewId ) {
+ return;
+ }
+ editEntityRecord( 'postType', 'wp_dataviews', currentViewId, {
+ content: JSON.stringify( view ),
+ } );
+ },
+ };
+ }, [
+ type,
+ dataviewTypeTaxonomyId,
+ dataviews,
+ currentViewId,
+ editedViewRecord?.content,
+ editEntityRecord,
+ ] );
+
+ return (
+
+ { children }
+
+ );
+}
+function DataviewsProvider( { children } ) {
+ const {
+ params: { path },
+ } = useLocation();
+ const viewType = PATH_TO_DATAVIEW_TYPE[ path ];
+
+ if ( viewType ) {
+ return (
+
+ { children }
+
+ );
+ }
+ return <>{ children };
+}
+
+let DataviewsProviderExported = Fragment;
+
+// This condition must stand on its own for correct tree-shaking
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ if ( window?.__experimentalAdminViews ) {
+ DataviewsProviderExported = DataviewsProvider;
+ }
+}
+
+export default DataviewsProviderExported;
diff --git a/packages/edit-site/src/components/dataviews/sidebar-content.js b/packages/edit-site/src/components/dataviews/sidebar-content.js
new file mode 100644
index 00000000000000..5015e73bc4a635
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/sidebar-content.js
@@ -0,0 +1,4 @@
+export default function DataViewsSidebarContent() {
+ // TODO: add views UI.
+ return null;
+}
diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
index 47e80782255a4a..11208d9472a14e 100644
--- a/packages/edit-site/src/components/dataviews/style.scss
+++ b/packages/edit-site/src/components/dataviews/style.scss
@@ -1,6 +1,16 @@
.dataviews-wrapper {
width: 100%;
+ height: 100%;
+ overflow: auto;
padding: $grid-unit-40;
+
+ > div {
+ min-height: 100%;
+ }
+}
+
+.dataviews-pagination {
+ margin-top: auto;
}
.dataviews-list-view {
@@ -30,7 +40,12 @@
}
}
-.dataviews__per-page-control-prefix {
- color: $gray-700;
- text-wrap: nowrap;
+.dataviews-view-grid__media {
+ width: 100%;
+ min-height: 200px;
+
+ > * {
+ max-width: 100%;
+ object-fit: cover;
+ }
}
diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
index 76a06c14486170..79ae77c60b71aa 100644
--- a/packages/edit-site/src/components/dataviews/text-filter.js
+++ b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
import { SearchControl } from '@wordpress/components';
/**
@@ -15,18 +10,30 @@ import { SearchControl } from '@wordpress/components';
*/
import useDebouncedInput from '../../utils/use-debounced-input';
-export default function TextFilter( {
- className,
- searchLabel = __( 'Filter list' ),
- onChange,
-} ) {
- const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+export default function TextFilter( { filter, view, onChangeView } ) {
+ const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
+ view.filters[ filter.id ]
+ );
+ useEffect( () => {
+ setSearch( view.filters[ filter.id ] );
+ }, [ view ] );
+ const onChangeViewRef = useRef( onChangeView );
+ useEffect( () => {
+ onChangeViewRef.current = onChangeView;
+ }, [ onChangeView ] );
useEffect( () => {
- onChange( debouncedSearch );
- }, [ debouncedSearch, onChange ] );
+ onChangeViewRef.current( ( currentView ) => ( {
+ ...currentView,
+ page: 1,
+ filters: {
+ ...currentView.filters,
+ [ filter.id ]: debouncedSearch,
+ },
+ } ) );
+ }, [ debouncedSearch ] );
+ const searchLabel = filter?.name || __( 'Filter list' );
return (
view.type === v.id );
return (
-
+ { activeView.label }
+
- { currenPageSize }
+ { view.perPage }
- { currentSortedField?.columnDef.header }
+ { currentSortedField?.header }
{ __( 'View' ) }
@@ -237,9 +273,18 @@ export default function ViewActions( { dataView, className } ) {
}
>
-
);
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
new file mode 100644
index 00000000000000..d319a25579f1a8
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalGrid as Grid,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ FlexBlock,
+ Placeholder,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from './item-actions';
+
+export function ViewGrid( { data, fields, view, actions } ) {
+ const mediaField = fields.find(
+ ( field ) => field.id === view.layout.mediaField
+ );
+ const visibleFields = fields.filter(
+ ( field ) =>
+ ! view.hiddenFields.includes( field.id ) &&
+ field.id !== view.layout.mediaField
+ );
+ return (
+
+ { data.map( ( item, index ) => {
+ return (
+
+
+
+
+ { visibleFields.map( ( field ) => (
+
+
+
+
+
+
+ );
+ } ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
new file mode 100644
index 00000000000000..0fbdd6ced34c56
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -0,0 +1,348 @@
+/**
+ * External dependencies
+ */
+import {
+ getCoreRowModel,
+ getFilteredRowModel,
+ getSortedRowModel,
+ getPaginationRowModel,
+ useReactTable,
+ flexRender,
+} from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ chevronDown,
+ chevronUp,
+ unseen,
+ check,
+ arrowUp,
+ arrowDown,
+} from '@wordpress/icons';
+import {
+ Button,
+ Icon,
+ privateApis as componentsPrivateApis,
+ VisuallyHidden,
+} from '@wordpress/components';
+import { useMemo, Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import ItemActions from './item-actions';
+
+const {
+ DropdownMenuV2,
+ DropdownMenuGroupV2,
+ DropdownMenuItemV2,
+ DropdownMenuSeparatorV2,
+} = unlock( componentsPrivateApis );
+
+const EMPTY_OBJECT = {};
+const sortingItemsInfo = {
+ asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+ desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+const sortIcons = { asc: chevronUp, desc: chevronDown };
+function HeaderMenu( { dataView, header } ) {
+ if ( header.isPlaceholder ) {
+ return null;
+ }
+ const text = flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ );
+ const isSortable = !! header.column.getCanSort();
+ const isHidable = !! header.column.getCanHide();
+ if ( ! isSortable && ! isHidable ) {
+ return text;
+ }
+ const sortedDirection = header.column.getIsSorted();
+ return (
+
+ { isSortable && (
+
+ { Object.entries( sortingItemsInfo ).map(
+ ( [ direction, info ] ) => (
+
+ ) }
+ { isHidable && (
+
+
+ );
+}
+
+function WithSeparators( { children } ) {
+ return Children.toArray( children )
+ .filter( Boolean )
+ .map( ( child, i ) => (
+
+ { i > 0 &&
+ ) );
+}
+
+function ViewList( {
+ view,
+ onChangeView,
+ fields,
+ actions,
+ data,
+ isLoading = false,
+ paginationInfo,
+} ) {
+ const columns = useMemo( () => {
+ const _columns = fields.map( ( field ) => {
+ const { render, getValue, ...column } = field;
+ column.cell = ( props ) =>
+ render( { item: props.row.original, view } );
+ if ( getValue ) {
+ column.accessorFn = ( item ) => getValue( { item } );
+ }
+ return column;
+ } );
+ if ( actions?.length ) {
+ _columns.push( {
+ header: { __( 'Actions' ) } ,
+ id: 'actions',
+ cell: ( props ) => {
+ return (
+
@@ -227,16 +235,16 @@ function FontCollection( { id } ) {
) }
{ __(
- 'No fonts found. Try with a different seach term'
+ 'No fonts found. Try with a different search term'
) }
) }
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index db60f992c41d5d..def7d1d627fe46 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -132,8 +132,7 @@ function ScreenBlock( { name, variation } ) {
: undefined;
return {
- canEditCSS:
- !! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+ canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
};
}, [] );
const currentBlockStyle = variation
@@ -284,13 +283,7 @@ function ScreenBlock( { name, variation } ) {
inheritedValue={ inheritedStyleWithLayout }
value={ styleWithLayout }
onChange={ setStyle }
- settings={ {
- ...settings,
- color: {
- ...settings.color,
- customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
- },
- } }
+ settings={ settings }
includeLayoutControls
/>
) }
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index c2a7d1fc5909c7..1b0ce6b002a0bb 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -47,8 +47,7 @@ function ScreenRoot() {
hasVariations:
!! __experimentalGetCurrentThemeGlobalStylesVariations()
?.length,
- canEditCSS:
- !! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+ canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
};
}, [] );
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 07f3c7a95c800d..3560ef139fa3fe 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -85,23 +85,35 @@
.edit-site-global-styles-variations_item {
box-sizing: border-box;
+ // To round the outline in Windows 10 high contrast mode.
+ border-radius: $radius-block-ui;
.edit-site-global-styles-variations_item-preview {
padding: $border-width * 2;
border-radius: $radius-block-ui;
- border: $gray-200 $border-width solid;
+ box-shadow: 0 0 0 $border-width $gray-200;
+ // Shown in Windows 10 high contrast mode.
+ outline: 1px solid transparent;
}
&.is-active .edit-site-global-styles-variations_item-preview {
- border: $gray-900 $border-width solid;
+ box-shadow: 0 0 0 $border-width $gray-900;
+ // Shown in Windows 10 high contrast mode.
+ outline-width: 3px;
}
&:hover .edit-site-global-styles-variations_item-preview {
- border: var(--wp-admin-theme-color) $border-width solid;
+ box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
}
&:focus .edit-site-global-styles-variations_item-preview {
- border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ }
+
+ &:focus-visible {
+ // Shown in Windows 10 high contrast mode.
+ outline: 3px solid transparent;
+ outline-offset: 0;
}
}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2ac94a78609847..d2e0d2c3027065 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -65,8 +65,7 @@ function GlobalStylesActionMenu() {
: undefined;
return {
- canEditCSS:
- !! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+ canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
};
}, [] );
const { goTo } = useNavigator();
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index c03ad2cd05ecd8..5fb682353da722 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -29,6 +29,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
import {
privateApis as blockEditorPrivateApis,
useBlockCommands,
+ store as blockEditorStore,
} from '@wordpress/block-editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -80,6 +81,7 @@ export default function Layout() {
const {
isDistractionFree,
hasFixedToolbar,
+ hasBlockSelected,
canvasMode,
previousShortcut,
nextShortcut,
@@ -104,6 +106,8 @@ export default function Layout() {
'core/edit-site',
'distractionFree'
),
+ hasBlockSelected:
+ select( blockEditorStore ).getBlockSelectionStart(),
};
}, [] );
const isEditing = canvasMode === 'edit';
@@ -152,10 +156,14 @@ export default function Layout() {
}
// Sets the right context for the command palette
- const commandContext =
- canvasMode === 'edit' && isEditorPage
- ? 'site-editor-edit'
- : 'site-editor';
+ let commandContext = 'site-editor';
+
+ if ( canvasMode === 'edit' && isEditorPage ) {
+ commandContext = 'site-editor-edit';
+ }
+ if ( hasBlockSelected ) {
+ commandContext = 'block-selection-edit';
+ }
useCommandContext( commandContext );
const [ backgroundColor ] = useGlobalStyle( 'color.background' );
diff --git a/packages/edit-site/src/components/media/index.js b/packages/edit-site/src/components/media/index.js
new file mode 100644
index 00000000000000..7df6c4f882842e
--- /dev/null
+++ b/packages/edit-site/src/components/media/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+
+function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
+ const { record: media } = useEntityRecord( 'root', 'media', id );
+ const currentSize = size.find(
+ ( s ) => !! media?.media_details?.sizes[ s ]
+ );
+ const mediaDetails = media?.media_details?.sizes[ currentSize ];
+ if ( ! mediaDetails ) {
+ return null;
+ }
+
+ return (
+ 
+ );
+}
+
+export default Media;
diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js
index f6f0119a164544..d42a706c36796e 100644
--- a/packages/edit-site/src/components/page-actions/index.js
+++ b/packages/edit-site/src/components/page-actions/index.js
@@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons';
*/
import TrashPageMenuItem from './trash-page-menu-item';
-export default function PageActions( {
- postId,
- className,
- toggleProps,
- onRemove,
-} ) {
+export default function PageActions( { postId, toggleProps, onRemove } ) {
return (
{ () => (
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index b767ad77adc6d9..e548ddb07f5010 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -1,118 +1,149 @@
/**
* WordPress dependencies
*/
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
import {
- VisuallyHidden,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import {
+ useContext,
+ useMemo,
+ useCallback,
+ useEffect,
+} from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
/**
* Internal dependencies
*/
import Page from '../page';
import Link from '../routes/link';
-import PageActions from '../page-actions';
-import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
+import { DataViews } from '../dataviews';
+import {
+ useTrashPostAction,
+ postRevisionsAction,
+ viewPostAction,
+ useEditPostAction,
+} from '../actions';
+import Media from '../media';
+import DataviewsContext from '../dataviews/context';
+import { DEFAULT_STATUSES } from '../dataviews/provider';
const EMPTY_ARRAY = [];
-const EMPTY_OBJECT = {};
+const defaultConfigPerViewType = {
+ list: {},
+ grid: {
+ mediaField: 'featured-image',
+ },
+};
export default function PagePages() {
- const [ reset, setResetQuery ] = useState( ( v ) => ! v );
- const [ globalFilter, setGlobalFilter ] = useState( '' );
- const [ paginationInfo, setPaginationInfo ] = useState();
- const [ { pageIndex, pageSize }, setPagination ] = useState( {
- pageIndex: 0,
- pageSize: PAGE_SIZE_VALUES[ 0 ],
- } );
+ const { view, setView } = useContext( DataviewsContext );
// Request post statuses to get the proper labels.
const { records: statuses } = useEntityRecords( 'root', 'status' );
- const postStatuses =
- statuses === null
- ? EMPTY_OBJECT
- : statuses.reduce( ( acc, status ) => {
- acc[ status.slug ] = status.name;
- return acc;
- }, EMPTY_OBJECT );
+ const defaultStatuses = useMemo( () => {
+ return statuses === null
+ ? DEFAULT_STATUSES
+ : statuses
+ .filter( ( { slug } ) => slug !== 'trash' )
+ .map( ( { slug } ) => slug )
+ .sort()
+ .join();
+ }, [ statuses ] );
+
+ useEffect( () => {
+ // Only update the view if the statuses received from the endpoint
+ // are different from the DEFAULT_STATUSES provided initially.
+ //
+ // The pages endpoint depends on the status endpoint via the status filter.
+ // Initially, this code filters the pages request by DEFAULT_STATUTES,
+ // instead of using the default (publish).
+ // https://developer.wordpress.org/rest-api/reference/pages/#list-pages
+ //
+ // By doing so, it avoids a second request to the pages endpoint
+ // upon receiving the statuses when they are the same (most common scenario).
+ if ( DEFAULT_STATUSES !== defaultStatuses ) {
+ setView( {
+ ...view,
+ filters: {
+ ...view.filters,
+ status: defaultStatuses,
+ },
+ } );
+ }
+ }, [ defaultStatuses ] );
- // TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
- const pagination = useMemo(
- () => ( { pageIndex, pageSize } ),
- [ pageIndex, pageSize ]
- );
- const [ sorting, setSorting ] = useState( [
- { order: 'desc', orderby: 'date' },
- ] );
const queryArgs = useMemo(
() => ( {
- per_page: pageSize,
- page: pageIndex + 1, // tanstack starts from zero.
+ per_page: view.perPage,
+ page: view.page,
_embed: 'author',
- order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
- orderby: sorting[ 0 ]?.id,
- search: globalFilter,
- status: [ 'publish', 'draft' ],
+ order: view.sort?.direction,
+ orderby: view.sort?.field,
+ ...view.filters,
} ),
- [
- globalFilter,
- sorting[ 0 ]?.id,
- sorting[ 0 ]?.desc,
- pageSize,
- pageIndex,
- reset,
- ]
+ [ view ]
);
- const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
- 'postType',
- 'page',
- queryArgs
+ const {
+ records: pages,
+ isResolving: isLoadingPages,
+ totalItems,
+ totalPages,
+ } = useEntityRecords( 'postType', 'page', queryArgs );
+
+ const { records: authors } = useEntityRecords( 'root', 'user', {
+ has_published_posts: [ 'page' ],
+ } );
+
+ const paginationInfo = useMemo(
+ () => ( {
+ totalItems,
+ totalPages,
+ } ),
+ [ totalItems, totalPages ]
);
- useEffect( () => {
- // Make extra request to handle controlled pagination.
- apiFetch( {
- path: addQueryArgs( '/wp/v2/pages', {
- ...queryArgs,
- _fields: 'id',
- } ),
- method: 'HEAD',
- parse: false,
- } ).then( ( res ) => {
- const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
- const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
- setPaginationInfo( {
- totalPages,
- totalItems,
- } );
- } );
- // Status should not make extra request if already did..
- }, [ globalFilter, pageSize, reset ] );
const fields = useMemo(
() => [
+ {
+ id: 'featured-image',
+ header: __( 'Featured Image' ),
+ getValue: ( { item } ) => item.featured_media,
+ render: ( { item, view: currentView } ) =>
+ !! item.featured_media ? (
+
- { decodeEntities( props.getValue() ) }
+ { decodeEntities(
+ item.title?.rendered || item.slug
+ ) || __( '(no title)' ) }
@@ -125,39 +156,91 @@ export default function PagePages() {
{
header: __( 'Author' ),
id: 'author',
- accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
- cell: ( props ) => {
- const author = props.row.original._embedded?.author[ 0 ];
+ getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
+ render: ( { item } ) => {
+ const author = item._embedded?.author[ 0 ];
return (
{ author.name }
);
},
+ filters: [ 'enumeration' ],
+ elements:
+ authors?.map( ( { id, name } ) => ( {
+ value: id,
+ label: name,
+ } ) ) || [],
},
{
- header: 'Status',
+ header: __( 'Status' ),
id: 'status',
- cell: ( props ) =>
- postStatuses[ props.row.original.status ] ??
- props.row.original.status,
+ getValue: ( { item } ) =>
+ statuses?.find( ( { slug } ) => slug === item.status )
+ ?.name ?? item.status,
+ filters: [
+ {
+ type: 'enumeration',
+ id: 'status',
+ resetValue: defaultStatuses,
+ },
+ ],
+ elements:
+ statuses?.map( ( { slug, name } ) => ( {
+ value: slug,
+ label: name,
+ } ) ) || [],
+ enableSorting: false,
},
{
- header: { __( 'Actions' ) } ,
- id: 'actions',
- cell: ( props ) => {
- const page = props.row.original;
- return (
- setResetQuery() }
- />
+ header: __( 'Date' ),
+ id: 'date',
+ getValue: ( { item } ) => item.date,
+ render: ( { item } ) => {
+ const formattedDate = dateI18n(
+ getSettings().formats.datetimeAbbreviated,
+ getDate( item.date )
);
+ return ;
},
- enableHiding: false,
},
],
- [ postStatuses ]
+ [ statuses, authors ]
+ );
+
+ const filters = useMemo( () => [
+ { id: 'search', type: 'search', name: __( 'Filter list' ) },
+ ] );
+
+ const trashPostAction = useTrashPostAction();
+ const editPostAction = useEditPostAction();
+ const actions = useMemo(
+ () => [
+ viewPostAction,
+ trashPostAction,
+ editPostAction,
+ postRevisionsAction,
+ ],
+ [ trashPostAction, editPostAction ]
+ );
+ const onChangeView = useCallback(
+ ( viewUpdater ) => {
+ let updatedView =
+ typeof viewUpdater === 'function'
+ ? viewUpdater( view )
+ : viewUpdater;
+ if ( updatedView.type !== view.type ) {
+ updatedView = {
+ ...updatedView,
+ layout: {
+ ...defaultConfigPerViewType[ updatedView.type ],
+ },
+ };
+ }
+
+ setView( updatedView );
+ },
+ [ view, setView ]
);
// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
@@ -165,29 +248,13 @@ export default function PagePages() {
{
- setGlobalFilter( value );
- setPagination( { pageIndex: 0, pageSize } );
- },
- // TODO: check these callbacks and maybe reset the query when needed...
- onPaginationChange: setPagination,
- meta: { resetQuery: setResetQuery },
- } }
+ view={ view }
+ onChangeView={ onChangeView }
/>
);
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
new file mode 100644
index 00000000000000..fde960ca1a72ca
--- /dev/null
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -0,0 +1,3 @@
+.edit-site-page-pages__featured-image {
+ border-radius: $radius-block-ui;
+}
diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
new file mode 100644
index 00000000000000..0a9a36d93d0099
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ MenuItem,
+ __experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function DeleteCategoryMenuItem( { category, onClose } ) {
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
+ const history = useHistory();
+
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ const { deleteEntityRecord, invalidateResolution } =
+ useDispatch( coreStore );
+
+ const onDelete = async () => {
+ try {
+ await deleteEntityRecord(
+ 'taxonomy',
+ 'wp_pattern_category',
+ category.id,
+ { force: true },
+ { throwOnError: true }
+ );
+
+ // Prevent the need to refresh the page to get up-to-date categories
+ // and pattern categorization.
+ invalidateResolution( 'getUserPatternCategories' );
+ invalidateResolution( 'getEntityRecords', [
+ 'postType',
+ PATTERN_TYPES.user,
+ { per_page: -1 },
+ ] );
+
+ createSuccessNotice(
+ sprintf(
+ /* translators: The pattern category's name */
+ __( '"%s" deleted.' ),
+ category.label
+ ),
+ { type: 'snackbar', id: 'pattern-category-delete' }
+ );
+
+ onClose?.();
+ history.push( {
+ path: `/patterns`,
+ categoryType: PATTERN_TYPES.theme,
+ categoryId: PATTERN_DEFAULT_CATEGORY,
+ } );
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __(
+ 'An error occurred while deleting the pattern category.'
+ );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ id: 'pattern-category-delete',
+ } );
+ }
+ };
+
+ return (
+ <>
+
+ setIsModalOpen( false ) }
+ confirmButtonText={ __( 'Delete' ) }
+ className="edit-site-patterns__delete-modal"
+ >
+ { sprintf(
+ // translators: %s: The pattern category's name.
+ __(
+ 'Are you sure you want to delete the category "%s"? The patterns will not be deleted.'
+ ),
+ decodeEntities( category.label )
+ ) }
+
+
+ );
+}
diff --git a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
index a882de95bdaebe..118c954a851f3f 100644
--- a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
+++ b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
@@ -2,217 +2,104 @@
* WordPress dependencies
*/
import { MenuItem } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
-import {
- TEMPLATE_PART_POST_TYPE,
- PATTERN_TYPES,
- PATTERN_SYNC_TYPES,
-} from '../../utils/constants';
-import {
- useExistingTemplateParts,
- getUniqueTemplatePartTitle,
- getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
import { unlock } from '../../lock-unlock';
-import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import CreateTemplatePartModal from '../create-template-part-modal';
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
const { useHistory } = unlock( routerPrivateApis );
-function getPatternMeta( item ) {
- if ( item.type === PATTERN_TYPES.theme ) {
- return { wp_pattern_sync_status: PATTERN_SYNC_TYPES.unsynced };
- }
-
- const syncStatus = item.patternBlock.wp_pattern_sync_status;
- const isUnsynced = syncStatus === PATTERN_SYNC_TYPES.unsynced;
-
- return {
- ...item.patternBlock.meta,
- wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
- };
-}
-
export default function DuplicateMenuItem( {
categoryId,
item,
label = __( 'Duplicate' ),
onClose,
} ) {
- const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
- const { createErrorNotice, createSuccessNotice } =
- useDispatch( noticesStore );
-
+ const { createSuccessNotice } = useDispatch( noticesStore );
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
const history = useHistory();
- const existingTemplateParts = useExistingTemplateParts();
- const { patternCategories } = usePatternCategories();
- async function createTemplatePart() {
- try {
- const copiedTitle = sprintf(
- /* translators: %s: Existing template part title */
- __( '%s (Copy)' ),
- item.title
- );
- const title = getUniqueTemplatePartTitle(
- copiedTitle,
- existingTemplateParts
- );
- const slug = getCleanTemplatePartSlug( title );
- const { area, content } = item.templatePart;
-
- const result = await saveEntityRecord(
- 'postType',
- TEMPLATE_PART_POST_TYPE,
- { slug, title, content, area },
- { throwOnError: true }
- );
-
- createSuccessNotice(
- sprintf(
- // translators: %s: The new template part's title e.g. 'Call to action (copy)'.
- __( '"%s" duplicated.' ),
- item.title
- ),
- {
- type: 'snackbar',
- id: 'edit-site-patterns-success',
- }
- );
+ const closeModal = () => setIsModalOpen( false );
- history.push( {
- postType: TEMPLATE_PART_POST_TYPE,
- postId: result?.id,
- categoryType: TEMPLATE_PART_POST_TYPE,
- categoryId,
- } );
+ const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+ const isThemePattern = item.type === PATTERN_TYPES.theme;
- onClose();
- } catch ( error ) {
- const errorMessage =
- error.message && error.code !== 'unknown_error'
- ? error.message
- : __(
- 'An error occurred while creating the template part.'
- );
-
- createErrorNotice( errorMessage, {
+ async function onTemplatePartSuccess( templatePart ) {
+ createSuccessNotice(
+ sprintf(
+ // translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+ __( '"%s" duplicated.' ),
+ item.title
+ ),
+ {
type: 'snackbar',
- id: 'edit-site-patterns-error',
- } );
- onClose();
- }
- }
-
- async function findOrCreateTerm( term ) {
- try {
- const newTerm = await saveEntityRecord(
- 'taxonomy',
- 'wp_pattern_category',
- {
- name: term.label,
- slug: term.name,
- description: term.description,
- },
- {
- throwOnError: true,
- }
- );
- invalidateResolution( 'getUserPatternCategories' );
- return newTerm.id;
- } catch ( error ) {
- if ( error.code !== 'term_exists' ) {
- throw error;
+ id: 'edit-site-patterns-success',
}
+ );
- return error.data.term_id;
- }
- }
-
- async function getCategories( categories ) {
- const terms = categories.map( ( category ) => {
- const fullCategory = patternCategories.find(
- ( cat ) => cat.name === category
- );
- if ( fullCategory.id ) {
- return fullCategory.id;
- }
- return findOrCreateTerm( fullCategory );
+ history.push( {
+ postType: TEMPLATE_PART_POST_TYPE,
+ postId: templatePart?.id,
+ categoryType: TEMPLATE_PART_POST_TYPE,
+ categoryId,
} );
- return Promise.all( terms );
+ onClose();
}
- async function createPattern() {
- try {
- const isThemePattern = item.type === PATTERN_TYPES.theme;
- const title = sprintf(
- /* translators: %s: Existing pattern title */
- __( '%s (Copy)' ),
- item.title || item.name
- );
- const categories = await getCategories( item.categories || [] );
-
- const result = await saveEntityRecord(
- 'postType',
- PATTERN_TYPES.user,
- {
- content: isThemePattern
- ? item.content
- : item.patternBlock.content,
- meta: getPatternMeta( item ),
- status: 'publish',
- title,
- wp_pattern_category: categories,
- },
- { throwOnError: true }
- );
-
- createSuccessNotice(
- sprintf(
- // translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
- __( '"%s" duplicated.' ),
- item.title || item.name
- ),
- {
- type: 'snackbar',
- id: 'edit-site-patterns-success',
- }
- );
-
- history.push( {
- categoryType: PATTERN_TYPES.theme,
- categoryId,
- postType: PATTERN_TYPES.user,
- postId: result?.id,
- } );
-
- onClose();
- } catch ( error ) {
- const errorMessage =
- error.message && error.code !== 'unknown_error'
- ? error.message
- : __( 'An error occurred while creating the pattern.' );
+ function onPatternSuccess( { pattern } ) {
+ history.push( {
+ categoryType: PATTERN_TYPES.theme,
+ categoryId,
+ postType: PATTERN_TYPES.user,
+ postId: pattern.id,
+ } );
- createErrorNotice( errorMessage, {
- type: 'snackbar',
- id: 'edit-site-patterns-error',
- } );
- onClose();
- }
+ onClose();
}
- const createItem =
- item.type === TEMPLATE_PART_POST_TYPE
- ? createTemplatePart
- : createPattern;
-
- return ;
+ return (
+ <>
+
+ { isModalOpen && ! isTemplatePart && (
+
-
- { title }
-
+
+
+ { title }
+
+ { !! patternCategory?.id && (
+
+ { ( { onClose } ) => (
+
+
+ ) }
+
+ ) }
+
{ description ? (
{ description }
diff --git a/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js b/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js
new file mode 100644
index 00000000000000..97e7de069687a5
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { RenamePatternCategoryModal } = unlock( patternsPrivateApis );
+
+export default function RenameCategoryMenuItem( { category, onClose } ) {
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+ // User created pattern categories have their properties updated when
+ // retrieved via `getUserPatternCategories`. The rename modal expects an
+ // object that will match the pattern category entity.
+ const normalizedCategory = {
+ id: category.id,
+ slug: category.slug,
+ name: category.label,
+ };
+
+ return (
+ <>
+
+ { isModalOpen && (
+ {
+ setIsModalOpen( false );
+ onClose();
+ } }
+ overlayClassName="edit-site-list__rename-modal"
+ />
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/page-patterns/rename-menu-item.js b/packages/edit-site/src/components/page-patterns/rename-menu-item.js
index 5792454a44aa8a..8b1d6771c2e90e 100644
--- a/packages/edit-site/src/components/page-patterns/rename-menu-item.js
+++ b/packages/edit-site/src/components/page-patterns/rename-menu-item.js
@@ -61,9 +61,9 @@ export default function RenameMenuItem( { item, onClose } ) {
const fallbackErrorMessage =
item.type === TEMPLATE_PART_POST_TYPE
? __(
- 'An error occurred while reverting the template part.'
+ 'An error occurred while renaming the template part.'
)
- : __( 'An error occurred while reverting the pattern.' );
+ : __( 'An error occurred while renaming the pattern.' );
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 4b4d7bb9059d47..d02b82ff2560d0 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -101,6 +101,10 @@
background: $gray-900;
padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
z-index: z-index(".edit-site-patterns__header");
+
+ .edit-site-patterns__button {
+ color: $gray-600;
+ }
}
.edit-site-patterns__section {
@@ -218,3 +222,7 @@
.edit-site-patterns__no-results {
color: $gray-600;
}
+
+.edit-site-patterns__delete-modal {
+ width: $modal-width-small;
+}
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index 6504b6f59684c6..fde4eaadb5dc05 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -195,6 +195,11 @@ const patternBlockToPattern = ( patternBlock, categories ) => ( {
: patternCategoryId
),
} ),
+ termLabels: patternBlock.wp_pattern_category.map( ( patternCategoryId ) =>
+ categories?.get( patternCategoryId )
+ ? categories.get( patternCategoryId ).label
+ : patternCategoryId
+ ),
id: patternBlock.id,
name: patternBlock.slug,
syncStatus: patternBlock.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js
new file mode 100644
index 00000000000000..8de13e9cf39479
--- /dev/null
+++ b/packages/edit-site/src/components/pattern-modal/duplicate.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { getQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_MODALS } from './';
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function PatternDuplicateModal() {
+ const { record } = useEditedEntityRecord();
+ const { categoryType, categoryId } = getQueryArgs( window.location.href );
+ const { closeModal } = useDispatch( interfaceStore );
+ const history = useHistory();
+
+ const isActive = useSelect( ( select ) =>
+ select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
+ );
+
+ if ( ! isActive ) {
+ return null;
+ }
+
+ function onSuccess( { pattern: newPattern } ) {
+ history.push( {
+ categoryType,
+ categoryId,
+ postType: PATTERN_TYPES.user,
+ postId: newPattern.id,
+ } );
+
+ closeModal();
+ }
+
+ return (
+ {
@@ -118,6 +119,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
userCanCreatePages: canUser( 'create', 'pages' ),
pageOnFront: siteSettings?.page_on_front,
+ pageForPosts: siteSettings?.page_for_posts,
postType: getCurrentPostType(),
userPatternCategories: getUserPatternCategories(),
};
@@ -218,6 +220,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
__experimentalCreatePageEntity: createPageEntity,
__experimentalUserCanCreatePages: userCanCreatePages,
pageOnFront,
+ pageForPosts,
__experimentalPreferPatternsOnRoot: hasTemplate,
} ),
[
@@ -233,6 +236,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
createPageEntity,
userCanCreatePages,
pageOnFront,
+ pageForPosts,
]
);
}
diff --git a/packages/editor/src/lock-unlock.js b/packages/editor/src/lock-unlock.js
index 5a36d0cd752f40..12df6f4711b23e 100644
--- a/packages/editor/src/lock-unlock.js
+++ b/packages/editor/src/lock-unlock.js
@@ -4,6 +4,6 @@
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/editor'
);
diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
index 5f9a33b2479d6a..b842450b733b38 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -33,6 +33,7 @@ const postTypeEntity = {
item_updated: 'Updated Post',
item_published: 'Post published',
item_reverted_to_draft: 'Post reverted to draft.',
+ item_trashed: 'Post trashed.',
},
};
@@ -286,7 +287,12 @@ describe( 'Post actions', () => {
// Check that there are no notices.
const notices = registry.select( noticesStore ).getNotices();
- expect( notices ).toEqual( [] );
+ expect( notices ).toMatchObject( [
+ {
+ status: 'success',
+ content: 'Post trashed.',
+ },
+ ] );
// Check the new status.
const { status } = registry.select( editorStore ).getCurrentPost();
diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js
index e7bb29741ffc62..58fc9ca0d747eb 100644
--- a/packages/editor/src/store/utils/notice-builder.js
+++ b/packages/editor/src/store/utils/notice-builder.js
@@ -23,21 +23,21 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
return [];
}
- // No notice is shown after trashing a post
- if ( post.status === 'trash' && previousPost.status !== 'trash' ) {
- return [];
- }
-
const publishStatus = [ 'publish', 'private', 'future' ];
const isPublished = publishStatus.includes( previousPost.status );
const willPublish = publishStatus.includes( post.status );
+ const willTrash =
+ post.status === 'trash' && previousPost.status !== 'trash';
let noticeMessage;
let shouldShowLink = postType?.viewable ?? false;
let isDraft;
// Always should a notice, which will be spoken for accessibility.
- if ( ! isPublished && ! willPublish ) {
+ if ( willTrash ) {
+ noticeMessage = postType.labels.item_trashed;
+ shouldShowLink = false;
+ } else if ( ! isPublished && ! willPublish ) {
// If saving a non-published post, don't show notice.
noticeMessage = __( 'Draft saved.' );
isDraft = true;
diff --git a/packages/editor/src/store/utils/test/notice-builder.js b/packages/editor/src/store/utils/test/notice-builder.js
index 75fe7d675fc995..e66a96259680f7 100644
--- a/packages/editor/src/store/utils/test/notice-builder.js
+++ b/packages/editor/src/store/utils/test/notice-builder.js
@@ -17,6 +17,7 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
item_scheduled: 'scheduled',
item_updated: 'updated',
view_item: 'view',
+ item_trashed: 'trash',
},
viewable: false,
};
@@ -74,7 +75,11 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
},
],
],
- [ 'when post will be trashed', [ 'publish', 'trash', true ], [] ],
+ [
+ 'when post will be trashed',
+ [ 'publish', 'trash', true ],
+ [ 'trash', defaultExpectedAction ],
+ ],
].forEach(
( [
description,
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index bc3f9d8359b2cc..bbb78076033ee4 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 5.21.0 (2023-10-18)
+
## 5.20.0 (2023-10-05)
## Breaking Changes
diff --git a/packages/element/package.json b/packages/element/package.json
index 19b9a99d3ba478..ccf34057811503 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/element",
- "version": "5.20.0",
+ "version": "5.21.0",
"description": "Element React module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 8063cfe2a3814f..9b775dc4f70031 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,17 @@
## Unreleased
+### Enhancement
+
+- `wp-env` now works offline after the environment has been created. Note that many `wp-env` configuration changes involve internet connectivity and may not work in offline mode. [#53547](https://github.com/WordPress/gutenberg/pull/53547)
+
+## 8.10.0 (2023-10-18)
+
+### Bug Fix
+
+- Corrected `PATH` to include the host user's Composer bin directory.
+- Replaced `yoast/phpunit-polyfills` with `phpunit/phpunit` to install the required PHPUnit version, avoiding the need for project-specific polyfills.
+
## 8.9.0 (2023-10-05)
## 8.8.0 (2023-09-20)
diff --git a/packages/env/lib/cache.js b/packages/env/lib/cache.js
index 187a8a24d030ae..98eac693b3420e 100644
--- a/packages/env/lib/cache.js
+++ b/packages/env/lib/cache.js
@@ -40,6 +40,9 @@ async function didCacheChange( key, value, options ) {
* @param {WPEnvCacheOptions} options Parsing options
*/
async function setCache( key, value, options ) {
+ // Make sure the cache directory exists.
+ await fs.mkdir( options.workDirectoryPath, { recursive: true } );
+
const existingCache = await getCacheFile( options );
existingCache[ key ] = value;
diff --git a/packages/env/lib/commands/start.js b/packages/env/lib/commands/start.js
index fed05e4f3d16fa..2765e9c4e31984 100644
--- a/packages/env/lib/commands/start.js
+++ b/packages/env/lib/commands/start.js
@@ -28,6 +28,7 @@ const {
configureWordPress,
setupWordPressDirectories,
readWordPressVersion,
+ canAccessWPORG,
} = require( '../wordpress' );
const { didCacheChange, setCache } = require( '../cache' );
const md5 = require( '../md5' );
@@ -77,16 +78,24 @@ module.exports = async function start( {
const configHash = md5( config );
const { workDirectoryPath, dockerComposeConfigPath } = config;
const shouldConfigureWp =
- update ||
- ( await didCacheChange( CONFIG_CACHE_KEY, configHash, {
- workDirectoryPath,
- } ) );
+ ( update ||
+ ( await didCacheChange( CONFIG_CACHE_KEY, configHash, {
+ workDirectoryPath,
+ } ) ) ) &&
+ // Don't reconfigure everything when we can't connect to the internet because
+ // the majority of update tasks involve connecting to the internet. (Such
+ // as downloading sources and pulling docker images.)
+ ( await canAccessWPORG() );
const dockerComposeConfig = {
config: dockerComposeConfigPath,
log: config.debug,
};
+ if ( ! ( await canAccessWPORG() ) ) {
+ spinner.info( 'wp-env is offline' );
+ }
+
/**
* If the Docker image is already running and the `wp-env` files have been
* deleted, the start command will not complete successfully. Stopping
diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js
index 743db978963443..3f69bb78b81f26 100644
--- a/packages/env/lib/config/parse-config.js
+++ b/packages/env/lib/config/parse-config.js
@@ -534,7 +534,7 @@ async function parseEnvironmentConfig(
async function parseCoreSource( coreSource, options ) {
// An empty source means we should use the latest version of WordPress.
if ( ! coreSource ) {
- const wpVersion = await getLatestWordPressVersion();
+ const wpVersion = await getLatestWordPressVersion( options );
if ( ! wpVersion ) {
throw new ValidationError(
'Could not find the latest WordPress version. There may be a network issue.'
diff --git a/packages/env/lib/config/test/config-integration.js b/packages/env/lib/config/test/config-integration.js
index 8d3a1a880adac7..a6728f91200f11 100644
--- a/packages/env/lib/config/test/config-integration.js
+++ b/packages/env/lib/config/test/config-integration.js
@@ -15,6 +15,8 @@ jest.mock( 'fs', () => ( {
promises: {
readFile: jest.fn(),
stat: jest.fn().mockResolvedValue( true ),
+ mkdir: jest.fn(),
+ writeFile: jest.fn(),
},
} ) );
diff --git a/packages/env/lib/init-config.js b/packages/env/lib/init-config.js
index efde002dc58389..318bcae151b296 100644
--- a/packages/env/lib/init-config.js
+++ b/packages/env/lib/init-config.js
@@ -248,8 +248,8 @@ RUN rm /tmp/composer-setup.php`;
// Make sure to do this as the user and ensure the binaries are available in the $PATH.
dockerFileContent += `
USER $HOST_UID:$HOST_GID
-ENV PATH="\${PATH}:~/.composer/vendor/bin"
-RUN composer global require --dev yoast/phpunit-polyfills:"^1.0"
+ENV PATH="\${PATH}:/home/$HOST_USERNAME/.composer/vendor/bin"
+RUN composer global require --dev phpunit/phpunit:"^5.7.21 || ^6.0 || ^7.0 || ^8.0 || ^9.0 || ^10.0"
USER root`;
return dockerFileContent;
diff --git a/packages/env/lib/test/cache.js b/packages/env/lib/test/cache.js
index 63da7ec47d70bc..f73222139d8b1a 100644
--- a/packages/env/lib/test/cache.js
+++ b/packages/env/lib/test/cache.js
@@ -18,6 +18,7 @@ jest.mock( 'fs', () => ( {
promises: {
readFile: jest.fn(),
writeFile: jest.fn(),
+ mkdir: jest.fn(),
},
} ) );
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index f238288498cf54..e8c20aa70f2158 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -7,12 +7,18 @@ const util = require( 'util' );
const fs = require( 'fs' ).promises;
const path = require( 'path' );
const got = require( 'got' );
+const dns = require( 'dns' ).promises;
/**
* Promisified dependencies
*/
const copyDir = util.promisify( require( 'copy-dir' ) );
+/**
+ * Internal dependencies
+ */
+const { getCache, setCache } = require( './cache' );
+
/**
* @typedef {import('./config').WPConfig} WPConfig
* @typedef {import('./config').WPEnvironmentConfig} WPEnvironmentConfig
@@ -243,19 +249,54 @@ async function readWordPressVersion( coreSource, spinner, debug ) {
return versionMatch[ 1 ];
}
+/**
+ * Basically a quick check to see if we can connect to the internet.
+ *
+ * @return {boolean} True if we can connect to WordPress.org, false otherwise.
+ */
+let IS_OFFLINE;
+async function canAccessWPORG() {
+ // Avoid situations where some parts of the code think we're offline and others don't.
+ if ( IS_OFFLINE !== undefined ) {
+ return IS_OFFLINE;
+ }
+ IS_OFFLINE = !! ( await dns.resolve( 'WordPress.org' ).catch( () => {} ) );
+ return IS_OFFLINE;
+}
+
/**
* Returns the latest stable version of WordPress by requesting the stable-check
* endpoint on WordPress.org.
*
+ * @param {Object} options an object with cacheDirectoryPath set to the path to the cache directory in ~/.wp-env.
* @return {string} The latest stable version of WordPress, like "6.0.1"
*/
let CACHED_WP_VERSION;
-async function getLatestWordPressVersion() {
+async function getLatestWordPressVersion( options ) {
// Avoid extra network requests.
if ( CACHED_WP_VERSION ) {
return CACHED_WP_VERSION;
}
+ const cacheOptions = {
+ workDirectoryPath: options.cacheDirectoryPath,
+ };
+
+ // When we can't connect to the internet, we don't want to break wp-env or
+ // wait for the stable-check result to timeout.
+ if ( ! ( await canAccessWPORG() ) ) {
+ const latestVersion = await getCache(
+ 'latestWordPressVersion',
+ cacheOptions
+ );
+ if ( ! latestVersion ) {
+ throw new Error(
+ 'Could not find the current WordPress version in the cache and the network is not available.'
+ );
+ }
+ return latestVersion;
+ }
+
const versions = await got(
'https://api.wordpress.org/core/stable-check/1.0/'
).json();
@@ -263,6 +304,7 @@ async function getLatestWordPressVersion() {
for ( const [ version, status ] of Object.entries( versions ) ) {
if ( status === 'latest' ) {
CACHED_WP_VERSION = version;
+ await setCache( 'latestWordPressVersion', version, cacheOptions );
return version;
}
}
@@ -275,5 +317,6 @@ module.exports = {
resetDatabase,
setupWordPressDirectories,
readWordPressVersion,
+ canAccessWPORG,
getLatestWordPressVersion,
};
diff --git a/packages/env/package.json b/packages/env/package.json
index 16726a6a6d3f07..94a7a3271666c9 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/env",
- "version": "8.9.0",
+ "version": "8.10.0",
"description": "A zero-config, self contained local WordPress environment for development and testing.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index e34d31fe278f03..5a856c31c8d54f 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 2.44.0 (2023-10-18)
+
## 2.43.0 (2023-10-05)
## 2.42.0 (2023-09-20)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 8831daefe96590..f5142c64b60cfb 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/escape-html",
- "version": "2.43.0",
+ "version": "2.44.0",
"description": "Escape HTML utils.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 475d8cd678fe5c..7484a2685d4705 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 17.1.0 (2023-10-18)
+
## 17.0.0 (2023-10-05)
### Breaking Changes
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index b1a1bc4fd50dd4..c90f8890e88e3e 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/eslint-plugin",
- "version": "17.0.0",
+ "version": "17.1.0",
"description": "ESLint plugin for WordPress development.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index 22f117bcce41ab..29745bb1a7b657 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/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/format-library/package.json b/packages/format-library/package.json
index 16b2a79841f241..0c2cece9b54614 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/format-library",
- "version": "4.20.0",
+ "version": "4.21.0",
"description": "Format library for the WordPress editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
index 1596da055cc402..ab287daff19a73 100644
--- a/packages/format-library/src/link/index.js
+++ b/packages/format-library/src/link/index.js
@@ -9,6 +9,8 @@ import {
removeFormat,
slice,
isCollapsed,
+ insert,
+ create,
} from '@wordpress/rich-text';
import { isURL, isEmail } from '@wordpress/url';
import {
@@ -135,28 +137,39 @@ export const link = {
rel: 'rel',
},
__unstablePasteRule( value, { html, plainText } ) {
- if ( isCollapsed( value ) ) {
- return value;
- }
-
const pastedText = ( html || plainText )
.replace( /<[^>]+>/g, '' )
.trim();
// A URL was pasted, turn the selection into a link.
- if ( ! isURL( pastedText ) ) {
+ // For the link pasting feature, allow only http(s) protocols.
+ if ( ! isURL( pastedText ) || ! /^https?:/.test( pastedText ) ) {
return value;
}
// Allows us to ask for this information when we get a report.
window.console.log( 'Created link:\n\n', pastedText );
- return applyFormat( value, {
+ const format = {
type: name,
attributes: {
url: decodeEntities( pastedText ),
},
- } );
+ };
+
+ if ( isCollapsed( value ) ) {
+ return insert(
+ value,
+ applyFormat(
+ create( { text: plainText } ),
+ format,
+ 0,
+ plainText.length
+ )
+ );
+ }
+
+ return applyFormat( value, format );
},
edit: Edit,
};
diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js
index a0545a3dbc2473..630431dc50fa0e 100644
--- a/packages/format-library/src/text-color/index.js
+++ b/packages/format-library/src/text-color/index.js
@@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useCallback, useMemo, useState } from '@wordpress/element';
-import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';
+import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
import {
Icon,
color as colorIcon,
@@ -61,8 +61,10 @@ function TextColorEdit( {
activeAttributes,
contentRef,
} ) {
- const allowCustomControl = useSetting( 'color.custom' );
- const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+ const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings(
+ 'color.custom',
+ 'color.palette'
+ );
const [ isAddingColor, setIsAddingColor ] = useState( false );
const enableIsAddingColor = useCallback(
() => setIsAddingColor( true ),
diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js
index 5f133383ae1d1d..21db4c2a444f30 100644
--- a/packages/format-library/src/text-color/index.native.js
+++ b/packages/format-library/src/text-color/index.native.js
@@ -8,7 +8,7 @@ import { StyleSheet, View } from 'react-native';
*/
import { __ } from '@wordpress/i18n';
import { useCallback, useMemo, useState } from '@wordpress/element';
-import { BlockControls, useSetting } from '@wordpress/block-editor';
+import { BlockControls, useSettings } from '@wordpress/block-editor';
import {
ToolbarGroup,
ToolbarButton,
@@ -72,7 +72,7 @@ function TextColorEdit( {
activeAttributes,
contentRef,
} ) {
- const allowCustomControl = useSetting( 'color.custom' );
+ const [ allowCustomControl ] = useSettings( 'color.custom' );
const colors = useMobileGlobalStylesColors();
const [ isAddingColor, setIsAddingColor ] = useState( false );
const enableIsAddingColor = useCallback(
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index 5ee87d1e838f68..2f682f638c4e10 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/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/hooks/package.json b/packages/hooks/package.json
index bddb68f0c3b980..f9f159078f333a 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/hooks",
- "version": "3.43.0",
+ "version": "3.44.0",
"description": "WordPress hooks library.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 66f8ead0568ca0..45c2b610588580 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/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/html-entities/package.json b/packages/html-entities/package.json
index fbf26cb35721c6..a9fe129374bc50 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/html-entities",
- "version": "3.43.0",
+ "version": "3.44.0",
"description": "HTML entity utilities for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 34582b8db13bcf..05565f79f1afbc 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/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/i18n/package.json b/packages/i18n/package.json
index c6c8d44d546048..ede1c8e8edd099 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/i18n",
- "version": "4.43.0",
+ "version": "4.44.0",
"description": "WordPress internationalization (i18n) library.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 873dc9db1b9ce1..f5c37c58b2e50f 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 9.35.0 (2023-10-18)
+
## 9.34.0 (2023-10-05)
## 9.33.0 (2023-09-20)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index c92b9b6651ec9d..6f6b05939dac58 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/icons",
- "version": "9.34.0",
+ "version": "9.35.0",
"description": "WordPress Icons package, based on dashicon.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/library/fullscreen.js b/packages/icons/src/library/fullscreen.js
index 8b11ddcac72175..11bef7aebd612d 100644
--- a/packages/icons/src/library/fullscreen.js
+++ b/packages/icons/src/library/fullscreen.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
const fullscreen = (
);
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 9227e028a8dfed..a7f3180b2172ab 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,12 @@
## Unreleased
+### Bug Fix
+
+- Update the title when using enhanced pagination. ([#55446](https://github.com/WordPress/gutenberg/pull/55446))
+
+## 2.5.0 (2023-10-18)
+
## 2.4.0 (2023-10-05)
## 2.3.0 (2023-09-20)
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index ca1b21eaf5a94f..2d7cdbeb8cbf22 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/interactivity",
- "version": "2.4.0",
+ "version": "2.5.0",
"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity/src/router.js b/packages/interactivity/src/router.js
index ee9755126994e3..68d1bc677addf3 100644
--- a/packages/interactivity/src/router.js
+++ b/packages/interactivity/src/router.js
@@ -55,8 +55,8 @@ const regionsToVdom = ( dom ) => {
const id = region.getAttribute( attrName );
regions[ id ] = toVdom( region );
} );
-
- return { regions };
+ const title = dom.querySelector( 'title' )?.innerText;
+ return { regions, title };
};
// Prefetch a page. We store the promise to avoid triggering a second fetch for
@@ -76,6 +76,9 @@ const renderRegions = ( page ) => {
const fragment = getRegionRootFragment( region );
render( page.regions[ id ], fragment );
} );
+ if ( page.title ) {
+ document.title = page.title;
+ }
};
// Variable to store the current navigation.
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 18b7c328bde76f..20d7270b6323fb 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/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/interface/package.json b/packages/interface/package.json
index 14b1a78544fc23..e365d892a170e4 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/interface",
- "version": "5.20.0",
+ "version": "5.21.0",
"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 2691f3474c80db..eec33c4ed28b68 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/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/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 6cb759793eb856..dc41cbd1668873 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/is-shallow-equal",
- "version": "4.43.0",
+ "version": "4.44.0",
"description": "Test for shallow equality between two objects or arrays.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 8ca23786462f5a..e80d21ea86faf2 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/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/jest-console/package.json b/packages/jest-console/package.json
index 5ada69d020a63e..ff716e24d59f61 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/jest-console",
- "version": "7.14.0",
+ "version": "7.15.0",
"description": "Custom Jest matchers for the Console object.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index e9cda8ecababd4..f80a3d824e44b7 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 11.15.0 (2023-10-18)
+
## 11.14.0 (2023-10-05)
## 11.13.0 (2023-09-20)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index dc3606b996b532..547578e3c6a2bb 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/jest-preset-default",
- "version": "11.14.0",
+ "version": "11.15.0",
"description": "Default Jest preset for WordPress development.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 53f56ab7156a4c..56d6d4113c999f 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 6.15.0 (2023-10-18)
+
## 6.14.0 (2023-10-05)
## 6.13.0 (2023-09-20)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index c164270afe0e73..28cad81adfb335 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/jest-puppeteer-axe",
- "version": "6.14.0",
+ "version": "6.15.0",
"description": "Axe API integration with Jest and Puppeteer.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index 1e53f309eae21f..93542a6b9ec33c 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/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/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index 2eb12711e6f44f..33f9d7fe6ba276 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/keyboard-shortcuts",
- "version": "4.20.0",
+ "version": "4.21.0",
"description": "Handling keyboard shortcuts.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index c2497e97c7561f..7ae7d2b972a49b 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/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/keycodes/package.json b/packages/keycodes/package.json
index 08377f108fe428..9ca4af5ed7d556 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/keycodes",
- "version": "3.43.0",
+ "version": "3.44.0",
"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index cae8e207305be2..e48b809b048c23 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 1.31.0 (2023-10-18)
+
## 1.30.0 (2023-10-05)
## 1.29.0 (2023-09-20)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 6c122e8e2d524e..9aec1f001e8de4 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/lazy-import",
- "version": "1.30.0",
+ "version": "1.31.0",
"description": "Lazily import a module, installing it automatically if missing.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index a6bc58d772a370..836d352a85d911 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/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/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 618a441ff1f24c..0083572ab4be4c 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/list-reusable-blocks",
- "version": "4.20.0",
+ "version": "4.21.0",
"description": "Adding Export/Import support to the reusable blocks listing.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 2866574e9507d7..3d40b357ca8825 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.35.0 (2023-10-18)
+
## 4.34.0 (2023-10-05)
## 4.33.0 (2023-09-20)
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index dee1bb52994ac2..1bf19da846ae0f 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/media-utils",
- "version": "4.34.0",
+ "version": "4.35.0",
"description": "WordPress Media Upload Utils.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 652caa0993f386..21aa2efb845760 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.12.0 (2023-10-18)
+
## 4.11.0 (2023-10-05)
## 4.10.0 (2023-09-20)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 29cb73f44b08f3..4f5185a9c59172 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/notices",
- "version": "4.11.0",
+ "version": "4.12.0",
"description": "State management for notices.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index ebcb1010b8b8ad..869a34d29013fa 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.29.0 (2023-10-18)
+
## 4.28.0 (2023-10-05)
## 4.27.0 (2023-09-20)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 418874b3a1dea6..06cdcb200888d9 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/npm-package-json-lint-config",
- "version": "4.28.0",
+ "version": "4.29.0",
"description": "WordPress npm-package-json-lint shareable configuration.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index f9fd338ed33934..9b6ceb7446b9e3 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 8.6.0 (2023-10-18)
+
## 8.5.0 (2023-10-05)
## 8.4.0 (2023-09-20)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index 7a1540ab714cbd..64625113cd82dc 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/nux",
- "version": "8.5.0",
+ "version": "8.6.0",
"description": "NUX (New User eXperience) module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index 29a743a5316de3..287c550bb09c1b 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -3,7 +3,9 @@
exports[`DotTip should render correctly 1`] = `
This is Gutenberg.
-" -`; - -exports[`Links can be created by selecting text and clicking Link 1`] = ` -" -This is Gutenberg
-" -`; - -exports[`Links can be created instantly when a URL is selected 1`] = ` -" -This is Gutenberg: https://wordpress.org/gutenberg
-" -`; - -exports[`Links can be created without any text selected 1`] = ` -" -This is Gutenberg: https://wordpress.org/gutenberg
-" -`; - -exports[`Links can be edited 1`] = ` -" -This is Gutenberg
-" -`; - -exports[`Links can be edited with collapsed selection 1`] = ` -" -This is Gutenberg
-" -`; - -exports[`Links can be modified using the keyboard once a link has been set 1`] = ` -" -This is Gutenberg.
-" -`; - -exports[`Links can be removed 1`] = ` -" -This is Gutenberg
-" -`; diff --git a/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap b/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap deleted file mode 100644 index 03bd1c7ddd1d62..00000000000000 --- a/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RichText should remove highlighting element 1`] = ` -" -1
-" -`; - -exports[`RichText should remove highlighting element 2`] = ` -" -1
-" -`; diff --git a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js b/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js deleted file mode 100644 index ba6a8bda061806..00000000000000 --- a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createNewPost, - getEditedPostContent, - clickBlockAppender, - pressKeyWithModifier, - clickBlockToolbarButton, -} from '@wordpress/e2e-test-utils'; - -describe( 'RichText', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'should remove highlighting element', async () => { - await clickBlockAppender(); - - // Add text and select to color. - await page.keyboard.type( '1' ); - await pressKeyWithModifier( 'primary', 'a' ); - await clickBlockToolbarButton( 'More' ); - - const button = await page.waitForXPath( - `//button[text()='Highlight']` - ); - // Clicks may fail if the button is out of view. Assure it is before click. - await button.evaluate( ( element ) => element.scrollIntoView() ); - await button.click(); - - // Use a color name with multiple words to ensure that it becomes - // active. Previously we had a broken regular expression. - const option = await page.waitForSelector( - '[aria-label="Color: Cyan bluish gray"]' - ); - - await option.click(); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - - await option.click(); - - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} ); diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js deleted file mode 100644 index 719d00afe076bb..00000000000000 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ /dev/null @@ -1,916 +0,0 @@ -/** - * WordPress dependencies - */ -import { - clickBlockAppender, - clickBlockToolbarButton, - getEditedPostContent, - createNewPost, - pressKeyWithModifier, - showBlockToolbar, - pressKeyTimes, - canvas, -} from '@wordpress/e2e-test-utils'; - -describe( 'Links', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - const waitForURLFieldAutoFocus = async () => { - await page.waitForFunction( () => { - const input = document.querySelector( - '.block-editor-url-input__input' - ); - if ( input ) { - input.focus(); - return true; - } - return false; - } ); - }; - - it( 'will use Post title as link text if link to existing post is created without any text selected', async () => { - const titleText = 'Post to create a link to'; - await createPostWithTitle( titleText ); - - await createNewPost(); - await clickBlockAppender(); - - // Now in a new post and try to create a link from an autocomplete suggestion using the keyboard. - await page.keyboard.type( 'Here comes a link: ' ); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Trigger the autocomplete suggestion list and select the first suggestion. - await page.keyboard.type( titleText.substr( 0, titleText.length - 2 ) ); - await page.waitForSelector( '.block-editor-link-control__search-item' ); - await page.keyboard.press( 'ArrowDown' ); - - await page.keyboard.press( 'Enter' ); - - const actualText = await canvas().evaluate( - () => - document.querySelector( '.block-editor-rich-text__editable a' ) - .textContent - ); - expect( actualText ).toBe( titleText ); - } ); - - it( 'can be created by selecting text and clicking Link', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg' ); - - // Select some text. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Submit the link. - await page.keyboard.press( 'Enter' ); - - // The link should have been inserted. - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'will not automatically create a link if selected text is not a valid HTTP based URL', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This: is not a link' ); - - // Select some text. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - const urlInputValue = await page.evaluate( - () => - document.querySelector( '.block-editor-url-input__input' ).value - ); - - expect( urlInputValue ).toBe( '' ); - } ); - - it( 'can be created without any text selected', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg: ' ); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Press Enter to apply the link. - await page.keyboard.press( 'Enter' ); - - // A link with the URL as its text should have been inserted. - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'can be created instantly when a URL is selected', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( - 'This is Gutenberg: https://wordpress.org/gutenberg' - ); - - // Select the URL. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // A link with the selected URL as its href should have been inserted. - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'is not created when we click away from the link input', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg' ); - - // Select some text. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Click somewhere else - it doesn't really matter where. - await canvas().click( '.editor-post-title' ); - } ); - - const createAndReselectLink = async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg' ); - - // Select some text. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Click on the Submit button. - await page.keyboard.press( 'Enter' ); - - // Reselect the link. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - }; - - it( 'can be edited', async () => { - await createAndReselectLink(); - - // Click on the Edit button. - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Change the URL. - await page.keyboard.type( '/handbook' ); - - // Submit the link. - await page.keyboard.press( 'Enter' ); - - // The link should have been updated. - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'can be removed', async () => { - await createAndReselectLink(); - - // Click on the Unlink button - // await page.click( 'button[aria-label="Unlink"]' ); - - // Unlick via shortcut - // we do this to avoid an layout edge case whereby - // the rich link preview popover will obscure the block toolbar - // under very specific circumstances and screensizes. - await pressKeyWithModifier( 'primaryShift', 'K' ); - - // The link should have been removed. - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - const toggleFixedToolbar = async ( isFixed ) => { - await page.evaluate( ( _isFixed ) => { - const { select, dispatch } = wp.data; - const isCurrentlyFixed = - select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ); - if ( isCurrentlyFixed !== _isFixed ) { - dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' ); - } - }, isFixed ); - }; - - it( 'allows Left to be pressed during creation when the toolbar is fixed to top', async () => { - await toggleFixedToolbar( true ); - - await clickBlockAppender(); - await page.keyboard.type( 'Text' ); - await page.click( 'button[aria-label="Link"]' ); - - // Typing "left" should not close the dialog. - await page.keyboard.press( 'ArrowLeft' ); - let popover = await page.$( - '.components-popover__content .block-editor-link-control' - ); - expect( popover ).not.toBeNull(); - - // Escape should close the dialog still. - await page.keyboard.press( 'Escape' ); - popover = await page.$( - '.components-popover__content .block-editor-link-control' - ); - expect( popover ).toBeNull(); - } ); - - it( 'allows Left to be pressed during creation in "Docked Toolbar" mode', async () => { - await toggleFixedToolbar( false ); - - await clickBlockAppender(); - await page.keyboard.type( 'Text' ); - - await clickBlockToolbarButton( 'Link' ); - - // Typing "left" should not close the dialog. - await page.keyboard.press( 'ArrowLeft' ); - let popover = await page.$( - '.components-popover__content .block-editor-link-control' - ); - expect( popover ).not.toBeNull(); - - // Escape should close the dialog still. - await page.keyboard.press( 'Escape' ); - popover = await page.$( - '.components-popover__content .block-editor-link-control' - ); - expect( popover ).toBeNull(); - } ); - - it( 'can be edited with collapsed selection', async () => { - await createAndReselectLink(); - // Make a collapsed selection inside the link - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowRight' ); - await showBlockToolbar(); - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - await waitForURLFieldAutoFocus(); - await page.keyboard.type( '/handbook' ); - await page.keyboard.press( 'Enter' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - const createPostWithTitle = async ( titleText ) => { - await createNewPost(); - await canvas().type( '.editor-post-title__input', titleText ); - await page.click( '.editor-post-publish-panel__toggle' ); - - // Disable reason: Wait for the animation to complete, since otherwise the - // click attempt may occur at the wrong point. - // eslint-disable-next-line no-restricted-syntax - await page.waitForTimeout( 100 ); - - // Publish the post. - await page.click( '.editor-post-publish-button' ); - - // Return the URL of the new post. - await page.waitForSelector( - '.post-publish-panel__postpublish-post-address input' - ); - return page.evaluate( - () => - document.querySelector( - '.post-publish-panel__postpublish-post-address input' - ).value - ); - }; - - it( 'allows use of escape key to dismiss the url popover', async () => { - const titleText = 'Test post escape'; - await createPostWithTitle( titleText ); - - await createNewPost(); - await clickBlockAppender(); - - // Now in a new post and try to create a link from an autocomplete suggestion using the keyboard. - await page.keyboard.type( 'This is Gutenberg' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Trigger the autocomplete suggestion list and select the first suggestion. - await page.keyboard.type( titleText ); - await page.waitForSelector( '.block-editor-link-control__search-item' ); - await page.keyboard.press( 'ArrowDown' ); - - // Expect the escape key to dismiss the popover when the autocomplete suggestion list is open. - await page.keyboard.press( 'Escape' ); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - - // Confirm that selection is returned to where it was before launching - // the link editor, with "Gutenberg" as an uncollapsed selection. - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.type( '.' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Expect the escape key to dismiss the popover normally. - await page.keyboard.press( 'Escape' ); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Tab to the "Open in new tab" toggle. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - - // Expect the escape key to dismiss the popover normally. - await page.keyboard.press( 'Escape' ); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - } ); - - it( 'can be modified using the keyboard once a link has been set', async () => { - const URL = 'https://wordpress.org/gutenberg'; - - // Create a block with some text and format it as a link. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'primary', 'K' ); - await waitForURLFieldAutoFocus(); - await page.keyboard.type( URL ); - await page.keyboard.press( 'Enter' ); - - // Deselect the link text by moving the caret to the end of the line - // and the link popover should not be displayed. - await page.keyboard.press( 'End' ); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - - // Move the caret back into the link text and the link popover - // should be displayed. - await page.keyboard.press( 'ArrowLeft' ); - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Press Cmd+K to edit the link and the url-input should become - // focused with the value previously inserted. - await pressKeyWithModifier( 'primary', 'K' ); - await waitForURLFieldAutoFocus(); - const isInURLInput = await page.evaluate( - () => !! document.activeElement.closest( '.block-editor-url-input' ) - ); - expect( isInURLInput ).toBe( true ); - const activeElementValue = await page.evaluate( - () => document.activeElement.value - ); - expect( activeElementValue ).toBe( URL ); - - // Confirm that submitting the input without any changes keeps the same - // value and moves focus back to the paragraph. - await page.keyboard.press( 'Enter' ); - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.type( '.' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'adds an assertive message for screenreader users when an invalid link is set', async () => { - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg' ); - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await pressKeyWithModifier( 'primary', 'K' ); - await waitForURLFieldAutoFocus(); - await page.keyboard.type( 'http://#test.com' ); - await page.keyboard.press( 'Enter' ); - const assertiveContent = await page.evaluate( - () => document.querySelector( '#a11y-speak-assertive' ).textContent - ); - expect( assertiveContent.trim() ).toBe( - 'Warning: the link has been inserted but may have errors. Please test it.' - ); - } ); - - describe( 'Editing link text', () => { - it( 'should not display text input when initially creating the link', async () => { - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( 'This is Gutenberg: ' ); - - // Press Cmd+K to insert a link. - await pressKeyWithModifier( 'primary', 'K' ); - - const [ settingsToggle ] = await page.$x( - '//button[contains(text(), "Advanced")]' - ); - await settingsToggle.click(); - - const textInput = await page - .waitForXPath( - '//[contains(@class, "block-editor-link-control__search-input-wrapper")]//label[contains(text(), "Text")]', - { - timeout: 1000, - } - ) - .catch( () => false ); - - expect( textInput ).toBeFalsy(); - } ); - - it( 'should display text input when the link has a valid URL value', async () => { - await createAndReselectLink(); - - // Make a collapsed selection inside the link. This is used - // as a stress test to ensure we can find the link text from a - // collapsed RichTextValue that contains a link format. - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowRight' ); - - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - - await waitForURLFieldAutoFocus(); - - await pressKeyWithModifier( 'shift', 'Tab' ); - - // Tabbing should land us in the text input. - const { isTextInput, textValue } = await page.evaluate( () => { - const el = document.activeElement; - - return { - isTextInput: el.matches( 'input[type="text"]' ), - textValue: el.value, - }; - } ); - - // Let's check we've focused a text input. - expect( isTextInput ).toBe( true ); - - // Link was created on text value "Gutenberg". We expect - // the text input to reflect that value. - expect( textValue ).toBe( 'Gutenberg' ); - } ); - - it( 'should preserve trailing/leading whitespace from linked text in text input', async () => { - const textToSelect = ` spaces `; - const textWithWhitespace = `Text with leading and trailing${ textToSelect }`; - - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( textWithWhitespace ); - - // Use arrow keys to select only the text with the leading - // and trailing whitespace. - for ( let index = 0; index < textToSelect.length; index++ ) { - await pressKeyWithModifier( 'shift', 'ArrowLeft' ); - } - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Click on the Submit button. - await page.keyboard.press( 'Enter' ); - - // Reselect the link. - await page.keyboard.press( 'ArrowLeft' ); - - await showBlockToolbar(); - - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - - await editButton.click(); - - await waitForURLFieldAutoFocus(); - - // Tabbing backward should land us in the "Text" input. - await pressKeyWithModifier( 'shift', 'Tab' ); - - const textInputValue = await page.evaluate( - () => document.activeElement.value - ); - - expect( textInputValue ).toBe( textToSelect ); - } ); - - it( 'should allow for modification of link text via Link UI', async () => { - const originalLinkText = 'Gutenberg'; - const changedLinkText = - ' link text that was modified via the Link UI to include spaces '; - - await createAndReselectLink(); - - // Make a collapsed selection inside the link. This is used - // as a stress test to ensure we can find the link text from a - // collapsed RichTextValue that contains a link format. - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowRight' ); - - await showBlockToolbar(); - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - - await waitForURLFieldAutoFocus(); - - await pressKeyWithModifier( 'shift', 'Tab' ); - - const textInputValue = await page.evaluate( - () => document.activeElement.value - ); - - // At this point, we still expect the text input - // to reflect the original value with no modifications. - expect( textInputValue ).toBe( originalLinkText ); - - // Select all the link text in the input. - await pressKeyWithModifier( 'primary', 'a' ); - - // Modify the link text value. - await page.keyboard.type( changedLinkText ); - - // Submit the change. - await page.keyboard.press( 'Enter' ); - - // Check the created link reflects the link text. - const actualLinkText = await canvas().evaluate( - () => - document.querySelector( - '.block-editor-rich-text__editable a' - ).textContent - ); - expect( actualLinkText ).toBe( changedLinkText ); - } ); - - it( 'should display (capture the) text from the currently active link even if there is a rich text selection', async () => { - const originalLinkText = 'Gutenberg'; - - await createAndReselectLink(); - - // Make a collapsed selection inside the link in order - // to activate the Link UI. - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowRight' ); - - const [ editButton ] = await page.$x( - '//button[contains(@aria-label, "Edit")]' - ); - await editButton.click(); - await waitForURLFieldAutoFocus(); - - const [ settingsToggle ] = await page.$x( - '//button[contains(text(), "Advanced")]' - ); - await settingsToggle.click(); - - // Wait for settings to open. - await page.waitForXPath( `//label[text()='Open in new tab']` ); - - // Move focus back to RichText for the underlying link. - await pressKeyWithModifier( 'shift', 'Tab' ); - await pressKeyWithModifier( 'shift', 'Tab' ); - await pressKeyWithModifier( 'shift', 'Tab' ); - - // Make a selection within the RichText. - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - - // Move back to the text input. - await pressKeyTimes( 'Tab', 1 ); - - // Tabbing back should land us in the text input. - const textInputValue = await page.evaluate( - () => document.activeElement.value - ); - - // Making a selection within the link text whilst the Link UI - // is open should not alter the value in the Link UI's text - // input. It should remain as the full text of the currently - // focused link format. - expect( textInputValue ).toBe( originalLinkText ); - } ); - } ); - - describe( 'Disabling Link UI active state', () => { - it( 'should not show the Link UI when selection extends beyond link boundary', async () => { - const linkedText = `Gutenberg`; - const textBeyondLinkedText = ` and more text.`; - - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( - `This is ${ linkedText }${ textBeyondLinkedText }` - ); - - // Move cursor next to end of `linkedText` - for ( - let index = 0; - index < textBeyondLinkedText.length; - index++ - ) { - await page.keyboard.press( 'ArrowLeft' ); - } - - // Select the linkedText. - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - - // Update the link. - await page.keyboard.press( 'Enter' ); - - await page.keyboard.press( 'ArrowLeft' ); - await page.keyboard.press( 'ArrowLeft' ); - - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Make selection starting within the link and moving beyond boundary to the left. - for ( let index = 0; index < linkedText.length; index++ ) { - await pressKeyWithModifier( 'shift', 'ArrowLeft' ); - } - - // The Link UI should have disappeared (i.e. be inactive). - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - - // Cancel selection and move back within the Link. - await page.keyboard.press( 'ArrowRight' ); - - // We should see the Link UI displayed again. - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Make selection starting within the link and moving beyond boundary to the right. - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - - // The Link UI should have disappeared (i.e. be inactive). - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - } ); - - it( 'should not show the Link UI when selection extends into another link', async () => { - const linkedTextOne = `Gutenberg`; - const linkedTextTwo = `Block Editor`; - const linkOneURL = 'https://wordpress.org'; - const linkTwoURL = 'https://wordpress.org/gutenberg'; - - // Create a block with some text. - await clickBlockAppender(); - await page.keyboard.type( - `This is the ${ linkedTextOne }${ linkedTextTwo }` - ); - - // Select the linkedTextTwo. - for ( let index = 0; index < linkedTextTwo.length; index++ ) { - await pressKeyWithModifier( 'shift', 'ArrowLeft' ); - } - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( linkTwoURL ); - - // Update the link. - await page.keyboard.press( 'Enter' ); - - // Move cursor next to the **end** of `linkTextOne` - for ( let index = 0; index < linkedTextTwo.length + 2; index++ ) { - await page.keyboard.press( 'ArrowLeft' ); - } - - // Select `linkTextOne` - await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( linkOneURL ); - - // Update the link. - await page.keyboard.press( 'Enter' ); - - // Move cursor within `linkTextOne` - for ( let index = 0; index < 3; index++ ) { - await page.keyboard.press( 'ArrowLeft' ); - } - - // Link UI should activate for `linkTextOne` - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).not.toBeNull(); - - // Expand selection so that it overlaps with `linkTextTwo` - for ( let index = 0; index < 3; index++ ) { - await pressKeyWithModifier( 'shift', 'ArrowRight' ); - } - - // Link UI should be inactive. - expect( - await page.$( - '.components-popover__content .block-editor-link-control' - ) - ).toBeNull(); - } ); - - // Based on issue reported in https://github.com/WordPress/gutenberg/issues/41771/. - it( 'should correctly replace targetted links text within rich text value when multiple matching values exist', async () => { - // Create a block with some text. - await clickBlockAppender(); - - // Note the two instances of the string "a". - await page.keyboard.type( `a b c a` ); - - // Select the last "a" only. - await pressKeyWithModifier( 'shift', 'ArrowLeft' ); - - // Click on the Link button. - await page.click( 'button[aria-label="Link"]' ); - - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); - - // Type a URL. - await page.keyboard.type( 'www.wordpress.org' ); - - // Update the link. - await page.keyboard.press( 'Enter' ); - - await page.keyboard.press( 'ArrowLeft' ); - - // Move to "Edit" button in Link UI - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Enter' ); - - await waitForURLFieldAutoFocus(); - - // Move to "Text" field. - await pressKeyWithModifier( 'shift', 'Tab' ); - - // Delete existing value from "Text" field - await page.keyboard.press( 'Delete' ); - - // Change text to "z" - await page.keyboard.type( 'z' ); - - await page.keyboard.press( 'Enter' ); - - const richTextText = await canvas().evaluate( - () => - document.querySelector( - '.block-editor-rich-text__editable' - ).textContent - ); - // Check that the correct (i.e. last) instance of "a" was replaced with "z". - expect( richTextText ).toBe( 'a b c z' ); - - const richTextLink = await canvas().evaluate( - () => - document.querySelector( - '.block-editor-rich-text__editable a' - ).textContent - ); - // Check that the correct (i.e. last) instance of "a" was replaced with "z". - expect( richTextLink ).toBe( 'z' ); - } ); - } ); -} ); 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 2c8deedcccf77b..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.0", + "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/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss index c62e5fea93202d..e1b92c7c4da430 100644 --- a/packages/edit-post/src/components/block-manager/style.scss +++ b/packages/edit-post/src/components/block-manager/style.scss @@ -18,12 +18,12 @@ text-align: center; position: sticky; // When sticking, tuck the top border beneath the modal header border - top: -1px; + top: ($grid-unit-05 + 1) * -1; z-index: z-index(".edit-post-block-manager__disabled-blocks-count"); // Stick the category titles to the bottom ~ .edit-post-block-manager__results .edit-post-block-manager__category-title { - top: 35px; + top: $grid-unit-40 - 1; } .is-link { margin-left: 12px; diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index e814f7a49072ff..b86e66af7a849e 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -136,6 +136,7 @@ function HeaderToolbar( { setListViewToggleElement } ) { className="edit-post-header-toolbar" aria-label={ toolbarAriaLabel } shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused } + variant="unstyled" >
+
+
-
-
-
+
+
+
+
+
- { /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
-
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..7ce1cc8792fd06
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TextFilter from './text-filter';
+import InFilter from './in-filter';
+
+export default function Filters( { filters, fields, view, onChangeView } ) {
+ const filterIndex = {};
+ filters.forEach( ( filter ) => {
+ if ( 'object' !== typeof filter || ! filter?.id || ! filter?.type ) {
+ return;
+ }
+
+ filterIndex[ filter.id ] = filter;
+ } );
+
+ fields.forEach( ( field ) => {
+ if ( ! field.filters ) {
+ return;
+ }
+
+ field.filters.forEach( ( filter ) => {
+ let id = field.id;
+ if ( 'string' === typeof filter ) {
+ filterIndex[ id ] = {
+ id,
+ name: field.header,
+ type: filter,
+ };
+ }
+
+ if ( 'object' === typeof filter ) {
+ id = filter.id || field.id;
+ filterIndex[ id ] = {
+ id,
+ name: filter.name || field.header,
+ type: filter.type,
+ };
+ }
+
+ if ( 'enumeration' === filterIndex[ id ]?.type ) {
+ const elements = [
+ {
+ value: filter.resetValue || '',
+ label: filter.resetLabel || __( 'All' ),
+ },
+ ...( field.elements || [] ),
+ ];
+ filterIndex[ id ] = {
+ ...filterIndex[ id ],
+ elements,
+ };
+ }
+ } );
+ } );
+
+ return (
+ view.visibleFilters?.map( ( filterName ) => {
+ const filter = filterIndex[ filterName ];
+
+ if ( ! filter ) {
+ return null;
+ }
+
+ if ( filter.type === 'search' ) {
+ return (
+ { __( 'Loading' ) }
; - } - return ( -
- { hasRows && (
-
-
- { dataView.getHeaderGroups().map( ( headerGroup ) => (
-
- ) }
- { ! hasRows &&
- );
-}
-
-export default forwardRef( ListView );
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
index 3adecd2bb80851..806d4bf7987cc2 100644
--- a/packages/edit-site/src/components/dataviews/pagination.js
+++ b/packages/edit-site/src/components/dataviews/pagination.js
@@ -9,23 +9,16 @@ import {
} from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf, __, _x, _n } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
-import { PageSizeControl } from './view-actions';
-
-// For now this is copied from the patterns list Pagination component, because
-// the datatable pagination starts from index zero(`0`). Eventually all lists will be
-// using this one.
-export function Pagination( {
- dataView,
- // If passed, use it, as it's for controlled pagination.
- totalItems = 0,
+function Pagination( {
+ view,
+ onChangeView,
+ paginationInfo: { totalItems = 0, totalPages },
} ) {
- const currentPage = dataView.getState().pagination.pageIndex + 1;
- const numPages = dataView.getPageCount();
- const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+ if ( ! totalItems || ! totalPages ) {
+ return null;
+ }
return (
|
- |
- ) ) }
-
|---|
| - { flexRender( - cell.column.columnDef.cell, - cell.getContext() - ) } - | - ) ) } -
{ __( 'no results' ) }
} -
+ { mediaField?.render( { item, view } ) || (
+
+
+
+ { field.render( { item, view } ) }
+
+ ) ) }
+ { __( 'Loading' ) }
; + } + return ( +
+ { hasRows && (
+
+
+ { dataView.getHeaderGroups().map( ( headerGroup ) => (
+
+ ) }
+ { ! hasRows &&
+ );
+}
+
+export default ViewList;
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index f3ee1bda69719f..dcec39ddc7bedb 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -44,6 +44,7 @@ import CanvasLoader from '../canvas-loader';
import { unlock } from '../../lock-unlock';
import useEditedEntityRecord from '../use-edited-entity-record';
import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
+import PatternModal from '../pattern-modal';
import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
@@ -220,6 +221,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
|
+ |
+ ) ) }
+
|---|
| + { flexRender( + cell.column.columnDef.cell, + cell.getContext() + ) } + | + ) ) } +
{ __( 'no results' ) }
} +=16.0.0",
- "npm": ">=8 <9"
+ "node": ">=16.0.0"
},
"main": "build/index.js",
"module": "build-module/index.js",
diff --git a/packages/patterns/src/components/category-selector.js b/packages/patterns/src/components/category-selector.js
index 397d851d3886b9..7f00350e278ecf 100644
--- a/packages/patterns/src/components/category-selector.js
+++ b/packages/patterns/src/components/category-selector.js
@@ -4,8 +4,6 @@
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { FormTokenField } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
import { useDebounce } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
@@ -13,40 +11,29 @@ const unescapeString = ( arg ) => {
return decodeEntities( arg );
};
-const EMPTY_ARRAY = [];
-const MAX_TERMS_SUGGESTIONS = 20;
-const DEFAULT_QUERY = {
- per_page: MAX_TERMS_SUGGESTIONS,
- _fields: 'id,name',
- context: 'view',
-};
export const CATEGORY_SLUG = 'wp_pattern_category';
-export default function CategorySelector( { values, onChange } ) {
+export default function CategorySelector( {
+ categoryTerms,
+ onChange,
+ categoryMap,
+} ) {
const [ search, setSearch ] = useState( '' );
const debouncedSearch = useDebounce( setSearch, 500 );
- const { searchResults } = useSelect(
- ( select ) => {
- const { getEntityRecords } = select( coreStore );
-
- return {
- searchResults: !! search
- ? getEntityRecords( 'taxonomy', CATEGORY_SLUG, {
- ...DEFAULT_QUERY,
- search,
- } )
- : EMPTY_ARRAY,
- };
- },
- [ search ]
- );
-
const suggestions = useMemo( () => {
- return ( searchResults ?? [] ).map( ( term ) =>
- unescapeString( term.name )
- );
- }, [ searchResults ] );
+ return Array.from( categoryMap.values() )
+ .map( ( category ) => unescapeString( category.label ) )
+ .filter( ( category ) => {
+ if ( search !== '' ) {
+ return category
+ .toLowerCase()
+ .includes( search.toLowerCase() );
+ }
+ return true;
+ } )
+ .sort( ( a, b ) => a.localeCompare( b ) );
+ }, [ search, categoryMap ] );
function handleChange( termNames ) {
const uniqueTerms = termNames.reduce( ( terms, newTerm ) => {
@@ -64,17 +51,16 @@ export default function CategorySelector( { values, onChange } ) {
}
return (
- <>
- {
onClose();
setTitle( '' );
@@ -126,8 +174,9 @@ export default function CreatePatternModal( {
className="patterns-create-modal__name-input"
/>
- { __( 'Create' ) }
+ { confirmLabel }
diff --git a/packages/patterns/src/components/duplicate-pattern-modal.js b/packages/patterns/src/components/duplicate-pattern-modal.js
new file mode 100644
index 00000000000000..baf977a7b27e2f
--- /dev/null
+++ b/packages/patterns/src/components/duplicate-pattern-modal.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from './create-pattern-modal';
+import { PATTERN_SYNC_TYPES } from '../constants';
+
+function getTermLabels( pattern, categories ) {
+ // Theme patterns don't have an id and rely on core pattern categories.
+ if ( ! pattern.id ) {
+ return categories.core
+ ?.filter( ( category ) =>
+ pattern.categories.includes( category.name )
+ )
+ .map( ( category ) => category.label );
+ }
+
+ return categories.user
+ ?.filter( ( category ) =>
+ pattern.wp_pattern_category.includes( category.id )
+ )
+ .map( ( category ) => category.label );
+}
+
+export default function DuplicatePatternModal( {
+ pattern,
+ onClose,
+ onSuccess,
+} ) {
+ const { createSuccessNotice } = useDispatch( noticesStore );
+ const categories = useSelect( ( select ) => {
+ const { getUserPatternCategories, getBlockPatternCategories } =
+ select( coreStore );
+
+ return {
+ core: getBlockPatternCategories(),
+ user: getUserPatternCategories(),
+ };
+ } );
+
+ if ( ! pattern ) {
+ return null;
+ }
+
+ const duplicatedProps = {
+ content: pattern.content,
+ defaultCategories: getTermLabels( pattern, categories ),
+ defaultSyncType: ! pattern.id // Theme patterns don't have an ID.
+ ? PATTERN_SYNC_TYPES.unsynced
+ : pattern.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
+ defaultTitle: sprintf(
+ /* translators: %s: Existing pattern title */
+ __( '%s (Copy)' ),
+ typeof pattern.title === 'string'
+ ? pattern.title
+ : pattern.title.raw
+ ),
+ };
+
+ function handleOnSuccess( { pattern: newPattern } ) {
+ createSuccessNotice(
+ sprintf(
+ // translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+ __( '"%s" duplicated.' ),
+ newPattern.title.raw
+ ),
+ {
+ type: 'snackbar',
+ id: 'patterns-create',
+ }
+ );
+
+ onSuccess?.( { pattern: newPattern } );
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/patterns/src/components/rename-pattern-modal.js b/packages/patterns/src/components/rename-pattern-modal.js
new file mode 100644
index 00000000000000..9b905c04b1e20e
--- /dev/null
+++ b/packages/patterns/src/components/rename-pattern-modal.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ Modal,
+ TextControl,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function RenamePatternModal( {
+ onClose,
+ onError,
+ onSuccess,
+ pattern,
+ ...props
+} ) {
+ const originalName = decodeEntities( pattern.title );
+ const [ name, setName ] = useState( originalName );
+ const [ isSaving, setIsSaving ] = useState( false );
+
+ const {
+ editEntityRecord,
+ __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+ } = useDispatch( coreStore );
+
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+
+ const onRename = async ( event ) => {
+ event.preventDefault();
+
+ if ( ! name || name === pattern.title || isSaving ) {
+ return;
+ }
+
+ try {
+ await editEntityRecord( 'postType', pattern.type, pattern.id, {
+ title: name,
+ } );
+
+ setIsSaving( true );
+ setName( '' );
+ onClose?.();
+
+ const savedRecord = await saveSpecifiedEntityEdits(
+ 'postType',
+ pattern.type,
+ pattern.id,
+ [ 'title' ],
+ { throwOnError: true }
+ );
+
+ onSuccess?.( savedRecord );
+
+ createSuccessNotice( __( 'Pattern renamed' ), {
+ type: 'snackbar',
+ id: 'pattern-update',
+ } );
+ } catch ( error ) {
+ onError?.();
+
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __( 'An error occurred while renaming the pattern.' );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ id: 'pattern-update',
+ } );
+ } finally {
+ setIsSaving( false );
+ setName( '' );
+ }
+ };
+
+ const onRequestClose = () => {
+ onClose?.();
+ setName( '' );
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/patterns/src/components/style.scss b/packages/patterns/src/components/style.scss
index 4c4547063c7104..e7869520044950 100644
--- a/packages/patterns/src/components/style.scss
+++ b/packages/patterns/src/components/style.scss
@@ -1,10 +1,36 @@
.patterns-menu-items__convert-modal {
z-index: z-index(".patterns-menu-items__convert-modal");
+
+ // Fix the modal width to prevent added categories from stretching the modal.
+ [role="dialog"] > [role="document"] {
+ width: 350px;
+ }
+
.patterns-menu-items__convert-modal-categories {
- max-width: 300px;
+ width: 100%;
+ position: relative;
+ min-height: 40px;
+ }
+ .components-form-token-field__suggestions-list {
+ position: absolute;
+ box-sizing: border-box;
+ z-index: 1;
+ background-color: $white;
+ // Account for the border width of the token field.
+ width: calc(100% + 2px);
+ left: -1px;
+ min-width: initial;
+ border: 1px solid var(--wp-admin-theme-color);
+ border-top: none;
+ box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px;
}
}
.patterns-create-modal__name-input input[type="text"] {
- min-height: 34px;
+ // Match the minimal height of the category selector.
+ min-height: 40px;
+ // Override the default 1px margin-x.
+ margin: 0;
}
diff --git a/packages/patterns/src/lock-unlock.js b/packages/patterns/src/lock-unlock.js
index 51adc98f32cac8..d727871d71439a 100644
--- a/packages/patterns/src/lock-unlock.js
+++ b/packages/patterns/src/lock-unlock.js
@@ -4,6 +4,6 @@
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/patterns'
);
diff --git a/packages/patterns/src/private-apis.js b/packages/patterns/src/private-apis.js
index cdbf1a6ba29408..8daee42b21e9d4 100644
--- a/packages/patterns/src/private-apis.js
+++ b/packages/patterns/src/private-apis.js
@@ -3,7 +3,10 @@
*/
import { lock } from './lock-unlock';
import CreatePatternModal from './components/create-pattern-modal';
+import DuplicatePatternModal from './components/duplicate-pattern-modal';
+import RenamePatternModal from './components/rename-pattern-modal';
import PatternsMenuItems from './components';
+import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
import {
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
@@ -15,7 +18,10 @@ import {
export const privateApis = {};
lock( privateApis, {
CreatePatternModal,
+ DuplicatePatternModal,
+ RenamePatternModal,
PatternsMenuItems,
+ RenamePatternCategoryModal,
PATTERN_TYPES,
PATTERN_DEFAULT_CATEGORY,
PATTERN_USER_CATEGORY,
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index 5868a69aab57ae..a96be5b960ae97 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 6.12.0 (2023-10-18)
+
## 6.11.0 (2023-10-05)
## 6.10.0 (2023-09-20)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index e3b77826b1ace5..16272f974c2a89 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/plugins",
- "version": "6.11.0",
+ "version": "6.12.0",
"description": "Plugins module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 2d6195b931a1d3..df48f6b36687ea 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.28.0 (2023-10-18)
+
## 4.27.0 (2023-10-05)
## 4.26.0 (2023-09-20)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index f996ce6fef971b..fce1ba9fe77829 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/postcss-plugins-preset",
- "version": "4.27.0",
+ "version": "4.28.0",
"description": "PostCSS sharable plugins preset for WordPress development.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index ff70191656b0dd..801720d609d47c 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/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/postcss-themes/package.json b/packages/postcss-themes/package.json
index ed9df2817b0cc6..604db123ffaff8 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/postcss-themes",
- "version": "5.26.0",
+ "version": "5.27.0",
"description": "PostCSS plugin to generate theme colors.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 6130903be46f4f..76e103339ea413 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 1.36.0 (2023-10-18)
+
## 1.35.0 (2023-10-05)
## 1.34.0 (2023-09-20)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 7423bcf67a9ca4..ad102c098265de 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/preferences-persistence",
- "version": "1.35.0",
+ "version": "1.36.0",
"description": "Persistence utilities for `wordpress/preferences`.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 79b880edb682eb..e6118f95133d03 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 3.21.0 (2023-10-18)
+
## 3.20.0 (2023-10-05)
## 3.19.0 (2023-09-20)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index b5c9c08966971b..aa0b25237fb254 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/preferences",
- "version": "3.20.0",
+ "version": "3.21.0",
"description": "Utilities for managing WordPress preferences.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index f07ddbd69c9ebe..5ee17ebdf89bfb 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 3.1.0 (2023-10-18)
+
## 3.0.0 (2023-10-05)
### Breaking Change
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index fc44a10708bd24..83b5d4c04a1f65 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/prettier-config",
- "version": "3.0.0",
+ "version": "3.1.0",
"description": "WordPress Prettier shared configuration.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index 7a57cb5450df4b..c7e9a57ee4113e 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 3.42.0 (2023-10-18)
+
## 3.41.0 (2023-10-05)
## 3.40.0 (2023-09-20)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 62ff4bb72522c7..16f666376ec60e 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/primitives",
- "version": "3.41.0",
+ "version": "3.42.0",
"description": "WordPress cross-platform primitives.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
index 01e8b7cdb4c50b..3d0d29c2972454 100644
--- a/packages/primitives/src/block-quotation/index.native.js
+++ b/packages/primitives/src/block-quotation/index.native.js
@@ -20,6 +20,9 @@ export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
styles.wpBlockQuoteLight,
styles.wpBlockQuoteDark
),
+ style?.baseColors?.color?.text && {
+ borderLeftColor: style.baseColors.color.text,
+ },
style?.color && {
borderLeftColor: style.color,
},
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 4e54ad9c10458c..3e90f02f96a54d 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 2.44.0 (2023-10-18)
+
## 2.43.0 (2023-10-05)
## 2.42.0 (2023-09-20)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index 52c7bed067c519..02084f3406919f 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/priority-queue",
- "version": "2.43.0",
+ "version": "2.44.0",
"description": "Generic browser priority queue.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index a6faa072b8cfb4..580d4a9709499d 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 0.26.0 (2023-10-18)
+
## 0.25.0 (2023-10-05)
## 0.24.0 (2023-09-20)
diff --git a/packages/private-apis/README.md b/packages/private-apis/README.md
index 9faaada8532003..163ef630d0febc 100644
--- a/packages/private-apis/README.md
+++ b/packages/private-apis/README.md
@@ -12,7 +12,7 @@ Every `@wordpress` package wanting to privately access or expose experimental AP
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/block-editor' // Name of the package calling __dangerousOptInToUnstableAPIsOnlyForCoreModules,
// (not the name of the package whose APIs you want to access)
);
@@ -22,7 +22,7 @@ Each package may only opt in once. The function name communicates that plugins a
The function will throw an error if the following conditions are not met:
-1. The first argument must exactly match the required consent string: `'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.'`.
+1. The first argument must exactly match the required consent string: `'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.'`.
2. The second argument must be a known `@wordpress` package that hasn't yet opted into `@wordpress/private-apis`
Once the opt-in is complete, the obtained `lock()` and `unlock()` utilities enable hiding `__experimental` APIs from the naked eye:
@@ -96,3 +96,27 @@ This is an individual package that's part of the Gutenberg project. The project
To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
` where the pattern can just be the file name.
+## Speeding Up Test Runs
-### Debugging
+The `native test:e2e:(android|ios):local` script performs several steps via associated npm scripts.
-There's a debug variant of the command: `device-tests:debug`, which starts a Node.js process that listens for a debugging client. You can use any inspector client at that point to attach and add breakpoints. More information about that can be found here: https://nodejs.org/en/docs/guides/debugging-getting-started/
+- Create the JavaScript bundle: `test:e2e:bundle:(ios|android)`
+- Compile the app: `test:e2e:build-app:(ios|android)`
+- Launch the test runner: `device-tests:local`
-You can also write `debugger;` in the JS code in any line to add a breakpoint.
+While we must run all of these at least once to produce a testable app, it is often not necessary to run them each multiple times over while modifying or writing tests. To speed up multiple test runs, you can invoke the individual scripts as needed.
-### Starting the Appium Server
+- If you only modified the native app code, you can run `test:e2e:build-app:(ios|android)` followed by `device-tests:local`.
+- If you only modified JavaScript app code, you can run `test:e2e:bundle:(ios|android)` followed by `device-tests:local`.
+- If you only modified E2E tests code, you can run `device-tests:local`.
-One of the Caveats to using Appium is the need for the Appium server to be running to interact with the Simulator or Device through Webdriver, as a result the appium server will need to be started before running the tests.
+By default `device-tests:local` runs tests for Android. To run tests on iOS, you can prefix the script with the `TEST_RN_PLATFORM` environment variable.
-To make the entire process easier in the `beforeAll` block of the tests an Appium instance is fired up on a default port of 4723. If you already have something running on that port and would rather not stop that you can change the port within the code that starts that up. At the moment that port number is referenced from the config located at `__device-tests__/helpers/serverConfigs.js`.
+```shell
+# Run tests on iOS
+TEST_RN_PLATFORM=ios npm run native device-tests:local
-The process is killed in the `afterAll` block but at the time of writing this there's a small chance some errors might cause it not to get there so it might be best to kill the process yourself if you think something is up. The server output when running the tests are written to `appium-out.log`, this can provide useful information when debugging the issues with the tests.
+# Run tests on iOS with watch mode enabled
+TEST_RN_PLATFORM=ios npm run native device-tests:local -- -- --watch
+```
-If the `beforeAll` and `afterAll` functionality is not working correctly, you can start the Appium server manually by running `npm run native appium:start`.
+## Debugging Tests
-### WebDriver capabilities
+Much like other development servers, values outputted to the console via `console.log` should display in the Jest test runner server log.
-Appium uses a config object that contains `capabilities` to define how it will connect to a simulator or device, this object is currently located in `__device-tests__/helpers/caps.js` and then referenced when firing up the driver. There are two values that I think are important to know and that's
+Occasionally, it is helpful to inspect breakpoints during the execution of a test.The MG project includes a `device-tests:debug` script which sets the `--inspect` flag required for attaching an inspector. Additional details on attaching an inspector can be found in Node.js’ [Debugging Guide](https://nodejs.org/en/docs/guides/debugging-getting-started).
-- `platformVersion` which is the platform version of a connected adb device. e.g `9.0` for Android or `12.2` for iOS. The version used here is upper bounded by the max allowed on CI but feel free to change this value locally as needed.
-- `app` which is the absolute path to the `.app` or `.apk` file or the path relative to the **Appium root**. It's important to note that when using the relative paths it's not to the project folder but to the appium server, since by default we start up appium in the project root when running the paths appear relative to the root but if you were using another instance of the Appium server the relative path would need to come from there.
+## Writing Tests
-A full spec on the capabilities can be found [here](https://github.com/appium/appium/blob/1.x/docs/en/writing-running-appium/caps.md). If you'd like to change configurations like
-what port appium runs on or what device or emulator the tests should be executed on that file would be where you'd like to make that update.
+Jest is the test runner for the E2E test suite. Reviewing the [Jest’s Introduction](https://jestjs.io/docs/getting-started) documentation provides an overview of writing JavaScript-based tests for Jest.
-## The run process
+The E2E tests utilize WebdriverIO as the Appium driver, which is an interface that allows Appium to automate a particular platform. The WebdriverIO documentation for [Appium](https://webdriver.io/docs/api/appium/) and the [driver object](https://webdriver.io/docs/api/browser) provides useful information for automating interactions with mobile apps.
-At the moment when running locally, the app attempts to fire up an appium server and then connects to it via webdriver. Then
+Additionally, the project’s E2E tests leverage a [Page Object](https://webdriver.io/docs/pageobjects/) pattern. The `editor-page.js` file defines methods managing all interactions with page UI. Tests themselves reside in separate files.
-- on Android, a debug version of the app is bundled, built, and used.
-- on iOS a release version is bundled built and used.
+Expanding the Page Object to interact with specific UI elements often requires determining a [locator strategy](https://saucelabs.com/resources/blog/advanced-locator-strategies) for the targeted UI element. Generally, an accessibility (a11y) identifier is preferred over an Xpath selector, which are slower and considered implementation details.
-**It's important to ensure that **metro is not running.** This would cause the value of the `__DEV__` variable to be true and load up the sample blocks.**
+Determining the correct selector query is often made easier by leveraging a tool to inspect the properties of UI elements.
-After the build is complete, an appium server is fired up on port 4723 and the device tests are ran on the connected device/simulator.
+- [**Appium Inspector**](https://github.com/appium/appium-inspector#readme) – cross-platform tool for inspecting UI elements and their properties.
+- [**Android Studio Layout Inspector**](https://developer.android.com/studio/debug/layout-inspector) – Android tool allowing you to debug the layout of your app by showing a view hierarchy and allowing you to inspect the properties of each view.
+- [**Xcode Accessibility Inspector**](https://developer.apple.com/documentation/accessibility/integrating_accessibility_into_your_app#4154486) – Xcode tool that displays all accessibility information for an element.
----
+## Continuous Integration
-To read more about writing your own tests please read the [contributing guide](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/__device-tests__/CONTRIBUTING.md).
+In addition to running the E2E tests on local computers, the continuous integration (CI) server runs some of these tests on every Pull Request. Configuration for this can be found in the [.github configuration directory](/.github/workflows).
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js
index b3a9f2350c56d2..e25fe618fa18a1 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js
@@ -60,7 +60,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
await titleElement.click();
// Wait for editor to finish scrolling to the title
- await editorPage.driver.sleep( 2000 );
+ await editorPage.driver.pause( 2000 );
await editorPage.addNewBlock( blockNames.paragraph );
const emptyParagraphBlock = await editorPage.getBlockAtPosition(
@@ -107,20 +107,11 @@ describe( 'Gutenberg Editor Slash Inserter tests', () => {
expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
// Remove / character.
- if ( isAndroid() ) {
- await editorPage.typeTextToTextBlock(
- paragraphBlockElement,
- `${ shortText }`,
- true
- );
- } else {
- await paragraphBlockElement.type( '\b' );
- await editorPage.typeTextToTextBlock(
- paragraphBlockElement,
- `${ shortText }`,
- false
- );
- }
+ await editorPage.typeTextToTextBlock(
+ paragraphBlockElement,
+ `${ shortText }`,
+ true
+ );
// Check if the slash inserter UI no longer exists.
expect( await editorPage.assertSlashInserterPresent() ).toBe( false );
@@ -141,8 +132,7 @@ describe( 'Gutenberg Editor Slash Inserter tests', () => {
expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
// Find Image block button.
- const imageButtonElement =
- await editorPage.driver.elementByAccessibilityId( 'Image block' );
+ const imageButtonElement = await editorPage.driver.$( '~Image block' );
expect( imageButtonElement ).toBeTruthy();
// Add image block.
@@ -166,7 +156,12 @@ describe( 'Gutenberg Editor Slash Inserter tests', () => {
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
- '/img\n',
+ '/img',
+ false
+ );
+ await editorPage.typeTextToTextBlock(
+ paragraphBlockElement,
+ '\n',
false
);
expect(
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js
index e0fbd7630a5d24..e7ee4a20df03f2 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js
@@ -2,15 +2,7 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
-import {
- clearClipboard,
- longPressMiddleOfElement,
- tapSelectAllAboveElement,
- tapCopyAboveElement,
- tapPasteAboveElement,
- toggleOrientation,
- isAndroid,
-} from './helpers/utils';
+import { toggleOrientation, isAndroid } from './helpers/utils';
import testData from './helpers/test-data';
describe( 'Gutenberg Editor Rotation tests', () => {
@@ -56,100 +48,3 @@ describe( 'Gutenberg Editor Rotation tests', () => {
);
} );
} );
-
-describe( 'Gutenberg Editor Paste tests', () => {
- // skip iOS for now
- if ( ! isAndroid() ) {
- it( 'skips the tests on any platform other than Android', async () => {
- expect( true ).toBe( true );
- } );
- return;
- }
-
- beforeAll( async () => {
- await clearClipboard( editorPage.driver );
- } );
-
- it.skip( 'copies plain text from one paragraph block and pastes in another', async () => {
- await editorPage.initializeEditor();
- await editorPage.addNewBlock( blockNames.paragraph );
- const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
- blockNames.paragraph
- );
-
- await editorPage.typeTextToTextBlock(
- paragraphBlockElement,
- testData.pastePlainText
- );
-
- // Copy content to clipboard.
- await longPressMiddleOfElement(
- editorPage.driver,
- paragraphBlockElement
- );
- await tapSelectAllAboveElement(
- editorPage.driver,
- paragraphBlockElement
- );
- await tapCopyAboveElement( editorPage.driver, paragraphBlockElement );
-
- // Create another paragraph block.
- await editorPage.addNewBlock( blockNames.paragraph );
- if ( isAndroid() ) {
- // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
- await editorPage.dismissAndroidClipboardSmartSuggestion();
- }
- const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition(
- blockNames.paragraph,
- 2
- );
-
- // Paste into second paragraph block.
- await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 );
-
- const text = await editorPage.getTextForParagraphBlockAtPosition( 2 );
- expect( text ).toBe( testData.pastePlainText );
- } );
-
- it.skip( 'copies styled text from one paragraph block and pastes in another', async () => {
- // Create paragraph block with styled text by editing html.
- await editorPage.initializeEditor( {
- initialData: testData.pasteHtmlText,
- } );
- const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
- blockNames.paragraph
- );
-
- // Copy content to clipboard.
- await longPressMiddleOfElement(
- editorPage.driver,
- paragraphBlockElement
- );
- await tapSelectAllAboveElement(
- editorPage.driver,
- paragraphBlockElement
- );
- await tapCopyAboveElement( editorPage.driver, paragraphBlockElement );
-
- // Create another paragraph block.
- await editorPage.addNewBlock( blockNames.paragraph );
- if ( isAndroid() ) {
- // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
- await editorPage.dismissAndroidClipboardSmartSuggestion();
- }
- const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition(
- blockNames.paragraph,
- 2
- );
-
- // Paste into second paragraph block.
- await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 );
-
- // Check styled text by verifying html contents.
- const html = await editorPage.getHtmlContent();
-
- expect( html.toLowerCase() ).toBe(
- testData.pasteHtmlTextResult.toLowerCase()
- );
- } );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
index f7e395d986d57e..f0e1050092f0d3 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
@@ -2,19 +2,9 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
-import {
- clearClipboard,
- dragAndDropAfterElement,
- isAndroid,
- setClipboard,
- tapPasteAboveElement,
-} from './helpers/utils';
+import { clearClipboard, dragAndDropAfterElement } from './helpers/utils';
import testData from './helpers/test-data';
-// Tests associated with this const are temporarily off for both platforms due to failures.
-// They should be enabled for Android-only when a fix is in place.
-const onlyOnAndroid = it.skip;
-
describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
beforeEach( async () => {
await clearClipboard( editorPage.driver );
@@ -52,72 +42,6 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
expect( firstBlockText ).toMatch( testData.shortText );
} );
- onlyOnAndroid(
- 'should be able to long-press on a text-based block to paste a text in a focused textinput',
- async () => {
- await editorPage.initializeEditor();
- // Add a Paragraph block
- await editorPage.addNewBlock( blockNames.paragraph );
- const paragraphBlockElement =
- await editorPage.getTextBlockAtPosition( blockNames.paragraph );
-
- // Set clipboard text
- await setClipboard( editorPage.driver, testData.shortText );
-
- // Dismiss auto-suggestion popup
- if ( isAndroid() ) {
- // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
- await editorPage.dismissAndroidClipboardSmartSuggestion();
- }
-
- // Paste into the Paragraph block
- await tapPasteAboveElement(
- editorPage.driver,
- paragraphBlockElement
- );
- const paragraphText =
- await editorPage.getTextForParagraphBlockAtPosition( 1 );
-
- // Expect to have the pasted text in the Paragraph block
- expect( paragraphText ).toMatch( testData.shortText );
- }
- );
-
- onlyOnAndroid(
- 'should be able to long-press on a text-based block using the PlainText component to paste a text in a focused textinput',
- async () => {
- await editorPage.initializeEditor();
- // Add a Shortcode block
- await editorPage.addNewBlock( blockNames.shortcode );
- const shortcodeBlockElement =
- await editorPage.getShortBlockTextInputAtPosition(
- blockNames.shortcode
- );
-
- // Set clipboard text
- await setClipboard( editorPage.driver, testData.shortText );
-
- // Dismiss auto-suggestion popup
- if ( isAndroid() ) {
- // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
- await editorPage.dismissAndroidClipboardSmartSuggestion();
- }
-
- // Paste into the Shortcode block
- await tapPasteAboveElement(
- editorPage.driver,
- shortcodeBlockElement
- );
- const shortcodeText = await shortcodeBlockElement.text();
-
- // Expect to have the pasted text in the Shortcode block
- expect( shortcodeText ).toMatch( testData.shortText );
-
- // Remove the block
- await editorPage.removeBlock();
- }
- );
-
it( 'should be able to drag & drop a text-based block when another textinput is focused', async () => {
// Initialize the editor with two Paragraph blocks
await editorPage.initializeEditor( {
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
index ddc7bd8131c443..480d19cb966a0e 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
@@ -15,7 +15,7 @@ describe( 'Gutenberg Editor Audio Block tests', () => {
// dismiss the media picker automatically opened when adding an audio block
await waitForMediaLibrary( editorPage.driver );
- await editorPage.closePicker();
+ await editorPage.closeMediaPicker();
// verify there's an audio block
const block = await editorPage.getFirstBlockVisible();
@@ -30,7 +30,7 @@ describe( 'Gutenberg Editor Audio Block tests', () => {
// tap on Media Library option
await editorPage.chooseMediaLibrary();
// wait until the media is added
- await editorPage.driver.sleep( 500 );
+ await editorPage.driver.pause( 500 );
// get the html version of the content
const html = await editorPage.getHtmlContent();
@@ -50,7 +50,7 @@ describe( 'Gutenberg Editor File Block tests', () => {
// dismiss the media picker automatically opened when adding a file block
await waitForMediaLibrary( editorPage.driver );
- await editorPage.closePicker();
+ await editorPage.closeMediaPicker();
// verify there's a file block
const block = await editorPage.getFirstBlockVisible();
@@ -65,7 +65,7 @@ describe( 'Gutenberg Editor File Block tests', () => {
// tap on Media Library option
await editorPage.chooseMediaLibrary();
// wait until the media is added
- await editorPage.driver.sleep( 500 );
+ await editorPage.driver.pause( 500 );
// get the html version of the content
const html = await editorPage.getHtmlContent();
@@ -82,7 +82,7 @@ onlyOniOS( 'Gutenberg Editor Image Block tests', () => {
it( 'should be able to add an image block', async () => {
await editorPage.initializeEditor();
await editorPage.addNewBlock( blockNames.image );
- await editorPage.closePicker();
+ await editorPage.closeMediaPicker();
const imageBlock = await editorPage.getBlockAtPosition(
blockNames.image
@@ -151,8 +151,7 @@ onlyOniOS( 'Gutenberg Editor Cover Block test', () => {
await editorPage.replaceMediaImage();
// First modal should no longer be presented.
- const replaceButtons =
- await editorPage.driver.elementsByAccessibilityId( 'Replace' );
+ const replaceButtons = await editorPage.driver.$$( '~Replace' );
// eslint-disable-next-line jest/no-conditional-expect
expect( replaceButtons.length ).toBe( 0 );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js
index 4d877049622ab8..0b8a2eeff425c6 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js
@@ -8,7 +8,7 @@ describe( 'Gutenberg Editor Rendering Media Blocks test', () => {
await editorPage.initializeEditor( { initialData: mediaBlocks } );
// Give some time to media placeholders to render.
- await editorPage.driver.sleep( 3000 );
+ await editorPage.driver.pause( 3000 );
// Scroll to the last element.
const addBlockPlaceholder =
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
index 95082777711b33..6aea27dab063a2 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
@@ -151,7 +151,7 @@ const verifySearchElementText = async ( testId, expected ) => {
if ( isAndroid() ) {
const input = await editorPage.getSearchBlockTextElement( testId );
- const inputValue = await input.text();
+ const inputValue = await input.getText();
actual = inputValue.trim();
} else {
actual = await editorPage.getHtmlContent();
diff --git a/packages/react-native-editor/__device-tests__/helpers/caps.js b/packages/react-native-editor/__device-tests__/helpers/caps.js
index 05346dcbbb4801..30cdb5d8d4601c 100644
--- a/packages/react-native-editor/__device-tests__/helpers/caps.js
+++ b/packages/react-native-editor/__device-tests__/helpers/caps.js
@@ -1,11 +1,7 @@
const ios = {
- browserName: '',
- platformName: 'iOS',
- os: 'iOS',
+ platformVersion: '16.2', // Supported Sauce Labs platforms can be found here: https://saucelabs.com/rest/v1/info/platforms/appium
deviceOrientation: 'portrait',
automationName: 'XCUITest',
- appiumVersion: '1.22.3', // Sauce Labs requires appiumVersion to be specified.
- app: undefined, // Will be set later, locally this is relative to root of project.
processArguments: {
args: [ 'uitesting' ],
},
@@ -14,31 +10,40 @@ const ios = {
exports.iosLocal = ( { iPadDevice = false } ) => ( {
...ios,
- deviceName: ! iPadDevice ? 'iPhone 13' : 'iPad Pro (9.7-inch)',
- wdaLaunchTimeout: 240000,
+ deviceName: ! iPadDevice ? 'iPhone 14' : 'iPad (10th generation)',
+ pixelRatio: ! iPadDevice ? 3 : 2,
usePrebuiltWDA: true,
} );
exports.iosServer = ( { iPadDevice = false } ) => ( {
...ios,
- platformVersion: '15.4', // Supported Sauce Labs platforms can be found here: https://saucelabs.com/rest/v1/info/platforms/appium
deviceName: ! iPadDevice
- ? 'iPhone 13 Simulator'
- : 'iPad Pro (9.7 inch) Simulator',
+ ? 'iPhone 14 Simulator'
+ : 'iPad (10th generation) Simulator',
+ pixelRatio: ! iPadDevice ? 3 : 2,
} );
exports.android = {
- browserName: '',
- platformName: 'Android',
platformVersion: '11.0',
deviceName: 'Google Pixel 3 XL GoogleAPI Emulator',
automationName: 'UiAutomator2',
- os: 'Android',
appPackage: 'com.gutenberg',
appActivity: 'com.gutenberg.MainActivity',
deviceOrientation: 'portrait',
- appiumVersion: '1.22.1',
- app: undefined,
disableWindowAnimation: true,
autoLaunch: false,
};
+
+// SauceLabs config
+exports.sauceOptions = {
+ appiumVersion: '2.0.0',
+};
+
+exports.prefixKeysWithAppium = ( obj ) => {
+ return Object.fromEntries(
+ Object.entries( obj ).map( ( [ key, value ] ) => [
+ `appium:${ key }`,
+ value,
+ ] )
+ );
+};
diff --git a/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js b/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js
new file mode 100644
index 00000000000000..91f9e0a8327b98
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+const childProcess = require( 'child_process' );
+
+export function getAndroidEmulatorID() {
+ try {
+ const adbOutput = childProcess.execSync( 'adb devices -l' ).toString();
+
+ const lines = adbOutput
+ .split( '\n' )
+ .filter( ( line ) => line && line.includes( 'emulator-' ) );
+
+ if ( lines.length === 0 ) {
+ // eslint-disable-next-line no-console
+ console.error( 'No available emulators found.' );
+ return null;
+ }
+ const firstEmulatorLine = lines[ 0 ];
+ // Extract device ID from the beginning of the line
+ return firstEmulatorLine.split( /\s+/ )[ 0 ];
+ } catch ( error ) {
+ // eslint-disable-next-line no-console
+ console.error(
+ 'Failed to fetch the first available emulator ID:',
+ error.message
+ );
+ return null;
+ }
+}
diff --git a/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js b/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
index a78c0bb9f6f12f..7bfefd45b01843 100644
--- a/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
+++ b/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
@@ -4,7 +4,9 @@ exports.local = {
};
exports.sauce = {
- host: 'ondemand.saucelabs.com',
- port: 80,
- auth: process.env.SAUCE_USERNAME + ':' + process.env.SAUCE_ACCESS_KEY,
+ user: process.env.SAUCE_USERNAME,
+ key: process.env.SAUCE_ACCESS_KEY,
+ hostname: 'ondemand.us-west-1.saucelabs.com',
+ port: 443,
+ baseUrl: 'wd/hub',
};
diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js
index c356d9a91d16a1..9816e7dc5354d1 100644
--- a/packages/react-native-editor/__device-tests__/helpers/test-data.js
+++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js
@@ -77,7 +77,7 @@ exports.blockInsertionHtmlFromTitle = `
C'est la vie my friends C'est la vie my friends Autumn meets winter since normal type auto clears field on Android
- await driver.execute( 'mobile: shell', {
- command: 'input',
- args: [ 'text', paragraph ],
- } );
- }
- if ( i !== paragraphs.length - 1 ) {
- await pressKeycode( driver, getKeycode( '\n' ) );
- }
- }
+ if ( ! isAndroid() ) {
+ // Await the completion of the scroll-to-text-input animation
+ await driver.pause( 3000 );
}
};
@@ -304,11 +245,11 @@ const getKeycode = ( str ) => {
[ backspace ]: 67,
}[ str ];
}
- // On iOS, we map keycodes using the special keys defined in WebDriver.
- // Reference: https://github.com/admc/wd/blob/master/lib/special-keys.js
+ // On iOS, we map keycodes using the special keys defined in WebdriverIO.
+ // Reference: https://webdriver.io/docs/api/browser/action/#special-characters
return {
- '\n': wd.SPECIAL_KEYS.Enter,
- [ backspace ]: wd.SPECIAL_KEYS[ 'Back space' ],
+ '\n': Key.Enter,
+ [ backspace ]: Key.Backspace,
}[ str ];
};
@@ -329,12 +270,12 @@ const isKeycode = ( str ) => {
*/
const pressKeycode = async ( driver, keycode ) => {
if ( isAndroid() ) {
- // `pressKeycode` command is only implemented on Android
- return await driver.pressKeycode( keycode );
+ // `pressKeyCode` command is only implemented on Android
+ return await driver.pressKeyCode( keycode );
}
- // `keys` command only works on iOS. On Android, executing this
+ // `sendKeys` command only works on iOS. On Android, executing this
// results in typing a special character instead.
- return await driver.keys( [ keycode ] );
+ return await driver.sendKeys( [ keycode ] );
};
// Calculates middle x,y and clicks that position
@@ -342,36 +283,34 @@ const clickMiddleOfElement = async ( driver, element ) => {
const location = await element.getLocation();
const size = await element.getSize();
- const action = await new wd.TouchAction( driver );
- action.press( { x: location.x + size.width / 2, y: location.y } );
- action.release();
- await action.perform();
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x: location.x + size.width / 2, y: location.y } )
+ .down()
+ .up()
+ .perform();
};
// Clicks in the top left of an element.
const clickBeginningOfElement = async ( driver, element ) => {
const location = await element.getLocation();
- const action = await new wd.TouchAction( driver );
- action.press( { x: location.x, y: location.y } );
- action.release();
- await action.perform();
-};
-
-// Clicks in the top left of a text-based element outside of the TextInput
-const clickElementOutsideOfTextInput = async ( driver, element ) => {
- const location = await element.getLocation();
- const y = isAndroid() ? location.y - blockEdgeToContent : location.y;
- const x = isAndroid() ? location.x - blockEdgeToContent : location.x;
-
- const action = new wd.TouchAction( driver ).press( { x, y } ).release();
- await action.perform();
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x: location.x, y: location.y } )
+ .down()
+ .up()
+ .perform();
};
// Long press to activate context menu.
const longPressMiddleOfElement = async (
driver,
element,
- waitTime = 5000, // Setting to wait a bit longer because this is failing more frequently on the CI
+ waitTime = 1000,
customElementSize
) => {
const location = await element.getLocation();
@@ -380,75 +319,83 @@ const longPressMiddleOfElement = async (
const x = location.x + size.width / 2;
const y = location.y + size.height / 2;
- const action = new wd.TouchAction( driver )
- .longPress( { x, y } )
- .wait( waitTime )
- .release();
- await action.perform();
-};
-
-// Press "Select All" in floating context menu.
-const tapSelectAllAboveElement = async ( driver, element ) => {
- const location = await element.getLocation();
- const action = await new wd.TouchAction( driver );
- const x = location.x + 300;
- const y = location.y - 50;
- action.press( { x, y } );
- action.release();
- await action.perform();
-};
-
-// Press "Copy" in floating context menu.
-const tapCopyAboveElement = async ( driver, element ) => {
- const location = await element.getLocation();
- const action = await new wd.TouchAction( driver );
- const x = location.x + 220;
- const y = location.y - 50;
- action.wait( 2000 );
- action.press( { x, y } );
- action.wait( 2000 );
- action.release();
- await action.perform();
-};
-
-// Press "Paste" in floating context menu.
-const tapPasteAboveElement = async ( driver, element ) => {
- await longPressMiddleOfElement( driver, element );
-
- if ( isAndroid() ) {
- const location = await element.getLocation();
- const action = await new wd.TouchAction( driver );
- action.wait( 2000 );
- action.press( { x: location.x + 100, y: location.y - 50 } );
- action.wait( 2000 );
- action.release();
- await action.perform();
- } else {
- const pasteButtonLocator = '//XCUIElementTypeMenuItem[@name="Paste"]';
- await clickIfClickable( driver, pasteButtonLocator );
- await driver.sleep( 3000 ); // Wait for paste notification to disappear.
- }
+ // Focus on the element first, otherwise on iOS it fails to open the context menu.
+ // We can't do it all in one action because it detects it as a force press and it
+ // is not supported by the simulator.
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { origin: element } )
+ .down()
+ .up()
+ .perform();
+
+ // Long-press
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x, y } )
+ .down()
+ .pause( waitTime )
+ .up()
+ .perform();
};
const tapStatusBariOS = async ( driver ) => {
- const action = new wd.TouchAction();
- action.tap( { x: 20, y: 20 } );
- await driver.performTouchAction( action );
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x: 20, y: 20 } )
+ .down()
+ .up()
+ .pause( 100 )
+ .perform();
// Wait for the scroll animation to finish
- await driver.sleep( 3000 );
+ await driver.pause( 3000 );
};
const selectTextFromElement = async ( driver, element ) => {
+ const timeout = 1000;
+
+ // On Android we can't "locate" the context menu options,
+ // To avoid having fixed coordinates to be able to
+ // select all text, it just selects all text by
+ // long-pressing and dragging.
if ( isAndroid() ) {
- await longPressMiddleOfElement( driver, element, 0 );
+ await element.click();
+
+ const location = await element.getLocation();
+ const size = await element.getSize();
+ const paddingPercentage = 0.2;
+ const leftPaddingOffset = size.width * paddingPercentage;
+ const startX = location.x + leftPaddingOffset;
+ const endX = location.x + size.width;
+ const centerY = location.y + size.height / 2;
+
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x: startX, y: centerY } )
+ .down()
+ .pause( timeout ) // Long-press at the start of the element
+ .move( { x: endX, y: centerY, duration: 1000 } ) // Slowly drag to the end of the element to highlight all text
+ .up()
+ .pause( timeout ) // Pause to wait for the context menu to show up
+ .perform();
} else {
- await doubleTap( driver, element );
- await driver.waitForElementByXPath(
- '//XCUIElementTypeMenuItem[@name="Copy"]',
- wd.asserters.isDisplayed,
- 4000
+ // On iOS we can use the context menu to "Select all" text.
+ await longPressMiddleOfElement( driver, element );
+
+ const selectAllElement = await driver.$(
+ '//XCUIElementTypeMenuItem[@name="Select All"]'
);
+ await selectAllElement.waitForDisplayed( { timeout } );
+ await selectAllElement.click();
}
};
@@ -486,15 +433,18 @@ const swipeFromTo = async (
driver,
from = defaultCoordinates,
to = defaultCoordinates,
- delay
-) => {
- const action = await new wd.TouchAction( driver );
- action.press( from );
- action.wait( delay );
- action.moveTo( to );
- action.release();
- await action.perform();
-};
+ delay = 0
+) =>
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { ...from, duration: 0 } )
+ .down( { button: 0 } )
+ .move( { ...to, duration: 300 } )
+ .up( { button: 0 } )
+ .pause( delay )
+ .perform();
// Starts from the middle of the screen and swipes downwards
const swipeDown = async ( driver, delay = 3000 ) => {
@@ -529,18 +479,21 @@ const dragAndDropAfterElement = async ( driver, element, nextElement ) => {
? elementLocation.y + nextElementLocation.y + nextElementSize.height
: nextElementLocation.y + nextElementSize.height;
- const action = new wd.TouchAction( driver )
- .press( { x, y } )
- .wait( 5000 )
- .moveTo( { x, y: nextYPosition } )
- .release();
- await action.perform();
+ await driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x, y } )
+ .down()
+ .pause( 5000 )
+ .move( { x, y: nextYPosition, duration: 500 } )
+ .up()
+ .perform();
};
const toggleHtmlMode = async ( driver, toggleOn ) => {
if ( isAndroid() ) {
- const moreOptionsButton =
- await driver.elementByAccessibilityId( 'More options' );
+ const moreOptionsButton = await driver.$( '~More options' );
await moreOptionsButton.click();
const showHtmlButtonXpath =
@@ -548,8 +501,7 @@ const toggleHtmlMode = async ( driver, toggleOn ) => {
await clickIfClickable( driver, showHtmlButtonXpath );
} else if ( toggleOn ) {
- const moreOptionsButton =
- await driver.elementByAccessibilityId( 'editor-menu-button' );
+ const moreOptionsButton = await driver.$( '~editor-menu-button' );
await moreOptionsButton.click();
await clickIfClickable(
@@ -558,9 +510,8 @@ const toggleHtmlMode = async ( driver, toggleOn ) => {
);
} else {
// This is to wait for the clipboard paste notification to disappear, currently it overlaps with the menu button
- await driver.sleep( 3000 );
- const moreOptionsButton =
- await driver.elementByAccessibilityId( 'editor-menu-button' );
+ await driver.pause( 3000 );
+ const moreOptionsButton = await driver.$( '~editor-menu-button' );
await moreOptionsButton.click();
await clickIfClickable(
driver,
@@ -586,16 +537,18 @@ const toggleOrientation = async ( driver ) => {
*/
const toggleDarkMode = ( driver, darkMode = true ) => {
if ( isAndroid() ) {
- return driver.execute( 'mobile: shell', [
+ return driver.executeScript( 'mobile: shell', [
{
command: `cmd uimode night ${ darkMode ? 'yes' : 'no' }`,
},
] );
}
- return driver.execute( 'mobile: setAppearance', {
- style: darkMode ? 'dark' : 'light',
- } );
+ return driver.executeScript( 'mobile: setAppearance', [
+ {
+ style: darkMode ? 'dark' : 'light',
+ },
+ ] );
};
const isEditorVisible = async ( driver ) => {
@@ -603,7 +556,7 @@ const isEditorVisible = async ( driver ) => {
? `//android.widget.EditText[contains(@content-desc, "Post title")]`
: `(//XCUIElementTypeScrollView/XCUIElementTypeOther/XCUIElementTypeOther[contains(@name, "Post title")])`;
- await waitForVisible( driver, postTitleLocator );
+ await driver.$( postTitleLocator ).waitForDisplayed( { timeout: 30000 } );
};
const waitForMediaLibrary = async ( driver ) => {
@@ -639,10 +592,10 @@ const waitForVisible = async (
return '';
} else if ( iteration !== 0 ) {
// wait before trying to locate element again
- await driver.sleep( timeout );
+ await driver.pause( timeout );
}
- const elements = await driver.elementsByXPath( elementLocator );
+ const elements = await driver.$$( elementLocator );
if ( elements.length === 0 ) {
// if locator is not visible, try again
return waitForVisible(
@@ -793,10 +746,8 @@ module.exports = {
backspace,
clearClipboard,
clickBeginningOfElement,
- clickElementOutsideOfTextInput,
clickIfClickable,
clickMiddleOfElement,
- doubleTap,
dragAndDropAfterElement,
isAndroid,
isEditorVisible,
@@ -811,9 +762,6 @@ module.exports = {
swipeDown,
swipeFromTo,
swipeUp,
- tapCopyAboveElement,
- tapPasteAboveElement,
- tapSelectAllAboveElement,
tapStatusBariOS,
timer,
toggleDarkMode,
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index c296c561725382..a19aaf5445d79f 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -1,23 +1,14 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line import/no-extraneous-dependencies
-const wd = require( 'wd' );
-
/**
* Internal dependencies
*/
const {
- doubleTap,
isAndroid,
isEditorVisible,
- setClipboard,
setupDriver,
stopDriver,
swipeDown,
swipeFromTo,
swipeUp,
- tapPasteAboveElement,
toggleHtmlMode,
typeString,
waitForVisible,
@@ -58,8 +49,7 @@ class EditorPage {
await launchApp( this.driver, { initialData, rawStyles, rawFeatures } );
// Stores initial values from the editor for different helpers.
- const addButton =
- await this.driver.elementsByAccessibilityId( ADD_BLOCK_ID );
+ const addButton = await this.driver.$$( `~${ ADD_BLOCK_ID }` );
if ( addButton.length !== 0 ) {
this.initialValues.addButtonLocation =
@@ -74,8 +64,7 @@ class EditorPage {
}
async getAddBlockButton() {
- const elements =
- await this.driver.elementsByAccessibilityId( ADD_BLOCK_ID );
+ const elements = await this.driver.$$( `~${ ADD_BLOCK_ID }` );
return elements[ 0 ];
}
@@ -116,7 +105,7 @@ class EditorPage {
await waitForVisible( this.driver, blockLocator );
- const elements = await this.driver.elementsByXPath( blockLocator );
+ const elements = await this.driver.$$( blockLocator );
const lastElementFound = elements[ elements.length - 1 ];
if ( elements.length === 0 && options.autoscroll ) {
const firstBlockVisible = await this.getFirstBlockVisible();
@@ -200,8 +189,7 @@ class EditorPage {
}
}
- const elements =
- await this.driver.elementsByAccessibilityId( titleElement );
+ const elements = await this.driver.$$( `~${ titleElement }` );
if (
elements.length === 0 ||
@@ -216,7 +204,7 @@ class EditorPage {
// This makes this function return elements without scrolling on iOS.
// So we are keeping this Android only.
async androidScrollAndReturnElement( accessibilityLabel ) {
- const elements = await this.driver.elementsByXPath(
+ const elements = await this.driver.$$(
`//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]`
);
if ( elements.length === 0 ) {
@@ -230,7 +218,7 @@ class EditorPage {
// renders blocks, it won't need to scroll down as it would find
// the block right away.
async scrollAndReturnElementByAccessibilityId( id ) {
- const elements = await this.driver.elementsByAccessibilityId( id );
+ const elements = await this.driver.$$( `~${ id }` );
if ( elements.length === 0 ) {
await swipeUp( this.driver, undefined, 100, 1 );
@@ -240,7 +228,7 @@ class EditorPage {
}
async getLastElementByXPath( accessibilityLabel ) {
- const elements = await this.driver.elementsByXPath(
+ const elements = await this.driver.$$(
`//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]`
);
return elements[ elements.length - 1 ];
@@ -261,27 +249,12 @@ class EditorPage {
await toggleHtmlMode( this.driver, true );
const htmlContentView = await this.getTextViewForHtmlViewContent();
- const text = await htmlContentView.text();
+ const text = await htmlContentView.getText();
await toggleHtmlMode( this.driver, false );
return text;
}
- // Set html editor content explicitly.
- async setHtmlContent( html ) {
- await toggleHtmlMode( this.driver, true );
-
- await setClipboard( this.driver, html );
-
- const htmlContentView = await this.getTextViewForHtmlViewContent();
-
- await htmlContentView.click();
- await doubleTap( this.driver, htmlContentView );
- await tapPasteAboveElement( this.driver, htmlContentView );
-
- await toggleHtmlMode( this.driver, false );
- }
-
async dismissKeyboard() {
const orientation = await this.driver.getOrientation();
const keyboardShown = await this.driver.isKeyboardShown();
@@ -292,7 +265,7 @@ class EditorPage {
// On Android with the landspace orientation set, we use the
// driver functionality to hide the keyboard.
if ( isAndroid() && orientation === 'LANDSCAPE' ) {
- return await this.driver.hideDeviceKeyboard();
+ return await this.driver.hideKeyboard();
}
const hideKeyboardButton = isAndroid()
@@ -310,7 +283,10 @@ class EditorPage {
async waitForKeyboardToBeHidden() {
const { addButtonLocation } = this.initialValues;
const addButton = await this.getAddBlockButton();
- const location = await addButton.getLocation();
+ let location;
+ if ( addButton ) {
+ location = await addButton.getLocation();
+ }
let YLocation = addButtonLocation?.y;
const currentOrientation = await this.driver.getOrientation();
const isLandscape = currentOrientation === 'LANDSCAPE';
@@ -324,7 +300,7 @@ class EditorPage {
);
}
- if ( location.y < YLocation ) {
+ if ( ! addButton || location?.y < YLocation ) {
await this.waitForKeyboardToBeHidden();
}
}
@@ -335,7 +311,7 @@ class EditorPage {
}
const dismissClipboardSmartSuggestionLocator = `//*[@${ this.accessibilityIdXPathAttrib }="Dismiss Smart Suggestion"]`;
- const smartSuggestions = await this.driver.elementsByXPath(
+ const smartSuggestions = await this.driver.$$(
dismissClipboardSmartSuggestionLocator
);
if ( smartSuggestions.length !== 0 ) {
@@ -356,8 +332,8 @@ class EditorPage {
while ( locatorAttempts < maxLocatorAttempts ) {
element = byId
- ? await this.driver.elementsByAccessibilityId( elementSelector )
- : await this.driver.elementsByXPath( elementSelector );
+ ? await this.driver.$$( `~${ elementSelector }` )
+ : await this.driver.$$( elementSelector );
if ( await element[ 0 ]?.isDisplayed() ) {
break;
}
@@ -430,6 +406,8 @@ class EditorPage {
swipeRight: true,
} );
await addButton[ 0 ].click();
+ // Wait for Bottom sheet animation to finish
+ await this.driver.pause( 3000 );
}
// Click on block of choice.
@@ -469,12 +447,12 @@ class EditorPage {
const x = size.width / 2;
// Checks if the Block Button is available, and if not will scroll to the second half of the available buttons.
while (
- ! ( await this.driver.hasElementByAccessibilityId(
- blockAccessibilityLabel
- ) ) &&
- ! ( await this.driver.hasElementByAccessibilityId(
- blockAccessibilityLabelNewBlock
- ) )
+ ! ( await this.driver
+ .$( `~${ blockAccessibilityLabel }` )
+ .isDisplayed() ) &&
+ ! ( await this.driver
+ .$( `~${ blockAccessibilityLabelNewBlock }` )
+ .isDisplayed() )
) {
swipeFromTo(
this.driver,
@@ -484,29 +462,23 @@ class EditorPage {
}
if (
- await this.driver.hasElementByAccessibilityId(
- blockAccessibilityLabelNewBlock
- )
+ await this.driver
+ .$( `~${ blockAccessibilityLabelNewBlock }` )
+ .isDisplayed()
) {
- return await this.driver.elementByAccessibilityId(
- blockAccessibilityLabelNewBlock
+ return await this.driver.$(
+ `~${ blockAccessibilityLabelNewBlock }`
);
}
- return await this.driver.elementByAccessibilityId(
- blockAccessibilityLabel
- );
+ return await this.driver.$( `~${ blockAccessibilityLabel }` );
}
- const blockButton = ( await this.driver.hasElementByAccessibilityId(
- blockAccessibilityLabelNewBlock
- ) )
- ? await this.driver.elementByAccessibilityId(
- blockAccessibilityLabelNewBlock
- )
- : await this.driver.elementByAccessibilityId(
- blockAccessibilityLabel
- );
+ const blockButton = ( await this.driver
+ .$( `~${ blockAccessibilityLabelNewBlock }` )
+ .isDisplayed() )
+ ? await this.driver.$( `~${ blockAccessibilityLabelNewBlock }` )
+ : await this.driver.$( `~${ blockAccessibilityLabel }` );
const size = await this.driver.getWindowSize();
// The virtual home button covers the bottom 34 in portrait and 21 on landscape on iOS.
@@ -517,15 +489,14 @@ class EditorPage {
! ( await blockButton.isDisplayed() ) ||
( await EditorPage.isElementOutOfBounds( blockButton, { height } ) )
) {
- await this.driver.execute( 'mobile: dragFromToForDuration', {
- fromX: 50,
- fromY: height,
- toX: 50,
- toY: EditorPage.getInserterPageHeight( height ),
- duration: 0.5,
- } );
+ await swipeFromTo(
+ this.driver,
+ { x: 50, y: height },
+ { x: 50, y: EditorPage.getInserterPageHeight( height ) },
+ 3000
+ );
// Wait for dragging gesture
- await this.driver.sleep( 2000 );
+ await this.driver.pause( 2000 );
}
return blockButton;
@@ -540,9 +511,8 @@ class EditorPage {
async moveBlockSelectionUp( options = { toRoot: false } ) {
let navigateUpElements = [];
do {
- await this.driver.sleep( 2000 );
- navigateUpElements =
- await this.driver.elementsByAccessibilityId( 'Navigate Up' );
+ await this.driver.pause( 2000 );
+ navigateUpElements = await this.driver.$$( `~Navigate Up` );
if ( navigateUpElements.length > 0 ) {
await navigateUpElements[ 0 ].click();
}
@@ -591,7 +561,7 @@ class EditorPage {
blockLocator += `[@${
this.accessibilityIdXPathAttrib
}="Move block up from row ${ position } to row ${ position - 1 }"]`;
- const moveUpButton = await this.driver.elementByXPath( blockLocator );
+ const moveUpButton = await this.driver.$( `~${ blockLocator }` );
await moveUpButton.click();
}
@@ -625,12 +595,12 @@ class EditorPage {
const blockActionsMenuButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockActionsMenuButtonIdentifier }")]`;
if ( isAndroid() ) {
const block = await this.getBlockAtPosition( blockName, position );
- let checkList = await this.driver.elementsByXPath(
+ let checkList = await this.driver.$$(
blockActionsMenuButtonLocator
);
while ( checkList.length === 0 ) {
await swipeUp( this.driver, block ); // Swipe up to show remove icon at the bottom.
- checkList = await this.driver.elementsByXPath(
+ checkList = await this.driver.$$(
blockActionsMenuButtonLocator
);
}
@@ -700,7 +670,7 @@ class EditorPage {
position
);
- return await blockLocator.text();
+ return await blockLocator.getText();
}
async getNumberOfParagraphBlocks() {
@@ -708,9 +678,7 @@ class EditorPage {
? `//android.widget.Button[contains(@content-desc, "Paragraph Block. Row")]//android.widget.EditText`
: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row")])`;
- const locator = await this.driver.elementsByXPath(
- paragraphBlockLocator
- );
+ const locator = await this.driver.$$( paragraphBlockLocator );
return locator.length;
}
@@ -719,10 +687,9 @@ class EditorPage {
const autocompleterElementId = isAndroid()
? 'Slash inserter results'
: 'autocompleter';
- const autocompleterElement =
- await this.driver.elementsByAccessibilityId(
- autocompleterElementId
- );
+ const autocompleterElement = await this.driver.$$(
+ `~${ autocompleterElementId }`
+ );
if ( autocompleterElement?.[ 0 ] ) {
isPresent = await autocompleterElement[ 0 ].isDisplayed();
@@ -784,8 +751,7 @@ class EditorPage {
this.driver,
'//XCUIElementTypeOther[@name="Media Add image or video"]'
);
- const addMediaButton =
- await mediaSection.elementByAccessibilityId( 'Add image or video' );
+ const addMediaButton = await mediaSection.$( '~Add image or video' );
await addMediaButton.click();
}
@@ -809,8 +775,7 @@ class EditorPage {
this.accessibilityIdKey
);
const blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]//XCUIElementTypeButton[@name="Image block. Empty"]`;
- const imageBlockInnerElement =
- await this.driver.elementByXPath( blockLocator );
+ const imageBlockInnerElement = await this.driver.$( blockLocator );
await imageBlockInnerElement.click();
}
@@ -823,27 +788,30 @@ class EditorPage {
}
async enterCaptionToSelectedImageBlock( caption, clear = true ) {
- const imageBlockCaptionField = await this.driver.elementByXPath(
+ const imageBlockCaptionButton = await this.driver.$(
'//XCUIElementTypeButton[starts-with(@name, "Image caption.")]'
);
- await imageBlockCaptionField.click();
+ await imageBlockCaptionButton.click();
+ const imageBlockCaptionField = await imageBlockCaptionButton.$(
+ '//XCUIElementTypeTextView'
+ );
await typeString( this.driver, imageBlockCaptionField, caption, clear );
}
- async closePicker() {
- if ( isAndroid() ) {
- // Wait for media block picker to load before closing
- const locator =
- '//android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup';
- await waitForVisible( this.driver, locator );
+ async closeMediaPicker() {
+ // Wait for media block picker to load before closing
+ const locator = '~WordPress Media Library';
+ await this.driver.$( locator ).waitForDisplayed();
- await swipeDown( this.driver );
- } else {
- await clickIfClickable(
- this.driver,
- '//XCUIElementTypeButton[@name="Cancel"]'
- );
- }
+ const { width, height } = await this.driver.getWindowSize();
+ await this.driver
+ .action( 'pointer', {
+ parameters: { pointerType: 'touch' },
+ } )
+ .move( { x: width * 0.5, y: height * 0.1 } )
+ .down( { button: 0 } )
+ .up( { button: 0 } )
+ .perform();
}
// =============================
@@ -851,12 +819,12 @@ class EditorPage {
// =============================
async getSearchBlockTextElement( testID ) {
- const child = await this.driver.elementByAccessibilityId( testID );
+ const child = await this.driver.$( `~${ testID }` );
if ( isAndroid() ) {
// Get the child EditText element of the ViewGroup returned by
// elementByAccessibilityId.
- return await child.elementByClassName( 'android.widget.EditText' );
+ return await child.$( 'android.widget.EditText' );
}
return child;
@@ -941,10 +909,6 @@ class EditorPage {
await stopDriver( this.driver );
}
- async sauceJobStatus( allPassed ) {
- await this.driver.sauceJobStatus( allPassed );
- }
-
// =========================
// Shortcode Block functions
// =========================
@@ -990,19 +954,25 @@ class EditorPage {
}
async waitForElementToBeDisplayedById( id, timeout = 2000 ) {
- return await this.driver.waitForElementByAccessibilityId(
- id,
- wd.asserters.isDisplayed,
- timeout
- );
+ const element = await this.driver.$( `~${ id }` );
+
+ if ( element ) {
+ return element;
+ }
+
+ await element.waitForDisplayed( { timeout } );
+ return element;
}
async waitForElementToBeDisplayedByXPath( id, timeout = 2000 ) {
- return await this.driver.waitForElementByXPath(
- id,
- wd.asserters.isDisplayed,
- timeout
- );
+ const element = await this.driver.$( `${ id }` );
+
+ if ( element ) {
+ return element;
+ }
+
+ await element.waitForDisplayed( { timeout } );
+ return element;
}
}
diff --git a/packages/react-native-editor/bin/build_e2e_ios_app b/packages/react-native-editor/bin/build_e2e_ios_app
index 71d2cfd471bec3..569a62db21097f 100755
--- a/packages/react-native-editor/bin/build_e2e_ios_app
+++ b/packages/react-native-editor/bin/build_e2e_ios_app
@@ -2,7 +2,7 @@
set -o pipefail
-DEFAULT_DESTINATION='platform=iOS Simulator,name=iPhone 13'
+DEFAULT_DESTINATION='platform=iOS Simulator,name=iPhone 14,OS=16.2'
if [[ -z "${RN_EDITOR_E2E_IOS_DESTINATION-}" ]]; then
DESTINATION="$DEFAULT_DESTINATION"
else
diff --git a/packages/react-native-editor/bin/test-e2e-setup.sh b/packages/react-native-editor/bin/test-e2e-setup.sh
new file mode 100755
index 00000000000000..5c63d3e9222042
--- /dev/null
+++ b/packages/react-native-editor/bin/test-e2e-setup.sh
@@ -0,0 +1,30 @@
+#!/bin/bash -eu
+
+set -o pipefail
+
+if command -v appium >/dev/null 2>&1; then
+ APPIUM_CMD="appium"
+else
+ # Use relative path to access the locally installed appium
+ APPIUM_CMD="../../../node_modules/.bin/appium"
+fi
+
+output=$($APPIUM_CMD driver list --installed --json)
+
+if echo "$output" | grep -q 'uiautomator2'; then
+ echo '[info] UiAutomator2 is installed, skipping installation.'
+else
+ echo '[info] UiAutomator2 not found, installing...'
+ $APPIUM_CMD driver install uiautomator2
+fi
+
+if echo "$output" | grep -q 'xcuitest'; then
+ echo '[info] XCUITest is installed, skipping installation.'
+else
+ echo '[info] XCUITest not found, installing...'
+ $APPIUM_CMD driver install xcuitest
+fi
+
+# Mitigate conflicts between development server caches and E2E tests
+npm run clean:runtime > /dev/null
+echo '[info] Runtime cache cleaned.'
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 26a891a2402519..e3931b56427c89 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
- ReactCommon/turbomodule/core (= 0.71.11)
- fmt (6.2.1)
- glog (0.3.5)
- - Gutenberg (1.105.0):
+ - Gutenberg (1.107.0):
- React-Core (= 0.71.11)
- React-CoreModules (= 0.71.11)
- React-RCTImage (= 0.71.11)
@@ -429,7 +429,7 @@ PODS:
- React-RCTImage
- RNSVG (13.9.0):
- React-Core
- - RNTAztecView (1.105.0):
+ - RNTAztecView (1.107.0):
- React-Core
- WordPress-Aztec-iOS (= 1.19.9)
- SDWebImage (5.11.1):
@@ -617,7 +617,7 @@ SPEC CHECKSUMS:
FBReactNativeSpec: f07662560742d82a5b73cee116c70b0b49bcc220
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
- Gutenberg: eb59e13cd7ef341f9ef92857009d960b0831f21a
+ Gutenberg: f49ebd82d52153418d80083b19f8d1ca187d2cb0
hermes-engine: 34c863b446d0135b85a6536fa5fd89f48196f848
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -662,7 +662,7 @@ SPEC CHECKSUMS:
RNReanimated: d4f363f4987ae0ade3e36ff81c94e68261bf4b8d
RNScreens: 68fd1060f57dd1023880bf4c05d74784b5392789
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
- RNTAztecView: 4b0ffdbaa58dcbf73b63403a888a2334fc4465dd
+ RNTAztecView: e7e3746b35ffc669cf6885b885194a39e5b237ed
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
WordPress-Aztec-iOS: fbebd569c61baa252b3f5058c0a2a9a6ada686bb
diff --git a/packages/react-native-editor/jest_ui_setup_after_env.js b/packages/react-native-editor/jest_ui_setup_after_env.js
index c5ac13c44051c5..c3125003cc386b 100644
--- a/packages/react-native-editor/jest_ui_setup_after_env.js
+++ b/packages/react-native-editor/jest_ui_setup_after_env.js
@@ -8,15 +8,14 @@ const childProcess = require( 'child_process' );
/**
* Internal dependencies
*/
-const {
- isAndroid,
- isLocalEnvironment,
-} = require( './__device-tests__/helpers/utils' );
+const { isAndroid } = require( './__device-tests__/helpers/utils' );
+import { getAndroidEmulatorID } from './__device-tests__/helpers/get-android-emulator-id';
jest.setTimeout( 1000000 ); // In milliseconds.
let iOSScreenRecordingProcess;
let androidScreenRecordingProcess;
+let androidDeviceID;
const isMacOSEnvironment = () => {
return process.platform === 'darwin';
@@ -24,12 +23,26 @@ const isMacOSEnvironment = () => {
const IOS_RECORDINGS_DIR = './ios-screen-recordings';
const ANDROID_RECORDINGS_DIR = './android-screen-recordings';
+const ANDROID_EMULATOR_DIR = '/sdcard/';
const getScreenRecordingFileNameBase = ( testPath, id ) => {
const suiteName = path.basename( testPath, '.test.js' );
return `${ suiteName }.${ id }`;
};
+function deleteRecordingFile( filePath ) {
+ if ( fs.existsSync( filePath ) ) {
+ try {
+ fs.unlinkSync( filePath );
+ } catch ( error ) {
+ // eslint-disable-next-line no-console
+ console.error(
+ `Failed to delete ${ filePath }. Error: ${ error.message }`
+ );
+ }
+ }
+}
+
let allPassed = true;
// eslint-disable-next-line jest/no-jasmine-globals, no-undef
@@ -43,11 +56,26 @@ jasmine.getEnv().addReporter( {
getScreenRecordingFileNameBase( testPath, id ) + '.mp4';
if ( isAndroid() ) {
+ androidDeviceID = getAndroidEmulatorID();
+
if ( ! fs.existsSync( ANDROID_RECORDINGS_DIR ) ) {
fs.mkdirSync( ANDROID_RECORDINGS_DIR );
}
+ // Use the "mkdir -p" command to create the
+ // ANDROID_EMULATOR_DIR directory if it doesn't exist.
+ try {
+ childProcess.execSync(
+ `adb -s ${ androidDeviceID } shell "mkdir -p ${ ANDROID_EMULATOR_DIR }" 2>/dev/null`
+ );
+ } catch ( error ) {
+ // eslint-disable-next-line no-console
+ console.error( `Failed to create the directory: ${ error }` );
+ }
+
androidScreenRecordingProcess = childProcess.spawn( 'adb', [
+ '-s',
+ androidDeviceID,
'shell',
'screenrecord',
'--verbose',
@@ -55,14 +83,13 @@ jasmine.getEnv().addReporter( {
'1M',
'--size',
'720x1280',
- `/sdcard/${ fileName }`,
+ `${ ANDROID_EMULATOR_DIR }${ fileName }`,
] );
androidScreenRecordingProcess.stderr.on( 'data', ( data ) => {
// eslint-disable-next-line no-console
console.log( `Android screen recording error => ${ data }` );
} );
-
return;
}
@@ -88,6 +115,7 @@ jasmine.getEnv().addReporter( {
},
specDone: ( { testPath, id, status } ) => {
allPassed = allPassed && status !== 'failed';
+ const isTestSkipped = status === 'pending';
if ( ! isMacOSEnvironment() ) {
return;
@@ -100,9 +128,16 @@ jasmine.getEnv().addReporter( {
// Wait for kill.
childProcess.execSync( 'sleep 1' );
+ const recordingFilePath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
+
+ if ( isTestSkipped ) {
+ deleteRecordingFile( recordingFilePath );
+ return;
+ }
+
try {
childProcess.execSync(
- `adb pull /sdcard/${ fileNameBase }.mp4 ${ ANDROID_RECORDINGS_DIR }`
+ `adb -s ${ androidDeviceID } pull ${ ANDROID_EMULATOR_DIR }${ fileNameBase }.mp4 ${ ANDROID_RECORDINGS_DIR }`
);
} catch ( error ) {
// Some (old) Android devices don't support screen recording or
@@ -116,27 +151,27 @@ jasmine.getEnv().addReporter( {
);
}
- const oldPath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
const newPath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
- if ( fs.existsSync( oldPath ) ) {
- fs.renameSync( oldPath, newPath );
+ if ( fs.existsSync( recordingFilePath ) ) {
+ fs.renameSync( recordingFilePath, newPath );
}
return;
}
iOSScreenRecordingProcess.kill( 'SIGINT' );
- const oldPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
- const newPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
+ const recordingFilePath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
- if ( fs.existsSync( oldPath ) ) {
- fs.renameSync( oldPath, newPath );
+ if ( isTestSkipped ) {
+ deleteRecordingFile( recordingFilePath );
+ return;
}
- },
- suiteDone() {
- if ( ! isLocalEnvironment() ) {
- global.editorPage.sauceJobStatus( allPassed );
+
+ const newPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
+
+ if ( fs.existsSync( recordingFilePath ) ) {
+ fs.renameSync( recordingFilePath, newPath );
}
},
} );
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 0c6ff58c7184d5..ccc7f64d1f7bca 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-editor",
- "version": "1.105.0",
+ "version": "1.107.0",
"description": "Mobile WordPress gutenberg editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -109,12 +109,13 @@
"device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --forceExit --config ./jest_ui.config.js",
"device-tests:debug": "cross-env NODE_ENV=test node $NODE_DEBUG_OPTION --inspect-brk node_modules/jest/bin/jest --runInBand --detectOpenHandles --verbose --config ./jest_ui.config.js",
"appium:start": "node ./__device-tests__/helpers/appium-local-start.js",
+ "test:e2e:setup": "./bin/test-e2e-setup.sh",
"test:e2e:bundle:android": "mkdir -p android/app/src/main/assets && npm run rn-bundle -- --reset-cache --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"test:e2e:build-app:android": "cd android && ./gradlew clean && ./gradlew assembleDebug",
"test:e2e:android:local": "npm run test:e2e:bundle:android && npm run test:e2e:build-app:android && TEST_RN_PLATFORM=android npm run device-tests:local",
"test:e2e:bundle:ios": "mkdir -p ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app && npm run bundle:ios && cp bundle/ios/App.js ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle && cp -r bundle/ios/assets ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/",
"test:e2e:build-app:ios": "npm run preios && ./bin/build_e2e_ios_app",
- "test:e2e:build-wda": "xcodebuild -project ../../node_modules/appium/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj -scheme WebDriverAgentRunner -destination 'platform=iOS Simulator,name=iPhone 13' -derivedDataPath ios/build/WDA",
+ "test:e2e:build-wda": "xcodebuild -project ~/.appium/node_modules/appium-xcuitest-driver/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj -scheme WebDriverAgentRunner -destination 'platform=iOS Simulator,name=iPhone 14,OS=16.2' -derivedDataPath ios/build/WDA",
"test:e2e:ios:local": "npm run test:e2e:bundle:ios && npm run test:e2e:build-app:ios && npm run test:e2e:build-wda && TEST_RN_PLATFORM=ios npm run device-tests:local",
"build:gutenberg": "cd gutenberg && npm ci && npm run build",
"clean": "npm run clean:build-artifacts; npm run clean:aztec; npm run clean:haste; npm run clean:metro; npm run clean:watchman",
diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
index 32ba1c6f3441d0..e4c73676651fa0 100644
--- a/packages/react-native-editor/src/index.js
+++ b/packages/react-native-editor/src/index.js
@@ -52,7 +52,7 @@ const registerGutenberg = ( {
this.editorComponent = setup();
// Apply optional setup configuration, enabling modification via hooks.
- if ( typeof require.context === 'function' ) {
+ if ( __DEV__ && typeof require.context === 'function' ) {
const req = require.context( './', false, /setup-local\.js$/ );
req.keys().forEach( ( key ) => req( key ).default() );
}
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 2e4918f40ec6df..38c3d56878e978 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 2.27.0 (2023-10-18)
+
## 2.26.0 (2023-10-05)
## 2.25.0 (2023-09-20)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index 2fe5ee0e77270b..9e56549c7c9588 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/readable-js-assets-webpack-plugin",
- "version": "2.26.0",
+ "version": "2.27.0",
"description": "Generate a readable JS file for each JS asset.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index 5d87562193aeff..cd33b809f87dbb 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/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/redux-routine/package.json b/packages/redux-routine/package.json
index 9d050db83d5c7e..0beb35393a2971 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/redux-routine",
- "version": "4.43.0",
+ "version": "4.44.0",
"description": "Redux middleware for generator coroutines.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index d2f9f060941550..36daa9b33d361d 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/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/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 948d94a22a254c..bc16a2e5512c27 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/reusable-blocks",
- "version": "4.20.0",
+ "version": "4.21.0",
"description": "Reusable blocks utilities.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/src/lock-unlock.js b/packages/reusable-blocks/src/lock-unlock.js
index c33f209c9d76ae..c0bc2d1529f7d9 100644
--- a/packages/reusable-blocks/src/lock-unlock.js
+++ b/packages/reusable-blocks/src/lock-unlock.js
@@ -4,6 +4,6 @@
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/reusable-blocks'
);
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index 0a738b11f11284..7ac95013ba4e55 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/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/rich-text/package.json b/packages/rich-text/package.json
index 2f7c1f4d98a495..4f01c054bbd10e 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/rich-text",
- "version": "6.20.0",
+ "version": "6.21.0",
"description": "Rich text value and manipulation API.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/component/use-anchor.js b/packages/rich-text/src/component/use-anchor.js
index af9e0e4d87dc3e..7ea3281cb60d3a 100644
--- a/packages/rich-text/src/component/use-anchor.js
+++ b/packages/rich-text/src/component/use-anchor.js
@@ -168,7 +168,12 @@ export function useAnchor( { editableContentElement, settings = {} } ) {
editableContentElement.addEventListener( 'focusin', attach );
editableContentElement.addEventListener( 'focusout', detach );
- return detach;
+ return () => {
+ detach();
+
+ editableContentElement.removeEventListener( 'focusin', attach );
+ editableContentElement.removeEventListener( 'focusout', detach );
+ };
}, [ editableContentElement, tagName, className ] );
return anchor;
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index 8115aad14200fe..6aa6b66bf75914 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/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/router/package.json b/packages/router/package.json
index efda24b4d56ea1..a207879b18ec17 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/router",
- "version": "0.12.0",
+ "version": "0.13.0",
"description": "Router API for WordPress pages.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/router/src/lock-unlock.js b/packages/router/src/lock-unlock.js
index d148f785fe9442..d7f4e92b4a542d 100644
--- a/packages/router/src/lock-unlock.js
+++ b/packages/router/src/lock-unlock.js
@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+ 'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/router'
);
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 9579fd5af5813d..cc3179229c9a08 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 26.15.0 (2023-10-18)
+
## 26.14.0 (2023-10-05)
### Internal
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index 8e80d806b17e7d..89ae3f1fff05c5 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -491,7 +491,7 @@ Should there be any situation where you want to provide your own Jest config, yo
- there is a file called `jest-unit.config.js`, `jest-unit.config.json`, `jest.config.js`, or `jest.config.json` in the top-level directory of your package (at the same level than your `package.json`).
- a `jest` object can be provided in the `package.json` file with the test configuration.
-### `test-plyawright`
+### `test-playwright`
Launches the Playwright End-To-End (E2E) test runner. Similar to Puppeteer, it provides a high-level API to control a headless browser.
diff --git a/packages/scripts/config/playwright.config.js b/packages/scripts/config/playwright.config.js
index 6f380017ccdc4f..03ccbb848554b2 100644
--- a/packages/scripts/config/playwright.config.js
+++ b/packages/scripts/config/playwright.config.js
@@ -2,7 +2,6 @@
* External dependencies
*/
const path = require( 'path' );
-const { fileURLToPath } = require( 'url' );
const { defineConfig, devices } = require( '@playwright/test' );
process.env.WP_ARTIFACTS_PATH ??= path.join( process.cwd(), 'artifacts' );
@@ -24,9 +23,7 @@ const config = defineConfig( {
outputDir: path.join( process.env.WP_ARTIFACTS_PATH, 'test-results' ),
snapshotPathTemplate:
'{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}',
- globalSetup: fileURLToPath(
- new URL( './playwright/global-setup.js', 'file:' + __filename ).href
- ),
+ globalSetup: require.resolve( './playwright/global-setup.js' ),
use: {
baseURL: process.env.WP_BASE_URL || 'http://localhost:8889',
headless: true,
diff --git a/packages/scripts/config/playwright/global-setup.js b/packages/scripts/config/playwright/global-setup.js
index 9a4cbde9b7d241..0a45d7335590a4 100644
--- a/packages/scripts/config/playwright/global-setup.js
+++ b/packages/scripts/config/playwright/global-setup.js
@@ -1,12 +1,12 @@
/**
* External dependencies
*/
-import { request } from '@playwright/test';
+const { request } = require( '@playwright/test' );
/**
* WordPress dependencies
*/
-import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
+const { RequestUtils } = require( '@wordpress/e2e-test-utils-playwright' );
/**
*
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 5d316c7dc678a9..99315083e59b90 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/scripts",
- "version": "26.14.0",
+ "version": "26.15.0",
"description": "Collection of reusable scripts for WordPress development.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/scripts/test-playwright.js b/packages/scripts/scripts/test-playwright.js
index 4c10fb6f621142..2e05d992f9df9e 100644
--- a/packages/scripts/scripts/test-playwright.js
+++ b/packages/scripts/scripts/test-playwright.js
@@ -41,7 +41,7 @@ const config =
! hasArgInCLI( '--config' ) &&
! hasProjectFile( 'playwright.config.ts' ) &&
! hasProjectFile( 'playwright.config.js' )
- ? [ '--config', fromConfigRoot( 'playwright.config.ts' ) ]
+ ? [ '--config', fromConfigRoot( 'playwright.config.js' ) ]
: [];
// Set the default artifacts path.
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index beba16002872c1..3c4db81595ca7a 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/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/server-side-render/package.json b/packages/server-side-render/package.json
index 216dc24d4bee2c..027124ee241f94 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/server-side-render",
- "version": "4.20.0",
+ "version": "4.21.0",
"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index 2201f0f5914ed5..0bbd57febb408c 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/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/shortcode/package.json b/packages/shortcode/package.json
index cc018d40409ce4..d14bd7923fa9ec 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/shortcode",
- "version": "3.43.0",
+ "version": "3.44.0",
"description": "Shortcode module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 8e3df38eaa722e..9cd3c7bfa9d34e 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 1.27.0 (2023-10-18)
+
## 1.26.0 (2023-10-05)
## 1.25.0 (2023-09-20)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 74617623a5f349..643f5e5fbde4ff 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/style-engine",
- "version": "1.26.0",
+ "version": "1.27.0",
"description": "A suite of parsers and compilers for WordPress styles.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 0e3e513ba27199..7b10e337eaab5e 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 21.27.0 (2023-10-18)
+
## 21.26.0 (2023-10-05)
## 21.25.0 (2023-09-20)
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index ffed31bf1d4ea2..0284494f9201dc 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/stylelint-config",
- "version": "21.26.0",
+ "version": "21.27.0",
"description": "stylelint config for WordPress development.",
"author": "The WordPress Contributors",
"license": "MIT",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index fb12e171999107..fe431e8e029195 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 0.6.0 (2023-10-18)
+
## 0.5.0 (2023-10-05)
## 0.4.0 (2023-09-20)
diff --git a/packages/sync/README.md b/packages/sync/README.md
index 62fe20af4f2fbb..f15d61b5a1eb5f 100644
--- a/packages/sync/README.md
+++ b/packages/sync/README.md
@@ -28,32 +28,32 @@ _Returns_
- `Promise<() => void>`: Promise that resolves when the connection is established.
-### connectWebRTC
+### createSyncProvider
-Connect function to the WebRTC provider.
+Create a sync provider.
_Parameters_
-- _objectId_ `ObjectID`: The object ID.
-- _objectType_ `ObjectType`: The object type.
-- _doc_ `CRDTDoc`: The CRDT document.
+- _connectLocal_ `ConnectDoc`: Connect the document to a local database.
+- _connectRemote_ `ConnectDoc`: Connect the document to a remote sync connection.
_Returns_
-- `Promise<() => void>`: Promise that resolves when the connection is established.
+- `SyncProvider`: Sync provider.
-### createSyncProvider
+### createWebRTCConnection
-Create a sync provider.
+Function that creates a new WebRTC Connection.
_Parameters_
-- _connectLocal_ `ConnectDoc`: Connect the document to a local database.
-- _connectRemote_ `ConnectDoc`: Connect the document to a remote sync connection.
+- _config_ `Object`: The object ID.
+- _config.signaling_ `Array`:
+- _config.password_ `string`:
_Returns_
-- `SyncProvider`: Sync provider.
+- `Function`: Promise that resolves when the connection is established.
diff --git a/packages/sync/package.json b/packages/sync/package.json
index 9477ea6a8dd615..e73983f2a42fdc 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/sync",
- "version": "0.5.0",
+ "version": "0.6.0",
"description": "Sync Data.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -28,7 +28,13 @@
"sideEffects": false,
"dependencies": {
"@babel/runtime": "^7.16.0",
+ "@types/simple-peer": "^9.11.5",
+ "@wordpress/url": "file:../url",
+ "import-locals": "^2.0.0",
+ "lib0": "^0.2.42",
+ "simple-peer": "^9.11.0",
"y-indexeddb": "~9.0.11",
+ "y-protocols": "^1.0.5",
"y-webrtc": "~10.2.5",
"yjs": "~13.6.6"
},
diff --git a/packages/sync/src/connect-indexdb.js b/packages/sync/src/connect-indexdb.js
index ee56a463fd9956..5523640408f575 100644
--- a/packages/sync/src/connect-indexdb.js
+++ b/packages/sync/src/connect-indexdb.js
@@ -20,8 +20,8 @@ import { IndexeddbPersistence } from 'y-indexeddb';
* @return {Promise<() => void>} Promise that resolves when the connection is established.
*/
export function connectIndexDb( objectId, objectType, doc ) {
- const docName = `${ objectType }-${ objectId }`;
- const provider = new IndexeddbPersistence( docName, doc );
+ const roomName = `${ objectType }-${ objectId }`;
+ const provider = new IndexeddbPersistence( roomName, doc );
return new Promise( ( resolve ) => {
provider.on( 'synced', () => {
diff --git a/packages/sync/src/connect-webrtc.js b/packages/sync/src/connect-webrtc.js
deleted file mode 100644
index 867bba39d68927..00000000000000
--- a/packages/sync/src/connect-webrtc.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-// @ts-ignore
-import { WebrtcProvider } from 'y-webrtc';
-
-/** @typedef {import('./types').ObjectType} ObjectType */
-/** @typedef {import('./types').ObjectID} ObjectID */
-/** @typedef {import('./types').CRDTDoc} CRDTDoc */
-
-/**
- * Connect function to the WebRTC provider.
- *
- * @param {ObjectID} objectId The object ID.
- * @param {ObjectType} objectType The object type.
- * @param {CRDTDoc} doc The CRDT document.
- *
- * @return {Promise<() => void>} Promise that resolves when the connection is established.
- */
-export function connectWebRTC( objectId, objectType, doc ) {
- const docName = `${ objectType }-${ objectId }`;
- new WebrtcProvider( docName, doc, {
- // @ts-ignore
- password: window.__experimentalCollaborativeEditingSecret,
- } );
-
- return Promise.resolve( () => true );
-}
diff --git a/packages/sync/src/create-webrtc-connection.js b/packages/sync/src/create-webrtc-connection.js
new file mode 100644
index 00000000000000..97fcddc727d024
--- /dev/null
+++ b/packages/sync/src/create-webrtc-connection.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+// import { WebrtcProvider } from 'y-webrtc';
+
+/**
+ * Internal dependencies
+ */
+import { WebrtcProviderWithHttpSignaling } from './webrtc-http-stream-signaling';
+
+/** @typedef {import('./types').ObjectType} ObjectType */
+/** @typedef {import('./types').ObjectID} ObjectID */
+/** @typedef {import('./types').CRDTDoc} CRDTDoc */
+
+/**
+ * Function that creates a new WebRTC Connection.
+ *
+ * @param {Object} config The object ID.
+ *
+ * @param {Array} config.signaling
+ * @param {string} config.password
+ * @return {Function} Promise that resolves when the connection is established.
+ */
+export function createWebRTCConnection( { signaling, password } ) {
+ return function (
+ /** @type {string} */ objectId,
+ /** @type {string} */ objectType,
+ /** @type {import("yjs").Doc} */ doc
+ ) {
+ const roomName = `${ objectType }-${ objectId }`;
+ new WebrtcProviderWithHttpSignaling( roomName, doc, {
+ signaling,
+ // @ts-ignore
+ password,
+ } );
+
+ return Promise.resolve( () => true );
+ };
+}
diff --git a/packages/sync/src/index.js b/packages/sync/src/index.js
index 975fb52989f5d2..6c2b6899ffb618 100644
--- a/packages/sync/src/index.js
+++ b/packages/sync/src/index.js
@@ -1,3 +1,3 @@
export { connectIndexDb } from './connect-indexdb';
-export { connectWebRTC } from './connect-webrtc';
+export { createWebRTCConnection } from './create-webrtc-connection';
export { createSyncProvider } from './provider';
diff --git a/packages/sync/src/webrtc-http-stream-signaling.js b/packages/sync/src/webrtc-http-stream-signaling.js
new file mode 100644
index 00000000000000..14f8aa0de221b8
--- /dev/null
+++ b/packages/sync/src/webrtc-http-stream-signaling.js
@@ -0,0 +1,401 @@
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import {
+ WebrtcProvider,
+ SignalingConn,
+ WebrtcConn,
+ signalingConns,
+ rooms,
+ publishSignalingMessage,
+ log,
+} from './y-webrtc/y-webrtc';
+import * as cryptoutils from './y-webrtc/crypto';
+
+import * as map from 'lib0/map';
+import { Observable } from 'lib0/observable';
+import * as buffer from 'lib0/buffer';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Method copied as is from the SignalingConn constructor.
+ * Setups the needed event handlers for an http signaling connection.
+ *
+ * @param {HttpSignalingConn} signalCon The signaling connection.
+ * @param {string} url The url.
+ */
+function setupSignalEventHandlers( signalCon, url ) {
+ signalCon.on( 'connect', () => {
+ log( `connected (${ url })` );
+ const topics = Array.from( rooms.keys() );
+ signalCon.send( { type: 'subscribe', topics } );
+ rooms.forEach( ( room ) =>
+ publishSignalingMessage( signalCon, room, {
+ type: 'announce',
+ from: room.peerId,
+ } )
+ );
+ } );
+ signalCon.on(
+ 'message',
+ ( /** @type {{ type: any; topic: any; data: string; }} */ m ) => {
+ switch ( m.type ) {
+ case 'publish': {
+ const roomName = m.topic;
+ const room = rooms.get( roomName );
+ if (
+ room === null ||
+ typeof roomName !== 'string' ||
+ room === undefined
+ ) {
+ return;
+ }
+ const execMessage = ( /** @type {any} */ data ) => {
+ const webrtcConns = room.webrtcConns;
+ const peerId = room.peerId;
+ if (
+ data === null ||
+ data.from === peerId ||
+ ( data.to !== undefined && data.to !== peerId ) ||
+ room.bcConns.has( data.from )
+ ) {
+ // ignore messages that are not addressed to this conn, or from clients that are connected via broadcastchannel
+ return;
+ }
+ const emitPeerChange = webrtcConns.has( data.from )
+ ? () => {}
+ : () =>
+ room.provider.emit( 'peers', [
+ {
+ removed: [],
+ added: [ data.from ],
+ webrtcPeers: Array.from(
+ room.webrtcConns.keys()
+ ),
+ bcPeers: Array.from( room.bcConns ),
+ },
+ ] );
+ switch ( data.type ) {
+ case 'announce':
+ if (
+ webrtcConns.size < room.provider.maxConns
+ ) {
+ map.setIfUndefined(
+ webrtcConns,
+ data.from,
+ () =>
+ new WebrtcConn(
+ signalCon,
+ true,
+ data.from,
+ room
+ )
+ );
+ emitPeerChange();
+ }
+ break;
+ case 'signal':
+ if ( data.signal.type === 'offer' ) {
+ const existingConn = webrtcConns.get(
+ data.from
+ );
+ if ( existingConn ) {
+ const remoteToken = data.token;
+ const localToken =
+ existingConn.glareToken;
+ if (
+ localToken &&
+ localToken > remoteToken
+ ) {
+ log(
+ 'offer rejected: ',
+ data.from
+ );
+ return;
+ }
+ // if we don't reject the offer, we will be accepting it and answering it
+ existingConn.glareToken = undefined;
+ }
+ }
+ if ( data.signal.type === 'answer' ) {
+ log( 'offer answered by: ', data.from );
+ const existingConn = webrtcConns.get(
+ data.from
+ );
+ if ( existingConn ) {
+ existingConn.glareToken = undefined;
+ }
+ }
+ if ( data.to === peerId ) {
+ map.setIfUndefined(
+ webrtcConns,
+ data.from,
+ () =>
+ new WebrtcConn(
+ signalCon,
+ false,
+ data.from,
+ room
+ )
+ ).peer.signal( data.signal );
+ emitPeerChange();
+ }
+ break;
+ }
+ };
+ if ( room.key ) {
+ if ( typeof m.data === 'string' ) {
+ cryptoutils
+ .decryptJson(
+ buffer.fromBase64( m.data ),
+ room.key
+ )
+ .then( execMessage );
+ }
+ } else {
+ execMessage( m.data );
+ }
+ }
+ }
+ }
+ );
+ signalCon.on( 'disconnect', () => log( `disconnect (${ url })` ) );
+}
+
+/**
+ * Method that instantiates the http signaling connection.
+ * Tries to implement the same methods a websocket provides using ajax requests
+ * to send messages and EventSource to retrieve messages.
+ *
+ * @param {HttpSignalingConn} httpClient The signaling connection.
+ */
+function setupHttpSignal( httpClient ) {
+ if ( httpClient.shouldConnect && httpClient.ws === null ) {
+ // eslint-disable-next-line no-restricted-syntax
+ const subscriberId = Math.floor( 100000 + Math.random() * 900000 );
+ const url = httpClient.url;
+ const eventSource = new window.EventSource(
+ addQueryArgs( url, {
+ subscriber_id: subscriberId,
+ action: 'gutenberg_signaling_server',
+ } )
+ );
+ /**
+ * @type {any}
+ */
+ let pingTimeout = null;
+ eventSource.onmessage = ( event ) => {
+ httpClient.lastMessageReceived = Date.now();
+ const data = event.data;
+ if ( data ) {
+ const messages = JSON.parse( data );
+ if ( Array.isArray( messages ) ) {
+ messages.forEach( onSingleMessage );
+ }
+ }
+ };
+ // @ts-ignore
+ httpClient.ws = eventSource;
+ httpClient.connecting = true;
+ httpClient.connected = false;
+ const onSingleMessage = ( /** @type {any} */ message ) => {
+ if ( message && message.type === 'pong' ) {
+ clearTimeout( pingTimeout );
+ pingTimeout = setTimeout(
+ sendPing,
+ messageReconnectTimeout / 2
+ );
+ }
+ httpClient.emit( 'message', [ message, httpClient ] );
+ };
+
+ /**
+ * @param {any} error
+ */
+ const onclose = ( error ) => {
+ if ( httpClient.ws !== null ) {
+ httpClient.ws.close();
+ httpClient.ws = null;
+ httpClient.connecting = false;
+ if ( httpClient.connected ) {
+ httpClient.connected = false;
+ httpClient.emit( 'disconnect', [
+ { type: 'disconnect', error },
+ httpClient,
+ ] );
+ } else {
+ httpClient.unsuccessfulReconnects++;
+ }
+ }
+ clearTimeout( pingTimeout );
+ };
+ const sendPing = () => {
+ if (
+ httpClient.ws &&
+ httpClient.ws.readyState === window.EventSource.OPEN
+ ) {
+ httpClient.send( {
+ type: 'ping',
+ } );
+ }
+ };
+ if ( httpClient.ws ) {
+ httpClient.ws.onclose = () => {
+ onclose( null );
+ };
+ httpClient.ws.send = function send(
+ /** @type {string} */ message
+ ) {
+ window
+ .fetch( url, {
+ body: new URLSearchParams( {
+ subscriber_id: subscriberId.toString(),
+ action: 'gutenberg_signaling_server',
+ message,
+ } ),
+ method: 'POST',
+ } )
+ .catch( () => {
+ log(
+ 'Error sending to server with message: ' + message
+ );
+ } );
+ };
+ }
+ eventSource.onerror = () => {
+ // Todo: add an error handler
+ };
+ eventSource.onopen = () => {
+ if ( httpClient.connected ) {
+ return;
+ }
+ if ( eventSource.readyState === window.EventSource.OPEN ) {
+ httpClient.lastMessageReceived = Date.now();
+ httpClient.connecting = false;
+ httpClient.connected = true;
+ httpClient.unsuccessfulReconnects = 0;
+ httpClient.emit( 'connect', [
+ { type: 'connect' },
+ httpClient,
+ ] );
+ // set ping
+ pingTimeout = setTimeout(
+ sendPing,
+ messageReconnectTimeout / 2
+ );
+ }
+ };
+ }
+}
+const messageReconnectTimeout = 30000;
+
+/**
+ * @augments Observable
+ */ export class HttpSignalingConn extends Observable {
+ /**
+ * @param {string} url
+ */
+ constructor( url ) {
+ super();
+
+ //WebsocketClient from lib0/websocket.js
+ this.url = url;
+ /**
+ * @type {WebSocket?}
+ */
+ this.ws = null;
+ // @ts-ignore
+ this.binaryType = null; // this.binaryType = binaryType
+ this.connected = false;
+ this.connecting = false;
+ this.unsuccessfulReconnects = 0;
+ this.lastMessageReceived = 0;
+ /**
+ * Whether to connect to other peers or not
+ *
+ * @type {boolean}
+ */
+ this.shouldConnect = true;
+ this._checkInterval = setInterval( () => {
+ if (
+ this.connected &&
+ messageReconnectTimeout <
+ Date.now() - this.lastMessageReceived &&
+ this.ws
+ ) {
+ // no message received in a long time - not even your own awareness
+ // updates (which are updated every 15 seconds)
+ this.ws.close();
+ }
+ }, messageReconnectTimeout / 2 );
+ //setupWS( this );
+ setupHttpSignal( this );
+
+ // From SignalingConn
+ /**
+ * @type {Set}
+ */
+ this.providers = new Set();
+
+ setupSignalEventHandlers( this, url );
+ }
+
+ /**
+ * @param {any} message
+ */
+ send( message ) {
+ if ( this.ws ) {
+ this.ws.send( JSON.stringify( message ) );
+ }
+ }
+
+ destroy() {
+ clearInterval( this._checkInterval );
+ this.disconnect();
+ super.destroy();
+ }
+
+ disconnect() {
+ this.shouldConnect = false;
+ if ( this.ws !== null ) {
+ this.ws.close();
+ }
+ }
+
+ connect() {
+ this.shouldConnect = true;
+ if ( ! this.connected && this.ws === null ) {
+ setupHttpSignal( this );
+ }
+ }
+}
+
+export class WebrtcProviderWithHttpSignaling extends WebrtcProvider {
+ connect() {
+ this.shouldConnect = true;
+ this.signalingUrls.forEach( ( /** @type {string} */ url ) => {
+ const signalingConn = map.setIfUndefined(
+ signalingConns,
+ url,
+ // Only this conditional logic to create a normal websocket connection or
+ // an http signaling connection was added to the constructor when compared
+ // with the base class.
+ url.startsWith( 'ws://' ) || url.startsWith( 'wss://' )
+ ? () => new SignalingConn( url )
+ : () => new HttpSignalingConn( url )
+ );
+ this.signalingConns.push( signalingConn );
+ signalingConn.providers.add( this );
+ } );
+ if ( this.room ) {
+ this.room.connect();
+ }
+ }
+}
diff --git a/packages/sync/src/y-webrtc/crypto.js b/packages/sync/src/y-webrtc/crypto.js
new file mode 100644
index 00000000000000..8fb549b5681e4e
--- /dev/null
+++ b/packages/sync/src/y-webrtc/crypto.js
@@ -0,0 +1,127 @@
+// File copied as is from the y-webrtc package.
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+// @ts-nocheck
+/* eslint-env browser */
+
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as promise from 'lib0/promise';
+import * as error from 'lib0/error';
+import * as string from 'lib0/string';
+
+/**
+ * @param {string} secret
+ * @param {string} roomName
+ * @return {PromiseLike}
+ */
+export const deriveKey = ( secret, roomName ) => {
+ const secretBuffer = string.encodeUtf8( secret ).buffer;
+ const salt = string.encodeUtf8( roomName ).buffer;
+ return crypto.subtle
+ .importKey( 'raw', secretBuffer, 'PBKDF2', false, [ 'deriveKey' ] )
+ .then( ( keyMaterial ) =>
+ crypto.subtle.deriveKey(
+ {
+ name: 'PBKDF2',
+ salt,
+ iterations: 100000,
+ hash: 'SHA-256',
+ },
+ keyMaterial,
+ {
+ name: 'AES-GCM',
+ length: 256,
+ },
+ true,
+ [ 'encrypt', 'decrypt' ]
+ )
+ );
+};
+
+/**
+ * @param {Uint8Array} data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike} encrypted, base64 encoded message
+ */
+export const encrypt = ( data, key ) => {
+ if ( ! key ) {
+ return /** @type {PromiseLike} */ (
+ promise.resolve( data )
+ );
+ }
+ const iv = crypto.getRandomValues( new Uint8Array( 12 ) );
+ return crypto.subtle
+ .encrypt(
+ {
+ name: 'AES-GCM',
+ iv,
+ },
+ key,
+ data
+ )
+ .then( ( cipher ) => {
+ const encryptedDataEncoder = encoding.createEncoder();
+ encoding.writeVarString( encryptedDataEncoder, 'AES-GCM' );
+ encoding.writeVarUint8Array( encryptedDataEncoder, iv );
+ encoding.writeVarUint8Array(
+ encryptedDataEncoder,
+ new Uint8Array( cipher )
+ );
+ return encoding.toUint8Array( encryptedDataEncoder );
+ } );
+};
+
+/**
+ * @param {Object} data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike} encrypted data, if key is provided
+ */
+export const encryptJson = ( data, key ) => {
+ const dataEncoder = encoding.createEncoder();
+ encoding.writeAny( dataEncoder, data );
+ return encrypt( encoding.toUint8Array( dataEncoder ), key );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike} decrypted buffer
+ */
+export const decrypt = ( data, key ) => {
+ if ( ! key ) {
+ return /** @type {PromiseLike} */ (
+ promise.resolve( data )
+ );
+ }
+ const dataDecoder = decoding.createDecoder( data );
+ const algorithm = decoding.readVarString( dataDecoder );
+ if ( algorithm !== 'AES-GCM' ) {
+ promise.reject( error.create( 'Unknown encryption algorithm' ) );
+ }
+ const iv = decoding.readVarUint8Array( dataDecoder );
+ const cipher = decoding.readVarUint8Array( dataDecoder );
+ return crypto.subtle
+ .decrypt(
+ {
+ name: 'AES-GCM',
+ iv,
+ },
+ key,
+ cipher
+ )
+ .then( ( data ) => new Uint8Array( data ) );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike
The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?
`; -exports.imageCaption = `C'est la vie my friends`; +exports.imageCaption = `Autumn meets winter`; exports.imageCompletehtml = `