diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 1086e04bcd9dd..5b60c96a6b2da 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -105,17 +105,21 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } if ( $has_font_family_support ) { - $has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); - if ( $has_font_family ) { - $font_family = $block_attributes['style']['typography']['fontFamily']; - if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) { - // Get the name from the string and add proper styles. - $index_to_splice = strrpos( $font_family, '|' ) + 1; - $font_family_name = substr( $font_family, $index_to_splice ); - $styles[] = sprintf( 'font-family: var(--wp--preset--font-family--%s);', $font_family_name ); - } else { - $styles[] = sprintf( 'font-family: %s;', $block_attributes['style']['typography']['fontFamily'] ); + $has_named_font_family = array_key_exists( 'fontFamily', $block_attributes ); + $has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] ); + + if ( $has_named_font_family ) { + $classes[] = sprintf( 'has-%s-font-family', gutenberg_experimental_to_kebab_case( $block_attributes['fontFamily'] ) ); + } elseif ( $has_custom_font_family ) { + // Before using classes, the value was serialized as a CSS Custom Property. + // We don't need this code path when it lands in core. + $font_family_custom = $block_attributes['style']['typography']['fontFamily']; + if ( strpos( $font_family_custom, 'var:preset|font-family' ) !== false ) { + $index_to_splice = strrpos( $font_family_custom, '|' ) + 1; + $font_family_slug = gutenberg_experimental_to_kebab_case( substr( $font_family_custom, $index_to_splice ) ); + $font_family_custom = sprintf( 'var(--wp--preset--font-family--%s)', $font_family_slug ); } + $styles[] = sprintf( 'font-family: %s;', $font_family_custom ); } } diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 0e71a791beb0f..6af3d01cf6b58 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -205,7 +205,7 @@ class WP_Theme_JSON_Gutenberg { 'path' => array( 'typography', 'fontFamilies' ), 'value_key' => 'fontFamily', 'css_vars' => '--wp--preset--font-family--$slug', - 'classes' => array(), + 'classes' => array( '.has-$slug-font-family' => 'font-family' ), 'properties' => array( 'font-family' ), ), ); diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index d3a13bfc87d5e..769e424e54091 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -1,39 +1,111 @@ /** * External dependencies */ -import { find } from 'lodash'; +import { find, kebabCase } from 'lodash'; /** * WordPress dependencies */ +import { addFilter } from '@wordpress/hooks'; import { hasBlockSupport } from '@wordpress/blocks'; +import TokenList from '@wordpress/token-list'; /** * Internal dependencies */ -import { cleanEmptyObject } from './utils'; import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; -const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => { - const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value ); - if ( attributeParsed && attributeParsed[ 1 ] ) { - const fontFamilyObject = find( fontFamilies, ( { slug } ) => { - return slug === attributeParsed[ 1 ]; +/** + * Filters registered block settings, extending attributes to include + * the `fontFamily` attribute. + * + * @param {Object} settings Original block settings + * @return {Object} Filtered block settings + */ +function addAttributes( settings ) { + if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) { + return settings; + } + + // Allow blocks to specify a default value if needed. + if ( ! settings.attributes.fontFamily ) { + Object.assign( settings.attributes, { + fontFamily: { + type: 'string', + }, } ); - if ( fontFamilyObject ) { - return fontFamilyObject.fontFamily; - } } - return value; -}; + + return settings; +} + +/** + * Override props assigned to save component to inject font family. + * + * @param {Object} props Additional props applied to save element + * @param {Object} blockType Block type + * @param {Object} attributes Block attributes + * @return {Object} Filtered props applied to save element + */ +function addSaveProps( props, blockType, attributes ) { + if ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) { + return props; + } + + if ( + hasBlockSupport( + blockType, + '__experimentalSkipTypographySerialization' + ) + ) { + return props; + } + + if ( ! attributes?.fontFamily ) { + return props; + } + + // Use TokenList to dedupe classes. + const classes = new TokenList( props.className ); + classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` ); + const newClassName = classes.value; + props.className = newClassName ? newClassName : undefined; + + return props; +} + +/** + * Filters registered block settings to expand the block edit wrapper + * by applying the desired styles and classnames. + * + * @param {Object} settings Original block settings. + * + * @return {Object} Filtered block settings. + */ +function addEditProps( settings ) { + if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) { + return settings; + } + + const existingGetEditWrapperProps = settings.getEditWrapperProps; + settings.getEditWrapperProps = ( attributes ) => { + let props = {}; + if ( existingGetEditWrapperProps ) { + props = existingGetEditWrapperProps( attributes ); + } + return addSaveProps( props, settings, attributes ); + }; + + return settings; +} export function FontFamilyEdit( { name, setAttributes, - attributes: { style = {} }, + attributes: { fontFamily }, } ) { const fontFamilies = useSetting( 'typography.fontFamilies' ); const isDisable = useIsFontFamilyDisabled( { name } ); @@ -42,26 +114,16 @@ export function FontFamilyEdit( { return null; } - const value = getFontFamilyFromAttributeValue( - fontFamilies, - style.typography?.fontFamily - ); + const value = find( fontFamilies, ( { slug } ) => fontFamily === slug ) + ?.fontFamily; function onChange( newValue ) { const predefinedFontFamily = find( fontFamilies, - ( { fontFamily } ) => fontFamily === newValue + ( { fontFamily: f } ) => f === newValue ); setAttributes( { - style: cleanEmptyObject( { - ...style, - typography: { - ...( style.typography || {} ), - fontFamily: predefinedFontFamily - ? `var:preset|font-family|${ predefinedFontFamily.slug }` - : newValue || undefined, - }, - } ), + fontFamily: predefinedFontFamily?.slug, } ); } @@ -89,3 +151,21 @@ export function useIsFontFamilyDisabled( { name } ) { ! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY ) ); } + +addFilter( + 'blocks.registerBlockType', + 'core/fontFamily/addAttribute', + addAttributes +); + +addFilter( + 'blocks.getSaveContent.extraProps', + 'core/fontFamily/addSaveProps', + addSaveProps +); + +addFilter( + 'blocks.registerBlockType', + 'core/fontFamily/addEditProps', + addEditProps +); diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 1c56218245a27..3e86f0a398161 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -12,10 +12,17 @@ import { getColorClassName, useBlockProps, __experimentalGetGradientClass, + __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, + __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; import { compose } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + const migrateBorderRadius = ( attributes ) => { const { borderRadius, ...newAttributes } = attributes; // We have to check old property `borderRadius` and if @@ -112,7 +119,146 @@ const blockAttributes = { }, }; +const v10 = { + attributes: { + url: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'title', + }, + text: { + type: 'string', + source: 'html', + selector: 'a', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'target', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', + }, + placeholder: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + gradient: { + type: 'string', + }, + width: { + type: 'number', + }, + }, + supports: { + anchor: true, + align: true, + alignWide: false, + color: { + __experimentalSkipSerialization: true, + gradients: true, + }, + typography: { + fontSize: true, + __experimentalFontFamily: true, + }, + reusable: false, + spacing: { + __experimentalSkipSerialization: true, + padding: [ 'horizontal', 'vertical' ], + __experimentalDefaultControls: { + padding: true, + }, + }, + __experimentalBorder: { + radius: true, + __experimentalSkipSerialization: true, + }, + __experimentalSelector: '.wp-block-button__link', + }, + save( { attributes, className } ) { + const { + fontSize, + linkTarget, + rel, + style, + text, + title, + url, + width, + } = attributes; + + if ( ! text ) { + return null; + } + + const borderProps = getBorderClassesAndStyles( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); + const buttonClasses = classnames( + 'wp-block-button__link', + colorProps.className, + borderProps.className, + { + // For backwards compatibility add style that isn't provided via + // block support. + 'no-border-radius': style?.border?.radius === 0, + } + ); + const buttonStyle = { + ...borderProps.style, + ...colorProps.style, + ...spacingProps.style, + }; + + // The use of a `title` attribute here is soft-deprecated, but still applied + // if it had already been assigned, for the sake of backward-compatibility. + // A title will no longer be assigned for new or updated button block links. + + const wrapperClasses = classnames( className, { + [ `has-custom-width wp-block-button__width-${ width }` ]: width, + [ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize, + } ); + + return ( +
+ +
+ ); + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + const deprecated = [ + v10, { supports: { anchor: true, @@ -217,7 +363,7 @@ const deprecated = [ ); }, - migrate: migrateBorderRadius, + migrate: compose( migrateFontFamily, migrateBorderRadius ), }, { supports: { @@ -312,7 +458,7 @@ const deprecated = [ ); }, - migrate: migrateBorderRadius, + migrate: compose( migrateFontFamily, migrateBorderRadius ), }, { supports: { @@ -407,7 +553,7 @@ const deprecated = [ ); }, - migrate: migrateBorderRadius, + migrate: compose( migrateFontFamily, migrateBorderRadius ), }, { supports: { @@ -523,7 +669,6 @@ const deprecated = [ type: 'string', }, }, - isEligible: ( attributes ) => !! attributes.customTextColor || !! attributes.customBackgroundColor || diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js new file mode 100644 index 0000000000000..6f4a5e70f9ccd --- /dev/null +++ b/packages/block-library/src/list/deprecated.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +import { RichText, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + ordered: { + type: 'boolean', + default: false, + __experimentalRole: 'content', + }, + values: { + type: 'string', + source: 'html', + selector: 'ol,ul', + multiline: 'li', + __unstableMultilineWrapperTags: [ 'ol', 'ul' ], + default: '', + __experimentalRole: 'content', + }, + type: { + type: 'string', + }, + start: { + type: 'number', + }, + reversed: { + type: 'boolean', + }, + placeholder: { + type: 'string', + }, + }, + supports: { + anchor: true, + className: false, + typography: { + fontSize: true, + __experimentalFontFamily: true, + }, + color: { + gradients: true, + link: true, + }, + __unstablePasteTextInline: true, + __experimentalSelector: 'ol,ul', + __experimentalSlashInserter: true, + }, + save( { attributes } ) { + const { ordered, values, type, reversed, start } = attributes; + const TagName = ordered ? 'ol' : 'ul'; + + return ( + + + + ); + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js index b2d1f5300feb8..8b3e31e7cf54c 100644 --- a/packages/block-library/src/list/index.js +++ b/packages/block-library/src/list/index.js @@ -6,6 +6,7 @@ import { list as icon } from '@wordpress/icons'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -38,4 +39,5 @@ export const settings = { }, edit, save, + deprecated, }; diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js index f41acc381bda6..aab6a3fed4f82 100644 --- a/packages/block-library/src/navigation/deprecated.js +++ b/packages/block-library/src/navigation/deprecated.js @@ -7,6 +7,12 @@ import { mapValues, omit } from 'lodash'; * WordPress dependencies */ import { InnerBlocks } from '@wordpress/block-editor'; +import { compose } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; const TYPOGRAPHY_PRESET_DEPRECATION_MAP = { fontStyle: 'var:preset|font-style|', @@ -15,7 +21,128 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = { textTransform: 'var:preset|text-transform|', }; +const v4 = { + attributes: { + orientation: { + type: 'string', + default: 'horizontal', + }, + textColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, + rgbTextColor: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + rgbBackgroundColor: { + type: 'string', + }, + itemsJustification: { + type: 'string', + }, + showSubmenuIcon: { + type: 'boolean', + default: true, + }, + openSubmenusOnClick: { + type: 'boolean', + default: false, + }, + overlayMenu: { + type: 'string', + default: 'never', + }, + __unstableLocation: { + type: 'string', + }, + overlayBackgroundColor: { + type: 'string', + }, + customOverlayBackgroundColor: { + type: 'string', + }, + overlayTextColor: { + type: 'string', + }, + customOverlayTextColor: { + type: 'string', + }, + }, + supports: { + align: [ 'wide', 'full' ], + anchor: true, + html: false, + inserter: true, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalTextTransform: true, + __experimentalFontFamily: true, + __experimentalTextDecoration: true, + }, + spacing: { + blockGap: true, + units: [ 'px', 'em', 'rem', 'vh', 'vw' ], + __experimentalDefaultControls: { + blockGap: true, + }, + }, + }, + save() { + return ; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +const migrateIsResponsive = function ( attributes ) { + delete attributes.isResponsive; + return { + ...attributes, + overlayMenu: 'mobile', + }; +}; + +const migrateTypographyPresets = function ( attributes ) { + return { + ...attributes, + style: { + ...attributes.style, + typography: mapValues( + attributes.style.typography, + ( value, key ) => { + const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ]; + if ( prefix && value.startsWith( prefix ) ) { + const newValue = value.slice( prefix.length ); + if ( + 'textDecoration' === key && + 'strikethrough' === newValue + ) { + return 'line-through'; + } + return newValue; + } + return value; + } + ), + }, + }; +}; + const deprecated = [ + v4, // Remove `isResponsive` attribute. { attributes: { @@ -90,13 +217,7 @@ const deprecated = [ isEligible( attributes ) { return attributes.isResponsive; }, - migrate( attributes ) { - delete attributes.isResponsive; - return { - ...attributes, - overlayMenu: 'mobile', - }; - }, + migrate: compose( migrateFontFamily, migrateIsResponsive ), save() { return ; }, @@ -166,32 +287,7 @@ const deprecated = [ } return false; }, - migrate( attributes ) { - return { - ...attributes, - style: { - ...attributes.style, - typography: mapValues( - attributes.style.typography, - ( value, key ) => { - const prefix = - TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ]; - if ( prefix && value.startsWith( prefix ) ) { - const newValue = value.slice( prefix.length ); - if ( - 'textDecoration' === key && - 'strikethrough' === newValue - ) { - return 'line-through'; - } - return newValue; - } - return value; - } - ), - }, - }; - }, + migrate: compose( migrateFontFamily, migrateTypographyPresets ), }, { attributes: { diff --git a/packages/block-library/src/post-comment-author/deprecated.js b/packages/block-library/src/post-comment-author/deprecated.js new file mode 100644 index 0000000000000..0ad1a25bdd268 --- /dev/null +++ b/packages/block-library/src/post-comment-author/deprecated.js @@ -0,0 +1,50 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + isLink: { + type: 'boolean', + default: false, + }, + linkTarget: { + type: 'string', + default: '_self', + }, + }, + supports: { + html: false, + color: { + gradients: true, + link: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalLetterSpacing: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/post-comment-author/index.js b/packages/block-library/src/post-comment-author/index.js index e6779fa3ec22a..6285ad906f66a 100644 --- a/packages/block-library/src/post-comment-author/index.js +++ b/packages/block-library/src/post-comment-author/index.js @@ -3,6 +3,7 @@ */ import metadata from './block.json'; import edit from './edit'; +import deprecated from './deprecated'; /** * WordPress dependencies @@ -15,4 +16,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/post-comment-date/deprecated.js b/packages/block-library/src/post-comment-date/deprecated.js new file mode 100644 index 0000000000000..640b831bdeb34 --- /dev/null +++ b/packages/block-library/src/post-comment-date/deprecated.js @@ -0,0 +1,49 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + format: { + type: 'string', + }, + isLink: { + type: 'boolean', + default: false, + }, + }, + supports: { + html: false, + color: { + gradients: true, + link: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalLetterSpacing: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/post-comment-date/index.js b/packages/block-library/src/post-comment-date/index.js index 6cba9841dfdfa..c2384da69192d 100644 --- a/packages/block-library/src/post-comment-date/index.js +++ b/packages/block-library/src/post-comment-date/index.js @@ -8,6 +8,7 @@ import { postDate as icon } from '@wordpress/icons'; */ import metadata from './block.json'; import edit from './edit'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -15,4 +16,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/post-date/deprecated.js b/packages/block-library/src/post-date/deprecated.js new file mode 100644 index 0000000000000..d217f38bf30ed --- /dev/null +++ b/packages/block-library/src/post-date/deprecated.js @@ -0,0 +1,52 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + textAlign: { + type: 'string', + }, + format: { + type: 'string', + }, + isLink: { + type: 'boolean', + default: false, + }, + }, + supports: { + html: false, + color: { + gradients: true, + link: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalLetterSpacing: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/post-date/index.js b/packages/block-library/src/post-date/index.js index 6cba9841dfdfa..c2384da69192d 100644 --- a/packages/block-library/src/post-date/index.js +++ b/packages/block-library/src/post-date/index.js @@ -8,6 +8,7 @@ import { postDate as icon } from '@wordpress/icons'; */ import metadata from './block.json'; import edit from './edit'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -15,4 +16,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/post-title/deprecated.js b/packages/block-library/src/post-title/deprecated.js new file mode 100644 index 0000000000000..e53606027c7bb --- /dev/null +++ b/packages/block-library/src/post-title/deprecated.js @@ -0,0 +1,65 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + textAlign: { + type: 'string', + }, + level: { + type: 'number', + default: 2, + }, + isLink: { + type: 'boolean', + default: false, + }, + rel: { + type: 'string', + attribute: 'rel', + default: '', + }, + linkTarget: { + type: 'string', + default: '_self', + }, + }, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + link: true, + }, + spacing: { + margin: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/post-title/index.js b/packages/block-library/src/post-title/index.js index 4f1dcdfc4f3a3..a947bf91250cb 100644 --- a/packages/block-library/src/post-title/index.js +++ b/packages/block-library/src/post-title/index.js @@ -8,6 +8,7 @@ import { postTitle as icon } from '@wordpress/icons'; */ import metadata from './block.json'; import edit from './edit'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -15,4 +16,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/query-title/deprecated.js b/packages/block-library/src/query-title/deprecated.js new file mode 100644 index 0000000000000..1a80d5dfe9040 --- /dev/null +++ b/packages/block-library/src/query-title/deprecated.js @@ -0,0 +1,51 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + type: { + type: 'string', + }, + textAlign: { + type: 'string', + }, + level: { + type: 'number', + default: 1, + }, + }, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + }, + spacing: { + margin: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/query-title/index.js b/packages/block-library/src/query-title/index.js index 5f564739f69d0..0b8fcd2798788 100644 --- a/packages/block-library/src/query-title/index.js +++ b/packages/block-library/src/query-title/index.js @@ -4,6 +4,7 @@ import metadata from './block.json'; import edit from './edit'; import variations from './variations'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -11,4 +12,5 @@ export { metadata, name }; export const settings = { edit, variations, + deprecated, }; diff --git a/packages/block-library/src/site-tagline/deprecated.js b/packages/block-library/src/site-tagline/deprecated.js new file mode 100644 index 0000000000000..e236058d8e1c7 --- /dev/null +++ b/packages/block-library/src/site-tagline/deprecated.js @@ -0,0 +1,49 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + textAlign: { + type: 'string', + }, + }, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + }, + spacing: { + margin: true, + padding: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalTextTransform: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/site-tagline/index.js b/packages/block-library/src/site-tagline/index.js index d3c19ddabf111..89477ca98f643 100644 --- a/packages/block-library/src/site-tagline/index.js +++ b/packages/block-library/src/site-tagline/index.js @@ -4,6 +4,7 @@ import metadata from './block.json'; import edit from './edit'; import icon from './icon'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -11,4 +12,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/site-title/deprecated.js b/packages/block-library/src/site-title/deprecated.js new file mode 100644 index 0000000000000..4f74ef268878b --- /dev/null +++ b/packages/block-library/src/site-title/deprecated.js @@ -0,0 +1,62 @@ +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + level: { + type: 'number', + default: 1, + }, + textAlign: { + type: 'string', + }, + isLink: { + type: 'boolean', + default: true, + }, + linkTarget: { + type: 'string', + default: '_self', + }, + }, + supports: { + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + link: true, + }, + spacing: { + padding: true, + margin: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalTextTransform: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalLetterSpacing: true, + }, + }, + save() { + return null; + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v1 ]; diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js index c425e41c5100a..d2b155ebcc8f3 100644 --- a/packages/block-library/src/site-title/index.js +++ b/packages/block-library/src/site-title/index.js @@ -8,6 +8,7 @@ import { mapMarker as icon } from '@wordpress/icons'; */ import metadata from './block.json'; import edit from './edit'; +import deprecated from './deprecated'; const { name } = metadata; export { metadata, name }; @@ -15,4 +16,5 @@ export { metadata, name }; export const settings = { icon, edit, + deprecated, }; diff --git a/packages/block-library/src/utils/clean-empty-object.js b/packages/block-library/src/utils/clean-empty-object.js new file mode 100644 index 0000000000000..87ef83a643a21 --- /dev/null +++ b/packages/block-library/src/utils/clean-empty-object.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { isEmpty, isObject, identity, mapValues, pickBy } from 'lodash'; + +/** + * Removed empty nodes from nested objects. + * + * @param {Object} object + * @return {Object} Object cleaned from empty nodes. + */ +const cleanEmptyObject = ( object ) => { + if ( ! isObject( object ) || Array.isArray( object ) ) { + return object; + } + const cleanedNestedObjects = pickBy( + mapValues( object, cleanEmptyObject ), + identity + ); + return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects; +}; + +export default cleanEmptyObject; diff --git a/packages/block-library/src/utils/migrate-font-family.js b/packages/block-library/src/utils/migrate-font-family.js new file mode 100644 index 0000000000000..bb2108b569fe1 --- /dev/null +++ b/packages/block-library/src/utils/migrate-font-family.js @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import { cloneDeep } from 'lodash'; + +/** + * Internal dependencies + */ +import cleanEmptyObject from './clean-empty-object'; + +/** + * Migrates the current style.typography.fontFamily attribute, + * whose value was "var:preset|font-family|helvetica-arial", + * to the style.fontFamily attribute, whose value will be "helvetica-arial". + * + * @param {Object} attributes The current attributes + * @return {Object} The updated attributes. + */ +export default function ( attributes ) { + if ( ! attributes?.style?.typography?.fontFamily ) { + return attributes; + } + + // Clone first so when we delete the fontFamily + // below we're not modifying the original + // attributes. Because the deprecation may be discarded + // we don't want to alter the original attributes. + const atts = cloneDeep( attributes ); + const fontFamily = atts.style.typography.fontFamily.split( '|' ).pop(); + delete atts.style.typography.fontFamily; + atts.style = cleanEmptyObject( atts.style ); + + return { + ...atts, + fontFamily, + }; +} diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js index f26ac103c226b..d986e2df75e5b 100644 --- a/packages/block-library/src/verse/deprecated.js +++ b/packages/block-library/src/verse/deprecated.js @@ -1,35 +1,96 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; - -const blockAttributes = { - content: { - type: 'string', - source: 'html', - selector: 'pre', - default: '', +import { RichText, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import migrateFontFamily from '../utils/migrate-font-family'; + +const v1 = { + attributes: { + content: { + type: 'string', + source: 'html', + selector: 'pre', + default: '', + }, + textAlign: { + type: 'string', + }, }, - textAlign: { - type: 'string', + save( { attributes } ) { + const { textAlign, content } = attributes; + + return ( + + ); }, }; -const deprecated = [ - { - attributes: blockAttributes, - save( { attributes } ) { - const { textAlign, content } = attributes; - - return ( - - ); +const v2 = { + attributes: { + content: { + type: 'string', + source: 'html', + selector: 'pre', + default: '', + __unstablePreserveWhiteSpace: true, + __experimentalRole: 'content', + }, + textAlign: { + type: 'string', }, }, -]; + supports: { + anchor: true, + color: { + gradients: true, + link: true, + }, + typography: { + fontSize: true, + __experimentalFontFamily: true, + }, + spacing: { + padding: true, + }, + }, + save( { attributes } ) { + const { textAlign, content } = attributes; + + const className = classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ); -export default deprecated; + return ( + 
+				
+
+ ); + }, + migrate: migrateFontFamily, + isEligible( { style } ) { + return style?.typography?.fontFamily; + }, +}; + +/** + * New deprecations need to be placed first + * for them to have higher priority. + * + * Old deprecations may need to be updated as well. + * + * See block-deprecation.md + */ +export default [ v2, v1 ]; diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index a6015273d097d..dbca89457a209 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -36,4 +36,92 @@ function test_font_size_slug_with_numbers_is_kebab_cased_properly() { $this->assertSame( $expected, $actual ); unregister_block_type( 'test/font-size-slug-with-numbers' ); } + + function test_font_family_with_legacy_inline_styles_using_a_value() { + $block_name = 'test/font-family-with-inline-styles-using-value'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + '__experimentalFontFamily' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array( 'style' => 'font-family: serif;' ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_font_family_with_legacy_inline_styles_using_a_css_var() { + $block_name = 'test/font-family-with-inline-styles-using-css-var'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + '__experimentalFontFamily' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + + function test_font_family_with_class() { + $block_name = 'test/font-family-with-class'; + register_block_type( + $block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + '__experimentalFontFamily' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $block_name ); + $block_atts = array( 'fontFamily' => 'h1' ); + + $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); + $expected = array( 'class' => 'has-h-1-font-family' ); + + $this->assertSame( $expected, $actual ); + unregister_block_type( $block_name ); + } + } diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php index 8a682bd8fd493..9815644188343 100644 --- a/phpunit/class-wp-theme-json-schema-v0-test.php +++ b/phpunit/class-wp-theme-json-schema-v0-test.php @@ -471,11 +471,11 @@ function test_get_stylesheet() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}', $theme_json->get_stylesheet() ); $this->assertEquals( - 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}', $theme_json->get_stylesheet( 'block_styles' ) ); $this->assertEquals( diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 113ff4fd3cdc0..c51966217fd2a 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -413,11 +413,11 @@ function test_get_stylesheet() { ); $this->assertEquals( - 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}', $theme_json->get_stylesheet() ); $this->assertEquals( - 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + 'body{color: var(--wp--preset--color--grey);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}', $theme_json->get_stylesheet( 'block_styles' ) ); $this->assertEquals( diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.html b/test/integration/fixtures/blocks/core__button__deprecated-v10.html new file mode 100644 index 0000000000000..a4f40f53a3c3f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v10.html @@ -0,0 +1,3 @@ + +
My button
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.json b/test/integration/fixtures/blocks/core__button__deprecated-v10.json new file mode 100644 index 0000000000000..0b527c08924e0 --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v10.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "
My button
" + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.parsed.json b/test/integration/fixtures/blocks/core__button__deprecated-v10.parsed.json new file mode 100644 index 0000000000000..157ff5fd061db --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v10.parsed.json @@ -0,0 +1,17 @@ +[ + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
My button
\n", + "innerContent": [ + "\n
My button
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html new file mode 100644 index 0000000000000..cabc3d37ae9c9 --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html @@ -0,0 +1,3 @@ + +
My button
+ diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.html b/test/integration/fixtures/blocks/core__list__deprecated-v1.html new file mode 100644 index 0000000000000..eb8ea358a2ef6 --- /dev/null +++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.html @@ -0,0 +1,3 @@ + +
  • one
  • two
  • three
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.json b/test/integration/fixtures/blocks/core__list__deprecated-v1.json new file mode 100644 index 0000000000000..66562a27ca847 --- /dev/null +++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.json @@ -0,0 +1,14 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/list", + "isValid": true, + "attributes": { + "ordered": false, + "values": "
  • one
  • two
  • three
    • ", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "
    • one
    • two
    • three
    " + } +] diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..d76f8e369efe4 --- /dev/null +++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.parsed.json @@ -0,0 +1,17 @@ +[ + { + "blockName": "core/list", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
    • one
    • two
    • three
    \n", + "innerContent": [ + "\n
    • one
    • two
    • three
    \n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..0eb7670601542 --- /dev/null +++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html @@ -0,0 +1,3 @@ + +
    • one
    • two
    • three
    + diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.html new file mode 100644 index 0000000000000..a34036cae23f7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json new file mode 100644 index 0000000000000..af037bc657f3a --- /dev/null +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.json @@ -0,0 +1,16 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/navigation", + "isValid": true, + "attributes": { + "orientation": "horizontal", + "showSubmenuIcon": true, + "openSubmenusOnClick": false, + "overlayMenu": "never", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.parsed.json b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.parsed.json new file mode 100644 index 0000000000000..388a7c1cb23d7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/navigation", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ "\n" ] + } +] diff --git a/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html new file mode 100644 index 0000000000000..2c353742c4a95 --- /dev/null +++ b/test/integration/fixtures/blocks/core__navigation__deprecated-v4.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.html b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.html new file mode 100644 index 0000000000000..fc634546cb41b --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.json new file mode 100644 index 0000000000000..bf632aac0e092 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.json @@ -0,0 +1,14 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/post-comment-author", + "isValid": true, + "attributes": { + "isLink": false, + "linkTarget": "_self", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..6948700ab3c0a --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/post-comment-author", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..0812a689f93d1 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.html b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.html new file mode 100644 index 0000000000000..aacddd134a90e --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.json new file mode 100644 index 0000000000000..4c36aac77826d --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/post-comment-date", + "isValid": true, + "attributes": { + "isLink": false, + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..3c83c9b5f5237 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/post-comment-date", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..ce86c427a7829 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-date__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-date__deprecated-v1.html b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.html new file mode 100644 index 0000000000000..43c7c1ad9164c --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__post-date__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.json new file mode 100644 index 0000000000000..438d03db6b5d0 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/post-date", + "isValid": true, + "attributes": { + "isLink": false, + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__post-date__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..bea3da7834974 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/post-date", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__post-date__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..f534e3c2cf606 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-date__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.html new file mode 100644 index 0000000000000..eb285ffc94010 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json new file mode 100644 index 0000000000000..33f5c4bc193e3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.json @@ -0,0 +1,16 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/post-title", + "isValid": true, + "attributes": { + "level": 2, + "isLink": false, + "rel": "", + "linkTarget": "_self", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..c7e1621d394e3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/post-title", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..ac3f119212592 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-title__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__query-title__deprecated-v1.html b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.html new file mode 100644 index 0000000000000..303fc95832174 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__query-title__deprecated-v1.json b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.json new file mode 100644 index 0000000000000..0090b749d0808 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/query-title", + "isValid": true, + "attributes": { + "level": 1, + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__query-title__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..7938e3d65171a --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/query-title", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__query-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..714807b04ae31 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-title__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.html b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.html new file mode 100644 index 0000000000000..c116817410845 --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.json b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.json new file mode 100644 index 0000000000000..78bc50af78f5f --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/site-tagline", + "isValid": true, + "attributes": { + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..ccf5c2beea419 --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/site-tagline", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..38288cace27c4 --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-tagline__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__site-title__deprecated-v1.html b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.html new file mode 100644 index 0000000000000..7717873f9e2fc --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__site-title__deprecated-v1.json b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.json new file mode 100644 index 0000000000000..475bb9507ac6d --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.json @@ -0,0 +1,15 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/site-title", + "isValid": true, + "attributes": { + "level": 1, + "isLink": true, + "linkTarget": "_self", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__site-title__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.parsed.json new file mode 100644 index 0000000000000..d3e23e9d9a596 --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.parsed.json @@ -0,0 +1,15 @@ +[ + { + "blockName": "core/site-title", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__site-title__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.serialized.html new file mode 100644 index 0000000000000..20d70afab0669 --- /dev/null +++ b/test/integration/fixtures/blocks/core__site-title__deprecated-v1.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__verse__deprecated.html b/test/integration/fixtures/blocks/core__verse__deprecated-v1.html similarity index 100% rename from test/integration/fixtures/blocks/core__verse__deprecated.html rename to test/integration/fixtures/blocks/core__verse__deprecated-v1.html diff --git a/test/integration/fixtures/blocks/core__verse__deprecated.json b/test/integration/fixtures/blocks/core__verse__deprecated-v1.json similarity index 100% rename from test/integration/fixtures/blocks/core__verse__deprecated.json rename to test/integration/fixtures/blocks/core__verse__deprecated-v1.json diff --git a/test/integration/fixtures/blocks/core__verse__deprecated.parsed.json b/test/integration/fixtures/blocks/core__verse__deprecated-v1.parsed.json similarity index 100% rename from test/integration/fixtures/blocks/core__verse__deprecated.parsed.json rename to test/integration/fixtures/blocks/core__verse__deprecated-v1.parsed.json diff --git a/test/integration/fixtures/blocks/core__verse__deprecated.serialized.html b/test/integration/fixtures/blocks/core__verse__deprecated-v1.serialized.html similarity index 100% rename from test/integration/fixtures/blocks/core__verse__deprecated.serialized.html rename to test/integration/fixtures/blocks/core__verse__deprecated-v1.serialized.html diff --git a/test/integration/fixtures/blocks/core__verse__deprecated-v2.html b/test/integration/fixtures/blocks/core__verse__deprecated-v2.html new file mode 100644 index 0000000000000..48ea544e627f7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__verse__deprecated-v2.html @@ -0,0 +1,3 @@ + +
    A verse…
    And more!
    + diff --git a/test/integration/fixtures/blocks/core__verse__deprecated-v2.json b/test/integration/fixtures/blocks/core__verse__deprecated-v2.json new file mode 100644 index 0000000000000..440fff4bb9296 --- /dev/null +++ b/test/integration/fixtures/blocks/core__verse__deprecated-v2.json @@ -0,0 +1,13 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/verse", + "isValid": true, + "attributes": { + "content": "A verse…
    And more!", + "fontFamily": "cambria-georgia" + }, + "innerBlocks": [], + "originalContent": "
    A verse…
    And more!
    " + } +] diff --git a/test/integration/fixtures/blocks/core__verse__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__verse__deprecated-v2.parsed.json new file mode 100644 index 0000000000000..8ea50c04a7c38 --- /dev/null +++ b/test/integration/fixtures/blocks/core__verse__deprecated-v2.parsed.json @@ -0,0 +1,17 @@ +[ + { + "blockName": "core/verse", + "attrs": { + "style": { + "typography": { + "fontFamily": "var:preset|font-family|cambria-georgia" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
    A verse…
    And more!
    \n", + "innerContent": [ + "\n
    A verse…
    And more!
    \n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__verse__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__verse__deprecated-v2.serialized.html new file mode 100644 index 0000000000000..c28767b65c048 --- /dev/null +++ b/test/integration/fixtures/blocks/core__verse__deprecated-v2.serialized.html @@ -0,0 +1,3 @@ + +
    A verse…
    And more!
    +