@wordpress/primitives 4.47.0 → 4.48.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 4.48.1 (2026-06-16)
+
+## 4.48.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
+
 ## 4.47.0 (2026-05-27)
 
 ## 4.46.0 (2026-05-14)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.47.0",
+	"version": "4.48.1",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,21 +40,21 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": [
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@wordpress/element": "^7.0.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/element": "^8.0.1",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/block-quotation/README.md

@@ -1,6 +1,6 @@
 # Block Quotation
 
-A drop-in replacement for the HTML [blockquote](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element that works both on the web and in the mobile apps. It indicates that the enclosed text is an extended quotation.
+A drop-in replacement for the HTML [blockquote](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element. It indicates that the enclosed text is an extended quotation.
 
 ## Usage
 

package/src/horizontal-rule/README.md

@@ -1,6 +1,6 @@
 # HorizontalRule
 
-A drop-in replacement for the HTML [hr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) element that works both on the web and in the mobile apps. It represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
+A drop-in replacement for the HTML [hr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) element. It represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
 
 ## Usage
 

package/src/block-quotation/index.native.js

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement, forwardRef } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
-	const { style } = props;
-
-	const blockQuoteStyle = [
-		usePreferredColorSchemeStyle(
-			styles.wpBlockQuoteLight,
-			styles.wpBlockQuoteDark
-		),
-		style?.baseColors?.color?.text && {
-			borderLeftColor: style.baseColors.color.text,
-		},
-		style?.color && {
-			borderLeftColor: style.color,
-		},
-		style,
-		style?.backgroundColor && styles.paddingWithBackground,
-	];
-	const colorStyle = style?.color ? { color: style.color } : {};
-
-	const newChildren = Children.map( props.children, ( child ) => {
-		const { identifier, attributeKey } = child?.props || {};
-		const identifierKey = identifier ?? attributeKey;
-
-		if ( identifierKey === 'citation' ) {
-			return cloneElement( child, {
-				style: {
-					...styles.wpBlockQuoteCitation,
-					...colorStyle,
-				},
-			} );
-		}
-		if ( child && child.props.identifier === 'value' ) {
-			return cloneElement( child, {
-				tagsToEliminate: [ 'div' ],
-				style: colorStyle,
-			} );
-		}
-		return child;
-	} );
-	return (
-		<View ref={ ref } style={ blockQuoteStyle }>
-			{ newChildren }
-		</View>
-	);
-} );

package/src/block-quotation/style.native.scss

@@ -1,25 +0,0 @@
-%wpBlockQuote-shared {
-	border-left-width: 4px;
-	border-left-style: solid;
-	padding-left: $block-edge-to-content;
-	margin-left: 0;
-}
-
-.wpBlockQuoteLight {
-	@extend %wpBlockQuote-shared;
-	border-left-color: $black;
-}
-
-.wpBlockQuoteDark {
-	@extend %wpBlockQuote-shared;
-	border-left-color: $white;
-}
-
-.wpBlockQuoteCitation {
-	margin-top: 16px;
-	font-size: 14px;
-}
-
-.paddingWithBackground {
-	padding-top: $block-edge-to-content - $block-selected-margin;
-}

package/src/horizontal-rule/index.native.js

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const HR = ( {
-	getStylesFromColorScheme,
-	lineStyle,
-	marginLeft,
-	marginRight,
-	style,
-	textStyle,
-	text,
-	...props
-} ) => {
-	const renderLine = ( key ) => (
-		<View
-			key={ key }
-			style={ [
-				getStylesFromColorScheme( styles.line, styles.lineDark ),
-				lineStyle,
-			] }
-		/>
-	);
-
-	const renderText = ( key ) => (
-		<View key={ key } style={ styles.textContainer }>
-			<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
-		</View>
-	);
-
-	const renderInner = () => {
-		if ( ! text ) {
-			return renderLine();
-		}
-		return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ];
-	};
-
-	return (
-		<View
-			style={ [ styles.container, { marginLeft, marginRight }, style ] }
-			{ ...props }
-		>
-			{ renderInner() }
-		</View>
-	);
-};
-
-export const HorizontalRule = withPreferredColorScheme( HR );

package/src/horizontal-rule/styles.native.scss

@@ -1,26 +0,0 @@
-.container {
-	align-items: center;
-	flex-direction: row;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.line {
-	background-color: $gray-lighten-20;
-	flex: 1 0 10px;
-	height: 2;
-}
-
-.lineDark {
-	background-color: $gray-50;
-}
-
-.textContainer {
-	flex: 0 1 auto;
-	margin-left: 15px;
-	margin-right: 15px;
-}
-
-.text {
-	text-align: center;
-}

package/src/svg/index.native.js

@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { Svg } from 'react-native-svg';
-import { Animated } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import { usePreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export {
-	Circle,
-	G,
-	Path,
-	Polygon,
-	Rect,
-	Defs,
-	RadialGradient,
-	LinearGradient,
-	Stop,
-	Line,
-	SvgXml,
-} from 'react-native-svg';
-
-const AnimatedSvg = Animated.createAnimatedComponent(
-	forwardRef( ( props, ref ) => <Svg ref={ ref } { ...props } /> )
-);
-
-export const SVG = ( {
-	className = '',
-	isPressed,
-	animated = false,
-	...props
-} ) => {
-	const colorScheme = usePreferredColorScheme();
-	const stylesFromClasses = className
-		.split( ' ' )
-		.map( ( element ) => styles[ element ] )
-		.filter( Boolean );
-	const defaultStyle = isPressed
-		? styles[ `is-pressed--${ colorScheme }` ]
-		: styles[ 'components-toolbar__control-' + colorScheme ];
-	const propStyle = Array.isArray( props.style )
-		? props.style.reduce( ( acc, el ) => {
-				return { ...acc, ...el };
-		  }, {} )
-		: props.style;
-	const styleValues = Object.assign(
-		{},
-		defaultStyle,
-		propStyle,
-		...stylesFromClasses
-	);
-
-	const appliedProps = { ...props, style: styleValues };
-
-	const SvgWrapper = animated ? AnimatedSvg : Svg;
-
-	return (
-		<SvgWrapper
-			// We want to re-render when style color is changed.
-			key={ appliedProps.style.color }
-			height="100%"
-			width="100%"
-			{ ...appliedProps }
-		/>
-	);
-};

package/src/svg/style.native.scss

@@ -1,51 +0,0 @@
-.dashicon-light,
-.components-toolbar__control-light {
-	color: $light-primary;
-	fill: currentColor;
-}
-
-.dashicon-dark,
-.components-toolbar__control-dark {
-	color: $dark-primary;
-	fill: currentColor;
-}
-
-.dashicon-active {
-	color: #fff;
-	fill: currentColor;
-}
-
-.is-pressed--light {
-	color: $light-primary;
-	fill: currentColor;
-}
-
-.is-pressed--dark {
-	color: $dark-primary;
-	fill: currentColor;
-}
-
-.dashicons-insert {
-	color: #87a6bc;
-	fill: currentColor;
-}
-
-.unsupported-icon-light {
-	color: $gray-dark;
-	fill: currentColor;
-}
-
-.unsupported-icon-dark {
-	color: $white;
-	fill: currentColor;
-}
-
-.warning-icon-light {
-	color: $gray-dark;
-	fill: currentColor;
-}
-
-.warning-icon-dark {
-	color: $white;
-	fill: currentColor;
-}

package/src/view/index.native.js

@@ -1,4 +0,0 @@
-/**
- * External dependencies
- */
-export { View } from 'react-native';