diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index fed915d6005075..8129d96bb7e132 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -15,19 +15,26 @@ function gutenberg_register_typography_support( $block_type ) { return; } - $has_font_size_support = _wp_array_get( $block_type->supports, array( 'fontSize' ), false ); - $has_font_style_support = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false ); - $has_font_weight_support = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false ); - $has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false ); - $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false ); - $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); - - $has_typography_support = $has_font_size_support - || $has_font_weight_support + $typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false ); + if ( ! $typography_supports ) { + return; + } + + $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); + $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); + $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); + $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); + $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false ); + $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false ); + + $has_typography_support = $has_font_family_support + || $has_font_size_support || $has_font_style_support + || $has_font_weight_support || $has_line_height_support - || $has_text_transform_support - || $has_text_decoration_support; + || $has_text_decoration_support + || $has_text_transform_support; if ( ! $block_type->attributes ) { $block_type->attributes = array(); @@ -61,29 +68,32 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } + $typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false ); + if ( ! $typography_supports ) { + return array(); + } + + $skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false ); + if ( $skip_typography_serialization ) { + return array(); + } + $attributes = array(); $classes = array(); $styles = array(); - $has_font_family_support = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false ); - $has_font_style_support = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false ); - $has_font_weight_support = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false ); - $has_font_size_support = _wp_array_get( $block_type->supports, array( 'fontSize' ), false ); - $has_line_height_support = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false ); - $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false ); - $has_text_transform_support = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false ); - - $skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false ); - - // Covers all typography features _except_ font size. - $skip_typography_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipTypographySerialization' ), false ); + $has_font_family_support = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false ); + $has_font_size_support = _wp_array_get( $typography_supports, array( 'fontSize' ), false ); + $has_font_style_support = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false ); + $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false ); + $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false ); + $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false ); + $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false ); - // Font Size. - if ( $has_font_size_support && ! $skip_font_size_support_serialization ) { + if ( $has_font_size_support ) { $has_named_font_size = array_key_exists( 'fontSize', $block_attributes ); $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] ); - // Apply required class or style. if ( $has_named_font_size ) { $classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] ); } elseif ( $has_custom_font_size ) { @@ -91,10 +101,8 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } - // Font Family. - if ( $has_font_family_support && ! $skip_typography_serialization ) { + if ( $has_font_family_support ) { $has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); - // Apply required class and style. if ( $has_font_family ) { $font_family = $block_attributes['style']['typography']['fontFamily']; if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) { @@ -108,43 +116,35 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } } - // Font style. - if ( $has_font_style_support && ! $skip_typography_serialization ) { - // Apply font style. + if ( $has_font_style_support ) { $font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' ); if ( $font_style ) { $styles[] = $font_style; } } - // Font weight. - if ( $has_font_weight_support && ! $skip_typography_serialization ) { - // Apply font weight. + if ( $has_font_weight_support ) { $font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' ); if ( $font_weight ) { $styles[] = $font_weight; } } - // Line Height. - if ( $has_line_height_support && ! $skip_typography_serialization ) { + if ( $has_line_height_support ) { $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] ); - // Add the style (no classes for line-height). if ( $has_line_height ) { $styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] ); } } - // Text Decoration. - if ( $has_text_decoration_support && ! $skip_typography_serialization ) { + if ( $has_text_decoration_support ) { $text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' ); if ( $text_decoration_style ) { $styles[] = $text_decoration_style; } } - // Text Transform. - if ( $has_text_transform_support && ! $skip_typography_serialization ) { + if ( $has_text_transform_support ) { $text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' ); if ( $text_transform_style ) { $styles[] = $text_transform_style; diff --git a/lib/blocks.php b/lib/blocks.php index b92a656513714b..470148668e8921 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -5,6 +5,24 @@ * @package gutenberg */ +/* + * Fixes the priority of register_block_core_legacy_widget(). + * + * This hook was incorrectly added to Core with priority 20. #32300 fixes this + * but causes block registration warnings in the Gutenberg plugin until the + * changes are made in Core. + * + * This temporary fix can be removed after the changes to + * @wordpress/block-library in #32300 have been published to npm and updated in + * Core. + * + * See https://github.com/WordPress/gutenberg/pull/32300. + */ +if ( 20 === has_action( 'init', 'register_block_core_legacy_widget' ) ) { + remove_action( 'init', 'register_block_core_legacy_widget', 20 ); + add_action( 'init', 'register_block_core_legacy_widget', 10 ); +} + /** * Substitutes the implementation of a core-registered block type, if exists, * with the built result from the plugin. @@ -412,3 +430,41 @@ function gutenberg_block_has_support( $block_type, $feature, $default = false ) return true === $block_support || is_array( $block_support ); } + +/** + * Updates the shape of supports for declaring fontSize and lineHeight. + * + * @param array $metadata Metadata for registering a block type. + * @return array Metadata for registering a block type with the supports shape updated. + */ +function gutenberg_migrate_old_typography_shape( $metadata ) { + // Temporarily disable migrations from core blocks until core block.json are updated. + if ( isset( $metadata['supports'] ) && false === strpos( $metadata['file'], '/wp-includes/blocks/' ) ) { + $typography_keys = array( + '__experimentalFontFamily', + '__experimentalFontStyle', + '__experimentalFontWeight', + '__experimentalLetterSpacing', + '__experimentalTextDecoration', + '__experimentalTextTransform', + 'fontSize', + 'lineHeight', + ); + foreach ( $typography_keys as $typography_key ) { + $support_for_key = _wp_array_get( $metadata['supports'], array( $typography_key ), null ); + if ( null !== $support_for_key ) { + trigger_error( + /* translators: %1$s: Block type, %2$s: typography supports key e.g: fontSize, lineHeight etc... */ + sprintf( __( 'Block %1$s is declaring %2$s support on block.json under supports.%2$s. %2$s support is now declared under supports.typography.%2$s.', 'gutenberg' ), $metadata['name'], $typography_key ), + headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE + ); + gutenberg_experimental_set( $metadata['supports'], array( 'typography', $typography_key ), $support_for_key ); + unset( $metadata['supports'][ $typography_key ] ); + } + } + } + return $metadata; +} + + +add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f883bbe2e128eb..16c41bb15b160a 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -663,7 +663,11 @@ private static function compute_preset_classes( $settings, $selector ) { foreach ( $values as $value ) { foreach ( $preset['classes'] as $class ) { $stylesheet .= self::to_ruleset( - self::append_to_selector( $selector, '.has-' . $value['slug'] . '-' . $class['class_suffix'] ), + // We don't want to use kebabCase here, + // see https://github.com/WordPress/gutenberg/issues/32347 + // However, we need to make sure the generated class + // doesn't contain spaces. + self::append_to_selector( $selector, '.has-' . preg_replace( '/\s+/', '-', $value['slug'] ) . '-' . $class['class_suffix'] ), array( array( 'name' => $class['property_name'], diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 987f3e5400fc26..bcdedda86f30b7 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -74,7 +74,7 @@ private static function read_json_file( $file_path ) { $json_decoding_error = json_last_error(); if ( JSON_ERROR_NONE !== $json_decoding_error ) { - error_log( 'Error when decoding file schema: ' . json_last_error_msg() ); + trigger_error( "Error when decoding a theme.json schema at path $file_path " . json_last_error_msg() ); return $config; } @@ -367,7 +367,7 @@ public static function get_user_data() { $json_decoding_error = json_last_error(); if ( JSON_ERROR_NONE !== $json_decoding_error ) { - error_log( 'Error when decoding user schema: ' . json_last_error_msg() ); + trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() ); return new WP_Theme_JSON_Gutenberg( $config ); } diff --git a/lib/init.php b/lib/init.php index e22542766f87ed..f721b8f773f441 100644 --- a/lib/init.php +++ b/lib/init.php @@ -30,7 +30,10 @@ function gutenberg_menu() { 'gutenberg' ); - if ( gutenberg_use_widgets_block_editor() ) { + if ( + gutenberg_use_widgets_block_editor() && + ! function_exists( 'wp_use_widgets_block_editor' ) + ) { add_theme_page( __( 'Widgets', 'gutenberg' ), __( 'Widgets', 'gutenberg' ), @@ -113,7 +116,11 @@ function gutenberg_site_editor_menu() { * @param WP_Admin_Bar $wp_admin_bar Core class used to implement the Toolbar API. */ function modify_admin_bar( $wp_admin_bar ) { - if ( gutenberg_use_widgets_block_editor() && $wp_admin_bar->get_node( 'widgets' ) !== null ) { + if ( + gutenberg_use_widgets_block_editor() && + ! function_exists( 'wp_use_widgets_block_editor' ) && + $wp_admin_bar->get_node( 'widgets' ) !== null + ) { $wp_admin_bar->add_menu( array( 'id' => 'widgets', @@ -137,7 +144,10 @@ function modify_welcome_panel() { ob_start(); wp_welcome_panel(); $welcome_panel = ob_get_clean(); - if ( gutenberg_use_widgets_block_editor() ) { + if ( + gutenberg_use_widgets_block_editor() && + ! function_exists( 'wp_use_widgets_block_editor' ) + ) { echo str_replace( admin_url( 'widgets.php' ), admin_url( 'themes.php?page=gutenberg-widgets' ), diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 30d87dbd0ed908..80794990713ff3 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -114,10 +114,6 @@ $z-layers: ( // Show the FSE template previews above the editor and any open block toolbars ".edit-site-navigation-panel__preview": 32, - // Show notices below expanded editor bar - // .edit-post-header { z-index: 30 } - ".components-notice-list": 29, - // Above the block list and the header. ".block-editor-block-list__block-popover": 31, diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 726990f0ac3637..9ecd72ea0cb307 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -371,7 +371,7 @@ _Parameters_ _Returns_ -- `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'. +- `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'. # **getFontSizeObjectByValue** diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 0923dcb99adcc0..d06c286e430f50 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -161,6 +161,7 @@ function BlockListBlock( { clientId, className, wrapperProps: omit( wrapperProps, [ 'data-align' ] ), + isAligned, }; const memoizedValue = useMemo( () => value, Object.values( value ) ); diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index bbffe084d575c7..4c4c5a6612ad9e 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -58,7 +58,7 @@ const BLOCK_ANIMATION_THRESHOLD = 200; * @return {Object} Props to pass to the element to mark as a block. */ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { - const { clientId, className, wrapperProps = {} } = useContext( + const { clientId, className, wrapperProps = {}, isAligned } = useContext( BlockListBlockContext ); const { @@ -141,7 +141,9 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { 'data-title': blockTitle, className: classnames( // The wp-block className is important for editor styles. - 'wp-block block-editor-block-list__block', + classnames( 'block-editor-block-list__block', { + 'wp-block': ! isAligned, + } ), className, props.className, wrapperProps.className, diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js index 709e127ded6428..1b6a90b87457a0 100644 --- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js +++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js @@ -14,23 +14,17 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) { const { getBlockRootClientId, __experimentalGetPatternsByBlockTypes, - __experimentalGetParsedPattern, __experimentalGetAllowedPatterns, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); - let patterns = []; if ( filterPatternsFn ) { - patterns = __experimentalGetAllowedPatterns( - rootClientId - ).filter( filterPatternsFn ); - } else { - patterns = __experimentalGetPatternsByBlockTypes( - blockName, - rootClientId + return __experimentalGetAllowedPatterns( rootClientId ).filter( + filterPatternsFn ); } - return patterns.map( ( { name } ) => - __experimentalGetParsedPattern( name ) + return __experimentalGetPatternsByBlockTypes( + blockName, + rootClientId ); }, [ clientId, blockName, filterPatternsFn ] diff --git a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js index 0ce374fbbc8cbc..7f8c956ea69883 100644 --- a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js +++ b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js @@ -3,13 +3,11 @@ */ import { useMemo } from '@wordpress/element'; import { cloneBlock } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import { getMatchingBlockByName, getRetainedBlockAttributes } from './utils'; -import { store as blockEditorStore } from '../../store'; /** * Mutate the matched block's attributes by getting @@ -96,19 +94,9 @@ export const getPatternTransformedBlocks = ( */ // TODO tests const useTransformedPatterns = ( patterns, selectedBlocks ) => { - const parsedPatterns = useSelect( - ( select ) => - patterns.map( ( { name } ) => - select( blockEditorStore ).__experimentalGetParsedPattern( - name - ) - ), - [ patterns ] - ); - return useMemo( () => - parsedPatterns.reduce( ( accumulator, _pattern ) => { + patterns.reduce( ( accumulator, _pattern ) => { const transformedBlocks = getPatternTransformedBlocks( selectedBlocks, _pattern.blocks @@ -121,7 +109,7 @@ const useTransformedPatterns = ( patterns, selectedBlocks ) => { } return accumulator; }, [] ), - [ parsedPatterns, selectedBlocks ] + [ patterns, selectedBlocks ] ); }; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 35f8a4f12dcb56..e511a41fabe92c 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -115,6 +115,7 @@ .block-editor-block-contextual-toolbar { // Block UI appearance. + display: inline-flex; border: $border-width solid $gray-900; border-radius: $radius-block-ui; background-color: $white; diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js index 1ed18cef831c8d..6e97a8518be494 100644 --- a/packages/block-editor/src/components/colors/test/utils.js +++ b/packages/block-editor/src/components/colors/test/utils.js @@ -109,10 +109,10 @@ describe( 'color utils', () => { ).toBeUndefined(); } ); - it( 'should return a class name with the color slug in kebab case', () => { - expect( getColorClassName( 'background', 'Light Purple' ) ).toBe( - 'has-light-purple-background' - ); + it( 'should return a class name with the color slug without spaces', () => { + expect( + getColorClassName( 'background', 'Light Purple veryDark' ) + ).toBe( 'has-Light-Purple-veryDark-background' ); } ); } ); } ); diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js index 903d7033eedee9..00dcd5ea5b1f0f 100644 --- a/packages/block-editor/src/components/colors/utils.js +++ b/packages/block-editor/src/components/colors/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { find, kebabCase, map } from 'lodash'; +import { find, map } from 'lodash'; import tinycolor from 'tinycolor2'; /** @@ -60,7 +60,14 @@ export function getColorClassName( colorContextName, colorSlug ) { return undefined; } - return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`; + // We don't want to use kebabCase from lodash here + // see https://github.com/WordPress/gutenberg/issues/32347 + // However, we need to make sure the generated class + // doesn't contain spaces. + return `has-${ colorSlug.replace( + /\s+/g, + '-' + ) }-${ colorContextName.replace( /\s+/g, '-' ) }`; } /** diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js index 8604e9f287788a..8284dbe981abda 100644 --- a/packages/block-editor/src/components/font-sizes/utils.js +++ b/packages/block-editor/src/components/font-sizes/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { find, kebabCase } from 'lodash'; +import { find } from 'lodash'; /** * Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. @@ -55,12 +55,16 @@ export function getFontSizeObjectByValue( fontSizes, value ) { * @param {string} fontSizeSlug Slug of the fontSize. * * @return {string} String with the class corresponding to the fontSize passed. - * The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'. + * The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'. */ export function getFontSizeClass( fontSizeSlug ) { if ( ! fontSizeSlug ) { return; } - return `has-${ kebabCase( fontSizeSlug ) }-font-size`; + // We don't want to use kebabCase from lodash here + // see https://github.com/WordPress/gutenberg/issues/32347 + // However, we need to make sure the generated class + // doesn't contain spaces. + return `has-${ fontSizeSlug.replace( /\s+/g, '-' ) }-font-size`; } diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 37104129aaf6ef..b7770120e0afef 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -229,7 +229,7 @@ function RichTextWrapper( __unstableMultilineTag: multilineTag, __unstableDisableFormats: disableFormats, preserveWhiteSpace, - __unstableDependencies: dependencies, + __unstableDependencies: [ ...dependencies, tagName ], __unstableAfterParse: addEditorOnlyFormats, __unstableBeforeSerialize: removeEditorOnlyFormats, __unstableAddInvisibleFormats: addInvisibleFormats, diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 6ec04dee153863..c4845b34b49f83 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -224,7 +224,7 @@ const withDuotoneStyles = createHigherOrderComponent( ); const selectorsGroup = selectorsScoped.join( ', ' ); - const className = classnames( props?.classname, id ); + const className = classnames( props?.className, id ); return ( <> diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js index 2268d27587f768..641985f69e4845 100644 --- a/packages/block-editor/src/hooks/font-appearance.js +++ b/packages/block-editor/src/hooks/font-appearance.js @@ -13,12 +13,12 @@ import { cleanEmptyObject } from './utils'; /** * Key within block settings' support array indicating support for font style. */ -export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle'; +export const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; /** * Key within block settings' support array indicating support for font weight. */ -export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight'; +export const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; /** * Inspector control panel containing the font appearance options. diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index f2c7e3f8ca14d7..d3a13bfc87d5e4 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -15,7 +15,7 @@ import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; -export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily'; +export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => { const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value ); diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index c1605289ccbdcf..e678f31abd48cf 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -18,7 +18,7 @@ import { import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; -export const FONT_SIZE_SUPPORT_KEY = 'fontSize'; +export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize'; /** * Filters registered block settings, extending attributes to include @@ -58,7 +58,10 @@ function addSaveProps( props, blockType, attributes ) { } if ( - hasBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' ) + hasBlockSupport( + blockType, + 'typography.__experimentalSkipSerialization' + ) ) { return props; } @@ -182,7 +185,7 @@ const withFontSizeInlineStyles = createHigherOrderComponent( ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || hasBlockSupport( blockName, - '__experimentalSkipFontSizeSerialization' + 'typography.__experimentalSkipSerialization' ) || ! fontSize || style?.typography?.fontSize diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 9490f04a95051e..1d57366878b214 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -10,7 +10,7 @@ import LineHeightControl from '../components/line-height-control'; import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; -export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight'; +export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight'; /** * Inspector control panel containing the line height related configuration diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index c0410a7c7b92f9..bb029d8723519d 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -3,18 +3,15 @@ */ import { capitalize, - find, first, forEach, get, has, isEmpty, - isEqual, kebabCase, map, omit, startsWith, - without, } from 'lodash'; import classnames from 'classnames'; @@ -35,8 +32,11 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; */ import { BORDER_SUPPORT_KEY, BorderPanel } from './border'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; -import { FONT_SIZE_SUPPORT_KEY } from './font-size'; -import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; +import { + TypographyPanel, + TYPOGRAPHY_SUPPORT_KEY, + TYPOGRAPHY_SUPPORT_KEYS, +} from './typography'; import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing'; import useDisplayBlockControls from '../components/use-display-block-controls'; @@ -140,16 +140,9 @@ const skipSerializationPaths = { [ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ COLOR_SUPPORT_KEY, ], - [ `__experimentalSkipFontSizeSerialization` ]: [ 'typography', 'fontSize' ], - [ `__experimentalSkipTypographySerialization` ]: without( - TYPOGRAPHY_SUPPORT_KEYS, - FONT_SIZE_SUPPORT_KEY - ).map( - ( feature ) => - find( STYLE_PROPERTY, ( property ) => - isEqual( property.support, [ feature ] ) - )?.value - ), + [ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + TYPOGRAPHY_SUPPORT_KEY, + ], }; /** @@ -243,9 +236,7 @@ export const withBlockControls = createHigherOrderComponent( const withElementsStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const elements = props.attributes.style?.elements; - if ( ! elements ) { - return ; - } + const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId( BlockListBlock ) }`; @@ -256,17 +247,24 @@ const withElementsStyles = createHigherOrderComponent( return ( <> -