Hi! +
Hi!
{ __( 'Only appears in the Edit Post screen' ) }
+ { sprintf( + __( + 'Only appears on Post Types that are in the allowed list. %s' + ), + allowedPostTypes.join( ', ' ) + ) } +
{ __( 'Only appears in the Site Editor' ) }
+ { sprintf( + __( + 'Only appears on Editor Screens that are in the allowed list. %s' + ), + allowedSiteEditorScreens.join( ', ' ) + ) } +
+ { __( + 'This is some example text for the PluginSidebar example.' + ) } +
{ __( 'Customize the width for all elements that are assigned to the center or wide columns.' ) }
{ convertDescription }
This is the home screen.
This is the child screen.
- { text } -
+ This screen can parse params dynamically. The current id is:{ ' ' } + { params.id } +
This is the screen for the product with id: { params.id }
onUpdatePostFormat( suggestion.id ) diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js index d0f94e26048d77..b47ddb3acddd5a 100644 --- a/packages/editor/src/components/post-last-revision/index.js +++ b/packages/editor/src/components/post-last-revision/index.js @@ -36,6 +36,8 @@ function PostLastRevision() { return ( @@ -254,11 +256,21 @@ export default function PostLockedModal() { justify="flex-end" > { ! isTakeover && ( - + { __( 'Take over' ) } ) } - + { allPostsLabel } diff --git a/packages/editor/src/components/post-locked-modal/style.scss b/packages/editor/src/components/post-locked-modal/style.scss index 03e86642493df3..7f680022344664 100644 --- a/packages/editor/src/components/post-locked-modal/style.scss +++ b/packages/editor/src/components/post-locked-modal/style.scss @@ -3,7 +3,7 @@ } .editor-post-locked-modal__avatar { - border-radius: $radius-block-ui; + border-radius: $radius-round; margin-top: $grid-unit-20; min-width: initial !important; } diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 28567c60780219..3e411e91db4724 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -78,6 +78,8 @@ export class PostPublishPanel extends Component { { isPostPublish ? ( ( onUpdatePostFormat( suggestedPostFormat ) } > diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 7061ab9c387ee9..b090e25cd4dbff 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -14,11 +14,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { isBlobURL } from '@wordpress/blob'; -/** - * Internal dependencies - */ -import { store as editorStore } from '../../store'; - function flattenBlocks( blocks ) { const result = []; @@ -65,9 +60,11 @@ function Image( block ) { export default function PostFormatPanel() { const [ isUploading, setIsUploading ] = useState( false ); + const [ isAnimating, setIsAnimating ] = useState( false ); + const [ hadUploadError, setHadUploadError ] = useState( false ); const { editorBlocks, mediaUpload } = useSelect( ( select ) => ( { - editorBlocks: select( editorStore ).getEditorBlocks(), + editorBlocks: select( blockEditorStore ).getBlocks(), mediaUpload: select( blockEditorStore ).getSettings().mediaUpload, } ), [] @@ -93,6 +90,7 @@ export default function PostFormatPanel() { function uploadImages() { setIsUploading( true ); + setHadUploadError( false ); Promise.all( externalImages.map( ( image ) => window @@ -102,28 +100,30 @@ export default function PostFormatPanel() { : image.attributes.url + '?' ) .then( ( response ) => response.blob() ) - .then( - ( blob ) => - new Promise( ( resolve, reject ) => { - mediaUpload( { - filesList: [ blob ], - onFileChange: ( [ media ] ) => { - if ( isBlobURL( media.url ) ) { - return; - } + .then( ( blob ) => + new Promise( ( resolve, reject ) => { + mediaUpload( { + filesList: [ blob ], + onFileChange: ( [ media ] ) => { + if ( isBlobURL( media.url ) ) { + return; + } - updateBlockAttributes( image.clientId, { - id: media.id, - url: media.url, - } ); - resolve(); - }, - onError() { - reject(); - }, - } ); - } ) + updateBlockAttributes( image.clientId, { + id: media.id, + url: media.url, + } ); + resolve(); + }, + onError() { + reject(); + }, + } ); + } ).then( () => setIsAnimating( true ) ) ) + .catch( () => { + setHadUploadError( true ); + } ) ) ).finally( () => { setIsUploading( false ); @@ -144,19 +144,27 @@ export default function PostFormatPanel() { gap: '8px', } } > - + setIsAnimating( false ) } + > { externalImages.map( ( image ) => { return ; } ) } - { isUploading ? ( + { isUploading || isAnimating ? ( ) : ( - + { __( 'Upload' ) } ) } + { hadUploadError && { __( 'Upload failed, try again.' ) } } ); } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index c319924086b0e4..9892cf5430f9a2 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -37,8 +37,9 @@ .components-site-icon { border: none; - border-radius: $radius-block-ui; + border-radius: $radius-small; margin-right: $grid-unit-15; + flex-shrink: 0; // Same size as in the Site menu. height: 36px; @@ -54,6 +55,7 @@ display: block; color: $gray-700; font-size: $helptext-font-size; + word-break: break-word; } .editor-post-publish-panel__header-publish-button, diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js index ca89e40366b238..1d3050e7e3dd6b 100644 --- a/packages/editor/src/components/post-status/index.js +++ b/packages/editor/src/components/post-status/index.js @@ -171,7 +171,7 @@ export default function PostStatus() { contentClassName="editor-change-status__content" popoverProps={ popoverProps } focusOnMount - renderToggle={ ( { onToggle } ) => ( + renderToggle={ ( { onToggle, isOpen } ) => ( { postStatusesInfo[ status ]?.label } diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 112bfaabd0c8ec..4913cef9b4c86f 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -428,6 +428,8 @@ export function HierarchicalTermSelector( { slug } ) { { ! loading && hasCreateAction && ( ( onSelect( term ) } > diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index 7fcc5ead14f5b8..62de10a2c715ff 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n'; import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { check } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -43,6 +44,8 @@ export default function BlockThemeControl( { id } ) { }; }, [] ); + const { get: getPreference } = useSelect( preferencesStore ); + const { editedRecord: template, hasResolved } = useEntityRecord( 'postType', 'wp_template', @@ -75,6 +78,17 @@ export default function BlockThemeControl( { id } ) { }, ] : undefined; + + const mayShowTemplateEditNotice = () => { + if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) { + createSuccessNotice( + __( + 'Editing template. Changes made here affect all posts and pages that use the template.' + ), + { type: 'snackbar', actions: notificationAction } + ); + } + }; return ( { __( 'Edit template' ) } diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 276c6454fef09c..8127a18909f5cc 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -177,6 +177,8 @@ function PostTemplateDropdownContent( { onClose } ) { { canEdit && onNavigateToEntityRecord && ( { onNavigateToEntityRecord( { diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 3e333b38eee00e..50595d936b36d9 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -15,7 +15,6 @@ import { pasteHandler } from '@wordpress/blocks'; import { __unstableUseRichText as useRichText, create, - toHTMLString, insert, } from '@wordpress/rich-text'; import { useMergeRefs } from '@wordpress/compose'; @@ -50,9 +49,35 @@ function PostTitle( _, forwardedRef ) { const { clearSelectedBlock, insertBlocks, insertDefaultBlock } = useDispatch( blockEditorStore ); - function onChange( value ) { - onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) ); - } + const decodedPlaceholder = + decodeEntities( placeholder ) || __( 'Add title' ); + + const { + value, + onChange, + ref: richTextRef, + } = useRichText( { + value: title, + onChange( newValue ) { + onUpdate( newValue.replace( REGEXP_NEWLINES, ' ' ) ); + }, + placeholder: decodedPlaceholder, + selectionStart: selection.start, + selectionEnd: selection.end, + onSelectionChange( newStart, newEnd ) { + setSelection( ( sel ) => { + const { start, end } = sel; + if ( start === newStart && end === newEnd ) { + return sel; + } + return { + start: newStart, + end: newEnd, + }; + } ); + }, + __unstableDisableFormats: false, + } ); function onInsertBlockAfter( blocks ) { insertBlocks( blocks, 0 ); @@ -130,49 +155,14 @@ function PostTitle( _, forwardedRef ) { onInsertBlockAfter( content ); } } else { - const value = { - ...create( { html: title } ), - ...selection, - }; - // Strip HTML to avoid unwanted HTML being added to the title. // In the majority of cases it is assumed that HTML in the title // is undesirable. const contentNoHTML = stripHTML( content ); - - const newValue = insert( value, create( { html: contentNoHTML } ) ); - onUpdate( toHTMLString( { value: newValue } ) ); - setSelection( { - start: newValue.start, - end: newValue.end, - } ); + onChange( insert( value, create( { html: contentNoHTML } ) ) ); } } - const decodedPlaceholder = - decodeEntities( placeholder ) || __( 'Add title' ); - - const { ref: richTextRef } = useRichText( { - value: title, - onChange, - placeholder: decodedPlaceholder, - selectionStart: selection.start, - selectionEnd: selection.end, - onSelectionChange( newStart, newEnd ) { - setSelection( ( sel ) => { - const { start, end } = sel; - if ( start === newStart && end === newEnd ) { - return sel; - } - return { - start: newStart, - end: newEnd, - }; - } ); - }, - __unstableDisableFormats: false, - } ); - // The wp-block className is important for editor styles. // This same block is used in both the visual and the code editor. const className = clsx( DEFAULT_CLASSNAMES, { @@ -192,7 +182,6 @@ function PostTitle( _, forwardedRef ) { onFocus={ onSelect } onBlur={ onUnselect } onKeyDown={ onKeyDown } - onKeyPress={ onUnselect } onPaste={ onPaste } /> diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index e767ae04f5ec0e..5ed3155388c8cc 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -110,6 +110,8 @@ export default function PostURL( { onClose } ) { } suffix={ { const { getDeviceType, getCurrentPostType } = select( editorStore ); - const { getUnstableBase, getPostType } = select( coreStore ); + const { getEntityRecord, getPostType } = select( coreStore ); const { get } = select( preferencesStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const _currentPostType = getCurrentPostType(); return { deviceType: getDeviceType(), editorMode: __unstableGetEditorMode(), - homeUrl: getUnstableBase()?.home, + homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home, isTemplate: _currentPostType === 'wp_template', isViewable: getPostType( _currentPostType )?.viewable ?? false, showIconLabels: get( 'core', 'showIconLabels' ), @@ -58,18 +59,18 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { /** * Save the original editing mode in a ref to restore it when we exit zoom out. */ - const originalEditingMode = useRef( editorMode ); + const originalEditingModeRef = useRef( editorMode ); useEffect( () => { if ( editorMode !== 'zoom-out' ) { - originalEditingMode.current = editorMode; + originalEditingModeRef.current = editorMode; } return () => { if ( editorMode === 'zoom-out' && - editorMode !== originalEditingMode.current + editorMode !== originalEditingModeRef.current ) { - __unstableSetEditorMode( originalEditingMode.current ); + __unstableSetEditorMode( originalEditingModeRef.current ); } }; }, [ editorMode, __unstableSetEditorMode ] ); @@ -111,22 +112,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { label: __( 'Desktop' ), icon: desktop, }, - { + ]; + if ( window.__experimentalEnableZoomOutExperiment ) { + choices.push( { value: 'ZoomOut', label: __( 'Desktop (50%)' ), icon: desktop, - }, - { - value: 'Tablet', - label: __( 'Tablet' ), - icon: tablet, - }, - { - value: 'Mobile', - label: __( 'Mobile' ), - icon: mobile, - }, - ]; + } ); + } + choices.push( { + value: 'Tablet', + label: __( 'Tablet' ), + icon: tablet, + } ); + choices.push( { + value: 'Mobile', + label: __( 'Mobile' ), + icon: mobile, + } ); const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType; @@ -136,7 +139,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { * @param {string} value The device type. */ const onSelect = ( value ) => { - let newEditorMode = originalEditingMode.current; + let newEditorMode = originalEditingModeRef.current; if ( value === 'ZoomOut' ) { newEditorMode = 'zoom-out'; @@ -206,6 +209,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { /> ) } + ) } diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 6aa2763cf9db06..868ff08b3d0709 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -23,7 +23,7 @@ import { import inserterMediaCategories from '../media-categories'; import { mediaUpload } from '../../utils'; import { store as editorStore } from '../../store'; -import { lock, unlock } from '../../lock-unlock'; +import { unlock } from '../../lock-unlock'; import { useGlobalStylesContext } from '../global-styles-provider'; const EMPTY_BLOCKS_LIST = []; @@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [ 'allowedMimeTypes', 'bodyPlaceholder', 'canLockBlocks', + 'canUpdateBlockBindings', 'capabilities', 'clearBlockSelection', 'codeEditingEnabled', @@ -74,7 +75,6 @@ const BLOCK_EDITOR_SETTINGS = [ 'postContentAttributes', 'postsPerPage', 'readOnly', - 'sectionRootClientId', 'styles', 'titlePlaceholder', 'supportsLayout', @@ -90,6 +90,7 @@ const { globalStylesLinksDataKey, selectBlockPatternsKey, reusableBlocksSelectKey, + sectionRootClientIdKey, } = unlock( privateApis ); /** @@ -325,10 +326,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { ? [ [ 'core/navigation', {}, [] ] ] : settings.template, __experimentalSetIsInserterOpened: setIsInserterOpened, + [ sectionRootClientIdKey ]: sectionRootClientId, }; - lock( blockEditorSettings, { - sectionRootClientId, - } ); + return blockEditorSettings; }, [ allowedBlockTypes, diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss index 91ff1144c4179b..364fdf39ad3155 100644 --- a/packages/editor/src/components/resizable-editor/style.scss +++ b/packages/editor/src/components/resizable-editor/style.scss @@ -16,7 +16,7 @@ cursor: ew-resize; outline: none; background: none; - border-radius: $radius-block-ui; + border-radius: $radius-full; border: 0; height: 100px; @@ -29,7 +29,7 @@ content: ""; width: $grid-unit-05; background-color: rgba($gray-700, 0.4); - border-radius: $radius-block-ui; + border-radius: $radius-full; } &.is-left { diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js index 139ebd54bee95e..d559f13fd96a45 100644 --- a/packages/editor/src/components/save-publish-panels/index.js +++ b/packages/editor/src/components/save-publish-panels/index.js @@ -71,6 +71,8 @@ export default function SavePublishPanels( { unmountableContent = ( - + { __( 'Skip' ) } diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index 74a535240833d6..f2c79fb0347446 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -30,6 +30,8 @@ function TableOfContents( contentClassName="table-of-contents__popover" renderToggle={ ( { isOpen, onToggle } ) => ( { __( 'Editing code' ) } switchEditorMode( 'visual' ) } shortcut={ shortcut } diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index a67feb530e96a2..2ff115272d614b 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -128,8 +128,7 @@ function VisualEditor( { getRenderingMode, getDeviceType, } = select( editorStore ); - const { getPostType, canUser, getEditedEntityRecord } = - select( coreStore ); + const { getPostType, getEditedEntityRecord } = select( coreStore ); const postTypeSlug = getCurrentPostType(); const _renderingMode = getRenderingMode(); let _wrapperBlockName; @@ -143,10 +142,6 @@ function VisualEditor( { const editorSettings = getEditorSettings(); const supportsTemplateMode = editorSettings.supportsTemplateMode; const postTypeObject = getPostType( postTypeSlug ); - const canEditTemplate = canUser( 'create', { - kind: 'postType', - name: 'wp_template', - } ); const currentTemplateId = getCurrentTemplateId(); const template = currentTemplateId ? getEditedEntityRecord( @@ -163,9 +158,7 @@ function VisualEditor( { // Post template fetch returns a 404 on classic themes, which // messes with e2e tests, so check it's a block theme first. editedPostTemplate: - postTypeObject?.viewable && - supportsTemplateMode && - canEditTemplate + postTypeObject?.viewable && supportsTemplateMode ? template : undefined, wrapperBlockName: _wrapperBlockName, diff --git a/packages/editor/src/dataviews/actions/export-pattern.tsx b/packages/editor/src/dataviews/actions/export-pattern.tsx index f4e5c91c7cabfa..b6be83eeda84b4 100644 --- a/packages/editor/src/dataviews/actions/export-pattern.tsx +++ b/packages/editor/src/dataviews/actions/export-pattern.tsx @@ -9,6 +9,7 @@ import { downloadZip } from 'client-zip'; */ import { downloadBlob } from '@wordpress/blob'; import { __ } from '@wordpress/i18n'; +import { download } from '@wordpress/icons'; import type { Action } from '@wordpress/dataviews'; /** @@ -36,6 +37,7 @@ function getJsonFromItem( item: Pattern ) { const exportPattern: Action< Pattern > = { id: 'export-pattern', label: __( 'Export as JSON' ), + icon: download, supportsBulk: true, isEligible: ( item ) => item.type === 'wp_block', callback: async ( items ) => { diff --git a/packages/editor/src/dataviews/actions/permanently-delete-post.tsx b/packages/editor/src/dataviews/actions/permanently-delete-post.tsx index 2124fdc0ffa4ce..afbb84ae12c74c 100644 --- a/packages/editor/src/dataviews/actions/permanently-delete-post.tsx +++ b/packages/editor/src/dataviews/actions/permanently-delete-post.tsx @@ -5,6 +5,7 @@ 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'; +import { trash } from '@wordpress/icons'; /** * Internal dependencies @@ -16,6 +17,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = { id: 'permanently-delete', label: __( 'Permanently delete' ), supportsBulk: true, + icon: trash, isEligible( item ) { if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) { return false; diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx index cc4cea8f5c82c0..64396e45c392ff 100644 --- a/packages/editor/src/dataviews/actions/reset-post.tsx +++ b/packages/editor/src/dataviews/actions/reset-post.tsx @@ -114,6 +114,8 @@ const resetPost: Action< Post > = { = { { __( 'Cancel' ) } { setIsBusy( true ); diff --git a/packages/editor/src/dataviews/actions/trash-post.tsx b/packages/editor/src/dataviews/actions/trash-post.tsx index 537a0ebd79a8ac..1e2b3639dddc83 100644 --- a/packages/editor/src/dataviews/actions/trash-post.tsx +++ b/packages/editor/src/dataviews/actions/trash-post.tsx @@ -67,6 +67,8 @@ const trashPost: Action< PostWithPermissions > = { = { { __( 'Cancel' ) } { setIsBusy( true ); diff --git a/packages/editor/src/dataviews/actions/view-post.tsx b/packages/editor/src/dataviews/actions/view-post.tsx index 47eb1a66d019ad..187faffafb5d3c 100644 --- a/packages/editor/src/dataviews/actions/view-post.tsx +++ b/packages/editor/src/dataviews/actions/view-post.tsx @@ -2,7 +2,7 @@ * WordPress dependencies */ import { external } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; +import { _x } from '@wordpress/i18n'; import type { Action } from '@wordpress/dataviews'; /** @@ -12,7 +12,7 @@ import type { BasePost } from '../types'; const viewPost: Action< BasePost > = { id: 'view-post', - label: __( 'View' ), + label: _x( 'View', 'verb' ), isPrimary: true, icon: external, isEligible( post ) { diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 629600888a98eb..d4a5c3eebbb4ce 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -9,7 +9,6 @@ import * as interfaceApis from '@wordpress/interface'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import EditorContentSlotFill from './components/editor-interface/content-slot-fill'; -import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; import CreateTemplatePartModal from './components/create-template-part-modal'; import Editor from './components/editor'; @@ -51,7 +50,6 @@ lock( privateApis, { bootstrapBlockBindingsSourcesFromServer, // This is a temporary private API while we're updating the site editor to use EditorProvider. - useBlockEditorSettings, interfaceStore, ...remainingInterfaceApis, } ); diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index e22929011256d5..358d00af396bbb 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -137,7 +137,9 @@ export const saveDirtyEntities = { kind: 'postType', name: 'wp_navigation' }, ]; const saveNoticeId = 'site-editor-save-success'; - const homeUrl = registry.select( coreStore ).getUnstableBase()?.home; + const homeUrl = registry + .select( coreStore ) + .getEntityRecord( 'root', '__unstableBase' )?.home; registry.dispatch( noticesStore ).removeNotice( saveNoticeId ); const entitiesToSave = dirtyEntityRecords.filter( ( { kind, name, key, property } ) => { diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index d66d8e9c9212cf..b61a4ecb9f3bb7 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- Add [`@wordpress/i18n-no-flanking-whitespace`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710). +- Add [`@wordpress/i18n-hyphenated-range`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710). + ## 20.3.0 (2024-08-21) ## 20.2.0 (2024-08-07) diff --git a/packages/eslint-plugin/configs/i18n.js b/packages/eslint-plugin/configs/i18n.js index c3271214e3ef5c..fb8cad233232d4 100644 --- a/packages/eslint-plugin/configs/i18n.js +++ b/packages/eslint-plugin/configs/i18n.js @@ -8,5 +8,7 @@ module.exports = { '@wordpress/i18n-no-placeholders-only': 'error', '@wordpress/i18n-no-variables': 'error', '@wordpress/i18n-ellipsis': 'error', + '@wordpress/i18n-no-flanking-whitespace': 'error', + '@wordpress/i18n-hyphenated-range': 'error', }, }; diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 9250f413a8572b..11b3da927f3644 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -255,6 +255,8 @@ export { default as tableRowBefore } from './library/table-row-before'; export { default as tableRowDelete } from './library/table-row-delete'; export { default as table } from './library/table'; export { default as tag } from './library/tag'; +export { default as thumbsDown } from './library/thumbs-down'; +export { default as thumbsUp } from './library/thumbs-up'; export { default as symbolFilled } from './library/symbol-filled'; export { default as termDescription } from './library/term-description'; export { default as footer } from './library/footer'; diff --git a/packages/icons/src/library/thumbs-down.js b/packages/icons/src/library/thumbs-down.js new file mode 100644 index 00000000000000..94e11ee8f06386 --- /dev/null +++ b/packages/icons/src/library/thumbs-down.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const thumbsDown = ( + + + +); + +export default thumbsDown; diff --git a/packages/icons/src/library/thumbs-up.js b/packages/icons/src/library/thumbs-up.js new file mode 100644 index 00000000000000..f65b6445359e25 --- /dev/null +++ b/packages/icons/src/library/thumbs-up.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const thumbsUp = ( + + + +); + +export default thumbsUp; diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index abc79853d222bf..1d72e85f3c34e2 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,14 @@ ## Unreleased +### Enhancements + +- Improve internal `deepMerge` function ([#64879](https://github.com/WordPress/gutenberg/pull/64879)). + +### Bug Fixes + +- Fix computeds without scope in Firefox ([#64825](https://github.com/WordPress/gutenberg/pull/64825)). + ## 6.6.0 (2024-08-21) ### Bug Fixes diff --git a/packages/interactivity/src/proxies/index.ts b/packages/interactivity/src/proxies/index.ts index d64fb59fa6bccf..1a495de6b469fe 100644 --- a/packages/interactivity/src/proxies/index.ts +++ b/packages/interactivity/src/proxies/index.ts @@ -1,5 +1,5 @@ /** * Internal dependencies */ -export { proxifyState, peek } from './state'; +export { proxifyState, peek, deepMerge } from './state'; export { proxifyStore } from './store'; diff --git a/packages/interactivity/src/proxies/registry.ts b/packages/interactivity/src/proxies/registry.ts index 767a3730dbae2d..3bfe3b9168b79e 100644 --- a/packages/interactivity/src/proxies/registry.ts +++ b/packages/interactivity/src/proxies/registry.ts @@ -2,6 +2,7 @@ * Proxies for each object. */ const objToProxy = new WeakMap< object, object >(); +const proxyToObj = new WeakMap< object, object >(); /** * Namespaces for each created proxy. @@ -38,6 +39,7 @@ export const createProxy = < T extends object >( if ( ! objToProxy.has( obj ) ) { const proxy = new Proxy( obj, handlers ); objToProxy.set( obj, proxy ); + proxyToObj.set( proxy, obj ); proxyToNs.set( proxy, namespace ); } return objToProxy.get( obj ) as T; @@ -50,8 +52,9 @@ export const createProxy = < T extends object >( * @param obj Object from which to know the proxy. * @return Associated proxy or `undefined`. */ -export const getProxyFromObject = < T extends object >( obj: T ): T => - objToProxy.get( obj ) as T; +export const getProxyFromObject = < T extends object >( + obj: T +): T | undefined => objToProxy.get( obj ) as T; /** * Gets the namespace associated with the given proxy. @@ -80,3 +83,14 @@ export const shouldProxy = ( ! proxyToNs.has( candidate ) && supported.has( candidate.constructor ) ); }; + +/** + * Returns the target object for the passed proxy. If the passed object is not a registered proxy, the + * function returns `undefined`. + * + * @param proxy Proxy from which to know the target. + * @return The target object or `undefined`. + */ +export const getObjectFromProxy = < T extends object >( + proxy: T +): T | undefined => proxyToObj.get( proxy ) as T; diff --git a/packages/interactivity/src/proxies/signals.ts b/packages/interactivity/src/proxies/signals.ts index 6a3f41c149e134..29bd58aaa4fced 100644 --- a/packages/interactivity/src/proxies/signals.ts +++ b/packages/interactivity/src/proxies/signals.ts @@ -20,7 +20,7 @@ import { withScope } from '../utils'; /** * Identifier for property computeds not associated to any scope. */ -const NO_SCOPE = Symbol(); +const NO_SCOPE = {}; /** * Structure that manages reactivity for a property in a state object. It uses diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts index 0978fa2ccd0264..323cd306bf9acf 100644 --- a/packages/interactivity/src/proxies/state.ts +++ b/packages/interactivity/src/proxies/state.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import { signal, type Signal } from '@preact/signals'; +import { batch, signal, type Signal } from '@preact/signals'; /** * Internal dependencies @@ -11,9 +11,11 @@ import { getProxyFromObject, getNamespaceFromProxy, shouldProxy, + getObjectFromProxy, } from './registry'; import { PropSignal } from './signals'; import { setNamespace, resetNamespace } from '../namespaces'; +import { isPlainObject } from '../utils'; /** * Set of built-in symbols. @@ -33,6 +35,17 @@ const proxyToProps: WeakMap< Map< string | symbol, PropSignal > > = new WeakMap(); +/** + * Checks wether a {@link PropSignal | `PropSignal`} instance exists for the + * given property in the passed proxy. + * + * @param proxy Proxy of a state object or array. + * @param key The property key. + * @return `true` when it exists; false otherwise. + */ +export const hasPropSignal = ( proxy: object, key: string ) => + proxyToProps.has( proxy ) && proxyToProps.get( proxy )!.has( key ); + /** * Returns the {@link PropSignal | `PropSignal`} instance associated with the * specified prop in the passed proxy. @@ -152,7 +165,7 @@ const stateHandlers: ProxyHandler< object > = { const result = Reflect.defineProperty( target, key, desc ); if ( result ) { - const receiver = getProxyFromObject( target ); + const receiver = getProxyFromObject( target )!; const prop = getPropSignal( receiver, key ); const { get, value } = desc; if ( get ) { @@ -189,7 +202,7 @@ const stateHandlers: ProxyHandler< object > = { const result = Reflect.deleteProperty( target, key ); if ( result ) { - const prop = getPropSignal( getProxyFromObject( target ), key ); + const prop = getPropSignal( getProxyFromObject( target )!, key ); prop.setValue( undefined ); if ( objToIterable.has( target ) ) { @@ -248,3 +261,82 @@ export const peek = < T extends object, K extends keyof T >( peeking = false; } }; + +/** + * Internal recursive implementation for {@link deepMerge | `deepMerge`}. + * + * @param target The target object. + * @param source The source object containing new values and props. + * @param override Whether existing props should be overwritten or not (`true` + * by default). + */ +const deepMergeRecursive = ( + target: any, + source: any, + override: boolean = true +) => { + if ( isPlainObject( target ) && isPlainObject( source ) ) { + for ( const key in source ) { + const desc = Object.getOwnPropertyDescriptor( source, key ); + if ( + typeof desc?.get === 'function' || + typeof desc?.set === 'function' + ) { + if ( override || ! ( key in target ) ) { + Object.defineProperty( target, key, { + ...desc, + configurable: true, + enumerable: true, + } ); + + const proxy = getProxyFromObject( target ); + if ( desc?.get && proxy && hasPropSignal( proxy, key ) ) { + const propSignal = getPropSignal( proxy, key ); + propSignal.setGetter( desc.get ); + } + } + } else if ( isPlainObject( source[ key ] ) ) { + if ( ! ( key in target ) ) { + target[ key ] = {}; + } + + deepMergeRecursive( target[ key ], source[ key ], override ); + } else if ( override || ! ( key in target ) ) { + Object.defineProperty( target, key, desc! ); + + const proxy = getProxyFromObject( target ); + if ( desc?.value && proxy && hasPropSignal( proxy, key ) ) { + const propSignal = getPropSignal( proxy, key ); + propSignal.setValue( desc.value ); + } + } + } + } +}; + +/** + * Recursively update prop values inside the passed `target` and nested plain + * objects, using the values present in `source`. References to plain objects + * are kept, only updating props containing primitives or arrays. Arrays are + * replaced instead of merged or concatenated. + * + * If the `override` parameter is set to `false`, then all values in `target` + * are preserved, and only new properties from `source` are added. + * + * @param target The target object. + * @param source The source object containing new values and props. + * @param override Whether existing props should be overwritten or not (`true` + * by default). + */ +export const deepMerge = ( + target: any, + source: any, + override: boolean = true +) => + batch( () => + deepMergeRecursive( + getObjectFromProxy( target ) || target, + source, + override + ) + ); diff --git a/packages/interactivity/src/proxies/test/deep-merge.ts b/packages/interactivity/src/proxies/test/deep-merge.ts new file mode 100644 index 00000000000000..b24d9b6781cfe2 --- /dev/null +++ b/packages/interactivity/src/proxies/test/deep-merge.ts @@ -0,0 +1,378 @@ +/* eslint-disable eslint-comments/disable-enable-pair */ +/* eslint-disable @typescript-eslint/no-shadow */ +/* eslint-disable @typescript-eslint/no-unused-vars */ + +/** + * External dependencies + */ +import { effect } from '@preact/signals'; +/** + * Internal dependencies + */ +import { proxifyState, peek, deepMerge } from '../'; +import { hasPropSignal } from '../state'; +import { getProxyFromObject } from '../registry'; + +describe( 'Interactivity API', () => { + describe( 'deepMerge', () => { + it( 'should merge two plain objects', () => { + const target = { a: 1, b: 2 }; + const source = { b: 3, c: 4 }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result ).toEqual( { a: 1, b: 3, c: 4 } ); + } ); + + it( 'should handle nested objects', () => { + const target = { a: { x: 1 }, b: 2 }; + const source = { a: { y: 2 }, c: 3 }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result ).toEqual( { a: { x: 1, y: 2 }, b: 2, c: 3 } ); + } ); + + it( 'should not override existing properties when override is false', () => { + const target = { a: 1, b: { x: 10 } }; + const source = { a: 2, b: { y: 20 }, c: 3 }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source, false ); + expect( result ).toEqual( { a: 1, b: { x: 10, y: 20 }, c: 3 } ); + } ); + + it( 'should handle getters', () => { + const target = { + get a() { + return 1; + }, + b: 1, + }; + const source = { + a: 2, + get b() { + return 2; + }, + }; + const result: Record< string, any > = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result.a ).toBe( 2 ); + expect( result.b ).toBe( 2 ); + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.get + ).toBeUndefined(); + expect( + Object.getOwnPropertyDescriptor( result, 'b' )?.get + ).toBeDefined(); + } ); + + it( 'should not execute getters when performing the deep merge', () => { + let targetExecuted = false; + let sourceExecuted = false; + const target = { + get a() { + targetExecuted = true; + return 1; + }, + }; + const source = { + get b() { + sourceExecuted = true; + return 2; + }, + }; + const result: Record< string, any > = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( targetExecuted ).toBe( false ); + expect( sourceExecuted ).toBe( false ); + } ); + + it( 'should handle setters', () => { + let targetValue = 1; + const target = { + get a() { + return targetValue; + }, + set a( value ) { + targetValue = value; + }, + b: 1, + }; + let sourceValue = 2; + const source = { + a: 3, + get b() { + return 2; + }, + set b( value ) { + sourceValue = value; + }, + }; + + const result: Record< string, any > = {}; + deepMerge( result, target ); + + result.a = 5; + expect( targetValue ).toBe( 5 ); + expect( result.a ).toBe( 5 ); + + deepMerge( result, source ); + + result.a = 6; + expect( targetValue ).toBe( 5 ); + + result.b = 7; + expect( sourceValue ).toBe( 7 ); + + expect( result.a ).toBe( 6 ); + expect( result.b ).toBe( 2 ); + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.set + ).toBeUndefined(); + expect( + Object.getOwnPropertyDescriptor( result, 'b' )?.set + ).toBeDefined(); + } ); + + it( 'should handle setters when overwrite is false', () => { + let targetValue = 1; + const target = { + get a() { + return targetValue; + }, + set a( value ) { + targetValue = value; + }, + b: 1, + }; + let sourceValue = 2; + const source = { + a: 3, + get b() { + return 2; + }, + set b( value ) { + sourceValue = value; + }, + }; + + const result: Record< string, any > = {}; + deepMerge( result, target, false ); + deepMerge( result, source, false ); + + result.a = 6; + expect( targetValue ).toBe( 6 ); + + result.b = 7; + expect( sourceValue ).toBe( 2 ); + + expect( result.a ).toBe( 6 ); + expect( result.b ).toBe( 7 ); + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.set + ).toBeDefined(); + expect( + Object.getOwnPropertyDescriptor( result, 'b' )?.set + ).toBeUndefined(); + } ); + + it( 'should handle getters and setters together', () => { + let targetValue = 1; + const target = { + get a() { + return targetValue; + }, + set a( value ) { + targetValue = value; + }, + b: 1, + }; + let sourceValue = 2; + const source = { + get a() { + return 3; + }, + set a( value ) { + sourceValue = value; + }, + }; + const result: Record< string, any > = {}; + deepMerge( result, target ); + deepMerge( result, source ); + + // Test if setters and getters are copied correctly + result.a = 5; + expect( targetValue ).toBe( 1 ); // Should not change + expect( sourceValue ).toBe( 5 ); // Should change + expect( result.a ).toBe( 3 ); // Should return the getter's value + + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.get + ).toBeDefined(); + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.set + ).toBeDefined(); + } ); + + it( 'should handle getters when overwrite is false', () => { + const target = { + get a() { + return 1; + }, + b: 1, + }; + const source = { + a: 2, + get b() { + return 2; + }, + }; + const result: Record< string, any > = {}; + deepMerge( result, target, false ); + deepMerge( result, source, false ); + expect( result.a ).toBe( 1 ); + expect( result.b ).toBe( 1 ); + expect( + Object.getOwnPropertyDescriptor( result, 'a' )?.get + ).toBeDefined(); + expect( + Object.getOwnPropertyDescriptor( result, 'b' )?.get + ).toBeUndefined(); + } ); + + it( 'should ignore non-plain objects', () => { + const target = { a: 1 }; + const source = new Date(); + const result = { ...target }; + deepMerge( result, source ); + expect( result ).toEqual( { a: 1 } ); + } ); + + it( 'should handle arrays', () => { + const target = { a: [ 1, 2 ] }; + const source = { a: [ 3, 4 ] }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result ).toEqual( { a: [ 3, 4 ] } ); + } ); + + it( 'should handle arrays when overwrite is false', () => { + const target = { a: [ 1, 2 ] }; + const source = { a: [ 3, 4 ] }; + const result = {}; + deepMerge( result, target, false ); + deepMerge( result, source, false ); + expect( result ).toEqual( { a: [ 1, 2 ] } ); + } ); + + it( 'should handle null values', () => { + const target = { a: 1, b: null }; + const source = { b: 2, c: null }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result ).toEqual( { a: 1, b: 2, c: null } ); + } ); + + it( 'should handle undefined values', () => { + const target = { a: 1, b: undefined }; + const source = { b: 2, c: undefined }; + const result = {}; + deepMerge( result, target ); + deepMerge( result, source ); + expect( result ).toEqual( { a: 1, b: 2, c: undefined } ); + } ); + + it( 'should handle undefined values when overwrite is false', () => { + const target = { a: 1, b: undefined }; + const source = { b: 2, c: undefined }; + const result = {}; + deepMerge( result, target, false ); + deepMerge( result, source, false ); + expect( result ).toEqual( { a: 1, b: undefined, c: undefined } ); + } ); + + it( 'should handle deleted values when overwrite is false', () => { + const target = { a: 1 }; + const source = { a: 2 }; + const result: Record< string, any > = {}; + deepMerge( result, target, false ); + delete result.a; + deepMerge( result, source, false ); + expect( result ).toEqual( { a: 2 } ); + } ); + + it( 'should never create signals', () => { + const target = { a: 1, b: { x: 10 } }; + const source = { a: 2, b: { y: 20 }, c: 3 }; + const result = proxifyState( + 'test', + {} as typeof target & typeof source + ); + deepMerge( result, target ); + deepMerge( result, source, false ); + + expect( hasPropSignal( result, 'a' ) ).toBe( false ); + expect( hasPropSignal( result, 'b' ) ).toBe( false ); + expect( hasPropSignal( result, 'c' ) ).toBe( false ); + + const proxyB = getProxyFromObject( peek( result, 'b' ) )!; + expect( hasPropSignal( proxyB, 'x' ) ).toBe( false ); + expect( hasPropSignal( proxyB, 'y' ) ).toBe( false ); + } ); + + it( 'should update signals when they exist', () => { + const target = { a: 1, b: { x: 10 } }; + const source = { a: 2, b: { x: 20, y: 30 }, c: 3 }; + const result = proxifyState< any >( 'test', {} ); + + const spyA = jest.fn( () => result.a ); + effect( spyA ); + + expect( spyA ).toHaveBeenCalledTimes( 1 ); + + deepMerge( result, target ); + + const spyBx = jest.fn( () => result.b.x ); + effect( spyBx ); + expect( spyA ).toHaveBeenCalledTimes( 2 ); + expect( spyBx ).toHaveBeenCalledTimes( 1 ); + + deepMerge( result, source ); + + expect( spyA ).toHaveBeenCalledTimes( 3 ); + expect( spyBx ).toHaveBeenCalledTimes( 2 ); + + expect( hasPropSignal( result, 'a' ) ).toBe( true ); + expect( hasPropSignal( result, 'b' ) ).toBe( true ); + expect( hasPropSignal( result, 'c' ) ).toBe( false ); + + const proxyB = getProxyFromObject( peek( result, 'b' ) )!; + expect( hasPropSignal( proxyB, 'x' ) ).toBe( true ); + expect( hasPropSignal( proxyB, 'y' ) ).toBe( false ); + } ); + + it( 'should batch all signal updates together', () => { + const target = { a: 1, b: 2 }; + const source = { a: 3, b: 4 }; + const result = proxifyState< any >( 'test', {} ); + + const spy = jest.fn( () => ( result.a, result.b ) ); + effect( spy ); + + expect( spy ).toHaveBeenCalledTimes( 1 ); + + deepMerge( result, target ); + + expect( spy ).toHaveBeenCalledTimes( 2 ); + + deepMerge( result, source ); + + expect( spy ).toHaveBeenCalledTimes( 3 ); + } ); + } ); +} ); diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts index 25fa64eb6e160e..c74764b902e194 100644 --- a/packages/interactivity/src/store.ts +++ b/packages/interactivity/src/store.ts @@ -1,12 +1,12 @@ /** * Internal dependencies */ -import { proxifyState, proxifyStore } from './proxies'; +import { proxifyState, proxifyStore, deepMerge } from './proxies'; /** * External dependencies */ import { getNamespace } from './namespaces'; -import { deepMerge, isPlainObject } from './utils'; +import { isPlainObject } from './utils'; export const stores = new Map(); const rawStores = new Map(); diff --git a/packages/interactivity/src/test/utils.ts b/packages/interactivity/src/test/utils.ts index 2ea0d2f04fadf7..2de0ffe6d31e06 100644 --- a/packages/interactivity/src/test/utils.ts +++ b/packages/interactivity/src/test/utils.ts @@ -1,302 +1,9 @@ /** * Internal dependencies */ -import { deepMerge, kebabToCamelCase } from '../utils'; +import { kebabToCamelCase } from '../utils'; describe( 'Interactivity API', () => { - describe( 'deepMerge', () => { - it( 'should merge two plain objects', () => { - const target = { a: 1, b: 2 }; - const source = { b: 3, c: 4 }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result ).toEqual( { a: 1, b: 3, c: 4 } ); - } ); - - it( 'should handle nested objects', () => { - const target = { a: { x: 1 }, b: 2 }; - const source = { a: { y: 2 }, c: 3 }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result ).toEqual( { a: { x: 1, y: 2 }, b: 2, c: 3 } ); - } ); - - it( 'should not override existing properties when override is false', () => { - const target = { a: 1, b: { x: 10 } }; - const source = { a: 2, b: { y: 20 }, c: 3 }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source, false ); - expect( result ).toEqual( { a: 1, b: { x: 10, y: 20 }, c: 3 } ); - } ); - - it( 'should handle getters', () => { - const target = { - get a() { - return 1; - }, - b: 1, - }; - const source = { - a: 2, - get b() { - return 2; - }, - }; - const result: Record< string, any > = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result.a ).toBe( 2 ); - expect( result.b ).toBe( 2 ); - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.get - ).toBeUndefined(); - expect( - Object.getOwnPropertyDescriptor( result, 'b' )?.get - ).toBeDefined(); - } ); - - it( 'should not execute getters when performing the deep merge', () => { - let targetExecuted = false; - let sourceExecuted = false; - const target = { - get a() { - targetExecuted = true; - return 1; - }, - }; - const source = { - get b() { - sourceExecuted = true; - return 2; - }, - }; - const result: Record< string, any > = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( targetExecuted ).toBe( false ); - expect( sourceExecuted ).toBe( false ); - } ); - - https: it( 'should handle setters', () => { - let targetValue = 1; - const target = { - get a() { - return targetValue; - }, - set a( value ) { - targetValue = value; - }, - b: 1, - }; - let sourceValue = 2; - const source = { - a: 3, - get b() { - return 2; - }, - set b( value ) { - sourceValue = value; - }, - }; - - const result: Record< string, any > = {}; - deepMerge( result, target ); - - result.a = 5; - expect( targetValue ).toBe( 5 ); - expect( result.a ).toBe( 5 ); - - deepMerge( result, source ); - - result.a = 6; - expect( targetValue ).toBe( 5 ); - - result.b = 7; - expect( sourceValue ).toBe( 7 ); - - expect( result.a ).toBe( 6 ); - expect( result.b ).toBe( 2 ); - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.set - ).toBeUndefined(); - expect( - Object.getOwnPropertyDescriptor( result, 'b' )?.set - ).toBeDefined(); - } ); - - it( 'should handle setters when overwrite is false', () => { - let targetValue = 1; - const target = { - get a() { - return targetValue; - }, - set a( value ) { - targetValue = value; - }, - b: 1, - }; - let sourceValue = 2; - const source = { - a: 3, - get b() { - return 2; - }, - set b( value ) { - sourceValue = value; - }, - }; - - const result: Record< string, any > = {}; - deepMerge( result, target, false ); - deepMerge( result, source, false ); - - result.a = 6; - expect( targetValue ).toBe( 6 ); - - result.b = 7; - expect( sourceValue ).toBe( 2 ); - - expect( result.a ).toBe( 6 ); - expect( result.b ).toBe( 7 ); - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.set - ).toBeDefined(); - expect( - Object.getOwnPropertyDescriptor( result, 'b' )?.set - ).toBeUndefined(); - } ); - - it( 'should handle getters and setters together', () => { - let targetValue = 1; - const target = { - get a() { - return targetValue; - }, - set a( value ) { - targetValue = value; - }, - b: 1, - }; - let sourceValue = 2; - const source = { - get a() { - return 3; - }, - set a( value ) { - sourceValue = value; - }, - }; - const result: Record< string, any > = {}; - deepMerge( result, target ); - deepMerge( result, source ); - - // Test if setters and getters are copied correctly - result.a = 5; - expect( targetValue ).toBe( 1 ); // Should not change - expect( sourceValue ).toBe( 5 ); // Should change - expect( result.a ).toBe( 3 ); // Should return the getter's value - - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.get - ).toBeDefined(); - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.set - ).toBeDefined(); - } ); - - it( 'should handle getters when overwrite is false', () => { - const target = { - get a() { - return 1; - }, - b: 1, - }; - const source = { - a: 2, - get b() { - return 2; - }, - }; - const result: Record< string, any > = {}; - deepMerge( result, target, false ); - deepMerge( result, source, false ); - expect( result.a ).toBe( 1 ); - expect( result.b ).toBe( 1 ); - expect( - Object.getOwnPropertyDescriptor( result, 'a' )?.get - ).toBeDefined(); - expect( - Object.getOwnPropertyDescriptor( result, 'b' )?.get - ).toBeUndefined(); - } ); - - it( 'should ignore non-plain objects', () => { - const target = { a: 1 }; - const source = new Date(); - const result = { ...target }; - deepMerge( result, source ); - expect( result ).toEqual( { a: 1 } ); - } ); - - it( 'should handle arrays', () => { - const target = { a: [ 1, 2 ] }; - const source = { a: [ 3, 4 ] }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result ).toEqual( { a: [ 3, 4 ] } ); - } ); - - it( 'should handle arrays when overwrite is false', () => { - const target = { a: [ 1, 2 ] }; - const source = { a: [ 3, 4 ] }; - const result = {}; - deepMerge( result, target, false ); - deepMerge( result, source, false ); - expect( result ).toEqual( { a: [ 1, 2 ] } ); - } ); - - it( 'should handle null values', () => { - const target = { a: 1, b: null }; - const source = { b: 2, c: null }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result ).toEqual( { a: 1, b: 2, c: null } ); - } ); - - it( 'should handle undefined values', () => { - const target = { a: 1, b: undefined }; - const source = { b: 2, c: undefined }; - const result = {}; - deepMerge( result, target ); - deepMerge( result, source ); - expect( result ).toEqual( { a: 1, b: 2, c: undefined } ); - } ); - - it( 'should handle undefined values when overwrite is false', () => { - const target = { a: 1, b: undefined }; - const source = { b: 2, c: undefined }; - const result = {}; - deepMerge( result, target, false ); - deepMerge( result, source, false ); - expect( result ).toEqual( { a: 1, b: undefined, c: undefined } ); - } ); - - it( 'should handle deleted values when overwrite is false', () => { - const target = { a: 1 }; - const source = { a: 2 }; - const result: Record< string, any > = {}; - deepMerge( result, target, false ); - delete result.a; - deepMerge( result, source, false ); - expect( result ).toEqual( { a: 2 } ); - } ); - } ); - describe( 'kebabToCamelCase', () => { it( 'should work exactly as the PHP version', async () => { expect( kebabToCamelCase( '' ) ).toBe( '' ); diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts index ee0cf1ba084dc8..c5eb91681294f2 100644 --- a/packages/interactivity/src/utils.ts +++ b/packages/interactivity/src/utils.ts @@ -364,34 +364,3 @@ export const isPlainObject = ( typeof candidate === 'object' && candidate.constructor === Object ); - -export const deepMerge = ( - target: any, - source: any, - override: boolean = true -) => { - if ( isPlainObject( target ) && isPlainObject( source ) ) { - for ( const key in source ) { - const desc = Object.getOwnPropertyDescriptor( source, key ); - if ( - typeof desc?.get === 'function' || - typeof desc?.set === 'function' - ) { - if ( override || ! ( key in target ) ) { - Object.defineProperty( target, key, { - ...desc, - configurable: true, - enumerable: true, - } ); - } - } else if ( isPlainObject( source[ key ] ) ) { - if ( ! target[ key ] ) { - target[ key ] = {}; - } - deepMerge( target[ key ], source[ key ], override ); - } else if ( override || ! ( key in target ) ) { - Object.defineProperty( target, key, desc! ); - } - } - } -}; diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index b37b8b7da33d02..363a6ee9dea76c 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -119,42 +119,42 @@ function useAdjustComplementaryListener( isActive, isSmall ) { - const previousIsSmall = useRef( false ); - const shouldOpenWhenNotSmall = useRef( false ); + const previousIsSmallRef = useRef( false ); + const shouldOpenWhenNotSmallRef = useRef( false ); const { enableComplementaryArea, disableComplementaryArea } = useDispatch( interfaceStore ); useEffect( () => { // If the complementary area is active and the editor is switching from // a big to a small window size. - if ( isActive && isSmall && ! previousIsSmall.current ) { + if ( isActive && isSmall && ! previousIsSmallRef.current ) { disableComplementaryArea( scope ); // Flag the complementary area to be reopened when the window size // goes from small to big. - shouldOpenWhenNotSmall.current = true; + shouldOpenWhenNotSmallRef.current = true; } else if ( // If there is a flag indicating the complementary area should be // enabled when we go from small to big window size and we are going // from a small to big window size. - shouldOpenWhenNotSmall.current && + shouldOpenWhenNotSmallRef.current && ! isSmall && - previousIsSmall.current + previousIsSmallRef.current ) { // Remove the flag indicating the complementary area should be // enabled. - shouldOpenWhenNotSmall.current = false; + shouldOpenWhenNotSmallRef.current = false; enableComplementaryArea( scope, identifier ); } else if ( // If the flag is indicating the current complementary should be // reopened but another complementary area becomes active, remove // the flag. - shouldOpenWhenNotSmall.current && + shouldOpenWhenNotSmallRef.current && activeArea && activeArea !== identifier ) { - shouldOpenWhenNotSmall.current = false; + shouldOpenWhenNotSmallRef.current = false; } - if ( isSmall !== previousIsSmall.current ) { - previousIsSmall.current = isSmall; + if ( isSmall !== previousIsSmallRef.current ) { + previousIsSmallRef.current = isSmall; } }, [ isActive, diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 14b2a87ba5203d..a1fd20b642206f 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -143,22 +143,22 @@ function InterfaceSkeleton( className="interface-interface-skeleton__header" aria-label={ mergedLabels.header } initial={ - isDistractionFree + isDistractionFree && ! isMobileViewport ? 'distractionFreeHidden' : 'hidden' } whileHover={ - isDistractionFree + isDistractionFree && ! isMobileViewport ? 'distractionFreeHover' : 'visible' } animate={ - isDistractionFree + isDistractionFree && ! isMobileViewport ? 'distractionFreeDisabled' : 'visible' } exit={ - isDistractionFree + isDistractionFree && ! isMobileViewport ? 'distractionFreeHidden' : 'hidden' } diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js index 94f70a1551199d..d20ba9fcf10999 100644 --- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js +++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js @@ -17,6 +17,8 @@ function ImportDropdown( { onUpload } ) { contentClassName="list-reusable-blocks-import-dropdown__content" renderToggle={ ( { isOpen, onToggle } ) => ( { children } - + { hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) } { setIsModalOpen( false ); @@ -200,7 +202,12 @@ export default function ReusableBlockConvertButton( { { __( 'Cancel' ) } - + { __( 'Create' ) } diff --git a/packages/rich-text/src/component/event-listeners/copy-handler.js b/packages/rich-text/src/component/event-listeners/copy-handler.js index 0cc1594c3ab914..1a92237bb4c5b4 100644 --- a/packages/rich-text/src/component/event-listeners/copy-handler.js +++ b/packages/rich-text/src/component/event-listeners/copy-handler.js @@ -2,18 +2,21 @@ * Internal dependencies */ import { toHTMLString } from '../../to-html-string'; -import { isCollapsed } from '../../is-collapsed'; import { slice } from '../../slice'; +import { remove } from '../../remove'; import { getTextContent } from '../../get-text-content'; export default ( props ) => ( element ) => { function onCopy( event ) { - const { record } = props.current; + const { record, createRecord, handleChange } = props.current; const { ownerDocument } = element; - if ( - isCollapsed( record.current ) || - ! element.contains( ownerDocument.activeElement ) - ) { + const { defaultView } = ownerDocument; + const { anchorNode, focusNode, isCollapsed } = + defaultView.getSelection(); + const containsSelection = + element.contains( anchorNode ) && element.contains( focusNode ); + + if ( isCollapsed || ! containsSelection ) { return; } @@ -26,7 +29,7 @@ export default ( props ) => ( element ) => { event.preventDefault(); if ( event.type === 'cut' ) { - ownerDocument.execCommand( 'delete' ); + handleChange( remove( createRecord() ) ); } } diff --git a/packages/rich-text/src/component/event-listeners/input-and-selection.js b/packages/rich-text/src/component/event-listeners/input-and-selection.js index 621f1c59fab04e..11dcdb0d8ff9ab 100644 --- a/packages/rich-text/src/component/event-listeners/input-and-selection.js +++ b/packages/rich-text/src/component/event-listeners/input-and-selection.js @@ -114,14 +114,13 @@ export default ( props ) => ( element ) => { return; } - // Ensure the active element is the rich text element. - if ( ownerDocument.activeElement !== element ) { - // If it is not, we can stop listening for selection changes. We - // resume listening when the element is focused. - ownerDocument.removeEventListener( - 'selectionchange', - handleSelectionChange - ); + const { anchorNode, focusNode } = defaultView.getSelection(); + const containsSelection = + element.contains( anchorNode ) && + element.contains( focusNode ) && + ownerDocument.activeElement.contains( element ); + + if ( ! containsSelection ) { return; } @@ -255,5 +254,9 @@ export default ( props ) => ( element ) => { element.removeEventListener( 'compositionstart', onCompositionStart ); element.removeEventListener( 'compositionend', onCompositionEnd ); element.removeEventListener( 'focus', onFocus ); + ownerDocument.removeEventListener( + 'selectionchange', + handleSelectionChange + ); }; }; diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index 2606ae9f902fab..600fc0faff5209 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -60,46 +60,48 @@ export function useRichText( { } // Internal values are updated synchronously, unlike props and state. - const _value = useRef( value ); - const record = useRef(); + const _valueRef = useRef( value ); + const recordRef = useRef(); function setRecordFromProps() { - _value.current = value; - record.current = value; + _valueRef.current = value; + recordRef.current = value; if ( ! ( value instanceof RichTextData ) ) { - record.current = value + recordRef.current = value ? RichTextData.fromHTMLString( value, { preserveWhiteSpace } ) : RichTextData.empty(); } // To do: make rich text internally work with RichTextData. - record.current = { - text: record.current.text, - formats: record.current.formats, - replacements: record.current.replacements, + recordRef.current = { + text: recordRef.current.text, + formats: recordRef.current.formats, + replacements: recordRef.current.replacements, }; if ( disableFormats ) { - record.current.formats = Array( value.length ); - record.current.replacements = Array( value.length ); + recordRef.current.formats = Array( value.length ); + recordRef.current.replacements = Array( value.length ); } if ( __unstableAfterParse ) { - record.current.formats = __unstableAfterParse( record.current ); + recordRef.current.formats = __unstableAfterParse( + recordRef.current + ); } - record.current.start = selectionStart; - record.current.end = selectionEnd; + recordRef.current.start = selectionStart; + recordRef.current.end = selectionEnd; } - const hadSelectionUpdate = useRef( false ); + const hadSelectionUpdateRef = useRef( false ); - if ( ! record.current ) { - hadSelectionUpdate.current = isSelected; + if ( ! recordRef.current ) { + hadSelectionUpdateRef.current = isSelected; setRecordFromProps(); } else if ( - selectionStart !== record.current.start || - selectionEnd !== record.current.end + selectionStart !== recordRef.current.start || + selectionEnd !== recordRef.current.end ) { - hadSelectionUpdate.current = isSelected; - record.current = { - ...record.current, + hadSelectionUpdateRef.current = isSelected; + recordRef.current = { + ...recordRef.current, start: selectionStart, end: selectionEnd, activeFormats: undefined, @@ -113,34 +115,34 @@ export function useRichText( { * @param {Object} newRecord The record to sync and apply. */ function handleChange( newRecord ) { - record.current = newRecord; + recordRef.current = newRecord; applyRecord( newRecord ); if ( disableFormats ) { - _value.current = newRecord.text; + _valueRef.current = newRecord.text; } else { const newFormats = __unstableBeforeSerialize ? __unstableBeforeSerialize( newRecord ) : newRecord.formats; newRecord = { ...newRecord, formats: newFormats }; if ( typeof value === 'string' ) { - _value.current = toHTMLString( { + _valueRef.current = toHTMLString( { value: newRecord, preserveWhiteSpace, } ); } else { - _value.current = new RichTextData( newRecord ); + _valueRef.current = new RichTextData( newRecord ); } } - const { start, end, formats, text } = record.current; + const { start, end, formats, text } = recordRef.current; // Selection must be updated first, so it is recorded in history when // the content change happens. // We batch both calls to only attempt to rerender once. registry.batch( () => { onSelectionChange( start, end ); - onChange( _value.current, { + onChange( _valueRef.current, { __unstableFormats: formats, __unstableText: text, } ); @@ -150,14 +152,14 @@ export function useRichText( { function applyFromProps() { setRecordFromProps(); - applyRecord( record.current ); + applyRecord( recordRef.current ); } - const didMount = useRef( false ); + const didMountRef = useRef( false ); // Value updates must happen synchonously to avoid overwriting newer values. useLayoutEffect( () => { - if ( didMount.current && value !== _value.current ) { + if ( didMountRef.current && value !== _valueRef.current ) { applyFromProps(); forceRender(); } @@ -165,7 +167,7 @@ export function useRichText( { // Value updates must happen synchonously to avoid overwriting newer values. useLayoutEffect( () => { - if ( ! hadSelectionUpdate.current ) { + if ( ! hadSelectionUpdateRef.current ) { return; } @@ -173,16 +175,16 @@ export function useRichText( { ref.current.focus(); } - applyRecord( record.current ); - hadSelectionUpdate.current = false; - }, [ hadSelectionUpdate.current ] ); + applyRecord( recordRef.current ); + hadSelectionUpdateRef.current = false; + }, [ hadSelectionUpdateRef.current ] ); const mergedRefs = useMergeRefs( [ ref, useDefaultStyle(), - useBoundaryStyle( { record } ), + useBoundaryStyle( { record: recordRef } ), useEventListeners( { - record, + record: recordRef, handleChange, applyRecord, createRecord, @@ -192,18 +194,18 @@ export function useRichText( { } ), useRefEffect( () => { applyFromProps(); - didMount.current = true; + didMountRef.current = true; }, [ placeholder, ...__unstableDependencies ] ), ] ); return { - value: record.current, + value: recordRef.current, // A function to get the most recent value so event handlers in // useRichText implementations have access to it. For example when // listening to input events, we internally update the state, but this // state is not yet available to the input event handler because React // may re-render asynchronously. - getValue: () => record.current, + getValue: () => recordRef.current, onChange: handleChange, ref: mergedRefs, }; diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js index 131174460a74bc..46671c951bc09d 100644 --- a/packages/rich-text/src/to-tree.js +++ b/packages/rich-text/src/to-tree.js @@ -299,6 +299,8 @@ export function toTree( { if ( shouldInsertPadding && i === text.length ) { append( getParent( pointer ), ZWNBSP ); + // We CANNOT use CSS to add a placeholder with pseudo elements on + // the main block wrappers because that could clash with theme CSS. if ( placeholder && text.length === 0 ) { append( getParent( pointer ), { type: 'span', diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 178b1c4fae36da..9d666313f76abc 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,18 @@ ## Unreleased +### Breaking Changes + +- Fixed the issue with having 5 high severity vulnerabilities by upgrading the `puppeteer-core` package to the latest major version `^23.1.0` ([#64597](https://github.com/WordPress/gutenberg/pull/64597)). + +### Enhancements + +- Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)). + +### Bug Fixes + +- Added chunk filename in webpack config to avoid reading stale files ([#58176](https://github.com/WordPress/gutenberg/pull/58176)). + ## 28.6.0 (2024-08-21) ## 28.5.0 (2024-08-07) diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 508d4d262942d1..4c60e3859207de 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -119,6 +119,7 @@ const cssLoaders = [ plugins: isProduction ? [ ...postcssPlugins, + require( 'postcss-import' ), require( 'cssnano' )( { // Provide a fallback configuration if there's not // one explicitly available in the project. @@ -147,6 +148,7 @@ const baseConfig = { target, output: { filename: '[name].js', + chunkFilename: '[name].js?v=[chunkhash]', path: resolve( process.cwd(), 'build' ), }, resolve: { diff --git a/packages/scripts/package.json b/packages/scripts/package.json index dcc17a2926a654..291b8a58bca408 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -73,9 +73,10 @@ "npm-package-json-lint": "^6.4.0", "npm-packlist": "^3.0.0", "postcss": "^8.4.5", + "postcss-import": "^16.1.0", "postcss-loader": "^6.2.1", "prettier": "npm:wp-prettier@3.0.3", - "puppeteer-core": "^13.2.0", + "puppeteer-core": "^23.1.0", "react-refresh": "^0.14.0", "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js index cc7c0830a319bf..d543b7b4b08d80 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js +++ b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js @@ -27,8 +27,7 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) { return ( array( 'size' => null, ), - 'settings' => null, + 'settings' => array( + 'typography' => array( + 'fluid' => true, + ), + ), 'expected_output' => null, ), @@ -425,8 +429,7 @@ public function data_generate_font_size_preset_fixtures() { 'returns already clamped value' => array( 'font_size' => array( - 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', - 'fluid' => false, + 'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', ), 'settings' => array( 'typography' => array( @@ -438,8 +441,7 @@ public function data_generate_font_size_preset_fixtures() { 'returns value with unsupported unit' => array( 'font_size' => array( - 'size' => '1000%', - 'fluid' => false, + 'size' => '1000%', ), 'settings' => array( 'typography' => array( @@ -769,6 +771,33 @@ public function data_generate_font_size_preset_fixtures() { ), 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)', ), + + // Individual preset settings override global settings. + 'should convert individual preset size to fluid if fluid is disabled in global settings' => array( + 'font_size' => array( + 'size' => '17px', + 'fluid' => true, + ), + 'settings' => array( + 'typography' => array(), + ), + 'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)', + ), + 'should use individual preset settings if fluid is disabled in global settings' => array( + 'font_size' => array( + 'size' => '17px', + 'fluid' => array( + 'min' => '16px', + 'max' => '26px', + ), + ), + 'settings' => array( + 'typography' => array( + 'fluid' => false, + ), + ), + 'expected_output' => 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)', + ), ); } diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index 94c184408c89fb..f5b67f0a8dc9b7 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -81,15 +81,14 @@ public function test_render_block_core_media_text_featured_image() { $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( ' true, 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( 'assertStringContainsString( 'assertStringContainsString( ' true, 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( 'assertStringContainsString( 'assertStringContainsString( ' true, 'mediaPosition' => 'right', 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( 'assertStringContainsString( 'assertStringContainsString( ' true, 'mediaPosition' => 'right', @@ -173,7 +170,6 @@ public function test_render_block_core_media_text_featured_image_media_on_right_ ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( 'assertStringContainsString( ' 1, 'gutenberg-form-blocks' => 1, 'gutenberg-block-experiments' => 1, + 'gutenberg-media-processing' => 1, ), ); diff --git a/phpunit/class-gutenberg-rest-server-test.php b/phpunit/class-gutenberg-rest-server-test.php new file mode 100644 index 00000000000000..943d5b34b999ec --- /dev/null +++ b/phpunit/class-gutenberg-rest-server-test.php @@ -0,0 +1,88 @@ +user->create( + array( + 'role' => 'administrator', + ) + ); + + self::$post_id = $factory->post->create(); + } + + public static function wpTearDownAfterClass() { + self::delete_user( self::$admin_id ); + wp_delete_post( self::$post_id ); + } + + public function set_up() { + parent::set_up(); + add_filter( + 'wp_rest_server_class', + function () { + return 'Gutenberg_REST_Server'; + } + ); + } + + public function test_populates_target_hints_for_administrator() { + wp_set_current_user( self::$admin_id ); + $response = rest_do_request( '/wp/v2/posts' ); + $post = $response->get_data()[0]; + + $link = $post['_links']['self'][0]; + $this->assertArrayHasKey( 'targetHints', $link ); + $this->assertArrayHasKey( 'allow', $link['targetHints'] ); + $this->assertSame( array( 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ), $link['targetHints']['allow'] ); + } + + public function test_populates_target_hints_for_logged_out_user() { + $response = rest_do_request( '/wp/v2/posts' ); + $post = $response->get_data()[0]; + + $link = $post['_links']['self'][0]; + $this->assertArrayHasKey( 'targetHints', $link ); + $this->assertArrayHasKey( 'allow', $link['targetHints'] ); + $this->assertSame( array( 'GET' ), $link['targetHints']['allow'] ); + } + + public function test_does_not_error_on_invalid_urls() { + $response = new WP_REST_Response(); + $response->add_link( 'self', 'this is not a real URL' ); + + $links = rest_get_server()::get_response_links( $response ); + $this->assertArrayNotHasKey( 'targetHints', $links['self'][0] ); + } + + public function test_does_not_error_on_bad_rest_api_routes() { + $response = new WP_REST_Response(); + $response->add_link( 'self', rest_url( '/this/is/not/a/real/route' ) ); + + $links = rest_get_server()::get_response_links( $response ); + $this->assertArrayNotHasKey( 'targetHints', $links['self'][0] ); + } + + public function test_prefers_developer_defined_target_hints() { + $response = new WP_REST_Response(); + $response->add_link( + 'self', + '/wp/v2/posts/' . self::$post_id, + array( + 'targetHints' => array( + 'allow' => array( 'GET', 'PUT' ), + ), + ) + ); + + $links = rest_get_server()::get_response_links( $response ); + $link = $links['self'][0]; + $this->assertArrayHasKey( 'targetHints', $link ); + $this->assertArrayHasKey( 'allow', $link['targetHints'] ); + $this->assertSame( array( 'GET', 'PUT' ), $link['targetHints']['allow'] ); + } +} diff --git a/phpunit/experimental/block-editor-settings-mobile-test.php b/phpunit/experimental/block-editor-settings-mobile-test.php index 907b750d8c8638..967efebc346fc8 100644 --- a/phpunit/experimental/block-editor-settings-mobile-test.php +++ b/phpunit/experimental/block-editor-settings-mobile-test.php @@ -10,11 +10,6 @@ * * @covers WP_REST_Block_Editor_Settings_Controller */ - -if ( ! defined( 'REST_REQUEST' ) ) { - define( 'REST_REQUEST', true ); -} - class Gutenberg_REST_Block_Editor_Settings_Controller_Test extends WP_Test_REST_Controller_Testcase { /** * @var int @@ -56,10 +51,9 @@ public function test_register_routes() { public function test_get_items() { wp_set_current_user( self::$admin_id ); $request = new WP_REST_Request( 'GET', '/wp-block-editor/v1/settings' ); - // Set context for mobile settings. - $_GET['context'] = 'mobile'; - $response = rest_get_server()->dispatch( $request ); - $data = $response->get_data(); + $request->set_param( 'context', 'mobile' ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); $this->assertArrayHasKey( '__experimentalStyles', $data, '__experimentalStyles should be in the returned data' ); $this->assertArrayHasKey( '__experimentalFeatures', $data, '__experimentalFeatures should be in the returned data' ); diff --git a/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php b/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php new file mode 100644 index 00000000000000..56286f76ace836 --- /dev/null +++ b/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php @@ -0,0 +1,314 @@ +user->create( + array( + 'role' => 'administrator', + ) + ); + } + + public function set_up() { + parent::set_up(); + + $this->remove_added_uploads(); + } + + public function tear_down() { + $this->remove_added_uploads(); + + parent::tear_down(); + } + + /** + * @covers ::register_routes + */ + public function test_register_routes() { + $routes = rest_get_server()->get_routes(); + $this->assertArrayHasKey( '/wp/v2/media', $routes ); + $this->assertCount( 2, $routes['/wp/v2/media'] ); + $this->assertArrayHasKey( '/wp/v2/media/(?P[\d]+)', $routes ); + $this->assertCount( 3, $routes['/wp/v2/media/(?P[\d]+)'] ); + $this->assertArrayHasKey( '/wp/v2/media/(?P[\d]+)/sideload', $routes ); + $this->assertCount( 1, $routes['/wp/v2/media/(?P[\d]+)/sideload'] ); + } + + public function test_get_items() { + $this->markTestSkipped( 'No need to implement' ); + } + + public function test_get_item() { + $this->markTestSkipped( 'No need to implement' ); + } + + public function test_update_item() { + $this->markTestSkipped( 'No need to implement' ); + } + + public function test_delete_item() { + $this->markTestSkipped( 'No need to implement' ); + } + + public function test_get_item_schema() { + $this->markTestSkipped( 'No need to implement' ); + } + + public function test_context_param() { + $this->markTestSkipped( 'No need to implement' ); + } + + /** + * Verifies that skipping sub-size generation works. + * + * @covers ::create_item + * @covers ::create_item_permissions_check + */ + public function test_create_item() { + wp_set_current_user( self::$admin_id ); + + $request = new WP_REST_Request( 'POST', '/wp/v2/media' ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola.jpg' ); + $request->set_param( 'title', 'My title is very cool' ); + $request->set_param( 'caption', 'This is a better caption.' ); + $request->set_param( 'description', 'Without a description, my attachment is descriptionless.' ); + $request->set_param( 'alt_text', 'Alt text is stored outside post schema.' ); + $request->set_param( 'generate_sub_sizes', false ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + $this->assertSame( 201, $response->get_status() ); + $this->assertSame( 'image', $data['media_type'] ); + $this->assertArrayHasKey( 'missing_image_sizes', $data ); + $this->assertNotEmpty( $data['missing_image_sizes'] ); + } + + /** + * Verifies that skipping sub-size generation works. + * + * @covers ::create_item + * @covers ::create_item_permissions_check + */ + public function test_create_item_insert_additional_metadata() { + wp_set_current_user( self::$admin_id ); + + $request = new WP_REST_Request( 'POST', '/wp/v2/media' ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola.jpg' ); + $request->set_param( 'title', 'My title is very cool' ); + $request->set_param( 'caption', 'This is a better caption.' ); + $request->set_param( 'description', 'Without a description, my attachment is descriptionless.' ); + $request->set_param( 'alt_text', 'Alt text is stored outside post schema.' ); + $request->set_param( 'generate_sub_sizes', false ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + + remove_filter( 'wp_generate_attachment_metadata', '__return_empty_array', 1 ); + + $this->assertSame( 201, $response->get_status() ); + + $data = $response->get_data(); + + $this->assertArrayHasKey( 'media_details', $data ); + $this->assertArrayHasKey( 'image_meta', $data['media_details'] ); + } + + public function test_prepare_item() { + $this->markTestSkipped( 'No need to implement' ); + } + + /** + * @covers ::prepare_item_for_response + */ + public function test_prepare_item_lists_missing_image_sizes_for_pdfs() { + wp_set_current_user( self::$admin_id ); + + $attachment_id = self::factory()->attachment->create_object( + DIR_TESTDATA . '/images/test-alpha.pdf', + 0, + array( + 'post_mime_type' => 'application/pdf', + 'post_excerpt' => 'A sample caption', + ) + ); + + $request = new WP_REST_Request( 'GET', sprintf( '/wp/v2/media/%d', $attachment_id ) ); + $request->set_param( 'context', 'edit' ); + + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + $this->assertArrayHasKey( 'missing_image_sizes', $data ); + $this->assertNotEmpty( $data['missing_image_sizes'] ); + $this->assertArrayHasKey( 'filename', $data ); + $this->assertArrayHasKey( 'filesize', $data ); + } + + /** + * @covers ::sideload_item + * @covers ::sideload_item_permissions_check + */ + public function test_sideload_item() { + wp_set_current_user( self::$admin_id ); + + $attachment_id = self::factory()->attachment->create_object( + DIR_TESTDATA . '/images/canola.jpg', + 0, + array( + 'post_mime_type' => 'image/jpeg', + 'post_excerpt' => 'A sample caption', + ) + ); + + wp_update_attachment_metadata( + $attachment_id, + wp_generate_attachment_metadata( $attachment_id, DIR_TESTDATA . '/images/canola.jpg' ) + ); + + $request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola-777x777.jpg' ); + $request->set_param( 'image_size', 'medium' ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + $this->assertSame( 200, $response->get_status() ); + $this->assertSame( 'image', $data['media_type'] ); + $this->assertArrayHasKey( 'missing_image_sizes', $data ); + $this->assertEmpty( $data['missing_image_sizes'] ); + $this->assertArrayHasKey( 'media_details', $data ); + $this->assertArrayHasKey( 'sizes', $data['media_details'] ); + $this->assertArrayHasKey( 'medium', $data['media_details']['sizes'] ); + $this->assertArrayHasKey( 'file', $data['media_details']['sizes']['medium'] ); + $this->assertSame( 'canola-777x777.jpg', $data['media_details']['sizes']['medium']['file'] ); + } + + /** + * @covers ::sideload_item + * @covers ::sideload_item_permissions_check + */ + public function test_sideload_item_year_month_based_folders() { + if ( version_compare( get_bloginfo( 'version' ), '6.6-beta1', '<' ) ) { + $this->markTestSkipped( 'This test requires WordPress 6.6+' ); + } + + update_option( 'uploads_use_yearmonth_folders', 1 ); + + wp_set_current_user( self::$admin_id ); + + $published_post = self::factory()->post->create( + array( + 'post_status' => 'publish', + 'post_date' => '2017-02-14 00:00:00', + 'post_date_gmt' => '2017-02-14 00:00:00', + ) + ); + + $request = new WP_REST_Request( 'POST', '/wp/v2/media' ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month.jpg' ); + $request->set_param( 'post', $published_post ); + $request->set_param( 'generate_sub_sizes', false ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + $attachment_id = $data['id']; + + $request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-777x777.jpg' ); + $request->set_param( 'image_size', 'medium' ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + update_option( 'uploads_use_yearmonth_folders', 0 ); + + $this->assertSame( 200, $response->get_status() ); + + $attachment = get_post( $data['id'] ); + + $this->assertSame( $attachment->post_parent, $data['post'] ); + $this->assertSame( $attachment->post_parent, $published_post ); + $this->assertSame( wp_get_attachment_url( $attachment->ID ), $data['source_url'] ); + $this->assertStringContainsString( '2017/02', $data['source_url'] ); + } + + /** + * @covers ::sideload_item + * @covers ::sideload_item_permissions_check + */ + public function test_sideload_item_year_month_based_folders_page_post_type() { + if ( version_compare( get_bloginfo( 'version' ), '6.6-beta1', '<' ) ) { + $this->markTestSkipped( 'This test requires WordPress 6.6+' ); + } + + update_option( 'uploads_use_yearmonth_folders', 1 ); + + wp_set_current_user( self::$admin_id ); + + $published_post = self::factory()->post->create( + array( + 'post_type' => 'page', + 'post_status' => 'publish', + 'post_date' => '2017-02-14 00:00:00', + 'post_date_gmt' => '2017-02-14 00:00:00', + ) + ); + + $request = new WP_REST_Request( 'POST', '/wp/v2/media' ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-page.jpg' ); + $request->set_param( 'post', $published_post ); + $request->set_param( 'generate_sub_sizes', false ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + $attachment_id = $data['id']; + + $request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" ); + $request->set_header( 'Content-Type', 'image/jpeg' ); + $request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-page-777x777.jpg' ); + $request->set_param( 'image_size', 'medium' ); + + $request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) ); + $response = rest_get_server()->dispatch( $request ); + $data = $response->get_data(); + + update_option( 'uploads_use_yearmonth_folders', 0 ); + + $time = current_time( 'mysql' ); + $y = substr( $time, 0, 4 ); + $m = substr( $time, 5, 2 ); + $subdir = "/$y/$m"; + + $this->assertSame( 200, $response->get_status() ); + + $attachment = get_post( $data['id'] ); + + $this->assertSame( $attachment->post_parent, $data['post'] ); + $this->assertSame( $attachment->post_parent, $published_post ); + $this->assertSame( wp_get_attachment_url( $attachment->ID ), $data['source_url'] ); + $this->assertStringNotContainsString( '2017/02', $data['source_url'] ); + $this->assertStringContainsString( $subdir, $data['source_url'] ); + } +} diff --git a/phpunit/experimental/media/media-processing-test.php b/phpunit/experimental/media/media-processing-test.php new file mode 100644 index 00000000000000..2717d2582879ff --- /dev/null +++ b/phpunit/experimental/media/media-processing-test.php @@ -0,0 +1,197 @@ +user->create( + array( + 'role' => 'administrator', + ) + ); + } + + public function set_up() { + parent::set_up(); + + self::$image_file = get_temp_dir() . 'canola.jpg'; + if ( ! file_exists( self::$image_file ) ) { + copy( DIR_TESTDATA . '/images/canola.jpg', self::$image_file ); + } + } + + public function tear_down() { + $this->remove_added_uploads(); + + parent::tear_down(); + } + + /** + * @covers gutenberg_get_all_image_sizes + */ + public function test_get_all_image_sizes() { + $sizes = gutenberg_get_all_image_sizes(); + $this->assertNotEmpty( $sizes ); + foreach ( $sizes as $size ) { + $this->assertIsInt( $size['width'] ); + $this->assertIsInt( $size['height'] ); + $this->assertIsString( $size['name'] ); + } + } + + /** + * @covers gutenberg_filter_attachment_post_type_args + */ + public function test_filter_attachment_post_type_args() { + $post_type_object = get_post_type_object( 'attachment' ); + $this->assertInstanceOf( Gutenberg_REST_Attachments_Controller::class, $post_type_object->get_rest_controller() ); + + $this->assertSame( + array( 'rest_controller_class' => Gutenberg_REST_Attachments_Controller::class ), + gutenberg_filter_attachment_post_type_args( array(), 'attachment' ) + ); + $this->assertSame( + array(), + gutenberg_filter_attachment_post_type_args( array(), 'post' ) + ); + } + + /** + * @covers ::gutenberg_rest_get_attachment_filesize + */ + public function test_rest_get_attachment_filesize() { + $attachment_id = self::factory()->attachment->create_object( + self::$image_file, + 0, + array( + 'post_mime_type' => 'image/jpeg', + 'post_excerpt' => 'A sample caption', + ) + ); + + $this->assertSame( wp_filesize( self::$image_file ), gutenberg_rest_get_attachment_filesize( array( 'id' => $attachment_id ) ) ); + } + + /** + * @covers ::gutenberg_rest_get_attachment_filename + */ + public function test_rest_get_attachment_filename() { + $attachment_id = self::factory()->attachment->create_object( + self::$image_file, + 0, + array( + 'post_mime_type' => 'image/jpeg', + 'post_excerpt' => 'A sample caption', + ) + ); + + $this->assertSame( 'canola.jpg', gutenberg_rest_get_attachment_filename( array( 'id' => $attachment_id ) ) ); + } + + /** + * @covers ::gutenberg_media_processing_filter_rest_index + */ + public function test_get_rest_index_should_return_additional_settings() { + $server = new WP_REST_Server(); + + $request = new WP_REST_Request( 'GET', '/' ); + $index = $server->dispatch( $request ); + $data = $index->get_data(); + + $this->assertArrayNotHasKey( 'image_size_threshold', $data ); + $this->assertArrayNotHasKey( 'image_output_formats', $data ); + $this->assertArrayNotHasKey( 'jpeg_interlaced', $data ); + $this->assertArrayNotHasKey( 'png_interlaced', $data ); + $this->assertArrayNotHasKey( 'gif_interlaced', $data ); + $this->assertArrayNotHasKey( 'image_sizes', $data ); + } + + /** + * @covers ::gutenberg_media_processing_filter_rest_index + */ + public function test_get_rest_index_should_return_additional_settings_can_upload_files() { + wp_set_current_user( self::$admin_id ); + + $server = new WP_REST_Server(); + + $request = new WP_REST_Request( 'GET', '/' ); + $index = $server->dispatch( $request ); + $data = $index->get_data(); + + $this->assertArrayHasKey( 'image_size_threshold', $data ); + $this->assertArrayHasKey( 'image_output_formats', $data ); + $this->assertArrayHasKey( 'jpeg_interlaced', $data ); + $this->assertArrayHasKey( 'png_interlaced', $data ); + $this->assertArrayHasKey( 'gif_interlaced', $data ); + $this->assertArrayHasKey( 'image_sizes', $data ); + } + + /** + * @covers ::gutenberg_add_crossorigin_attributes + */ + public function test_add_crossorigin_attributes() { + $html = << + + + + + + + + + + + +HTML; + + $expected = << + + + + + + + + + + + +HTML; + + $actual = gutenberg_add_crossorigin_attributes( $html ); + + $this->assertSame( $expected, $actual ); + } + + /** + * @covers ::gutenberg_override_media_templates + */ + public function test_gutenberg_override_media_templates(): void { + if ( ! function_exists( '\wp_print_media_templates' ) ) { + require_once ABSPATH . WPINC . '/media-template.php'; + } + + gutenberg_override_media_templates(); + + ob_start(); + do_action( 'admin_footer' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound + $output = ob_get_clean(); + + $this->assertStringContainsString( 'assertStringContainsString( 'assertStringContainsString( ' ( function redirectIfStoryMoved() { const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ - 'navigation', + 'alignmentmatrixcontrol', 'customselectcontrol-v2', - 'theme', + 'dimensioncontrol', + 'navigation', 'progressbar', + 'theme', ]; const REDIRECTS = [ { diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index fa5103ebaa4eeb..cf3005c9eaa18f 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -158,7 +158,7 @@ test.describe( 'Cover', () => { // Ensure there the default value for the minimum height of cover is undefined. const defaultHeightValue = await coverBlockEditorSettings - .getByLabel( 'Minimum height of cover' ) + .getByLabel( 'Minimum height' ) .inputValue(); expect( defaultHeightValue ).toBeFalsy(); diff --git a/test/e2e/specs/editor/plugins/plugins-api.spec.js b/test/e2e/specs/editor/plugins/plugins-api.spec.js index c71b49e3c4d815..c7f3a655e14240 100644 --- a/test/e2e/specs/editor/plugins/plugins-api.spec.js +++ b/test/e2e/specs/editor/plugins/plugins-api.spec.js @@ -230,4 +230,25 @@ test.describe( 'Plugins API', () => { ).toBeVisible(); } ); } ); + + test.describe( 'Preview Menu Item', () => { + test( 'Should render and interact with PluginPreviewMenuItem', async ( { + page, + } ) => { + await page + .getByRole( 'region', { name: 'Editor top bar' } ) + .locator( '.editor-preview-dropdown__toggle' ) + .click(); + + const customPreviewItem = page.getByRole( 'menuitem', { + name: 'Custom Preview', + } ); + + await expect( customPreviewItem ).toBeVisible(); + + await customPreviewItem.click(); + + await expect( customPreviewItem ).toBeHidden(); + } ); + } ); } ); diff --git a/test/e2e/specs/editor/plugins/post-type-locking.spec.js b/test/e2e/specs/editor/plugins/post-type-locking.spec.js index dc56b6a9b3b421..af6256d05e02eb 100644 --- a/test/e2e/specs/editor/plugins/post-type-locking.spec.js +++ b/test/e2e/specs/editor/plugins/post-type-locking.spec.js @@ -363,6 +363,7 @@ test.describe( 'Post-type locking', () => { 'Buttons', 'Code', 'Columns', + 'Details', 'Group', 'Preformatted', 'Pullquote', diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index d0e1f079ce8439..2799315a10b220 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -41,7 +41,7 @@ test.describe( 'Block bindings', () => { } ); test.describe( 'Paragraph', () => { - test( 'should show the value of the custom field', async ( { + test( 'should show the key of the custom field in post meta', async ( { editor, } ) => { await editor.insertBlock( { @@ -66,6 +66,53 @@ test.describe( 'Block bindings', () => { ); } ); + test( 'should show the key of the custom field in server sources with key', async ( { + editor, + } ) => { + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { + content: 'paragraph default content', + metadata: { + bindings: { + content: { + source: 'core/server-source', + args: { key: 'text_custom_field' }, + }, + }, + }, + }, + } ); + const paragraphBlock = editor.canvas.getByRole( 'document', { + name: 'Block: Paragraph', + } ); + await expect( paragraphBlock ).toHaveText( + 'text_custom_field' + ); + } ); + + test( 'should show the source label in server sources without key', async ( { + editor, + } ) => { + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { + content: 'paragraph default content', + metadata: { + bindings: { + content: { + source: 'core/server-source', + }, + }, + }, + }, + } ); + const paragraphBlock = editor.canvas.getByRole( 'document', { + name: 'Block: Paragraph', + } ); + await expect( paragraphBlock ).toHaveText( 'Server Source' ); + } ); + test( 'should lock the appropriate controls with a registered source', async ( { editor, page, @@ -1394,20 +1441,10 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; - } ); - await editor.insertBlock( { name: 'core/paragraph', } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByLabel( 'Attributes options' ) - .click(); + await page.getByLabel( 'Attributes options' ).click(); const contentAttribute = page.getByRole( 'menuitemcheckbox', { name: 'Show content', } ); @@ -1417,11 +1454,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; - } ); - await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -1436,12 +1468,7 @@ test.describe( 'Block bindings', () => { }, }, } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByRole( 'button', { name: 'content' } ) - .click(); + await page.getByRole( 'button', { name: 'content' } ).click(); await page .getByRole( 'menuitemradio' ) @@ -1539,20 +1566,10 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; - } ); - await editor.insertBlock( { name: 'core/heading', } ); - await page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .getByLabel( 'Attributes options' ) - .click(); + await page.getByLabel( 'Attributes options' ).click(); const contentAttribute = page.getByRole( 'menuitemcheckbox', { name: 'Show content', } ); @@ -1739,11 +1756,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; - } ); - await editor.insertBlock( { name: 'core/buttons', innerBlocks: [ @@ -2074,11 +2086,6 @@ test.describe( 'Block bindings', () => { editor, page, } ) => { - // Activate the block bindings UI experiment. - await page.evaluate( () => { - window.__experimentalBlockBindingsUI = true; - } ); - await editor.insertBlock( { name: 'core/image', } ); @@ -2367,11 +2374,9 @@ test.describe( 'Block bindings', () => { }, } ); - const bindingsPanel = page - .getByRole( 'tabpanel', { - name: 'Settings', - } ) - .locator( '.block-editor-bindings__panel' ); + const bindingsPanel = page.locator( + '.block-editor-bindings__panel' + ); await expect( bindingsPanel ).toContainText( 'Server Source' ); } ); } ); diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js index 9346412c46bcb2..00b51a94668d50 100644 --- a/test/e2e/specs/editor/various/block-deletion.spec.js +++ b/test/e2e/specs/editor/various/block-deletion.spec.js @@ -287,15 +287,16 @@ test.describe( 'Block deletion', () => { await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/paragraph', attributes: { content: 'First' } }, { name: 'core/paragraph', attributes: { content: 'Second' } }, - { name: 'core/paragraph', attributes: { content: '' } }, ] ); // Ensure that the newly created empty block is focused. - await expect.poll( editor.getBlocks ).toHaveLength( 3 ); + await expect.poll( editor.getBlocks ).toHaveLength( 2 ); await expect( - editor.canvas.getByRole( 'document', { - name: 'Empty block', - } ) + editor.canvas + .getByRole( 'document', { + name: 'Block: Paragraph', + } ) + .nth( 1 ) ).toBeFocused(); } ); diff --git a/test/e2e/specs/editor/various/block-switcher.spec.js b/test/e2e/specs/editor/various/block-switcher.spec.js index 88d58651a715a4..41b0b1ee49c88c 100644 --- a/test/e2e/specs/editor/various/block-switcher.spec.js +++ b/test/e2e/specs/editor/various/block-switcher.spec.js @@ -34,7 +34,14 @@ test.describe( 'Block Switcher', () => { await blockSwitcher.click(); await expect( page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' ) - ).toHaveText( [ 'Paragraph', 'Heading', 'Quote', 'Columns', 'Group' ] ); + ).toHaveText( [ + 'Paragraph', + 'Heading', + 'Quote', + 'Columns', + 'Details', + 'Group', + ] ); } ); test( 'Should show the expected block transforms on the list block when the quote block is removed', async ( { @@ -74,7 +81,13 @@ test.describe( 'Block Switcher', () => { await blockSwitcher.click(); await expect( page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' ) - ).toHaveText( [ 'Paragraph', 'Heading', 'Columns', 'Group' ] ); + ).toHaveText( [ + 'Paragraph', + 'Heading', + 'Columns', + 'Details', + 'Group', + ] ); } ); test( 'Should not show the block switcher if the block has no styles and cannot be removed', async ( { diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js index 30b2287a8d9439..12d13b4890e368 100644 --- a/test/e2e/specs/editor/various/change-detection.spec.js +++ b/test/e2e/specs/editor/various/change-detection.spec.js @@ -80,9 +80,7 @@ test.describe( 'Change detection', () => { // Toggle post as needing review (not persisted for autosave). await editor.openDocumentSettingsSidebar(); - await page - .getByRole( 'button', { name: 'Change post status:' } ) - .click(); + await page.getByRole( 'button', { name: 'Change status:' } ).click(); await page.getByRole( 'radio', { name: 'Pending' } ).click(); // Force autosave to occur immediately. await Promise.all( [ diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js index fc1918ba7ceb06..d9f571414bacf3 100644 --- a/test/e2e/specs/editor/various/footnotes.spec.js +++ b/test/e2e/specs/editor/various/footnotes.spec.js @@ -456,4 +456,36 @@ test.describe( 'Footnotes', () => { '1 ↩︎' ); } ); + + test( 'should leave alone other block attributes', async ( { + editor, + page, + } ) => { + await page.evaluate( () => { + window.wp.blocks.registerBlockType( 'core/test-block-string', { + apiVersion: 3, + title: 'Block with string attribute', + attributes: { string: { type: 'string' } }, + edit: () => null, + save: () => null, + } ); + } ); + await editor.insertBlock( { + name: 'core/test-block-string', + attributes: { string: 'a\nb' }, + } ); + + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'a' ); + await editor.showBlockToolbar(); + await editor.clickBlockToolbarButton( 'More' ); + await page.locator( 'button:text("Footnote")' ).click(); + await page.keyboard.type( '1' ); + + expect( ( await editor.getBlocks() )[ 0 ] ).toMatchObject( { + name: 'core/test-block-string', + // This should NOT be 'ab'! + attributes: { string: 'a\nb' }, + } ); + } ); } ); diff --git a/test/e2e/specs/editor/various/invalid-block.spec.js b/test/e2e/specs/editor/various/invalid-block.spec.js index 07c04a5a55457e..3487c326d2851f 100644 --- a/test/e2e/specs/editor/various/invalid-block.spec.js +++ b/test/e2e/specs/editor/various/invalid-block.spec.js @@ -81,7 +81,7 @@ test.describe( 'Invalid blocks', () => { await expect( editor.canvas .getByRole( 'document', { name: 'Block: Paragraph' } ) - .getByRole( 'button', { name: 'Attempt Block Recovery' } ) + .getByRole( 'button', { name: 'Attempt recovery' } ) ).toBeVisible(); expect( hasAlert ).toBe( false ); diff --git a/test/e2e/specs/editor/various/parsing-patterns.spec.js b/test/e2e/specs/editor/various/parsing-patterns.spec.js new file mode 100644 index 00000000000000..d8abe7a46fbc1b --- /dev/null +++ b/test/e2e/specs/editor/various/parsing-patterns.spec.js @@ -0,0 +1,57 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Parsing patterns', () => { + test( 'Considers a pattern with whitespace an allowed pattern', async ( { + admin, + editor, + page, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/buttons', + innerBlocks: [ { name: 'core/button', attributes: { text: 'a' } } ], + } ); + await page.keyboard.press( 'ArrowDown' ); + await page.getByLabel( 'Toggle block inserter' ).click(); + + await page.getByRole( 'tab', { name: 'Patterns' } ).click(); + await page.evaluate( () => { + window.wp.data.dispatch( 'core/block-editor' ).updateSettings( { + __experimentalBlockPatterns: [ + { + name: 'test/whitespace', + title: 'Pattern with top-level whitespace', + description: '', + content: ` +test + + + +test +`, + }, + ], + } ); + } ); + await page.fill( + 'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]', + 'whitespace' + ); + await page + .locator( 'role=option[name="Pattern with top-level whitespace"i]' ) + .click(); + expect( await editor.getBlocks() ).toMatchObject( [ + { + name: 'core/buttons', + innerBlocks: [ + { name: 'core/button', attributes: { text: 'a' } }, + { name: 'core/button', attributes: { text: 'test' } }, + { name: 'core/button', attributes: { text: 'test' } }, + ], + }, + ] ); + } ); +} ); diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 5e529043ec3ed6..83f2f880f3bf1b 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -150,7 +150,7 @@ test.describe( 'Pattern Overrides', () => { name: 'Block: Paragraph', } ); // Ensure the first pattern is selected. - await patternBlocks.first().selectText(); + await editor.selectBlocks( patternBlocks.first() ); await expect( paragraphs.first() ).not.toHaveAttribute( 'inert', 'true' @@ -168,7 +168,7 @@ test.describe( 'Pattern Overrides', () => { await page.keyboard.type( 'I would word it this way' ); // Ensure the second pattern is selected. - await patternBlocks.last().selectText(); + await editor.selectBlocks( patternBlocks.last() ); await patternBlocks .last() .getByRole( 'document', { @@ -1131,7 +1131,7 @@ test.describe( 'Pattern Overrides', () => { /\/wp-content\/uploads\// ); await editor.showBlockToolbar(); - await editor.clickBlockToolbarButton( 'Alt' ); + await editor.clickBlockToolbarButton( 'Alternative text' ); await page .getByRole( 'textbox', { name: 'alternative text' } ) .fill( 'Test Image' ); diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js index 61cd5e65f01015..67c8597953815b 100644 --- a/test/e2e/specs/editor/various/post-visibility.spec.js +++ b/test/e2e/specs/editor/various/post-visibility.spec.js @@ -18,7 +18,7 @@ test.describe( 'Post visibility', () => { await editor.openDocumentSettingsSidebar(); await page - .getByRole( 'button', { name: 'Change post status:' } ) + .getByRole( 'button', { name: 'Change status:' } ) .click(); await page.getByRole( 'radio', { name: 'Private' } ).click(); @@ -57,9 +57,7 @@ test.describe( 'Post visibility', () => { name: 'Close', } ) .click(); - await page - .getByRole( 'button', { name: 'Change post status:' } ) - .click(); + await page.getByRole( 'button', { name: 'Change status:' } ).click(); await page.getByRole( 'radio', { name: 'Private' } ).click(); await page .getByRole( 'region', { name: 'Editor top bar' } ) diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js index b25d1da48122ce..e15f143983b742 100644 --- a/test/e2e/specs/editor/various/preview.spec.js +++ b/test/e2e/specs/editor/various/preview.spec.js @@ -183,9 +183,7 @@ test.describe( 'Preview', () => { // Return to editor and switch to Draft. await editorPage.bringToFront(); - await page - .getByRole( 'button', { name: 'Change post status:' } ) - .click(); + await page.getByRole( 'button', { name: 'Change status:' } ).click(); await page.getByRole( 'radio', { name: 'Draft' } ).click(); await page .getByRole( 'region', { name: 'Editor top bar' } ) diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js index 516de6d0c85cc5..81652d9c11e2bb 100644 --- a/test/e2e/specs/editor/various/switch-to-draft.spec.js +++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js @@ -47,7 +47,7 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', await editor.openDocumentSettingsSidebar(); await page - .getByRole( 'button', { name: 'Change post status:' } ) + .getByRole( 'button', { name: 'Change status:' } ) .click(); await page.getByRole( 'radio', { name: 'Draft' } ).click(); diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index 31dbe9af814d2e..6faa85a2659cf1 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -22,9 +22,11 @@ test.describe( 'Templates', () => { test( 'Sorting', async ( { admin, page } ) => { await admin.visitSiteEditor( { postType: 'wp_template' } ); - // Descending by title. - await page.getByRole( 'button', { name: 'View options' } ).click(); - await page.getByRole( 'radio', { name: 'Sort descending' } ).click(); + // Wait for the template list to be visible. + await expect( + page.locator( '[aria-label="Templates"]' ) + ).toBeVisible(); + const firstTitle = page .getByRole( 'region', { name: 'Template', @@ -32,6 +34,10 @@ test.describe( 'Templates', () => { } ) .getByRole( 'link', { includeHidden: true } ) .first(); + + // Descending by title. + await page.getByRole( 'button', { name: 'View options' } ).click(); + await page.getByRole( 'radio', { name: 'Sort descending' } ).click(); await expect( firstTitle ).toHaveText( 'Tag Archives' ); // Ascending by title. diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 3927623b2824dc..ba9667358b3142 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -160,6 +160,12 @@ test.describe( 'Block template registration', () => { await expect( page.getByText( 'Custom Template (overridden by the theme)' ) ).toBeHidden(); + // Verify the template description fall backs to the plugin registered description. + await expect( + page.getByText( + 'A custom template registered by a plugin and overridden by a theme.' + ) + ).toBeVisible(); // Verify the theme template shows the theme name as the author. await expect( page.getByText( 'AuthorEmptytheme' ) ).toBeVisible(); } ); diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html index 7d7a76c730b273..8c88b8b67795d7 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html @@ -1,5 +1,5 @@ - + My Content diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html new file mode 100644 index 00000000000000..22a2a3e18f74f6 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html @@ -0,0 +1,13 @@ + + + + + + + My Content + + + + diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json new file mode 100644 index 00000000000000..bf195f6fa1c953 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json @@ -0,0 +1,29 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "wide", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json new file mode 100644 index 00000000000000..2e878c98a18a89 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\tMy Content\n\t\t", + "innerContent": [ + "\n\t\tMy Content\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", + "innerContent": [ + "\n\n\t\n\t\t\n\t\n\t\t", + null, + "\n\t\n\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html new file mode 100644 index 00000000000000..b9d5e14f90277c --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html @@ -0,0 +1,5 @@ + + +My Content + + diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html new file mode 100644 index 00000000000000..47a0f0c126fa70 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html @@ -0,0 +1,13 @@ + + + + + + + My Content + + + + diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json new file mode 100644 index 00000000000000..986e049099541f --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json @@ -0,0 +1,33 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "wide", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true, + "focalPoint": { + "x": 0.84, + "y": 0.84 + } + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json new file mode 100644 index 00000000000000..175fbad27927b7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json @@ -0,0 +1,33 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true, + "focalPoint": { + "x": 0.84, + "y": 0.84 + } + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\tMy Content\n\t\t", + "innerContent": [ + "\n\t\tMy Content\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", + "innerContent": [ + "\n\n\t\n\t\t\n\t\n\t\t", + null, + "\n\t\n\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html new file mode 100644 index 00000000000000..4b001f4f27c8ad --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html @@ -0,0 +1,5 @@ + + +My Content + + diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html new file mode 100644 index 00000000000000..92b4b4d2754133 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html @@ -0,0 +1,13 @@ + + + + + + + My Content + + + + diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json new file mode 100644 index 00000000000000..a6f0dff927874d --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json @@ -0,0 +1,30 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "none", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true, + "useFeaturedImage": false + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json new file mode 100644 index 00000000000000..49b392d4231384 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\tMy Content\n\t\t", + "innerContent": [ + "\n\t\tMy Content\n\t\t" + ] + } + ], + "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", + "innerContent": [ + "\n\n\t\n\t\t\n\t\n\t\t", + null, + "\n\t\n\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html new file mode 100644 index 00000000000000..b44ebe1c4ee896 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html @@ -0,0 +1,5 @@ + + +My Content + + diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html index 22a2a3e18f74f6..30667e0dd24dc5 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html @@ -1,9 +1,8 @@ - - - + + + + alt="My alt text" style="object-position:50% 50%"/> My Content diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json index bf195f6fa1c953..bb57f08ad5cfa7 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json @@ -6,11 +6,12 @@ "align": "wide", "mediaAlt": "My alt text", "mediaPosition": "left", + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "mediaType": "image", "mediaWidth": 50, "isStackedOnMobile": true, - "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", - "imageFill": true + "imageFill": true, + "useFeaturedImage": false }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json index 2e878c98a18a89..674b3724af8e88 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json @@ -2,6 +2,7 @@ { "blockName": "core/media-text", "attrs": { + "align": "wide", "mediaType": "image", "imageFill": true }, @@ -19,9 +20,9 @@ ] } ], - "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", + "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", "innerContent": [ - "\n\n\t\n\t\t\n\t\n\t\t", + "\n\n\t\n\t\t\n\t\n\t\t", null, "\n\t\n\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html index 40382e884f618e..b9d5e14f90277c 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ - + My Content diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html index 47a0f0c126fa70..60e2cc7be572d4 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html @@ -1,9 +1,8 @@ - - - + + + + alt="My alt text" style="object-position:84% 84%" /> My Content diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json index 986e049099541f..0de71c867457ef 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json @@ -6,15 +6,16 @@ "align": "wide", "mediaAlt": "My alt text", "mediaPosition": "left", + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "mediaType": "image", "mediaWidth": 50, "isStackedOnMobile": true, - "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "imageFill": true, "focalPoint": { "x": 0.84, "y": 0.84 - } + }, + "useFeaturedImage": false }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json index 175fbad27927b7..92bd57443a1c34 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json @@ -2,6 +2,7 @@ { "blockName": "core/media-text", "attrs": { + "align": "wide", "mediaType": "image", "imageFill": true, "focalPoint": { @@ -23,9 +24,9 @@ ] } ], - "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", + "innerHTML": "\n\n\t\n\t\t\n\t\n\t\t\n\t\n\n", "innerContent": [ - "\n\n\t\n\t\t\n\t\n\t\t", + "\n\n\t\n\t\t\n\t\n\t\t", null, "\n\t\n\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html index 9445d0ad259b22..4b001f4f27c8ad 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ - +
{ __( 'Upload failed, try again.' ) }
{ onNavigateToEntityRecord( { diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 3e333b38eee00e..50595d936b36d9 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -15,7 +15,6 @@ import { pasteHandler } from '@wordpress/blocks'; import { __unstableUseRichText as useRichText, create, - toHTMLString, insert, } from '@wordpress/rich-text'; import { useMergeRefs } from '@wordpress/compose'; @@ -50,9 +49,35 @@ function PostTitle( _, forwardedRef ) { const { clearSelectedBlock, insertBlocks, insertDefaultBlock } = useDispatch( blockEditorStore ); - function onChange( value ) { - onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) ); - } + const decodedPlaceholder = + decodeEntities( placeholder ) || __( 'Add title' ); + + const { + value, + onChange, + ref: richTextRef, + } = useRichText( { + value: title, + onChange( newValue ) { + onUpdate( newValue.replace( REGEXP_NEWLINES, ' ' ) ); + }, + placeholder: decodedPlaceholder, + selectionStart: selection.start, + selectionEnd: selection.end, + onSelectionChange( newStart, newEnd ) { + setSelection( ( sel ) => { + const { start, end } = sel; + if ( start === newStart && end === newEnd ) { + return sel; + } + return { + start: newStart, + end: newEnd, + }; + } ); + }, + __unstableDisableFormats: false, + } ); function onInsertBlockAfter( blocks ) { insertBlocks( blocks, 0 ); @@ -130,49 +155,14 @@ function PostTitle( _, forwardedRef ) { onInsertBlockAfter( content ); } } else { - const value = { - ...create( { html: title } ), - ...selection, - }; - // Strip HTML to avoid unwanted HTML being added to the title. // In the majority of cases it is assumed that HTML in the title // is undesirable. const contentNoHTML = stripHTML( content ); - - const newValue = insert( value, create( { html: contentNoHTML } ) ); - onUpdate( toHTMLString( { value: newValue } ) ); - setSelection( { - start: newValue.start, - end: newValue.end, - } ); + onChange( insert( value, create( { html: contentNoHTML } ) ) ); } } - const decodedPlaceholder = - decodeEntities( placeholder ) || __( 'Add title' ); - - const { ref: richTextRef } = useRichText( { - value: title, - onChange, - placeholder: decodedPlaceholder, - selectionStart: selection.start, - selectionEnd: selection.end, - onSelectionChange( newStart, newEnd ) { - setSelection( ( sel ) => { - const { start, end } = sel; - if ( start === newStart && end === newEnd ) { - return sel; - } - return { - start: newStart, - end: newEnd, - }; - } ); - }, - __unstableDisableFormats: false, - } ); - // The wp-block className is important for editor styles. // This same block is used in both the visual and the code editor. const className = clsx( DEFAULT_CLASSNAMES, { @@ -192,7 +182,6 @@ function PostTitle( _, forwardedRef ) { onFocus={ onSelect } onBlur={ onUnselect } onKeyDown={ onKeyDown } - onKeyPress={ onUnselect } onPaste={ onPaste } /> diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index e767ae04f5ec0e..5ed3155388c8cc 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -110,6 +110,8 @@ export default function PostURL( { onClose } ) { } suffix={ { const { getDeviceType, getCurrentPostType } = select( editorStore ); - const { getUnstableBase, getPostType } = select( coreStore ); + const { getEntityRecord, getPostType } = select( coreStore ); const { get } = select( preferencesStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); const _currentPostType = getCurrentPostType(); return { deviceType: getDeviceType(), editorMode: __unstableGetEditorMode(), - homeUrl: getUnstableBase()?.home, + homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home, isTemplate: _currentPostType === 'wp_template', isViewable: getPostType( _currentPostType )?.viewable ?? false, showIconLabels: get( 'core', 'showIconLabels' ), @@ -58,18 +59,18 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { /** * Save the original editing mode in a ref to restore it when we exit zoom out. */ - const originalEditingMode = useRef( editorMode ); + const originalEditingModeRef = useRef( editorMode ); useEffect( () => { if ( editorMode !== 'zoom-out' ) { - originalEditingMode.current = editorMode; + originalEditingModeRef.current = editorMode; } return () => { if ( editorMode === 'zoom-out' && - editorMode !== originalEditingMode.current + editorMode !== originalEditingModeRef.current ) { - __unstableSetEditorMode( originalEditingMode.current ); + __unstableSetEditorMode( originalEditingModeRef.current ); } }; }, [ editorMode, __unstableSetEditorMode ] ); @@ -111,22 +112,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { label: __( 'Desktop' ), icon: desktop, }, - { + ]; + if ( window.__experimentalEnableZoomOutExperiment ) { + choices.push( { value: 'ZoomOut', label: __( 'Desktop (50%)' ), icon: desktop, - }, - { - value: 'Tablet', - label: __( 'Tablet' ), - icon: tablet, - }, - { - value: 'Mobile', - label: __( 'Mobile' ), - icon: mobile, - }, - ]; + } ); + } + choices.push( { + value: 'Tablet', + label: __( 'Tablet' ), + icon: tablet, + } ); + choices.push( { + value: 'Mobile', + label: __( 'Mobile' ), + icon: mobile, + } ); const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType; @@ -136,7 +139,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { * @param {string} value The device type. */ const onSelect = ( value ) => { - let newEditorMode = originalEditingMode.current; + let newEditorMode = originalEditingModeRef.current; if ( value === 'ZoomOut' ) { newEditorMode = 'zoom-out'; @@ -206,6 +209,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { /> ) } + ) }
{ children }
- + { hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
My Content