- { variants.map( ( variant ) => (
-
{
+ return (
+
+
-
- { /* eslint-disable-next-line no-restricted-syntax */ }
-
-
-
-
-
-
- ) ) }
-
+ { name }
+
+ { variants.map( ( variant ) => (
+
+
+
+ ) ) }
+
+ );
+ };
+
+ return (
+
+
+
);
};
VariantStates.args = {
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index ae242c38634180..3541699a08eefd 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -1,3 +1,10 @@
+/**
+ * For easier testing of potential regressions, you can use a Button variant matrix
+ * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
+ */
+
.components-button {
display: inline-flex;
text-decoration: none;
diff --git a/packages/components/src/date-time/index.ts b/packages/components/src/date-time/index.ts
index 8335366bcbb73b..a103bac0d30efb 100644
--- a/packages/components/src/date-time/index.ts
+++ b/packages/components/src/date-time/index.ts
@@ -3,8 +3,7 @@
*/
import { default as DatePicker } from './date';
import { default as TimePicker } from './time';
-import { default as TimeInput } from './time-input';
import { default as DateTimePicker } from './date-time';
-export { DatePicker, TimePicker, TimeInput };
+export { DatePicker, TimePicker };
export default DateTimePicker;
diff --git a/packages/components/src/date-time/stories/time-input.story.tsx b/packages/components/src/date-time/stories/time-input.story.tsx
deleted file mode 100644
index c74d886e82477c..00000000000000
--- a/packages/components/src/date-time/stories/time-input.story.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-/**
- * Internal dependencies
- */
-import { TimeInput } from '../time-input';
-
-const meta: Meta< typeof TimeInput > = {
- title: 'Components/TimeInput',
- component: TimeInput,
- argTypes: {
- onChange: { action: 'onChange', control: { type: null } },
- },
- tags: [ 'status-wip' ],
- parameters: {
- controls: { expanded: true },
- docs: { canvas: { sourceState: 'shown' } },
- },
- args: {
- onChange: action( 'onChange' ),
- },
-};
-export default meta;
-
-const Template: StoryFn< typeof TimeInput > = ( args ) => {
- return
+
{ modal }
,
document.body
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 2e102b8b0b77cc..ba92813bdbfb0f 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -42,6 +42,12 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
elevationIntensity: 1,
+ radiusXSmall: '1px',
+ radiusSmall: '2px',
+ radiusMedium: '4px',
+ radiusLarge: '8px',
+ radiusFull: '9999px',
+ radiusRound: '50%',
radiusBlockUi: '2px',
borderWidth: '1px',
borderWidthFocus: '1.5px',
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
index 1e544aeaadfe1b..a2644ec4ad4da9 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -166,9 +166,11 @@ export function usePostTypeArchiveMenuItems() {
// `icon` is the `menu_icon` property of a post type. We
// only handle `dashicons` for now, even if the `menu_icon`
// also supports urls and svg as values.
- icon: postType.icon?.startsWith( 'dashicons-' )
- ? postType.icon.slice( 10 )
- : archive,
+ icon:
+ typeof postType.icon === 'string' &&
+ postType.icon.startsWith( 'dashicons-' )
+ ? postType.icon.slice( 10 )
+ : archive,
templatePrefix: 'archive',
};
} ) || [],
@@ -272,9 +274,11 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
// `icon` is the `menu_icon` property of a post type. We
// only handle `dashicons` for now, even if the `menu_icon`
// also supports urls and svg as values.
- icon: icon?.startsWith( 'dashicons-' )
- ? icon.slice( 10 )
- : post,
+ icon:
+ typeof icon === 'string' &&
+ icon.startsWith( 'dashicons-' )
+ ? icon.slice( 10 )
+ : post,
templatePrefix: templatePrefixes[ slug ],
};
const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b11a9c56c9c50c..d0c63a9db5cad6 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -7,8 +7,8 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
import {
EditorKeyboardShortcutsRegister,
privateApis as editorPrivateApis,
@@ -22,6 +22,7 @@ import { store as noticesStore } from '@wordpress/notices';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { store as preferencesStore } from '@wordpress/preferences';
import { decodeEntities } from '@wordpress/html-entities';
+import { Icon, chevronLeft } from '@wordpress/icons';
/**
* Internal dependencies
@@ -51,7 +52,32 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
const { useHistory, useLocation } = unlock( routerPrivateApis );
const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+const toggleHomeIconVariants = {
+ edit: {
+ opacity: 0,
+ scale: 0.2,
+ },
+ hover: {
+ opacity: 1,
+ scale: 1,
+ clipPath: 'inset( 22% round 2px )',
+ },
+};
+
+const siteIconVariants = {
+ edit: {
+ clipPath: 'inset(0% round 0)',
+ },
+ hover: {
+ clipPath: 'inset( 22% round 2px )',
+ },
+ tap: {
+ clipPath: 'inset(0% round 0)',
+ },
+};
+
export default function EditSiteEditor( { isPostsList = false } ) {
+ const disableMotion = useReducedMotion();
const { params } = useLocation();
const isLoading = useIsSiteEditorLoading();
const {
@@ -65,6 +91,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
showIconLabels,
editorCanvasView,
currentPostIsTrashed,
+ hasSiteIcon,
} = useSelect( ( select ) => {
const {
getEditorCanvasContainerView,
@@ -75,8 +102,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
getEditedPostId,
} = unlock( select( editSiteStore ) );
const { get } = select( preferencesStore );
- const { getCurrentTheme } = select( coreDataStore );
+ const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
const _context = getEditedPostContext();
+ const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
// The currently selected entity to display.
// Typically template or template part in the site editor.
@@ -93,6 +121,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
currentPostIsTrashed:
select( editorStore ).getCurrentPostAttribute( 'status' ) ===
'trash',
+ hasSiteIcon: !! siteData?.site_icon_url,
};
}, [] );
useEditorTitle();
@@ -179,6 +208,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
getEditorCanvasContainerTitleAndIcon( editorCanvasView );
const isReady = ! isLoading;
+ const transition = {
+ duration: disableMotion ? 0 : 0.2,
+ };
return (
<>
@@ -217,26 +249,52 @@ export default function EditSiteEditor( { isPostsList = false } ) {
{ ( { length } ) =>
length <= 1 && (
-
+
+
+
+
)
}
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index b157057062c9d1..0e2e85ba9f72dd 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -1,7 +1,7 @@
.edit-site-editor__editor-interface {
opacity: 1;
transition: opacity 0.1s ease-out;
- @include reduce-motion("transition");
+ @include reduce-motion( "transition" );
&.is-loading {
opacity: 0;
@@ -17,3 +17,60 @@
display: flex;
justify-content: center;
}
+
+.edit-site-editor__view-mode-toggle {
+ /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+ view-transition-name: toggle;
+ /* stylelint-enable */
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: $header-height;
+ width: $header-height;
+ z-index: 100;
+
+ .components-button {
+ color: $white;
+ height: 100%;
+ width: 100%;
+ border-radius: 0;
+ overflow: hidden;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &:hover,
+ &:active {
+ color: $white;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .edit-site-editor__view-mode-toggle-icon {
+ svg,
+ img {
+ background: $gray-900;
+ display: block;
+ }
+ }
+}
+
+.edit-site-editor__back-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 60px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: hsla(0, 0%, 80%);
+ pointer-events: none;
+
+ &.has-site-icon {
+ background-color: hsla(0, 0%, 100%, 0.6);
+ }
+}
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index f6610d0457bbae..6a554b136317dd 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -26,7 +26,7 @@ import { unlock } from '../../lock-unlock';
const { useGlobalSetting } = unlock( blockEditorPrivateApis );
function FontFamilies() {
- const { baseCustomFonts, modalTabOpen, setModalTabOpen, setNotice } =
+ const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
useContext( FontLibraryContext );
const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
const [ baseFontFamilies ] = useGlobalSetting(
@@ -112,8 +112,6 @@ function FontFamilies() {
variant="secondary"
__next40pxDefaultSize
onClick={ () => {
- // Reset notice when opening the modal.
- setNotice( null );
setModalTabOpen(
hasInstalledFonts
? 'installed-fonts'
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index e02dcb2e8a0af5..abfb5484e44bf5 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -54,7 +54,6 @@ function FontLibraryProvider( { children } ) {
const [ isInstalling, setIsInstalling ] = useState( false );
const [ refreshKey, setRefreshKey ] = useState( 0 );
- const [ notice, setNotice ] = useState( null );
const refreshLibrary = () => {
setRefreshKey( Date.now() );
@@ -139,8 +138,6 @@ function FontLibraryProvider( { children } ) {
}, [ modalTabOpen ] );
const handleSetLibraryFontSelected = ( font ) => {
- setNotice( null );
-
// If font is null, reset the selected font
if ( ! font ) {
setLibraryFontSelected( null );
@@ -527,8 +524,6 @@ function FontLibraryProvider( { children } ) {
modalTabOpen,
setModalTabOpen,
refreshLibrary,
- notice,
- setNotice,
saveFontFamilies,
isResolvingLibrary,
isInstalling,
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index cf6857b30c59e6..6f8a27a8aa8927 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -63,20 +63,15 @@ function FontCollection( { slug } ) {
};
const [ selectedFont, setSelectedFont ] = useState( null );
+ const [ notice, setNotice ] = useState( false );
const [ fontsToInstall, setFontsToInstall ] = useState( [] );
const [ page, setPage ] = useState( 1 );
const [ filters, setFilters ] = useState( {} );
const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
requiresPermission && ! getGoogleFontsPermissionFromStorage()
);
- const {
- collections,
- getFontCollection,
- installFonts,
- isInstalling,
- notice,
- setNotice,
- } = useContext( FontLibraryContext );
+ const { collections, getFontCollection, installFonts, isInstalling } =
+ useContext( FontLibraryContext );
const selectedCollection = collections.find(
( collection ) => collection.slug === slug
);
@@ -116,8 +111,7 @@ function FontCollection( { slug } ) {
useEffect( () => {
setSelectedFont( null );
- setNotice( null );
- }, [ slug, setNotice ] );
+ }, [ slug ] );
useEffect( () => {
// If the selected fonts change, reset the selected fonts to install
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 80edc1596f08cd..5af4be90fecdcf 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -44,7 +44,7 @@ function FontLibraryModal( {
onRequestClose,
defaultTabId = 'installed-fonts',
} ) {
- const { collections, setNotice } = useContext( FontLibraryContext );
+ const { collections } = useContext( FontLibraryContext );
const canUserCreate = useSelect( ( select ) => {
return select( coreStore ).canUser( 'create', {
kind: 'postType',
@@ -59,11 +59,6 @@ function FontLibraryModal( {
tabs.push( ...tabsFromCollections( collections || [] ) );
}
- // Reset notice when new tab is selected.
- const onSelect = () => {
- setNotice( null );
- };
-
return (
+ { isFrontPage ? postLink : `/${ decodedSlug }` }
+
);
}
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index 18a61827d573da..fae61eda6b8013 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -1,6 +1,6 @@
.editor-visual-editor {
position: relative;
- display: block;
+ display: flex;
background-color: $gray-300;
// Centralize the editor horizontally (flex-direction is column).
diff --git a/packages/editor/src/dataviews/actions/index.ts b/packages/editor/src/dataviews/actions/index.ts
index 6679b2d7d1b8f1..04addcb1cde4d2 100644
--- a/packages/editor/src/dataviews/actions/index.ts
+++ b/packages/editor/src/dataviews/actions/index.ts
@@ -11,6 +11,7 @@ import exportPattern from './export-pattern';
import resetPost from './reset-post';
import trashPost from './trash-post';
import permanentlyDeletePost from './permanently-delete-post';
+import restorePost from './restore-post';
// @ts-ignore
import { store as editorStore } from '../../store';
@@ -23,6 +24,7 @@ export default function registerDefaultActions() {
registerEntityAction( 'postType', 'wp_block', exportPattern );
registerEntityAction( 'postType', '*', resetPost );
+ registerEntityAction( 'postType', '*', restorePost );
registerEntityAction( 'postType', '*', deletePost );
registerEntityAction( 'postType', '*', trashPost );
registerEntityAction( 'postType', '*', permanentlyDeletePost );
diff --git a/packages/editor/src/dataviews/actions/restore-post.tsx b/packages/editor/src/dataviews/actions/restore-post.tsx
new file mode 100644
index 00000000000000..874eca91fee113
--- /dev/null
+++ b/packages/editor/src/dataviews/actions/restore-post.tsx
@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const restorePost: Action< PostWithPermissions > = {
+ id: 'restore',
+ label: __( 'Restore' ),
+ isPrimary: true,
+ icon: backup,
+ supportsBulk: true,
+ isEligible( item ) {
+ return (
+ ! isTemplateOrTemplatePart( item ) &&
+ item.type !== 'wp_block' &&
+ item.status === 'trash' &&
+ item.permissions?.update
+ );
+ },
+ async callback( posts, { registry, onActionPerformed } ) {
+ const { createSuccessNotice, createErrorNotice } =
+ registry.dispatch( noticesStore );
+ const { editEntityRecord, saveEditedEntityRecord } =
+ registry.dispatch( coreStore );
+ await Promise.allSettled(
+ posts.map( ( post ) => {
+ return editEntityRecord( 'postType', post.type, post.id, {
+ status: 'draft',
+ } );
+ } )
+ );
+ const promiseResult = await Promise.allSettled(
+ posts.map( ( post ) => {
+ return saveEditedEntityRecord( 'postType', post.type, post.id, {
+ throwOnError: true,
+ } );
+ } )
+ );
+
+ if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+ let successMessage;
+ if ( posts.length === 1 ) {
+ successMessage = sprintf(
+ /* translators: The number of posts. */
+ __( '"%s" has been restored.' ),
+ getItemTitle( posts[ 0 ] )
+ );
+ } else if ( posts[ 0 ].type === 'page' ) {
+ successMessage = sprintf(
+ /* translators: The number of posts. */
+ __( '%d pages have been restored.' ),
+ posts.length
+ );
+ } else {
+ successMessage = sprintf(
+ /* translators: The number of posts. */
+ __( '%d posts have been restored.' ),
+ posts.length
+ );
+ }
+ createSuccessNotice( successMessage, {
+ type: 'snackbar',
+ id: 'restore-post-action',
+ } );
+ if ( onActionPerformed ) {
+ onActionPerformed( posts );
+ }
+ } else {
+ // If there was at lease one failure.
+ let errorMessage;
+ // If we were trying to move a single post to the trash.
+ if ( promiseResult.length === 1 ) {
+ const typedError = promiseResult[ 0 ] as {
+ reason?: CoreDataError;
+ };
+ if ( typedError.reason?.message ) {
+ errorMessage = typedError.reason.message;
+ } else {
+ errorMessage = __(
+ 'An error occurred while restoring the post.'
+ );
+ }
+ // If we were trying to move multiple posts to the trash
+ } else {
+ const errorMessages = new Set();
+ const failedPromises = promiseResult.filter(
+ ( { status } ) => status === 'rejected'
+ );
+ for ( const failedPromise of failedPromises ) {
+ const typedError = failedPromise as {
+ reason?: CoreDataError;
+ };
+ if ( typedError.reason?.message ) {
+ errorMessages.add( typedError.reason.message );
+ }
+ }
+ if ( errorMessages.size === 0 ) {
+ errorMessage = __(
+ 'An error occurred while restoring the posts.'
+ );
+ } else if ( errorMessages.size === 1 ) {
+ errorMessage = sprintf(
+ /* translators: %s: an error message */
+ __( 'An error occurred while restoring the posts: %s' ),
+ [ ...errorMessages ][ 0 ]
+ );
+ } else {
+ errorMessage = sprintf(
+ /* translators: %s: a list of comma separated error messages */
+ __(
+ 'Some errors occurred while restoring the posts: %s'
+ ),
+ [ ...errorMessages ].join( ',' )
+ );
+ }
+ }
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ } );
+ }
+ },
+};
+
+export default restorePost;
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index ed4672bc435cdc..6a6c8702a02217 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -110,7 +110,10 @@ export const getPostIcon = createRegistrySelector(
// `icon` is the `menu_icon` property of a post type. We
// only handle `dashicons` for now, even if the `menu_icon`
// also supports urls and svg as values.
- if ( postTypeEntity?.icon?.startsWith( 'dashicons-' ) ) {
+ if (
+ typeof postTypeEntity?.icon === 'string' &&
+ postTypeEntity.icon.startsWith( 'dashicons-' )
+ ) {
return postTypeEntity.icon.slice( 10 );
}
return pageIcon;
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 794af776c88e76..7f8e33550770d0 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -6,8 +6,11 @@ import {
SVG,
Popover,
Button,
- __experimentalNumberControl as NumberControl,
+ ExternalLink,
__experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ __experimentalNumberControl as NumberControl,
+ TextareaControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
@@ -17,7 +20,6 @@ import {
RichTextToolbarButton,
MediaUploadCheck,
} from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -41,8 +43,11 @@ export const image = {
};
function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
- const { style } = activeObjectAttributes;
- const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
+ const { style, alt } = activeObjectAttributes;
+ const width = style?.replace( /\D/g, '' );
+ const [ editedWidth, setEditedWidth ] = useState( width );
+ const [ editedAlt, setEditedAlt ] = useState( alt );
+ const hasChanged = editedWidth !== width || editedAlt !== alt;
const popoverAnchor = useAnchor( {
editableContentElement: contentRef.current,
settings: image,
@@ -64,7 +69,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
type: name,
attributes: {
...activeObjectAttributes,
- style: width ? `width: ${ width }px;` : '',
+ style: width ? `width: ${ editedWidth }px;` : '',
+ alt: editedAlt,
},
};
@@ -76,21 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
event.preventDefault();
} }
>
-
+
setWidth( newWidth ) }
- size="__unstable-large"
+ onChange={ ( newWidth ) => {
+ setEditedWidth( newWidth );
+ } }
/>
-
+
+
+
+
);
diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss
index 7e9809e52f3bf2..1e0b922fdf4c8f 100644
--- a/packages/format-library/src/image/style.scss
+++ b/packages/format-library/src/image/style.scss
@@ -2,7 +2,7 @@
z-index: z-index(".block-editor-format-toolbar__image-popover");
.block-editor-format-toolbar__image-container-content {
- width: 200px;
+ width: 260px;
padding: $grid-unit-20;
}
}
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index ed4d98cdf7637f..14b2a87ba5203d 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -182,30 +182,32 @@ function InterfaceSkeleton(
ariaLabel={ mergedLabels.secondarySidebar }
as={ motion.div }
initial="closed"
- animate={
- isMobileViewport ? 'mobileOpen' : 'open'
- }
+ animate="open"
exit="closed"
variants={ {
open: { width: secondarySidebarSize.width },
closed: { width: 0 },
- mobileOpen: { width: '100vw' },
} }
transition={ defaultTransition }
>
- 
`
+ `a `
);
await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/integration/fixtures/blocks/core__site-tagline.json b/test/integration/fixtures/blocks/core__site-tagline.json
index e504bc75df30c7..fe837d41df43bf 100644
--- a/test/integration/fixtures/blocks/core__site-tagline.json
+++ b/test/integration/fixtures/blocks/core__site-tagline.json
@@ -3,7 +3,8 @@
"name": "core/site-tagline",
"isValid": true,
"attributes": {
- "level": 0
+ "level": 0,
+ "levelOptions": [ 0, 1, 2, 3, 4, 5, 6 ]
},
"innerBlocks": []
}
diff --git a/test/integration/fixtures/blocks/core__site-title.json b/test/integration/fixtures/blocks/core__site-title.json
index 12f32615473cc8..8ca7091f30d5e7 100644
--- a/test/integration/fixtures/blocks/core__site-title.json
+++ b/test/integration/fixtures/blocks/core__site-title.json
@@ -4,6 +4,7 @@
"isValid": true,
"attributes": {
"level": 1,
+ "levelOptions": [ 0, 1, 2, 3, 4, 5, 6 ],
"isLink": true,
"linkTarget": "_self"
},
| + { variants.map( ( variant ) => ( + | + { variant ?? '(default)' } + | + ) ) } +
|---|
-
+
{ tabs.map( ( { id, title } ) => (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 6602a778dc66c3..7ca2a9218c3bb0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -53,14 +53,13 @@ function InstalledFonts() {
isInstalling,
saveFontFamilies,
getFontFacesActivated,
- notice,
- setNotice,
} = useContext( FontLibraryContext );
const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
'typography.fontFamilies'
);
const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+ const [ notice, setNotice ] = useState( false );
const [ baseFontFamilies ] = useGlobalSetting(
'typography.fontFamilies',
undefined,
@@ -120,6 +119,24 @@ function InstalledFonts() {
setIsConfirmDeleteOpen( true );
};
+ const handleUpdate = async () => {
+ setNotice( null );
+ try {
+ await saveFontFamilies( fontFamilies );
+ setNotice( {
+ type: 'success',
+ message: __( 'Font family updated successfully.' ),
+ } );
+ } catch ( error ) {
+ setNotice( {
+ type: 'error',
+ message:
+ __( 'There was an error updating the font family. ' ) +
+ error.message,
+ } );
+ }
+ };
+
const getFontFacesToDisplay = ( font ) => {
if ( ! font ) {
return [];
@@ -265,6 +282,7 @@ function InstalledFonts() {
font
) }
onClick={ () => {
+ setNotice( null );
handleSetLibraryFontSelected(
font
);
@@ -305,6 +323,7 @@ function InstalledFonts() {
font
) }
onClick={ () => {
+ setNotice( null );
handleSetLibraryFontSelected(
font
);
@@ -337,6 +356,7 @@ function InstalledFonts() {
size="small"
onClick={ () => {
handleSetLibraryFontSelected( null );
+ setNotice( null );
} }
label={ __( 'Back' ) }
/>
@@ -406,9 +426,7 @@ function InstalledFonts() {
) }
) }
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index be32b40eaf1046..aca36566c04727 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -3,7 +3,11 @@
*/
import { useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+ Dropdown,
+ Button,
+ __experimentalTruncate as Truncate,
+} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { safeDecodeURIComponent } from '@wordpress/url';
import { store as coreStore } from '@wordpress/core-data';
@@ -86,7 +90,9 @@ function PostURLToggle( { isOpen, onClick } ) {
aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
onClick={ onClick }
>
- { isFrontPage ? postLink : <>/{ decodedSlug } }
+
{ secondarySidebarResizeListener }
{ secondarySidebar }
-
+
) }
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index 295d02978f120f..55319a752b61e6 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -95,6 +95,7 @@ function fail_if_died( $message ) {
'gutenberg-widget-experiments' => '1',
'gutenberg-full-site-editing' => 1,
'gutenberg-form-blocks' => 1,
+ 'gutenberg-block-experiments' => 1,
),
);
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 36b8218785f216..8d2f470efe60fe 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -46,6 +46,52 @@ public static function set_up_before_class() {
static::$user_id = self::factory()->user->create();
}
+ /**
+ * Pretty print CSS in test assertions so that it provides a better diff when a test fails.
+ * Without this: the failing test outputs the entire css string as being different.
+ * With this: the failing test only highlights the specific CSS rule that is different.
+ *
+ * @param string $css A string of raw css with no line breaks.
+ * @return string The css with line breaks.
+ */
+ private static function pretty_print_css( $css ) {
+ $css = str_replace( '{', " {\n", $css );
+ $css = str_replace( '}', "}\n\n", $css );
+ $css = str_replace( ';', ";\n", $css );
+ return $css;
+ }
+
+ /**
+ * Asserts that two CSS strings are equivalent, but outputs
+ * pretty printed test failures along with the raw css.
+ *
+ * - The pretty printed assertions are useful for understanding what actually changed.
+ * - The raw css is included as it's useful for updating the test case's expected CSS.
+ *
+ * Inspired by:
+ * https://stackoverflow.com/questions/6832263/phpunit-assertion-failed-but-i-want-to-continue-testing
+ *
+ * @param string $expected The expected CSS.
+ * @param string $actual The actual CSS.
+ */
+ private function assertSameCSS( $expected, $actual, $message = '' ) {
+ $pretty_expected = self::pretty_print_css( $expected );
+ $pretty_actual = self::pretty_print_css( $actual );
+
+ try {
+ $this->assertSame( $pretty_expected, $pretty_actual, $message );
+ } catch ( PHPUnit_Framework_ExpectationFailedException $e ) {
+ // Test failures are thrown as exceptions by PHPUnit.
+ // Catch the exception and re-throw it, but with the
+ // raw css appended.
+ $raw_actual_output =
+ "\n\nIf the change is expected, update the test case to this CSS:\n$actual";
+ throw new PHPUnit_Framework_ExpectationFailedException(
+ "$e$raw_actual_output"
+ );
+ }
+ }
+
public function test_get_settings() {
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
@@ -556,10 +602,10 @@ public function test_get_stylesheet() {
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
$all = $variables . $styles . $presets;
- $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
- $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
- $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
- $this->assertSame( $all, $theme_json->get_stylesheet() );
+ $this->assertSameCSS( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+ $this->assertSameCSS( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ $this->assertSameCSS( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+ $this->assertSameCSS( $all, $theme_json->get_stylesheet() );
}
public function test_get_styles_for_block_support_for_shorthand_and_longhand_values() {
@@ -618,8 +664,8 @@ public function test_get_styles_for_block_support_for_shorthand_and_longhand_val
$group_styles = ':root :where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}';
$image_styles = ':root :where(.wp-block-image){margin-bottom: 30px;padding-top: 15px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
- $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ) );
- $this->assertSame( $image_styles, $theme_json->get_styles_for_block( $image_node ) );
+ $this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ) );
+ $this->assertSameCSS( $image_styles, $theme_json->get_styles_for_block( $image_node ) );
}
public function test_get_stylesheet_skips_disabled_protected_properties() {
@@ -647,8 +693,8 @@ public function test_get_stylesheet_skips_disabled_protected_properties() {
);
$expected = static::$base_styles . ':where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet() );
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
public function test_get_stylesheet_renders_enabled_protected_properties() {
@@ -669,8 +715,8 @@ public function test_get_stylesheet_renders_enabled_protected_properties() {
);
$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet() );
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
public function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {
@@ -694,7 +740,7 @@ public function test_get_stylesheet_preset_classes_work_with_compounded_selector
)
);
- $this->assertSame(
+ $this->assertSameCSS(
'.wp-block-heading.has-white-color{color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
$theme_json->get_stylesheet( array( 'presets' ) )
);
@@ -736,10 +782,10 @@ public function test_get_stylesheet_preset_rules_come_after_block_rules() {
$all = $variables . $styles . $presets;
- $this->assertSame( $all, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
- $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
- $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
- $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+ $this->assertSameCSS( $all, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $styles, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+ $this->assertSameCSS( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
}
public function test_get_stylesheet_generates_proper_classes_and_css_vars_from_slugs() {
@@ -774,11 +820,11 @@ public function test_get_stylesheet_generates_proper_classes_and_css_vars_from_s
)
);
- $this->assertSame(
+ $this->assertSameCSS(
'.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}',
$theme_json->get_stylesheet( array( 'presets' ) )
);
- $this->assertSame(
+ $this->assertSameCSS(
':root{--wp--preset--color--grey: grey;--wp--preset--color--dark-grey: grey;--wp--preset--color--light-grey: grey;--wp--preset--color--white-2-black: grey;--wp--custom--white-2-black: value;}',
$theme_json->get_stylesheet( array( 'variables' ) )
);
@@ -834,9 +880,9 @@ public function test_get_styles_for_block_handles_whitelisted_element_pseudo_sel
$hover_style = ':root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}';
$focus_style = ':root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
- $this->assertSame( $link_style, $theme_json->get_styles_for_block( $link_node ) );
- $this->assertSame( $hover_style, $theme_json->get_styles_for_block( $hover_node ) );
- $this->assertSame( $focus_style, $theme_json->get_styles_for_block( $focus_node ) );
+ $this->assertSameCSS( $link_style, $theme_json->get_styles_for_block( $link_node ) );
+ $this->assertSameCSS( $hover_style, $theme_json->get_styles_for_block( $hover_node ) );
+ $this->assertSameCSS( $focus_style, $theme_json->get_styles_for_block( $focus_node ) );
}
/**
@@ -872,8 +918,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given
);
$expected = ':root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {
@@ -906,8 +951,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_
);
$expected = 'h4{background-color: red;color: green;}';
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
@@ -940,8 +984,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
);
$expected = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}:root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}';
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
$this->assertStringNotContainsString( 'a:levitate{', $theme_json->get_stylesheet( array( 'styles' ) ) );
}
@@ -987,8 +1030,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen
);
$expected = ':root :where(.wp-block-group a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
/**
@@ -1032,8 +1074,7 @@ public function test_get_stylesheet_with_deprecated_feature_level_selectors() {
$block_styles = ':root :where(.wp-block-calendar){font-size: 3em;}:root :where(.wp-block-calendar table, .wp-block-calendar th){color: green;}';
$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
$expected = $base_styles . $block_styles . $preset_styles;
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
@@ -1063,8 +1104,7 @@ public function test_get_stylesheet_with_block_json_selectors() {
);
$expected = ':root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-radius: 374px;}';
-
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_stylesheet_generates_layout_styles() {
@@ -1090,7 +1130,7 @@ public function test_get_stylesheet_generates_layout_styles() {
);
// Results also include root site blocks styles.
- $this->assertSame(
+ $this->assertSameCSS(
':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
$theme_json->get_stylesheet( array( 'styles' ) )
);
@@ -1119,7 +1159,7 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets
);
// Results also include root site blocks styles.
- $this->assertSame(
+ $this->assertSameCSS(
':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-flex {gap: var(--wp--preset--spacing--60);}.is-layout-grid {gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
$theme_json->get_stylesheet( array( 'styles' ) )
);
@@ -1149,7 +1189,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles() {
$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
// Results also include root site blocks styles.
- $this->assertSame(
+ $this->assertSameCSS(
':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
$stylesheet
);
@@ -1170,7 +1210,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles()
$stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
// Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
- $this->assertSame(
+ $this->assertSameCSS(
':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
$stylesheet
);
@@ -1193,7 +1233,7 @@ public function test_get_stylesheet_skips_layout_styles() {
remove_theme_support( 'disable-layout-styles' );
// All Layout styles should be skipped.
- $this->assertSame(
+ $this->assertSameCSS(
'',
$stylesheet
);
@@ -1243,7 +1283,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
'default'
);
- $this->assertSame(
+ $this->assertSameCSS(
':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-flex {gap: 1rem;}.is-layout-grid {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' .
':root :where(.wp-block-post-content){color: gray;}.wp-block-social-links-is-layout-flow > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex {gap: 0;}.wp-block-social-links-is-layout-grid {gap: 0;}.wp-block-buttons-is-layout-flow > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-flow > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex {gap: 0;}.wp-block-buttons-is-layout-grid {gap: 0;}',
$theme_json->get_stylesheet()
@@ -1279,7 +1319,7 @@ public function test_get_stylesheet_returns_outline_styles() {
$expected = ':root :where(.wp-element-button, .wp-block-button__link){outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_stylesheet_custom_root_selector() {
@@ -1302,7 +1342,7 @@ public function test_get_stylesheet_custom_root_selector() {
);
$actual = $theme_json->get_stylesheet( array( 'styles' ), null, $options );
- $this->assertSame(
+ $this->assertSameCSS(
':root :where(.custom){color: teal;}',
$actual
);
@@ -1360,7 +1400,7 @@ public function test_get_stylesheet_generates_fluid_typography_values() {
unregister_block_type( 'test/clamp-me' );
- $this->assertSame(
+ $this->assertSameCSS(
':root{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}body{font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}h1{font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}:root :where(.wp-block-test-clamp-me){font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}',
$theme_json->get_stylesheet( array( 'styles', 'variables', 'presets' ), null, array( 'skip_root_layout_styles' => true ) )
);
@@ -3419,7 +3459,7 @@ public function test_get_property_value_valid() {
);
$expected = 'body{background-color: #ffffff;color: #000000;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
/**
@@ -3496,7 +3536,7 @@ public function test_get_property_value_loop() {
);
$expected = 'body{background-color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
/**
@@ -3528,7 +3568,7 @@ public function test_get_property_value_recursion() {
);
$expected = 'body{background-color: #ffffff;color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
/**
@@ -3551,7 +3591,7 @@ public function test_get_property_value_self() {
);
$expected = 'body{background-color: #ffffff;}';
- $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_styles_for_block_with_padding_aware_alignments() {
@@ -3582,7 +3622,7 @@ public function test_get_styles_for_block_with_padding_aware_alignments() {
$expected = ':where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}';
$root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata );
$style_rules = $theme_json->get_styles_for_block( $metadata );
- $this->assertSame( $expected, $root_rules . $style_rules );
+ $this->assertSameCSS( $expected, $root_rules . $style_rules );
}
public function test_get_styles_for_block_without_padding_aware_alignments() {
@@ -3610,7 +3650,7 @@ public function test_get_styles_for_block_without_padding_aware_alignments() {
$expected = static::$base_styles . 'body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';
$root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata );
$style_rules = $theme_json->get_styles_for_block( $metadata );
- $this->assertSame( $expected, $root_rules . $style_rules );
+ $this->assertSameCSS( $expected, $root_rules . $style_rules );
}
public function test_get_styles_with_content_width() {
@@ -3632,7 +3672,7 @@ public function test_get_styles_with_content_width() {
);
$expected = ':root { --wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
- $this->assertSame( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata ) );
+ $this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata ) );
}
public function test_get_styles_with_appearance_tools() {
@@ -3651,7 +3691,7 @@ public function test_get_styles_with_appearance_tools() {
);
$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-flex {gap: 1;}.is-layout-grid {gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
- $this->assertSame( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ) );
+ $this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ) );
}
public function test_sanitization() {
@@ -4717,8 +4757,8 @@ public function test_shadow_preset_styles() {
);
$expected_styles = ':root{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
- $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
- $this->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
+ $this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
+ $this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
}
public function test_get_shadow_styles_for_blocks() {
@@ -4756,7 +4796,7 @@ public function test_get_shadow_styles_for_blocks() {
$variable_styles = ':root{--wp--preset--shadow--natural: 5px 5px 0 0 black;}';
$element_styles = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: var(--wp--preset--shadow--natural);}:root :where(p){box-shadow: var(--wp--preset--shadow--natural);}';
$expected_styles = $variable_styles . $element_styles;
- $this->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+ $this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
}
public function test_get_top_level_background_image_styles() {
@@ -4783,7 +4823,7 @@ public function test_get_top_level_background_image_styles() {
);
$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
- $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
+ $this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
$theme_json = new WP_Theme_JSON_Gutenberg(
array(
@@ -4801,7 +4841,7 @@ public function test_get_top_level_background_image_styles() {
);
$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
- $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background image as string type do not match expectations' );
+ $this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background image as string type do not match expectations' );
}
public function test_get_block_background_image_styles() {
@@ -4844,7 +4884,7 @@ public function test_get_block_background_image_styles() {
);
$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
- $this->assertSame( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
+ $this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
$group_node = array(
'name' => 'core/group',
@@ -4856,7 +4896,7 @@ public function test_get_block_background_image_styles() {
);
$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
- $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
+ $this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
}
/**
diff --git a/readme.txt b/readme.txt
index 3fe6e3aaf1dc4d..c5ef1231b183ee 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,6 +1,6 @@
=== Gutenberg ===
Contributors: matveb, joen, karmatosed
-Tested up to: 6.5
+Tested up to: 6.6
Stable tag: V.V.V
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
index 15f9d9ea877320..c7826ebf262822 100644
--- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -64,13 +64,16 @@ test.describe( 'adding inline tokens', () => {
await pageUtils.pressKeys( 'shift+ArrowLeft' );
await page.keyboard.press( 'Tab' );
- await page.keyboard.press( 'Tab' );
- await page.fill( 'role=spinbutton[name="WIDTH"i]', '20' );
+ await expect(
+ page.locator( 'role=spinbutton[name="Width"i]' )
+ ).toBeFocused();
+ await page.fill( 'role=spinbutton[name="Width"i]', '20' );
+ await page.fill( 'role=textbox[name="Alternative text"i]', 'Alt' );
await page.click( 'role=button[name="Apply"i]' );
// Check the content.
const contentRegex2 = new RegExp(
- `a