@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { NavigationButtonAsItem } from './navigation-button';
-import Subtitle from './subtitle';
-
-import { unlock } from '../../lock-unlock';
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ElementItem( { parentMenu, element, label } ) {
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
-	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
-	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
-	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
-	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text' );
-
-	return (
-		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
-			<HStack justify="flex-start">
-				<FlexItem
-					className="edit-site-global-styles-screen-typography__indicator"
-					style={ {
-						fontFamily: fontFamily ?? 'serif',
-						background:
-							gradientValue ??
-							backgroundColor ??
-							fallbackBackgroundColor,
-						color,
-						fontStyle,
-						fontWeight,
-						...extraStyles,
-					} }
-					aria-hidden="true"
-				>
-					{ __( 'Aa' ) }
-				</FlexItem>
-				<FlexItem>{ label }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function TypographyElements() {
-	const parentMenu = '';
-
-	return (
-		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-			<ItemGroup isBordered isSeparated>
-				<ElementItem
-					parentMenu={ parentMenu }
-					element="text"
-					label={ __( 'Text' ) }
-				/>
-				<ElementItem
-					parentMenu={ parentMenu }
-					element="link"
-					label={ __( 'Links' ) }
-				/>
-				<ElementItem
-					parentMenu={ parentMenu }
-					element="heading"
-					label={ __( 'Headings' ) }
-				/>
-				<ElementItem
-					parentMenu={ parentMenu }
-					element="caption"
-					label={ __( 'Captions' ) }
-				/>
-				<ElementItem
-					parentMenu={ parentMenu }
-					element="button"
-					label={ __( 'Buttons' ) }
-				/>
-			</ItemGroup>
-		</VStack>
-	);
-}
-
-export default TypographyElements;

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

@@ -1,76 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
-import { getFontFamilies } from './utils';
-
-const { useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-
-export default function PreviewTypography( { fontSize, variation } ) {
-	const { base } = useContext( GlobalStylesContext );
-	let config = base;
-	if ( variation ) {
-		config = mergeBaseAndUserConfigs( base, variation );
-	}
-
-	const [ textColor ] = useGlobalStyle( 'color.text' );
-
-	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
-	const bodyPreviewStyle = bodyFontFamilies
-		? getFamilyPreviewStyle( bodyFontFamilies )
-		: {};
-	const headingPreviewStyle = headingFontFamilies
-		? getFamilyPreviewStyle( headingFontFamilies )
-		: {};
-
-	if ( textColor ) {
-		bodyPreviewStyle.color = textColor;
-		headingPreviewStyle.color = textColor;
-	}
-
-	if ( fontSize ) {
-		bodyPreviewStyle.fontSize = fontSize;
-		headingPreviewStyle.fontSize = fontSize;
-	}
-
-	return (
-		<motion.div
-			animate={ {
-				scale: 1,
-				opacity: 1,
-			} }
-			initial={ {
-				scale: 0.1,
-				opacity: 0,
-			} }
-			transition={ {
-				delay: 0.3,
-				type: 'tween',
-			} }
-			style={ {
-				textAlign: 'center',
-				lineHeight: 1,
-			} }
-		>
-			<span style={ headingPreviewStyle }>
-				{ _x( 'A', 'Uppercase letter A' ) }
-			</span>
-			<span style={ bodyPreviewStyle }>
-				{ _x( 'a', 'Lowercase letter A' ) }
-			</span>
-		</motion.div>
-	);
-}

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

@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	TypographyPanel: StylesTypographyPanel,
-} = unlock( blockEditorPrivateApis );
-
-export default function TypographyPanel( { element, headingLevel } ) {
-	let prefixParts = [];
-	if ( element === 'heading' ) {
-		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
-	} else if ( element && element !== 'text' ) {
-		prefixParts = prefixParts.concat( [ 'elements', element ] );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, undefined, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle(
-		prefix,
-		undefined,
-		'all',
-		{
-			shouldDecodeEncode: false,
-		}
-	);
-	const [ rawSettings ] = useGlobalSetting( '' );
-	const usedElement = element === 'heading' ? headingLevel : element;
-	const settings = useSettingsForBlockElement(
-		rawSettings,
-		undefined,
-		usedElement
-	);
-
-	return (
-		<StylesTypographyPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ settings }
-		/>
-	);
-}

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

@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-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 ] = useGlobalStyle(
-		prefix + 'typography.fontFamily',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
-	const [ fontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ fontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing',
-		name
-	);
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
-
-	return (
-		<div
-			className="edit-site-typography-preview"
-			style={ {
-				fontFamily: fontFamily ?? 'serif',
-				background:
-					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
-				color,
-				fontSize,
-				fontStyle,
-				fontWeight,
-				letterSpacing,
-				...extraStyles,
-			} }
-		>
-			Aa
-		</div>
-	);
-}