From cf4aa6f40c5bc680bd68bd422f7c27d1cef4f47c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 25 Oct 2024 07:51:01 -0700 Subject: [PATCH 1/5] Style Book: fix comment output in styles (#66439) Co-authored-by: ramonjd --- .../src/components/style-book/constants.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 1ba1bf5e3dffa9..6aa280c937d42d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -143,6 +143,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ }, ]; +// Forming a "block formatting context" to prevent margin collapsing. +// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context +const ROOT_CONTAINER = ` + .is-root-container { + display: flow-root; + } +`; // The content area of the Style Book is rendered within an iframe so that global styles // are applied to elements within the entire content area. To support elements that are // not part of the block previews, such as headings and layout for the block previews, @@ -151,17 +158,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ // applied to the `button` element, targeted via `.edit-site-style-book__example`. // This is to ensure that browser default styles for buttons are not applied to the previews. export const STYLE_BOOK_IFRAME_STYLES = ` - // Forming a "block formatting context" to prevent margin collapsing. - // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - .is-root-container { - display: flow-root; - } - body { position: relative; padding: 32px !important; } + ${ ROOT_CONTAINER } + .edit-site-style-book__examples { max-width: 1200px; margin: 0 auto; From 506342b23bff06f4407f2df4950d62198df48fe6 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 25 Oct 2024 07:58:11 -0700 Subject: [PATCH 2/5] Set `ResizableEditor` height based on border-box (#66342) Co-authored-by: t-hamano --- .../src/components/visual-editor/index.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 1c8eb5c3b77640..6a5466a265c3eb 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -16,7 +16,7 @@ import { privateApis as blockEditorPrivateApis, __experimentalUseResizeCanvas as useResizeCanvas, } from '@wordpress/block-editor'; -import { useEffect, useRef, useMemo } from '@wordpress/element'; +import { useEffect, useRef, useMemo, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { parse } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; @@ -106,7 +106,10 @@ function VisualEditor( { contentRef, className, } ) { - const [ resizeObserver, sizes ] = useResizeObserver(); + const [ contentHeight, setContentHeight ] = useState( '' ); + const effectContentHeight = useResizeObserver( ( [ entry ] ) => { + setContentHeight( entry.borderBoxSize[ 0 ].blockSize ); + } ); const isMobileViewport = useViewportMatch( 'small', '<' ); const { renderingMode, @@ -323,21 +326,6 @@ function VisualEditor( { .is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;} .is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`; - const localRef = useRef(); - const typewriterRef = useTypewriter(); - contentRef = useMergeRefs( [ - localRef, - contentRef, - renderingMode === 'post-only' ? typewriterRef : null, - useFlashEditableBlocks( { - isEnabled: renderingMode === 'template-locked', - } ), - useSelectNearestEditableBlock( { - isEnabled: renderingMode === 'template-locked', - } ), - useZoomOutModeExit(), - ] ); - const forceFullHeight = postType === NAVIGATION_POST_TYPE; const enableResizing = [ @@ -368,6 +356,24 @@ function VisualEditor( { ]; }, [ styles, enableResizing ] ); + const localRef = useRef(); + const typewriterRef = useTypewriter(); + contentRef = useMergeRefs( [ + localRef, + contentRef, + renderingMode === 'post-only' ? typewriterRef : null, + useFlashEditableBlocks( { + isEnabled: renderingMode === 'template-locked', + } ), + useSelectNearestEditableBlock( { + isEnabled: renderingMode === 'template-locked', + } ), + useZoomOutModeExit(), + // Avoid resize listeners when not needed, these will trigger + // unnecessary re-renders when animating the iframe width. + enableResizing ? effectContentHeight : null, + ] ); + return (
) } - { - // Avoid resize listeners when not needed, - // these will trigger unnecessary re-renders - // when animating the iframe width. - enableResizing && resizeObserver - }
From 0466f7d510ef5185d054b3d30b19f21ed9ad986b Mon Sep 17 00:00:00 2001 From: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Fri, 25 Oct 2024 18:16:13 +0100 Subject: [PATCH 3/5] Editor: Multi-entity saving: Show correct count of entities to be saved (#66482) The modal was incorrectly displaying the number of different *types* of entities to be saved. This result was inconsistent with the actual list of entities rendered underneath and with the "Review _n_ changes" label on the left-hand sidebar. --- packages/editor/src/components/entities-saved-states/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index ba84ef2b392f5b..849bd2d0d71c8c 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -177,9 +177,9 @@ export function EntitiesSavedStatesExtensible( { _n( 'There is %d site change waiting to be saved.', 'There are %d site changes waiting to be saved.', - sortedPartitionedSavables.length + dirtyEntityRecords.length ), - sortedPartitionedSavables.length + dirtyEntityRecords.length ), { strong: } ) From 76a5ba19f87a8391e8a1365dcd9e1318d73e1458 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 26 Oct 2024 21:11:16 +0900 Subject: [PATCH 4/5] BorderBoxControl: Deprecate 36px default size (#65752) * Add utility function * BorderBoxControl: Deprecate 36px default size * Fix naming * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo Co-authored-by: DaniGuardiola --- packages/components/CHANGELOG.md | 4 ++++ .../border-box-control/README.md | 1 + .../border-box-control/component.tsx | 1 + .../border-box-control/hook.ts | 7 ++++++ .../stories/index.story.tsx | 1 + .../src/border-box-control/test/index.tsx | 1 + .../src/utils/deprecated-36px-size.ts | 24 +++++++++++++++++++ 7 files changed, 39 insertions(+) create mode 100644 packages/components/src/utils/deprecated-36px-size.ts diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2025a550d55e0f..71e51bc9741b50 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Deprecations + +- `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)). + ### Bug Fixes - `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)). diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md index e67a1386103c1a..9d51be2901a2a3 100644 --- a/packages/components/src/border-box-control/border-box-control/README.md +++ b/packages/components/src/border-box-control/border-box-control/README.md @@ -47,6 +47,7 @@ const MyBorderBoxControl = () => { return ( Date: Sat, 26 Oct 2024 21:58:48 +0900 Subject: [PATCH 5/5] BorderControl: Deprecate 36px default size (#65755) * Add utility function * BorderBoxControl: Deprecate 36px default size * Fix naming * Add changelog * BorderControl: Deprecate 36px default size * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo --- packages/components/CHANGELOG.md | 1 + .../src/border-control/border-control/README.md | 1 + .../src/border-control/border-control/component.tsx | 1 + .../components/src/border-control/border-control/hook.ts | 8 +++++++- .../components/src/border-control/stories/index.story.tsx | 1 + packages/components/src/border-control/test/index.js | 1 + packages/components/src/utils/deprecated-36px-size.ts | 4 ++-- 7 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 71e51bc9741b50..a9f1286bdc4167 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)). +- `BorderControl`: Deprecate 36px default size ([#65755](https://github.com/WordPress/gutenberg/pull/65755)). ### Bug Fixes diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index fbd0c10e418d5a..0afda1ee31ae81 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -30,6 +30,7 @@ const MyBorderControl = () => { return (