@wordpress/edit-site 4.15.0 → 4.16.0

package/src/components/global-styles/typography-preview.js

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+export default function TypographyPreview( { name, element, headingLevel } ) {
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ headingLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
+
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
+	const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle(
+		prefix + 'typography.letterSpacing',
+		name
+	);
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+
+	return (
+		<div
+			className="edit-site-typography-preview"
+			style={ {
+				fontFamily: fontFamily ?? 'serif',
+				background: gradientValue ?? backgroundColor,
+				color,
+				fontSize,
+				fontStyle,
+				fontWeight,
+				letterSpacing,
+				...extraStyles,
+			} }
+		>
+			Aa
+		</div>
+	);
+}

package/src/components/global-styles/use-global-styles-output.js

@@ -434,9 +434,15 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
 		pickBy( treeToPickFrom, ( value, key ) =>
-			[ 'border', 'color', 'spacing', 'typography', 'filter' ].includes(
-				key
-			)
+			[
+				'border',
+				'color',
+				'spacing',
+				'typography',
+				'filter',
+				'outline',
+				'shadow',
+			].includes( key )
 		);
 
 	// Top-level.
@@ -605,12 +611,12 @@ export const toStyles = (
 	}
 
 	if ( useRootPaddingAlign ) {
-		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 
-			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
-			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; } 
-			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 
-			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; } 
-			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
+			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
+			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
+			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 

package/src/components/main-dashboard-button/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	createSlotFill,
 } from '@wordpress/components';
 
@@ -13,8 +13,8 @@ const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
 const MainDashboardButton = Fill;
 
 const Slot = ( { children } ) => {
-	const slot = useSlot( slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return children;

package/src/components/sidebar/style.scss

@@ -56,7 +56,7 @@
 	border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+.edit-site-global-styles-sidebar .single-column {
 	grid-column: span 1;
 }
 

package/src/index.js

@@ -18,6 +18,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -51,6 +52,26 @@ export function reinitializeEditor( target, settings ) {
 		return;
 	}
 
+	/*
+	 * Prevent adding the Clasic block in the site editor.
+	 * Only add the filter when the site editor is initialized, not imported.
+	 * Also only add the filter(s) after registerCoreBlocks()
+	 * so that common filters in the block library are not overwritten.
+	 *
+	 * This usage here is inspired by previous usage of the filter in the post editor:
+	 * https://github.com/WordPress/gutenberg/pull/37157
+	 */
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeClassicBlockFromInserter',
+		( canInsert, blockType ) => {
+			if ( blockType.name === 'core/freeform' ) {
+				return false;
+			}
+			return canInsert;
+		}
+	);
+
 	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind( null, target, settings );