@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.8.1-next.dc3f6d3c1.0

package/src/hooks/use-content-only-section-edit.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Hook that provides section block editing state and actions.
+ *
+ * @param {string} clientId Block client ID.
+ * @return {Object} Object containing section block state and actions.
+ */
+export default function useContentOnlySectionEdit( clientId ) {
+	const {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+	} = useSelect(
+		( select ) => {
+			const {
+				isSectionBlock: _isSectionBlock,
+				getParentSectionBlock,
+				getEditedContentOnlySection,
+				isWithinEditedContentOnlySection,
+			} = unlock( select( blockEditorStore ) );
+
+			const editedSection = getEditedContentOnlySection();
+
+			return {
+				isSectionBlock: _isSectionBlock( clientId ),
+				isWithinSection:
+					_isSectionBlock( clientId ) ||
+					!! getParentSectionBlock( clientId ),
+				isWithinEditedSection:
+					isWithinEditedContentOnlySection( clientId ),
+				isEditingContentOnlySection: editedSection === clientId,
+				editedContentOnlySection: editedSection,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockEditorActions = useDispatch( blockEditorStore );
+	const { editContentOnlySection, stopEditingContentOnlySection } =
+		unlock( blockEditorActions );
+
+	return {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+		editContentOnlySection,
+		stopEditingContentOnlySection,
+	};
+}

package/src/layouts/constrained.js

@@ -89,7 +89,10 @@ export default {
 										: nextWidth;
 								onChange( {
 									...layout,
-									contentSize: nextWidth,
+									contentSize:
+										nextWidth !== ''
+											? nextWidth
+											: undefined,
 								} );
 							} }
 							units={ units }
@@ -111,7 +114,10 @@ export default {
 										: nextWidth;
 								onChange( {
 									...layout,
-									wideSize: nextWidth,
+									wideSize:
+										nextWidth !== ''
+											? nextWidth
+											: undefined,
 								} );
 							} }
 							units={ units }

package/src/private-apis.js

@@ -40,6 +40,7 @@ import {
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
+	getMediaSelectKey,
 	essentialFormatKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -57,7 +58,6 @@ import {
 	useBlockElementRef,
 	useBlockElement,
 } from './components/block-list/use-block-props/use-block-refs';
-import { default as MediaUploadModal } from './components/media-upload-modal';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -108,8 +108,8 @@ lock( privateApis, {
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
 	mediaEditKey,
+	getMediaSelectKey,
 	essentialFormatKey,
 	useBlockElement,
 	useBlockElementRef,
-	MediaUploadModal,
 } );

package/src/store/private-keys.js

@@ -4,4 +4,5 @@ export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
+export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const essentialFormatKey = Symbol( 'essentialFormat' );

package/src/store/private-selectors.js

@@ -526,9 +526,8 @@ export function isSectionBlock( state, clientId ) {
 	}
 
 	const attributes = getBlockAttributes( state, clientId );
-	const isTemplatePart = blockName === 'core/template-part';
 	if (
-		( attributes?.metadata?.patternName || isTemplatePart ) &&
+		attributes?.metadata?.patternName &&
 		!! window?.__experimentalContentOnlyPatternInsertion
 	) {
 		return true;

package/src/store/reducer.js

@@ -2305,9 +2305,6 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
-		...( window?.__experimentalContentOnlyPatternInsertion
-			? templatePartClientIds
-			: [] ),
 	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {

package/src/store/test/reducer.js

@@ -4540,16 +4540,11 @@ describe( 'state', () => {
 					);
 				} );
 
-				it( 'returns the expected block editing modes for synced patterns', () => {
+				it( 'returns the expected block editing modes for template parts', () => {
+					// Currently, template parts are not considered sections, so
+					// child blocks are not set to contentOnly.
 					expect( initialState.derivedBlockEditingModes ).toEqual(
-						new Map(
-							Object.entries( {
-								'template-part-paragraph': 'contentOnly',
-								'template-part-group': 'disabled',
-								'template-part-grouped-paragraph':
-									'contentOnly',
-							} )
-						)
+						new Map()
 					);
 				} );
 
@@ -4573,7 +4568,7 @@ describe( 'state', () => {
 					expect( derivedBlockEditingModes ).toEqual( new Map() );
 				} );
 
-				it( 'allows explicitly set blockEditingModes to override the template part editing modes', () => {
+				it( 'does not set contentOnly mode for children of template parts', () => {
 					const { derivedBlockEditingModes } = dispatchActions(
 						[
 							{
@@ -4587,13 +4582,8 @@ describe( 'state', () => {
 					);
 
 					expect( derivedBlockEditingModes ).toEqual(
-						new Map(
-							Object.entries( {
-								'template-part-paragraph': 'contentOnly',
-								'template-part-group': 'disabled',
-								// template-part-grouped-paragraph already has an explicit mode, so isn't set as a derived mode.
-							} )
-						)
+						// template-part-grouped-paragraph already has an explicit mode, so isn't set as a derived mode.
+						new Map()
 					);
 				} );
 			} );

package/src/style.scss

@@ -29,6 +29,7 @@
 @use "./components/block-variation-transforms/style.scss" as *;
 @use "./components/border-radius-control/style.scss" as *;
 @use "./components/colors-gradients/style.scss" as *;
+@use "./components/content-only-controls/styles.scss" as *;
 @use "./components/date-format-picker/style.scss" as *;
 @use "./components/duotone-control/style.scss" as *;
 @use "./components/font-appearance-control/style.scss" as *;

package/src/utils/fit-text-utils.js

@@ -17,11 +17,28 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 	let maxSize = 2400;
 	let bestSize = minSize;
 
+	const computedStyle = window.getComputedStyle( textElement );
+	const paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
+	const paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
+	const range = document.createRange();
+	range.selectNodeContents( textElement );
+
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
 		applyFontSize( midSize );
 
-		const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
+		// When there is padding if the text overflows to the
+		// padding area, it should be considered overflowing.
+		// Use Range API to measure actual text content dimensions.
+		const rect = range.getBoundingClientRect();
+		const textWidth = rect.width;
+
+		// Check if text fits within the element's width and is not
+		// overflowing into the padding area.
+		const fitsWidth =
+			textElement.scrollWidth <= textElement.clientWidth &&
+			textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
+		// Check if text fits within the element's height.
 		const fitsHeight =
 			alreadyHasScrollableHeight ||
 			textElement.scrollHeight <= textElement.clientHeight;
@@ -33,6 +50,7 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 			maxSize = midSize - 1;
 		}
 	}
+	range.detach();
 
 	return bestSize;
 }

package/build/components/media-upload-modal/index.js

@@ -1,29 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-editor/src/components/media-upload-modal/index.js
-var media_upload_modal_exports = {};
-__export(media_upload_modal_exports, {
-  default: () => media_upload_modal_default
-});
-module.exports = __toCommonJS(media_upload_modal_exports);
-var import_components = require("@wordpress/components");
-var MediaUploadModal = () => null;
-var media_upload_modal_default = (0, import_components.withFilters)("editor.MediaUploadModal")(MediaUploadModal);
-//# sourceMappingURL=index.js.map

package/build/components/media-upload-modal/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/media-upload-modal/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { withFilters } from '@wordpress/components';\n\n/**\n * This is a placeholder for the media upload modal component necessary to make it possible to provide\n * an integration with the core blocks that handle media files. By default it renders nothing but\n * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.\n *\n * @return {Component} The component to be rendered.\n */\nconst MediaUploadModal = () => null;\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md\n */\nexport default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA4B;AAS5B,IAAM,mBAAmB,MAAM;AAK/B,IAAO,iCAAQ,+BAAa,yBAA0B,EAAG,gBAAiB;",
-  "names": []
-}

package/build-module/components/media-upload-modal/index.js

@@ -1,8 +0,0 @@
-// packages/block-editor/src/components/media-upload-modal/index.js
-import { withFilters } from "@wordpress/components";
-var MediaUploadModal = () => null;
-var media_upload_modal_default = withFilters("editor.MediaUploadModal")(MediaUploadModal);
-export {
-  media_upload_modal_default as default
-};
-//# sourceMappingURL=index.js.map

package/build-module/components/media-upload-modal/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/media-upload-modal/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { withFilters } from '@wordpress/components';\n\n/**\n * This is a placeholder for the media upload modal component necessary to make it possible to provide\n * an integration with the core blocks that handle media files. By default it renders nothing but\n * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.\n *\n * @return {Component} The component to be rendered.\n */\nconst MediaUploadModal = () => null;\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md\n */\nexport default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAS5B,IAAM,mBAAmB,MAAM;AAK/B,IAAO,6BAAQ,YAAa,yBAA0B,EAAG,gBAAiB;",
-  "names": []
-}

package/src/components/media-upload-modal/index.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withFilters } from '@wordpress/components';
-
-/**
- * This is a placeholder for the media upload modal component necessary to make it possible to provide
- * an integration with the core blocks that handle media files. By default it renders nothing but
- * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.
- *
- * @return {Component} The component to be rendered.
- */
-const MediaUploadModal = () => null;
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md
- */
-export default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );