{ ! hasDefaultEditorCanvasView ? (
getEditorCanvasContainerTitle( editorCanvasView )
) : (
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 26b1716a28b86..78a988b2716ae 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -15,6 +15,17 @@ $header-toolbar-min-width: 335px;
.edit-site-header-edit-mode__start {
display: flex;
border: none;
+ align-items: center;
+ flex-shrink: 2;
+ // We need this to be overflow hidden so the block toolbar can
+ // overflow scroll. If the overflow is visible, flexbox allows
+ // the toolbar to grow outside of the allowed container space.
+ overflow: hidden;
+ // Take up the full height of the header so the border focus
+ // is visible on toolbar buttons.
+ height: 100%;
+ // Allow focus ring to be fully visible on furthest right button.
+ padding-right: 2px;
}
.edit-site-header-edit-mode__end {
@@ -35,6 +46,10 @@ $header-toolbar-min-width: 335px;
// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
min-width: 0;
}
+
+ .block-editor-block-contextual-toolbar.is-fixed {
+ border: none;
+ }
}
.edit-site-header-edit-mode__toolbar {
@@ -99,7 +114,7 @@ $header-toolbar-min-width: 335px;
}
}
-.edit-site-header-edit-mode__start {
+.edit-site-header-edit-mode__document-tools {
display: flex;
border: none;
@@ -183,7 +198,25 @@ $header-toolbar-min-width: 335px;
padding: 0 $grid-unit-10;
}
- .edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
+ .edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
margin-left: $grid-unit-10;
}
}
+
+.has-fixed-toolbar {
+ .selected-block-tools-wrapper {
+ overflow-x: scroll;
+
+ &.is-collapsed {
+ display: none;
+ }
+ }
+
+ .edit-site-header-edit-mode__center.is-collapsed {
+ display: none;
+ }
+}
+
+.edit-site-header-edit-mode__block-tools-toggle {
+ margin-left: 2px; // Allow focus ring to be fully visible
+}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index c5892e1fd4e91..9e4153938d40a 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -192,6 +192,7 @@ export default function Layout() {
'is-full-canvas': isFullCanvas,
'is-edit-mode': isEditing,
'has-fixed-toolbar': hasFixedToolbar,
+ 'is-block-toolbar-visible': hasBlockSelected,
}
) }
>
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 088217776b4d2..3bea97862b1c4 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -254,23 +254,6 @@
}
}
-.edit-site-layout.has-fixed-toolbar {
- // making the header be lower than the content
- // so the fixed toolbar can be positioned on top of it
- // but only on desktop
- @include break-medium() {
- .edit-site-layout__canvas-container {
- z-index: 5;
- }
- .edit-site-site-hub {
- z-index: 4;
- }
- .edit-site-layout__header:focus-within {
- z-index: 3;
- }
- }
-}
-
.is-edit-mode.is-distraction-free {
.edit-site-layout__header-container {
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
index 10b5b99dc2fbf..e2b39e0ecd151 100644
--- a/packages/edit-site/src/components/page-main/index.js
+++ b/packages/edit-site/src/components/page-main/index.js
@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
import PagePatterns from '../page-patterns';
import PageTemplateParts from '../page-template-parts';
import PageTemplates from '../page-templates';
+import DataviewsTemplates from '../page-templates/dataviews-templates';
import PagePages from '../page-pages';
import { unlock } from '../../lock-unlock';
@@ -20,7 +21,11 @@ export default function PageMain() {
} = useLocation();
if ( path === '/wp_template/all' ) {
- return
;
+ return window?.__experimentalAdminViews ? (
+
+ ) : (
+
+ );
} else if ( path === '/wp_template_part/all' ) {
return
;
} else if ( path === '/patterns' ) {
diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
new file mode 100644
index 0000000000000..8f8a052b79b94
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalHeading as Heading,
+ __experimentalText as Text,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { DataViews } from '../dataviews';
+import {
+ useResetTemplateAction,
+ deleteTemplateAction,
+ renameTemplateAction,
+} from './template-actions';
+
+const EMPTY_ARRAY = [];
+
+const DEFAULT_VIEW = {
+ type: 'list',
+ search: '',
+ page: 1,
+ perPage: 20,
+ // All fields are visible by default, so it's
+ // better to keep track of the hidden ones.
+ hiddenFields: [],
+ layout: {},
+};
+
+function normalizeSearchInput( input = '' ) {
+ return removeAccents( input.trim().toLowerCase() );
+}
+
+export default function DataviewsTemplates() {
+ const [ view, setView ] = useState( DEFAULT_VIEW );
+ const { records: allTemplates, isResolving: isLoadingData } =
+ useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+ per_page: -1,
+ } );
+ const { shownTemplates, paginationInfo } = useMemo( () => {
+ if ( ! allTemplates ) {
+ return {
+ shownTemplates: EMPTY_ARRAY,
+ paginationInfo: { totalItems: 0, totalPages: 0 },
+ };
+ }
+ let filteredTemplates = [ ...allTemplates ];
+ // Handle global search.
+ if ( view.search ) {
+ const normalizedSearch = normalizeSearchInput( view.search );
+ filteredTemplates = filteredTemplates.filter( ( item ) => {
+ const title = item.title?.rendered || item.slug;
+ return (
+ normalizeSearchInput( title ).includes(
+ normalizedSearch
+ ) ||
+ normalizeSearchInput( item.description ).includes(
+ normalizedSearch
+ )
+ );
+ } );
+ }
+ // Handle sorting.
+ // TODO: Explore how this can be more dynamic..
+ if ( view.sort ) {
+ if ( view.sort.field === 'title' ) {
+ filteredTemplates.sort( ( a, b ) => {
+ const titleA = a.title?.rendered || a.slug;
+ const titleB = b.title?.rendered || b.slug;
+ return view.sort.direction === 'asc'
+ ? titleA.localeCompare( titleB )
+ : titleB.localeCompare( titleA );
+ } );
+ }
+ }
+ // Handle pagination.
+ const start = ( view.page - 1 ) * view.perPage;
+ const totalItems = filteredTemplates?.length || 0;
+ filteredTemplates = filteredTemplates?.slice(
+ start,
+ start + view.perPage
+ );
+ return {
+ shownTemplates: filteredTemplates,
+ paginationInfo: {
+ totalItems,
+ totalPages: Math.ceil( totalItems / view.perPage ),
+ },
+ };
+ }, [ allTemplates, view ] );
+ const fields = useMemo(
+ () => [
+ {
+ header: __( 'Template' ),
+ id: 'title',
+ getValue: ( { item } ) => item.title?.rendered || item.slug,
+ render: ( { item } ) => {
+ return (
+
+
+
+ { decodeEntities(
+ item.title?.rendered || item.slug
+ ) || __( '(no title)' ) }
+
+
+
+ );
+ },
+ maxWidth: 400,
+ enableHiding: false,
+ },
+ {
+ header: __( 'Description' ),
+ id: 'description',
+ getValue: ( { item } ) => item.description,
+ render: ( { item } ) => {
+ return (
+ item.description && (
+
+ { decodeEntities( item.description ) }
+
+ )
+ );
+ },
+ enableSorting: false,
+ },
+ {
+ header: __( 'Author' ),
+ id: 'author',
+ getValue: () => {},
+ render: ( { item } ) => {
+ return (
+
+ );
+ },
+ enableHiding: false,
+ enableSorting: false,
+ },
+ ],
+ []
+ );
+ const resetTemplateAction = useResetTemplateAction();
+ const actions = useMemo(
+ () => [
+ resetTemplateAction,
+ deleteTemplateAction,
+ renameTemplateAction,
+ ],
+ [ resetTemplateAction ]
+ );
+ const onChangeView = useCallback(
+ ( viewUpdater ) => {
+ const updatedView =
+ typeof viewUpdater === 'function'
+ ? viewUpdater( view )
+ : viewUpdater;
+ setView( updatedView );
+ },
+ [ view, setView ]
+ );
+ return (
+
+
+
+ );
+}
diff --git a/packages/edit-site/src/components/page-templates/template-actions.js b/packages/edit-site/src/components/page-templates/template-actions.js
new file mode 100644
index 0000000000000..9f5897e31fb93
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/template-actions.js
@@ -0,0 +1,209 @@
+/**
+ * WordPress dependencies
+ */
+import { backup, trash } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+ Button,
+ TextControl,
+ __experimentalText as Text,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import isTemplateRevertable from '../../utils/is-template-revertable';
+import isTemplateRemovable from '../../utils/is-template-removable';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+export function useResetTemplateAction() {
+ const { revertTemplate } = useDispatch( editSiteStore );
+ const { saveEditedEntityRecord } = useDispatch( coreStore );
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ return useMemo(
+ () => ( {
+ id: 'reset-template',
+ label: __( 'Reset template' ),
+ isPrimary: true,
+ icon: backup,
+ isEligible: isTemplateRevertable,
+ async callback( template ) {
+ try {
+ await revertTemplate( template, { allowUndo: false } );
+ await saveEditedEntityRecord(
+ 'postType',
+ template.type,
+ template.id
+ );
+
+ createSuccessNotice(
+ sprintf(
+ /* translators: The template/part's name. */
+ __( '"%s" reverted.' ),
+ decodeEntities( template.title.rendered )
+ ),
+ {
+ type: 'snackbar',
+ id: 'edit-site-template-reverted',
+ }
+ );
+ } catch ( error ) {
+ const fallbackErrorMessage =
+ template.type === TEMPLATE_POST_TYPE
+ ? __(
+ 'An error occurred while reverting the template.'
+ )
+ : __(
+ 'An error occurred while reverting the template part.'
+ );
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : fallbackErrorMessage;
+
+ createErrorNotice( errorMessage, { type: 'snackbar' } );
+ }
+ },
+ } ),
+ [
+ createErrorNotice,
+ createSuccessNotice,
+ revertTemplate,
+ saveEditedEntityRecord,
+ ]
+ );
+}
+
+export const deleteTemplateAction = {
+ id: 'delete-template',
+ label: __( 'Delete template' ),
+ isPrimary: true,
+ icon: trash,
+ isEligible: isTemplateRemovable,
+ hideModalHeader: true,
+ RenderModal: ( { item: template, closeModal } ) => {
+ const { removeTemplate } = useDispatch( editSiteStore );
+ return (
+
+
+ { sprintf(
+ // translators: %s: The template or template part's title.
+ __( 'Are you sure you want to delete "%s"?' ),
+ decodeEntities( template.title.rendered )
+ ) }
+
+
+
+
+
+
+ );
+ },
+};
+
+export const renameTemplateAction = {
+ id: 'rename-template',
+ label: __( 'Rename' ),
+ isEligible: ( template ) =>
+ isTemplateRemovable( template ) && template.is_custom,
+ RenderModal: ( { item: template, closeModal } ) => {
+ const title = decodeEntities( template.title.rendered );
+ const [ editedTitle, setEditedTitle ] = useState( title );
+ const {
+ editEntityRecord,
+ __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+ } = useDispatch( coreStore );
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ async function onTemplateRename( event ) {
+ event.preventDefault();
+ try {
+ await editEntityRecord(
+ 'postType',
+ template.type,
+ template.id,
+ {
+ title: editedTitle,
+ }
+ );
+ // Update state before saving rerenders the list.
+ setEditedTitle( '' );
+ closeModal();
+ // Persist edited entity.
+ await saveSpecifiedEntityEdits(
+ 'postType',
+ template.type,
+ template.id,
+ [ 'title' ], // Only save title to avoid persisting other edits.
+ {
+ throwOnError: true,
+ }
+ );
+ // TODO: this action will be reused in template parts list, so
+ // let's keep this for a bit, even it's always a `template` now.
+ createSuccessNotice(
+ template.type === TEMPLATE_POST_TYPE
+ ? __( 'Template renamed.' )
+ : __( 'Template part renamed.' ),
+ {
+ type: 'snackbar',
+ }
+ );
+ } catch ( error ) {
+ const fallbackErrorMessage =
+ template.type === TEMPLATE_POST_TYPE
+ ? __( 'An error occurred while renaming the template.' )
+ : __(
+ 'An error occurred while renaming the template part.'
+ );
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : fallbackErrorMessage;
+
+ createErrorNotice( errorMessage, { type: 'snackbar' } );
+ }
+ }
+ return (
+
+ );
+ },
+};
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index 220634c54e09b..d84d85faf4d60 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -129,7 +129,6 @@ export default function AddNewItem( { type } ) {
onRequestClose={ () => {
setIsAdding( false );
} }
- overlayClassName=""
>
( {
+ hasFixedToolbar: !! select( preferencesStore ).get(
+ 'core/edit-widgets',
+ 'fixedToolbar'
+ ),
+ } ),
+ []
+ );
return (
<>
- { isMediumViewport && (
+ { isLargeViewport && (
{ __( 'Widgets' ) }
) }
- { ! isMediumViewport && (
+ { ! isLargeViewport && (
+ { hasFixedToolbar && isLargeViewport && (
+ <>
+
+
+
+
+
+ ) }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 64a9f124bb750..e279b0f79b458 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -9,12 +9,22 @@
@include break-small {
overflow: visible;
}
+
+ .selected-block-tools-wrapper {
+ overflow-x: hidden;
+ }
+
+ .block-editor-block-contextual-toolbar.is-fixed {
+ border: none;
+ }
}
.edit-widgets-header__navigable-toolbar-wrapper {
display: flex;
align-items: center;
justify-content: center;
+ flex-shrink: 2;
+ overflow-x: hidden;
padding-left: $grid-unit-20;
}
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index fe1edbae23295..1aed3d3eefc86 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -22,15 +22,3 @@
height: 100%;
}
}
-
-.blocks-widgets-container {
- // making the header be lower than the content
- // so the fixed toolbar can be positioned on top of it
- // but only on desktop
- @include break-medium() {
- .interface-interface-skeleton__header:not(:focus-within) {
- z-index: 19;
- }
- }
-
-}
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
index 062214ef147bf..35493cad130cf 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
@@ -34,101 +34,3 @@
}
}
}
-
-// Fixed contextual toolbar
-@include editor-left(".edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
- position: sticky;
- top: 0;
- z-index: z-index(".block-editor-block-popover");
- display: block;
- width: 100%;
-
- // on desktop and tablet viewports the toolbar is fixed
- // on top of interface header
- $toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
- @include break-medium() {
- // leave room for block inserter, undo and redo, list view
- margin-left: $toolbar-margin;
- // position on top of interface header
- position: fixed;
- top: $admin-bar-height;
- // Don't fill up when empty
- min-height: initial;
- // remove the border
- border-bottom: none;
- // has to be flex for collapse button to fit
- display: flex;
-
- // Mimic the height of the parent, vertically align center, and provide a max-height.
- height: $header-height;
- align-items: center;
-
-
- // on tablet viewports the toolbar is fixed
- // on top of interface header and covers the whole header
- // except for the inserter on the left
- width: calc(100% - #{$toolbar-margin});
-
- &.is-collapsed {
- width: initial;
- }
-
- &:empty {
- width: initial;
- }
-
- .is-fullscreen-mode & {
- // leave room for block inserter, undo and redo, list view
- // and some margin left
- margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
- top: 0;
-
- &.is-collapsed {
- width: initial;
- }
-
- &:empty {
- width: initial;
- }
- }
-
- .show-icon-labels & {
- margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
- width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-
- .is-fullscreen-mode & {
- margin-left: $grid-unit * 18; // site hub, inserter and margin
- }
- }
-
- .blocks-widgets-container & {
- margin-left: $grid-unit-80 * 2.4;
-
- &.is-collapsed {
- margin-left: $grid-unit-80 * 4.2;
- }
- }
- }
-
- // on desktop viewports the toolbar is fixed
- // on top of interface header and leaves room
- // for the block inserter the publish button
- @include break-large() {
- width: auto;
- .show-icon-labels & {
- width: auto; //there are no undo, redo and list view buttons
- }
-
- .is-fullscreen-mode & {
- // in full screen mode we need to account for
- // the combined with of the tools at the right of the header and the margin left
- // of the toolbar which includes four buttons
- width: calc(100% - 280px - #{4 * $grid-unit-80});
- }
- }
-}
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index d7094b080de9d..09f5f30c2a660 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -222,7 +222,6 @@ function PostTitle( _, forwardedRef ) {
} );
},
__unstableDisableFormats: true,
- preserveWhiteSpace: true,
} );
/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js
index 5f407682bea0f..a86208a04b601 100644
--- a/packages/patterns/src/components/patterns-manage-button.js
+++ b/packages/patterns/src/components/patterns-manage-button.js
@@ -64,9 +64,6 @@ function PatternsManageButton( { clientId } ) {
return (
<>
-
{ canRemove && (
) }
+
);
}
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index 3ca8f0d04fe8d..996eeabaae1c1 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-aztec",
- "version": "1.107.0",
+ "version": "1.108.0",
"description": "Aztec view for react-native.",
"private": true,
"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 8445510418fbe..927b2ef14ec3d 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-bridge",
- "version": "1.107.0",
+ "version": "1.108.0",
"description": "Native bridge library used to integrate the block editor into a native App.",
"private": true,
"author": "The WordPress Contributors",
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 2674bc503ed16..1a7de1314288b 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label to i
-->
## Unreleased
+
+## 1.108.0
- [*] Fix error when pasting deeply nested structure content [#55613]
- [*] Fix crash related to accessing undefined value in `TextColorEdit` [#55664]
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index e3931b56427c8..95decffb6206d 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
- ReactCommon/turbomodule/core (= 0.71.11)
- fmt (6.2.1)
- glog (0.3.5)
- - Gutenberg (1.107.0):
+ - Gutenberg (1.108.0):
- React-Core (= 0.71.11)
- React-CoreModules (= 0.71.11)
- React-RCTImage (= 0.71.11)
@@ -429,7 +429,7 @@ PODS:
- React-RCTImage
- RNSVG (13.9.0):
- React-Core
- - RNTAztecView (1.107.0):
+ - RNTAztecView (1.108.0):
- React-Core
- WordPress-Aztec-iOS (= 1.19.9)
- SDWebImage (5.11.1):
@@ -617,7 +617,7 @@ SPEC CHECKSUMS:
FBReactNativeSpec: f07662560742d82a5b73cee116c70b0b49bcc220
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
- Gutenberg: f49ebd82d52153418d80083b19f8d1ca187d2cb0
+ Gutenberg: c765216d64630eb86d053ff53214abaedbd5f535
hermes-engine: 34c863b446d0135b85a6536fa5fd89f48196f848
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -662,7 +662,7 @@ SPEC CHECKSUMS:
RNReanimated: d4f363f4987ae0ade3e36ff81c94e68261bf4b8d
RNScreens: 68fd1060f57dd1023880bf4c05d74784b5392789
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
- RNTAztecView: e7e3746b35ffc669cf6885b885194a39e5b237ed
+ RNTAztecView: dfa8817995fc92b8a0ba755763aab77445650c91
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
WordPress-Aztec-iOS: fbebd569c61baa252b3f5058c0a2a9a6ada686bb
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index e538d532980ae..e00754eccec44 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/react-native-editor",
- "version": "1.107.0",
+ "version": "1.108.0",
"description": "Mobile WordPress gutenberg editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 84f33bc3afaf1..90726ff238c1b 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -174,7 +174,6 @@ _Parameters_
- _$1.text_ `[string]`: Text to create value from.
- _$1.html_ `[string]`: HTML to create value from.
- _$1.range_ `[Range]`: Range to create value from.
-- _$1.preserveWhiteSpace_ `[boolean]`: Whether or not to collapse white space characters.
- _$1.\_\_unstableIsEditableTree_ `[boolean]`:
_Returns_
@@ -420,7 +419,6 @@ _Parameters_
- _$1_ `Object`: Named argements.
- _$1.value_ `RichTextValue`: Rich text value.
-- _$1.preserveWhiteSpace_ `[boolean]`: Whether or not to use newline characters for line breaks.
_Returns_
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
index 4aaa0b88ebc14..17cf17e2e3154 100644
--- a/packages/rich-text/src/component/index.js
+++ b/packages/rich-text/src/component/index.js
@@ -8,7 +8,7 @@ import { useRegistry } from '@wordpress/data';
/**
* Internal dependencies
*/
-import { create } from '../create';
+import { collapseWhiteSpace, create } from '../create';
import { apply } from '../to-dom';
import { toHTMLString } from '../to-html-string';
import { useDefaultStyle } from './use-default-style';
@@ -25,8 +25,8 @@ export function useRichText( {
selectionStart,
selectionEnd,
placeholder,
- preserveWhiteSpace,
onSelectionChange,
+ preserveWhiteSpace,
onChange,
__unstableDisableFormats: disableFormats,
__unstableIsSelected: isSelected,
@@ -51,7 +51,6 @@ export function useRichText( {
element: ref.current,
range,
__unstableIsEditableTree: true,
- preserveWhiteSpace,
} );
}
@@ -72,8 +71,7 @@ export function useRichText( {
function setRecordFromProps() {
_value.current = value;
record.current = create( {
- html: value,
- preserveWhiteSpace,
+ html: preserveWhiteSpace ? value : collapseWhiteSpace( value ),
} );
if ( disableFormats ) {
record.current.formats = Array( value.length );
@@ -139,7 +137,6 @@ export function useRichText( {
formats: __unstableBeforeSerialize( newRecord ),
}
: newRecord,
- preserveWhiteSpace,
} );
}
@@ -168,7 +165,6 @@ export function useRichText( {
formats: __unstableBeforeSerialize( newRecord ),
}
: newRecord,
- preserveWhiteSpace,
} );
const { formats, text } = newRecord;
@@ -215,7 +211,7 @@ export function useRichText( {
ref,
useDefaultStyle(),
useBoundaryStyle( { record } ),
- useCopyHandler( { record, preserveWhiteSpace } ),
+ useCopyHandler( { record } ),
useSelectObject(),
useFormatBoundaries( { record, applyRecord } ),
useDelete( {
diff --git a/packages/rich-text/src/component/use-copy-handler.js b/packages/rich-text/src/component/use-copy-handler.js
index 3be5935443215..f0ba652528e87 100644
--- a/packages/rich-text/src/component/use-copy-handler.js
+++ b/packages/rich-text/src/component/use-copy-handler.js
@@ -17,7 +17,7 @@ export function useCopyHandler( props ) {
propsRef.current = props;
return useRefEffect( ( element ) => {
function onCopy( event ) {
- const { record, preserveWhiteSpace } = propsRef.current;
+ const { record } = propsRef.current;
const { ownerDocument } = element;
if (
isCollapsed( record.current ) ||
@@ -28,10 +28,7 @@ export function useCopyHandler( props ) {
const selectedRecord = slice( record.current );
const plainText = getTextContent( selectedRecord );
- const html = toHTMLString( {
- value: selectedRecord,
- preserveWhiteSpace,
- } );
+ const html = toHTMLString( { value: selectedRecord } );
event.clipboardData.setData( 'text/plain', plainText );
event.clipboardData.setData( 'text/html', html );
event.clipboardData.setData( 'rich-text', 'true' );
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 793bdca77f71d..63aac8c076b8b 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -135,8 +135,6 @@ function toFormat( { tagName, attributes } ) {
* @param {string} [$1.text] Text to create value from.
* @param {string} [$1.html] HTML to create value from.
* @param {Range} [$1.range] Range to create value from.
- * @param {boolean} [$1.preserveWhiteSpace] Whether or not to collapse
- * white space characters.
* @param {boolean} [$1.__unstableIsEditableTree]
*
* @return {RichTextValue} A rich text value.
@@ -147,7 +145,6 @@ export function create( {
html,
range,
__unstableIsEditableTree: isEditableTree,
- preserveWhiteSpace,
} = {} ) {
if ( typeof text === 'string' && text.length > 0 ) {
return {
@@ -171,7 +168,6 @@ export function create( {
element,
range,
isEditableTree,
- preserveWhiteSpace,
} );
}
@@ -272,9 +268,17 @@ function filterRange( node, range, filter ) {
* Collapse any whitespace used for HTML formatting to one space character,
* because it will also be displayed as such by the browser.
*
+ * We need to strip it from the content because we use white-space: pre-wrap for
+ * displaying editable rich text. Without using white-space: pre-wrap, the
+ * browser will litter the content with non breaking spaces, among other issues.
+ * See packages/rich-text/src/component/use-default-style.js.
+ *
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse#collapsing_of_white_space
+ *
* @param {string} string
*/
-function collapseWhiteSpace( string ) {
+export function collapseWhiteSpace( string ) {
return string.replace( /[\n\r\t]+/g, ' ' );
}
@@ -294,21 +298,14 @@ export function removeReservedCharacters( string ) {
/**
* Creates a Rich Text value from a DOM element and range.
*
- * @param {Object} $1 Named argements.
- * @param {Element} [$1.element] Element to create value from.
- * @param {Range} [$1.range] Range to create value from.
- * @param {boolean} [$1.preserveWhiteSpace] Whether or not to collapse white
- * space characters.
+ * @param {Object} $1 Named argements.
+ * @param {Element} [$1.element] Element to create value from.
+ * @param {Range} [$1.range] Range to create value from.
* @param {boolean} [$1.isEditableTree]
*
* @return {RichTextValue} A rich text value.
*/
-function createFromElement( {
- element,
- range,
- isEditableTree,
- preserveWhiteSpace,
-} ) {
+function createFromElement( { element, range, isEditableTree } ) {
const accumulator = createEmptyValue();
if ( ! element ) {
@@ -328,15 +325,8 @@ function createFromElement( {
const tagName = node.nodeName.toLowerCase();
if ( node.nodeType === node.TEXT_NODE ) {
- let filter = removeReservedCharacters;
-
- if ( ! preserveWhiteSpace ) {
- filter = ( string ) =>
- removeReservedCharacters( collapseWhiteSpace( string ) );
- }
-
- const text = filter( node.nodeValue );
- range = filterRange( node, range, filter );
+ const text = removeReservedCharacters( node.nodeValue );
+ range = filterRange( node, range, removeReservedCharacters );
accumulateSelection( accumulator, node, range, { text } );
// Create a sparse array of the same length as `text`, in which
// formats can be added.
@@ -417,7 +407,6 @@ function createFromElement( {
element: node,
range,
isEditableTree,
- preserveWhiteSpace,
} );
accumulateSelection( accumulator, node, range, value );
diff --git a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
index 5e2fbcac00de6..0daf48aa9a1c3 100644
--- a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
+++ b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
@@ -301,9 +301,3 @@ exports[`recordToDom should remove padding 1`] = `