| @@ -2,8 +2,10 @@ | ||
| 2 | 2 | |
| 3 | 3 | namespace Yoast\WP\SEO\Integrations\Blocks; |
| 4 | 4 | |
| 5 | 5 | use WPSEO_Admin_Asset_Manager; |
| 6 | +use Yoast\WP\SEO\Conditionals\No_Conditionals; | |
| 7 | +use Yoast\WP\SEO\Helpers\Image_Helper; | |
| 6 | 8 | use Yoast\WP\SEO\Integrations\Integration_Interface; |
| 7 | 9 | |
| 8 | 10 | /** |
| 9 | 11 | * Class to load assets required for structured data blocks. |
| @@ -9,8 +11,10 @@ | ||
| 9 | 11 | * Class to load assets required for structured data blocks. |
| 10 | 12 | */ |
| 11 | 13 | class Structured_Data_Blocks implements Integration_Interface { |
| 12 | 14 | |
| 15 | + use No_Conditionals; | |
| 16 | + | |
| 13 | 17 | /** |
| 14 | 18 | * An instance of the WPSEO_Admin_Asset_Manager class. |
| 15 | 19 | * |
| 16 | 20 | * @var WPSEO_Admin_Asset_Manager |
| @@ -17,43 +21,444 @@ | ||
| 17 | 21 | */ |
| 18 | 22 | protected $asset_manager; |
| 19 | 23 | |
| 20 | 24 | /** |
| 21 | - * {@inheritDoc} | |
| 25 | + * An instance of the image helper class. | |
| 26 | + * | |
| 27 | + * @var Image_Helper | |
| 22 | 28 | */ |
| 23 | - public static function get_conditionals() { | |
| 24 | - return []; | |
| 25 | - } | |
| 29 | + protected $image_helper; | |
| 26 | 30 | |
| 27 | 31 | /** |
| 32 | + * The image caches per post. | |
| 33 | + * | |
| 34 | + * @var array | |
| 35 | + */ | |
| 36 | + protected $caches = []; | |
| 37 | + | |
| 38 | + /** | |
| 39 | + * The used cache keys per post. | |
| 40 | + * | |
| 41 | + * @var array | |
| 42 | + */ | |
| 43 | + protected $used_caches = []; | |
| 44 | + | |
| 45 | + /** | |
| 46 | + * Whether or not we've registered our shutdown function. | |
| 47 | + * | |
| 48 | + * @var bool | |
| 49 | + */ | |
| 50 | + protected $registered_shutdown_function = false; | |
| 51 | + | |
| 52 | + /** | |
| 28 | 53 | * Structured_Data_Blocks constructor. |
| 29 | 54 | * |
| 30 | 55 | * @param WPSEO_Admin_Asset_Manager $asset_manager The asset manager. |
| 56 | + * @param Image_Helper $image_helper The image helper. | |
| 31 | 57 | */ |
| 32 | - public function __construct( WPSEO_Admin_Asset_Manager $asset_manager ) { | |
| 58 | + public function __construct( WPSEO_Admin_Asset_Manager $asset_manager, Image_Helper $image_helper ) { | |
| 33 | 59 | $this->asset_manager = $asset_manager; |
| 60 | + $this->image_helper = $image_helper; | |
| 34 | 61 | } |
| 35 | 62 | |
| 36 | 63 | /** |
| 37 | 64 | * Registers hooks for Structured Data Blocks with WordPress. |
| 65 | + * | |
| 66 | + * @return void | |
| 38 | 67 | */ |
| 39 | 68 | public function register_hooks() { |
| 40 | - \add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_block_editor_assets' ] ); | |
| 69 | + $this->register_blocks(); | |
| 41 | 70 | } |
| 42 | 71 | |
| 43 | 72 | /** |
| 44 | - * Enqueue Gutenberg block assets for backend editor. | |
| 73 | + * Registers the blocks. | |
| 74 | + * | |
| 75 | + * @return void | |
| 45 | 76 | */ |
| 46 | - public function enqueue_block_editor_assets() { | |
| 77 | + public function register_blocks() { | |
| 47 | 78 | /** |
| 48 | 79 | * Filter: 'wpseo_enable_structured_data_blocks' - Allows disabling Yoast's schema blocks entirely. |
| 49 | 80 | * |
| 50 | - * @api bool If false, our structured data blocks won't show. | |
| 81 | + * @param bool $enable If false, our structured data blocks won't show. | |
| 51 | 82 | */ |
| 52 | 83 | if ( ! \apply_filters( 'wpseo_enable_structured_data_blocks', true ) ) { |
| 53 | 84 | return; |
| 54 | 85 | } |
| 55 | 86 | |
| 56 | - $this->asset_manager->enqueue_script( 'structured-data-blocks' ); | |
| 57 | - $this->asset_manager->enqueue_style( 'structured-data-blocks' ); | |
| 87 | + \register_block_type( | |
| 88 | + \WPSEO_PATH . 'blocks/structured-data-blocks/faq/block.json', | |
| 89 | + [ | |
| 90 | + 'render_callback' => [ $this, 'optimize_faq_images' ], | |
| 91 | + ], | |
| 92 | + ); | |
| 93 | + \register_block_type( | |
| 94 | + \WPSEO_PATH . 'blocks/structured-data-blocks/how-to/block.json', | |
| 95 | + [ | |
| 96 | + 'render_callback' => [ $this, 'optimize_how_to_images' ], | |
| 97 | + ], | |
| 98 | + ); | |
| 99 | + } | |
| 100 | + | |
| 101 | + /** | |
| 102 | + * Optimizes images in the FAQ blocks. | |
| 103 | + * | |
| 104 | + * @param array $attributes The attributes. | |
| 105 | + * @param string $content The content. | |
| 106 | + * | |
| 107 | + * @return string The content with images optimized. | |
| 108 | + */ | |
| 109 | + public function optimize_faq_images( $attributes, $content ) { | |
| 110 | + if ( ! isset( $attributes['questions'] ) ) { | |
| 111 | + return $content; | |
| 112 | + } | |
| 113 | + | |
| 114 | + return $this->optimize_images( $attributes['questions'], 'answer', $content ); | |
| 115 | + } | |
| 116 | + | |
| 117 | + /** | |
| 118 | + * Transforms the durations into a translated string containing the count, and either singular or plural unit. | |
| 119 | + * For example (in en-US): If 'days' is 1, it returns "1 day". If 'days' is 2, it returns "2 days". | |
| 120 | + * If a number value is 0, we don't output the string. | |
| 121 | + * | |
| 122 | + * @param number $days Number of days. | |
| 123 | + * @param number $hours Number of hours. | |
| 124 | + * @param number $minutes Number of minutes. | |
| 125 | + * @return array Array of pluralized durations. | |
| 126 | + */ | |
| 127 | + private function transform_duration_to_string( $days, $hours, $minutes ) { | |
| 128 | + $strings = []; | |
| 129 | + if ( $days ) { | |
| 130 | + $strings[] = \sprintf( | |
| 131 | + /* translators: %d expands to the number of day/days. */ | |
| 132 | + \_n( '%d day', '%d days', $days, 'wordpress-seo' ), | |
| 133 | + $days, | |
| 134 | + ); | |
| 135 | + } | |
| 136 | + if ( $hours ) { | |
| 137 | + $strings[] = \sprintf( | |
| 138 | + /* translators: %d expands to the number of hour/hours. */ | |
| 139 | + \_n( '%d hour', '%d hours', $hours, 'wordpress-seo' ), | |
| 140 | + $hours, | |
| 141 | + ); | |
| 142 | + } | |
| 143 | + if ( $minutes ) { | |
| 144 | + $strings[] = \sprintf( | |
| 145 | + /* translators: %d expands to the number of minute/minutes. */ | |
| 146 | + \_n( '%d minute', '%d minutes', $minutes, 'wordpress-seo' ), | |
| 147 | + $minutes, | |
| 148 | + ); | |
| 149 | + } | |
| 150 | + return $strings; | |
| 151 | + } | |
| 152 | + | |
| 153 | + /** | |
| 154 | + * Formats the durations into a translated string. | |
| 155 | + * | |
| 156 | + * @param array $attributes The attributes. | |
| 157 | + * @return string The formatted duration. | |
| 158 | + */ | |
| 159 | + private function build_duration_string( $attributes ) { | |
| 160 | + $days = ( $attributes['days'] ?? 0 ); | |
| 161 | + $hours = ( $attributes['hours'] ?? 0 ); | |
| 162 | + $minutes = ( $attributes['minutes'] ?? 0 ); | |
| 163 | + $elements = $this->transform_duration_to_string( $days, $hours, $minutes ); | |
| 164 | + $elements_length = \count( $elements ); | |
| 165 | + | |
| 166 | + switch ( $elements_length ) { | |
| 167 | + case 1: | |
| 168 | + return $elements[0]; | |
| 169 | + case 2: | |
| 170 | + return \sprintf( | |
| 171 | + /* translators: %s expands to a unit of time (e.g. 1 day). */ | |
| 172 | + \__( '%1$s and %2$s', 'wordpress-seo' ), | |
| 173 | + ...$elements, | |
| 174 | + ); | |
| 175 | + case 3: | |
| 176 | + return \sprintf( | |
| 177 | + /* translators: %s expands to a unit of time (e.g. 1 day). */ | |
| 178 | + \__( '%1$s, %2$s and %3$s', 'wordpress-seo' ), | |
| 179 | + ...$elements, | |
| 180 | + ); | |
| 181 | + default: | |
| 182 | + return ''; | |
| 183 | + } | |
| 184 | + } | |
| 185 | + | |
| 186 | + /** | |
| 187 | + * Presents the duration text of the How-To block in the site language. | |
| 188 | + * | |
| 189 | + * @param array $attributes The attributes. | |
| 190 | + * @param string $content The content. | |
| 191 | + * | |
| 192 | + * @return string The content with the duration text in the site language. | |
| 193 | + */ | |
| 194 | + public function present_duration_text( $attributes, $content ) { | |
| 195 | + $duration = $this->build_duration_string( $attributes ); | |
| 196 | + // 'Time needed:' is the default duration text that will be shown if a user doesn't add one. | |
| 197 | + $duration_text = \__( 'Time needed:', 'wordpress-seo' ); | |
| 198 | + | |
| 199 | + if ( isset( $attributes['durationText'] ) && $attributes['durationText'] !== '' ) { | |
| 200 | + $duration_text = $attributes['durationText']; | |
| 201 | + } | |
| 202 | + | |
| 203 | + return \preg_replace( | |
| 204 | + '/(<p class="schema-how-to-total-time">)(<span class="schema-how-to-duration-time-text">.*<\/span>)(.[^\/p>]*)(<\/p>)/', | |
| 205 | + '<p class="schema-how-to-total-time"><span class="schema-how-to-duration-time-text">' . \esc_html( $duration_text ) . ' </span>' . $duration . '</p>', | |
| 206 | + $content, | |
| 207 | + 1, | |
| 208 | + ); | |
| 209 | + } | |
| 210 | + | |
| 211 | + /** | |
| 212 | + * Optimizes images in the How-To blocks. | |
| 213 | + * | |
| 214 | + * @param array $attributes The attributes. | |
| 215 | + * @param string $content The content. | |
| 216 | + * | |
| 217 | + * @return string The content with images optimized. | |
| 218 | + */ | |
| 219 | + public function optimize_how_to_images( $attributes, $content ) { | |
| 220 | + if ( ! isset( $attributes['steps'] ) ) { | |
| 221 | + return $content; | |
| 222 | + } | |
| 223 | + | |
| 224 | + $content = $this->present_duration_text( $attributes, $content ); | |
| 225 | + | |
| 226 | + return $this->optimize_images( $attributes['steps'], 'text', $content ); | |
| 227 | + } | |
| 228 | + | |
| 229 | + /** | |
| 230 | + * Optimizes images in structured data blocks. | |
| 231 | + * | |
| 232 | + * @param array $elements The list of elements from the block attributes. | |
| 233 | + * @param string $key The key in the data to iterate over. | |
| 234 | + * @param string $content The content. | |
| 235 | + * | |
| 236 | + * @return string The content with images optimized. | |
| 237 | + */ | |
| 238 | + private function optimize_images( $elements, $key, $content ) { | |
| 239 | + global $post; | |
| 240 | + if ( ! $post ) { | |
| 241 | + return $content; | |
| 242 | + } | |
| 243 | + | |
| 244 | + $this->add_images_from_attributes_to_used_cache( $post->ID, $elements, $key ); | |
| 245 | + | |
| 246 | + // Then replace all images with optimized versions in the content. | |
| 247 | + $content = \preg_replace_callback( | |
| 248 | + '/<img[^>]+>/', | |
| 249 | + [ $this, 'replace_image_with_optimized_version' ], | |
| 250 | + $content, | |
| 251 | + ); | |
| 252 | + | |
| 253 | + if ( ! $this->registered_shutdown_function ) { | |
| 254 | + \register_shutdown_function( [ $this, 'maybe_save_used_caches' ] ); | |
| 255 | + $this->registered_shutdown_function = true; | |
| 256 | + } | |
| 257 | + | |
| 258 | + return $content; | |
| 259 | + } | |
| 260 | + | |
| 261 | + /** | |
| 262 | + * Replaces an image tag with an optimized version while preserving inline alt text. | |
| 263 | + * | |
| 264 | + * @param string[] $matches The regex matches from preg_replace_callback. | |
| 265 | + * | |
| 266 | + * @return string The optimized image HTML or original if optimization fails. | |
| 267 | + */ | |
| 268 | + private function replace_image_with_optimized_version( $matches ) { | |
| 269 | + \preg_match( '/src="([^"]+)"/', $matches[0], $src_matches ); | |
| 270 | + if ( ! $src_matches || ! isset( $src_matches[1] ) ) { | |
| 271 | + return $matches[0]; | |
| 272 | + } | |
| 273 | + $attachment_id = $this->attachment_src_to_id( $src_matches[1] ); | |
| 274 | + if ( $attachment_id === 0 ) { | |
| 275 | + return $matches[0]; | |
| 276 | + } | |
| 277 | + | |
| 278 | + // Extract the alt text from the original image HTML, only if an alt attribute is present. | |
| 279 | + $has_alt = (bool) \preg_match( '/alt="([^"]*)"/', $matches[0], $alt_matches ); | |
| 280 | + | |
| 281 | + $image_size = 'full'; | |
| 282 | + $image_attrs = [ | |
| 283 | + 'style' => 'max-width: 100%; height: auto;', | |
| 284 | + ]; | |
| 285 | + | |
| 286 | + // Only override alt when the original image had an explicit alt attribute. | |
| 287 | + if ( $has_alt ) { | |
| 288 | + // Decode HTML entities since wp_get_attachment_image() will encode them again. | |
| 289 | + $image_attrs['alt'] = \html_entity_decode( $alt_matches[1], ( \ENT_QUOTES | \ENT_HTML5 ), 'UTF-8' ); | |
| 290 | + } | |
| 291 | + | |
| 292 | + \preg_match( '/style="[^"]*width:\s*(\d+)px[^"]*"/', $matches[0], $style_matches ); | |
| 293 | + if ( $style_matches && isset( $style_matches[1] ) ) { | |
| 294 | + $width = (int) $style_matches[1]; | |
| 295 | + $meta_data = \wp_get_attachment_metadata( $attachment_id ); | |
| 296 | + if ( isset( $meta_data['height'] ) && isset( $meta_data['width'] ) && $meta_data['height'] > 0 && $meta_data['width'] > 0 ) { | |
| 297 | + $aspect_ratio = ( $meta_data['height'] / $meta_data['width'] ); | |
| 298 | + $height = ( $width * $aspect_ratio ); | |
| 299 | + $image_size = [ $width, $height ]; | |
| 300 | + } | |
| 301 | + // When using a specific image size, don't include the style attribute. | |
| 302 | + $image_attrs = []; | |
| 303 | + if ( $has_alt ) { | |
| 304 | + $image_attrs['alt'] = \html_entity_decode( $alt_matches[1], ( \ENT_QUOTES | \ENT_HTML5 ), 'UTF-8' ); | |
| 305 | + } | |
| 306 | + } | |
| 307 | + | |
| 308 | + /** | |
| 309 | + * Filter: 'wpseo_structured_data_blocks_image_size' - Allows adjusting the image size in structured data blocks. | |
| 310 | + * | |
| 311 | + * @since 18.2 | |
| 312 | + * | |
| 313 | + * @param string|int[] $image_size The image size. Accepts any registered image size name, or an array of width and height values in pixels (in that order). | |
| 314 | + * @param int $attachment_id The id of the attachment. | |
| 315 | + * @param string $attachment_src The attachment src. | |
| 316 | + */ | |
| 317 | + $image_size = \apply_filters( | |
| 318 | + 'wpseo_structured_data_blocks_image_size', | |
| 319 | + $image_size, | |
| 320 | + $attachment_id, | |
| 321 | + $src_matches[1], | |
| 322 | + ); | |
| 323 | + $image_html = \wp_get_attachment_image( | |
| 324 | + $attachment_id, | |
| 325 | + $image_size, | |
| 326 | + false, | |
| 327 | + $image_attrs, | |
| 328 | + ); | |
| 329 | + | |
| 330 | + if ( empty( $image_html ) ) { | |
| 331 | + return $matches[0]; | |
| 332 | + } | |
| 333 | + | |
| 334 | + return $image_html; | |
| 335 | + } | |
| 336 | + | |
| 337 | + /** | |
| 338 | + * If the caches of structured data block images have been changed, saves them. | |
| 339 | + * | |
| 340 | + * @return void | |
| 341 | + */ | |
| 342 | + public function maybe_save_used_caches() { | |
| 343 | + foreach ( $this->used_caches as $post_id => $used_cache ) { | |
| 344 | + if ( isset( $this->caches[ $post_id ] ) && $used_cache === $this->caches[ $post_id ] ) { | |
| 345 | + continue; | |
| 346 | + } | |
| 347 | + \update_post_meta( $post_id, 'yoast-structured-data-blocks-images-cache', $used_cache ); | |
| 348 | + } | |
| 349 | + } | |
| 350 | + | |
| 351 | + /** | |
| 352 | + * Converts an attachment src to an attachment ID. | |
| 353 | + * | |
| 354 | + * @param string $src The attachment src. | |
| 355 | + * | |
| 356 | + * @return int The attachment ID. 0 if none was found. | |
| 357 | + */ | |
| 358 | + private function attachment_src_to_id( $src ) { | |
| 359 | + global $post; | |
| 360 | + | |
| 361 | + if ( isset( $this->used_caches[ $post->ID ][ $src ] ) ) { | |
| 362 | + return $this->used_caches[ $post->ID ][ $src ]; | |
| 363 | + } | |
| 364 | + | |
| 365 | + $cache = $this->get_cache_for_post( $post->ID ); | |
| 366 | + if ( isset( $cache[ $src ] ) ) { | |
| 367 | + $this->used_caches[ $post->ID ][ $src ] = $cache[ $src ]; | |
| 368 | + return $cache[ $src ]; | |
| 369 | + } | |
| 370 | + | |
| 371 | + $this->used_caches[ $post->ID ][ $src ] = $this->image_helper->get_attachment_by_url( $src ); | |
| 372 | + return $this->used_caches[ $post->ID ][ $src ]; | |
| 373 | + } | |
| 374 | + | |
| 375 | + /** | |
| 376 | + * Returns the cache from postmeta for a given post. | |
| 377 | + * | |
| 378 | + * @param int $post_id The post ID. | |
| 379 | + * | |
| 380 | + * @return array The images cache. | |
| 381 | + */ | |
| 382 | + private function get_cache_for_post( $post_id ) { | |
| 383 | + if ( isset( $this->caches[ $post_id ] ) ) { | |
| 384 | + return $this->caches[ $post_id ]; | |
| 385 | + } | |
| 386 | + | |
| 387 | + $cache = \get_post_meta( $post_id, 'yoast-structured-data-blocks-images-cache', true ); | |
| 388 | + if ( ! $cache ) { | |
| 389 | + $cache = []; | |
| 390 | + } | |
| 391 | + | |
| 392 | + $this->caches[ $post_id ] = $cache; | |
| 393 | + return $cache; | |
| 394 | + } | |
| 395 | + | |
| 396 | + /** | |
| 397 | + * Adds any images that have their ID in the block attributes to the cache. | |
| 398 | + * | |
| 399 | + * @param int $post_id The post ID. | |
| 400 | + * @param array $elements The elements. | |
| 401 | + * @param string $key The key in the elements we should loop over. | |
| 402 | + * | |
| 403 | + * @return void | |
| 404 | + */ | |
| 405 | + private function add_images_from_attributes_to_used_cache( $post_id, $elements, $key ) { | |
| 406 | + // First, grab all image IDs from the attributes. | |
| 407 | + $images = []; | |
| 408 | + foreach ( $elements as $element ) { | |
| 409 | + // Check if the key "images" exists in any of the elements, grab the image IDs. | |
| 410 | + if ( isset( $element['images'] ) && \is_array( $element['images'] ) && \count( $element['images'] ) > 0 ) { | |
| 411 | + $image_data = $element['images']; | |
| 412 | + foreach ( $image_data as $image ) { | |
| 413 | + if ( ! isset( $image['type'] ) || $image['type'] !== 'img' ) { | |
| 414 | + continue; | |
| 415 | + } | |
| 416 | + | |
| 417 | + if ( ! isset( $image['key'] ) || ! isset( $image['props']['src'] ) ) { | |
| 418 | + continue; | |
| 419 | + } | |
| 420 | + | |
| 421 | + $images[ $image['props']['src'] ] = (int) $image['key']; | |
| 422 | + } | |
| 423 | + } | |
| 424 | + // Don't process the key again if we've already processed the "images" key. | |
| 425 | + if ( ! isset( $element[ $key ] ) || ! \is_array( $element[ $key ] ) || isset( $element['images'] ) ) { | |
| 426 | + continue; | |
| 427 | + } | |
| 428 | + if ( isset( $element[ $key ] ) && \is_array( $element[ $key ] ) ) { | |
| 429 | + foreach ( $element[ $key ] as $part ) { | |
| 430 | + if ( ! \is_array( $part ) || ! isset( $part['type'] ) || $part['type'] !== 'img' ) { | |
| 431 | + continue; | |
| 432 | + } | |
| 433 | + | |
| 434 | + if ( ! isset( $part['key'] ) || ! isset( $part['props']['src'] ) ) { | |
| 435 | + continue; | |
| 436 | + } | |
| 437 | + | |
| 438 | + $images[ $part['props']['src'] ] = (int) $part['key']; | |
| 439 | + } | |
| 440 | + } | |
| 441 | + } | |
| 442 | + | |
| 443 | + if ( isset( $this->used_caches[ $post_id ] ) ) { | |
| 444 | + $this->used_caches[ $post_id ] = \array_merge( $this->used_caches[ $post_id ], $images ); | |
| 445 | + } | |
| 446 | + else { | |
| 447 | + $this->used_caches[ $post_id ] = $images; | |
| 448 | + } | |
| 449 | + } | |
| 450 | + | |
| 451 | + /* DEPRECATED METHODS */ | |
| 452 | + | |
| 453 | + /** | |
| 454 | + * Enqueue Gutenberg block assets for backend editor. | |
| 455 | + * | |
| 456 | + * @deprecated 22.7 | |
| 457 | + * @codeCoverageIgnore | |
| 458 | + * | |
| 459 | + * @return void | |
| 460 | + */ | |
| 461 | + public function enqueue_block_editor_assets() { | |
| 462 | + \_deprecated_function( __METHOD__, 'Yoast SEO 22.7' ); | |
| 58 | 463 | } |
| 59 | 464 | } |
