WP_Theme_JSON::update_button_width_declarations( array $feature_declarations, array $settings ): array

Source

private static function update_button_width_declarations( $feature_declarations, $settings ) {
	if ( ! isset( $feature_declarations['.wp-block-button'] ) ) {
		return $feature_declarations;
	}

	foreach ( $feature_declarations['.wp-block-button'] as &$declaration ) {
		if ( 'width' !== $declaration['name'] || ! isset( $declaration['value'] ) ) {
			continue;
		}

		$value      = $declaration['value'];
		$percentage = null;

		// Case 1: Direct percentage value e.g. "25%".
		if ( is_string( $value ) && str_ends_with( $value, '%' ) ) {
			$percentage = (float) $value;
		}

		// Case 2: Preset CSS var e.g. "var(--wp--preset--dimension--50)".
		if ( null === $percentage && is_string( $value ) && str_starts_with( $value, 'var(--wp--preset--dimension--' ) ) {
			// Extract the slug from the var name.
			$slug = substr( $value, strlen( 'var(--wp--preset--dimension--' ), -1 );

			/*
			 * Look up the preset size across all origins.
			 * Check block-level settings first (core/button), then top-level settings.
			 */
			$dimension_sizes = ( $settings['blocks']['core/button']['dimensions']['dimensionSizes'] ?? array() )
				+ ( $settings['dimensions']['dimensionSizes'] ?? array() );
			foreach ( $dimension_sizes as $origin_sizes ) {
				if ( ! is_array( $origin_sizes ) ) {
					continue;
				}
				foreach ( $origin_sizes as $preset ) {
					if ( isset( $preset['slug'] ) && $slug === $preset['slug'] && isset( $preset['size'] ) ) {
						$size = $preset['size'];
						if ( is_string( $size ) && str_ends_with( $size, '%' ) ) {
							$percentage = (float) $size;
						}
						break 2;
					}
				}
			}
		}

		if ( null === $percentage ) {
			continue;
		}

		/*
		 * Apply the same calc() formula as the block instance level (style.scss).
		 * The numeric percentage value is used as a unitless number:
		 * - Multiplied by 1% to get the percentage width.
		 * - Divided by 100 to calculate the gap adjustment proportion.
		 */
		$declaration['value'] = sprintf(
			'calc(%s * 1%% - (var(--wp--style--block-gap, 0.5em) * (1 - %s / 100)))',
			$percentage,
			$percentage
		);
	}
	unset( $declaration );

	return $feature_declarations;
}

View all references View on Trac View on GitHub