@wordpress/block-library 6.0.1 → 6.0.5

package/src/post-title/block.json

@@ -35,13 +35,22 @@
 			"gradients": true,
 			"link": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
-			"__experimentalTextTransform": true
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"

package/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 ];

package/src/post-title/edit.js

@@ -46,7 +46,7 @@ export default function PostTitleEdit( {
 	} );
 
 	let titleElement = (
-		<TagName { ...blockProps }>{ __( 'An example title' ) }</TagName>
+		<TagName { ...blockProps }>{ __( 'Post Title' ) }</TagName>
 	);
 
 	if ( postType && postId ) {

package/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,
 };

package/src/post-title/index.php

@@ -19,7 +19,13 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID          = $block->context['postId'];
+	$post_ID = $block->context['postId'];
+	$title   = get_the_title( $post_ID );
+
+	if ( ! $title ) {
+		return '';
+	}
+
 	$tag_name         = 'h2';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
@@ -27,7 +33,6 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
 
-	$title = get_the_title( $post_ID );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
 	}

package/src/preformatted/block.json

@@ -21,7 +21,15 @@
 			"gradients": true
 		},
 		"typography": {
-			"fontSize": true
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"style": "wp-block-preformatted"

package/src/preformatted/edit.js

@@ -9,9 +9,10 @@ export default function PreformattedEdit( {
 	mergeBlocks,
 	setAttributes,
 	onRemove,
+	style,
 } ) {
 	const { content } = attributes;
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { style } );
 
 	return (
 		<RichText

package/src/preformatted/edit.native.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -13,24 +13,38 @@ import WebPreformattedEdit from './edit.js';
 import styles from './styles.scss';
 
 export function PreformattedEdit( props ) {
-	const { getStylesFromColorScheme } = props;
-	const richTextStyle = getStylesFromColorScheme(
+	const { style } = props;
+
+	const textBaseStyle = usePreferredColorSchemeStyle(
 		styles.wpRichTextLight,
 		styles.wpRichTextDark
 	);
-	const wpBlockPreformatted = getStylesFromColorScheme(
+	const wpBlockPreformatted = usePreferredColorSchemeStyle(
 		styles.wpBlockPreformattedLight,
 		styles.wpBlockPreformattedDark
 	);
+	const richTextStyle = {
+		...( ! style?.baseColors && textBaseStyle ),
+		...( style?.fontSize && { fontSize: style.fontSize } ),
+		...( style?.color && { color: style.color } ),
+	};
+	const containerStyles = [
+		wpBlockPreformatted,
+		style?.backgroundColor && { backgroundColor: style.backgroundColor },
+		style?.baseColors &&
+			! style?.backgroundColor &&
+			styles[ 'wp-block-preformatted__no-background' ],
+	];
+
 	const propsWithStyle = {
 		...props,
 		style: richTextStyle,
 	};
 	return (
-		<View style={ wpBlockPreformatted }>
+		<View style={ containerStyles }>
 			<WebPreformattedEdit { ...propsWithStyle } />
 		</View>
 	);
 }
 
-export default withPreferredColorScheme( PreformattedEdit );
+export default PreformattedEdit;

package/src/preformatted/styles.native.scss

@@ -23,3 +23,8 @@
 .wpRichTextDark {
 	@extend %wpBlockPreformattedDarkColor;
 }
+
+.wp-block-preformatted__no-background {
+	background: transparent;
+	padding: 0;
+}

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -1,16 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
   <PreformattedEdit
     getStylesFromColorScheme={[Function]}
     setAttributes={[MockFunction]}
+    style={Object {}}
   />
 </View>
 `;
 
 exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
   <PreformattedEdit
     attributes={
       Object {
@@ -19,6 +36,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
     }
     getStylesFromColorScheme={[Function]}
     setAttributes={[MockFunction]}
+    style={Object {}}
   />
 </View>
 `;

package/src/pullquote/block.json

@@ -32,6 +32,18 @@
 			"background": true,
 			"link": true
 		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true
+			}
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

package/src/pullquote/blockquote.native.js

@@ -12,15 +12,25 @@ import { Children, cloneElement } from '@wordpress/element';
 import styles from './blockquote.scss';
 
 export const BlockQuote = ( props ) => {
+	const citationStyle = { ...styles.citation };
+	const quoteStyle = { ...styles.quote };
+
+	if ( props.textColor ) {
+		quoteStyle.color = props.textColor;
+		quoteStyle.placeholderColor = props.textColor;
+		citationStyle.color = props.textColor;
+		citationStyle.placeholderColor = props.textColor;
+	}
+
 	const newChildren = Children.map( props.children, ( child ) => {
 		if ( child && child.props.identifier === 'value' ) {
 			return cloneElement( child, {
-				style: styles.quote,
+				style: quoteStyle,
 			} );
 		}
 		if ( child && child.props.identifier === 'citation' ) {
 			return cloneElement( child, {
-				style: styles.citation,
+				style: citationStyle,
 			} );
 		}
 		return child;

package/src/pullquote/edit.native.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	getColorObjectByAttributeValues,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { Figure } from './figure';
+import { BlockQuote } from './blockquote';
+
+const getBackgroundColor = ( { attributes, colors, style } ) => {
+	const { backgroundColor } = attributes;
+
+	const colorProps = getColorClassesAndStyles( attributes );
+	const colorObject = getColorObjectByAttributeValues(
+		colors,
+		backgroundColor
+	);
+
+	return (
+		colorObject?.color ||
+		colorProps.style?.backgroundColor ||
+		colorProps.style?.background ||
+		style?.backgroundColor
+	);
+};
+
+const getTextColor = ( { attributes, colors, style } ) => {
+	const colorProps = getColorClassesAndStyles( attributes );
+	const colorObject = getColorObjectByAttributeValues(
+		colors,
+		attributes.textColor
+	);
+	return (
+		colorObject?.color ||
+		colorProps.style?.color ||
+		style?.color ||
+		style?.baseColors?.color?.text
+	);
+};
+const getBorderColor = ( props ) => {
+	const { wrapperProps } = props;
+	const defaultColor = getTextColor( props );
+
+	return wrapperProps?.style?.borderColor || defaultColor;
+};
+/**
+ * Internal dependencies
+ */
+
+function PullQuoteEdit( props ) {
+	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
+	const { textAlign, citation, value } = attributes;
+
+	const blockProps = useBlockProps( {
+		backgroundColor: getBackgroundColor( props ),
+		borderColor: getBorderColor( props ),
+	} );
+
+	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<Figure { ...blockProps }>
+				<BlockQuote textColor={ getTextColor( props ) }>
+					<RichText
+						identifier="value"
+						multiline
+						value={ value }
+						onChange={ ( nextValue ) =>
+							setAttributes( {
+								value: nextValue,
+							} )
+						}
+						aria-label={ __( 'Pullquote text' ) }
+						placeholder={
+							// translators: placeholder text used for the quote
+							__( 'Add quote' )
+						}
+						textAlign={ textAlign ?? 'center' }
+					/>
+					{ shouldShowCitation && (
+						<RichText
+							identifier="citation"
+							value={ citation }
+							aria-label={ __( 'Pullquote citation text' ) }
+							placeholder={
+								// translators: placeholder text used for the citation
+								__( 'Add citation' )
+							}
+							onChange={ ( nextCitation ) =>
+								setAttributes( {
+									citation: nextCitation,
+								} )
+							}
+							__unstableMobileNoFocusOnMount
+							textAlign={ textAlign ?? 'center' }
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( 'core/paragraph' )
+								)
+							}
+						/>
+					) }
+				</BlockQuote>
+			</Figure>
+		</>
+	);
+}
+
+export default PullQuoteEdit;

package/src/pullquote/figure.native.js

@@ -5,19 +5,29 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './figure.scss';
 
-export const Figure = withPreferredColorScheme( ( props ) => {
-	const { children, getStylesFromColorScheme } = props;
-
-	const wpPullquoteFigure = getStylesFromColorScheme(
+export const Figure = ( { children, backgroundColor, borderColor } ) => {
+	const wpPullquoteFigure = usePreferredColorSchemeStyle(
 		styles.light,
 		styles.dark
 	);
 
-	return <View style={ wpPullquoteFigure }>{ children }</View>;
-} );
+	const customStyles = {};
+	if ( borderColor ) {
+		customStyles.borderTopColor = borderColor;
+		customStyles.borderBottomColor = borderColor;
+	}
+
+	if ( backgroundColor ) {
+		customStyles.backgroundColor = backgroundColor;
+	}
+
+	return (
+		<View style={ [ wpPullquoteFigure, customStyles ] }>{ children }</View>
+	);
+};

package/src/query/edit/index.js

@@ -11,7 +11,7 @@ import {
 	useBlockProps,
 	useSetting,
 	store as blockEditorStore,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';

package/src/query/save.js

@@ -1,12 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
-	return (
-		<Tag { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</Tag>
-	);
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <Tag { ...innerBlocksProps } />;
 }

package/src/query-pagination/edit.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';

package/src/query-pagination-next/block.json

@@ -21,7 +21,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/query-pagination-previous/block.json

@@ -21,7 +21,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/query-title/block.json

@@ -23,10 +23,22 @@
 		"color": {
 			"gradients": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontFamily": true
+			"__experimentalFontFamily": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true,
+				"textTransform": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-query-title-editor"

package/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 ];

package/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,
 };

package/src/quote/block.json

@@ -27,7 +27,20 @@
 		}
 	},
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"__experimentalSlashInserter": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontAppearance": true
+			}
+		}
 	},
 	"styles": [
 		{
@@ -35,6 +48,7 @@
 			"label": "Default",
 			"isDefault": true
 		},
+		{ "name": "plain", "label": "Plain" },
 		{ "name": "large", "label": "Large" }
 	],
 	"editorStyle": "wp-block-quote-editor",