← All changes
|
src/integrations/blocks/structured-data-blocks.php
+233
-136
18.2
→
28.5
View file →
| @@ -44,9 +44,9 @@ | ||
| 44 | 44 | |
| 45 | 45 | /** |
| 46 | 46 | * Whether or not we've registered our shutdown function. |
| 47 | 47 | * |
| 48 | - * @var boolean | |
| 48 | + * @var bool | |
| 49 | 49 | */ |
| 50 | 50 | protected $registered_shutdown_function = false; |
| 51 | 51 | |
| 52 | 52 | /** |
| @@ -54,12 +54,9 @@ | ||
| 54 | 54 | * |
| 55 | 55 | * @param WPSEO_Admin_Asset_Manager $asset_manager The asset manager. |
| 56 | 56 | * @param Image_Helper $image_helper The image helper. |
| 57 | 57 | */ |
| 58 | - public function __construct( | |
| 59 | - WPSEO_Admin_Asset_Manager $asset_manager, | |
| 60 | - Image_Helper $image_helper | |
| 61 | - ) { | |
| 58 | + public function __construct( WPSEO_Admin_Asset_Manager $asset_manager, Image_Helper $image_helper ) { | |
| 62 | 59 | $this->asset_manager = $asset_manager; |
| 63 | 60 | $this->image_helper = $image_helper; |
| 64 | 61 | } |
| 65 | 62 | |
| @@ -64,11 +61,12 @@ | ||
| 64 | 61 | } |
| 65 | 62 | |
| 66 | 63 | /** |
| 67 | 64 | * Registers hooks for Structured Data Blocks with WordPress. |
| 65 | + * | |
| 66 | + * @return void | |
| 68 | 67 | */ |
| 69 | 68 | public function register_hooks() { |
| 70 | - \add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_block_editor_assets' ] ); | |
| 71 | 69 | $this->register_blocks(); |
| 72 | 70 | } |
| 73 | 71 | |
| 74 | 72 | /** |
| @@ -76,102 +74,139 @@ | ||
| 76 | 74 | * |
| 77 | 75 | * @return void |
| 78 | 76 | */ |
| 79 | 77 | public function register_blocks() { |
| 78 | + /** | |
| 79 | + * Filter: 'wpseo_enable_structured_data_blocks' - Allows disabling Yoast's schema blocks entirely. | |
| 80 | + * | |
| 81 | + * @param bool $enable If false, our structured data blocks won't show. | |
| 82 | + */ | |
| 83 | + if ( ! \apply_filters( 'wpseo_enable_structured_data_blocks', true ) ) { | |
| 84 | + return; | |
| 85 | + } | |
| 86 | + | |
| 80 | 87 | \register_block_type( |
| 81 | - 'yoast/faq-block', | |
| 88 | + \WPSEO_PATH . 'blocks/structured-data-blocks/faq/block.json', | |
| 82 | 89 | [ |
| 83 | 90 | 'render_callback' => [ $this, 'optimize_faq_images' ], |
| 84 | - 'attributes' => [ | |
| 85 | - 'className' => [ | |
| 86 | - 'default' => '', | |
| 87 | - 'type' => 'string', | |
| 88 | - ], | |
| 89 | - 'questions' => [ | |
| 90 | - 'type' => 'array', | |
| 91 | - ], | |
| 92 | - 'additionalListCssClasses' => [ | |
| 93 | - 'type' => 'string', | |
| 94 | - ], | |
| 95 | - ], | |
| 96 | - ] | |
| 91 | + ], | |
| 97 | 92 | ); |
| 98 | 93 | \register_block_type( |
| 99 | - 'yoast/how-to-block', | |
| 94 | + \WPSEO_PATH . 'blocks/structured-data-blocks/how-to/block.json', | |
| 100 | 95 | [ |
| 101 | 96 | 'render_callback' => [ $this, 'optimize_how_to_images' ], |
| 102 | - 'attributes' => [ | |
| 103 | - 'hasDuration' => [ | |
| 104 | - 'type' => 'boolean', | |
| 105 | - ], | |
| 106 | - 'days' => [ | |
| 107 | - 'type' => 'string', | |
| 108 | - ], | |
| 109 | - 'hours' => [ | |
| 110 | - 'type' => 'string', | |
| 111 | - ], | |
| 112 | - 'minutes' => [ | |
| 113 | - 'type' => 'string', | |
| 114 | - ], | |
| 115 | - 'description' => [ | |
| 116 | - 'type' => 'array', | |
| 117 | - 'source' => 'children', | |
| 118 | - 'selector' => '.schema-how-to-description', | |
| 119 | - ], | |
| 120 | - 'jsonDescription' => [ | |
| 121 | - 'type' => 'string', | |
| 122 | - ], | |
| 123 | - 'steps' => [ | |
| 124 | - 'type' => 'array', | |
| 125 | - ], | |
| 126 | - 'additionalListCssClasses' => [ | |
| 127 | - 'type' => 'string', | |
| 128 | - ], | |
| 129 | - 'unorderedList' => [ | |
| 130 | - 'type' => 'boolean', | |
| 131 | - ], | |
| 132 | - 'durationText' => [ | |
| 133 | - 'type' => 'string', | |
| 134 | - ], | |
| 135 | - 'defaultDurationText' => [ | |
| 136 | - 'type' => 'string', | |
| 137 | - ], | |
| 138 | - ], | |
| 139 | - ] | |
| 97 | + ], | |
| 140 | 98 | ); |
| 141 | 99 | } |
| 142 | 100 | |
| 143 | 101 | /** |
| 144 | - * Enqueue Gutenberg block assets for backend editor. | |
| 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. | |
| 145 | 108 | */ |
| 146 | - public function enqueue_block_editor_assets() { | |
| 147 | - /** | |
| 148 | - * Filter: 'wpseo_enable_structured_data_blocks' - Allows disabling Yoast's schema blocks entirely. | |
| 149 | - * | |
| 150 | - * @api bool If false, our structured data blocks won't show. | |
| 151 | - */ | |
| 152 | - if ( ! \apply_filters( 'wpseo_enable_structured_data_blocks', true ) ) { | |
| 153 | - return; | |
| 109 | + public function optimize_faq_images( $attributes, $content ) { | |
| 110 | + if ( ! isset( $attributes['questions'] ) ) { | |
| 111 | + return $content; | |
| 154 | 112 | } |
| 155 | 113 | |
| 156 | - $this->asset_manager->enqueue_script( 'structured-data-blocks' ); | |
| 157 | - $this->asset_manager->enqueue_style( 'structured-data-blocks' ); | |
| 114 | + return $this->optimize_images( $attributes['questions'], 'answer', $content ); | |
| 158 | 115 | } |
| 159 | 116 | |
| 160 | 117 | /** |
| 161 | - * Optimizes images in the FAQ blocks. | |
| 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. | |
| 162 | 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 | + * | |
| 163 | 189 | * @param array $attributes The attributes. |
| 164 | 190 | * @param string $content The content. |
| 165 | 191 | * |
| 166 | - * @return string The content with images optimized. | |
| 192 | + * @return string The content with the duration text in the site language. | |
| 167 | 193 | */ |
| 168 | - public function optimize_faq_images( $attributes, $content ) { | |
| 169 | - if ( ! isset( $attributes['questions'] ) ) { | |
| 170 | - return $content; | |
| 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']; | |
| 171 | 201 | } |
| 172 | 202 | |
| 173 | - return $this->optimize_images( $attributes['questions'], 'answer', $content ); | |
| 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 | + ); | |
| 174 | 209 | } |
| 175 | 210 | |
| 176 | 211 | /** |
| 177 | 212 | * Optimizes images in the How-To blocks. |
| @@ -185,8 +220,10 @@ | ||
| 185 | 220 | if ( ! isset( $attributes['steps'] ) ) { |
| 186 | 221 | return $content; |
| 187 | 222 | } |
| 188 | 223 | |
| 224 | + $content = $this->present_duration_text( $attributes, $content ); | |
| 225 | + | |
| 189 | 226 | return $this->optimize_images( $attributes['steps'], 'text', $content ); |
| 190 | 227 | } |
| 191 | 228 | |
| 192 | 229 | /** |
| @@ -208,58 +245,10 @@ | ||
| 208 | 245 | |
| 209 | 246 | // Then replace all images with optimized versions in the content. |
| 210 | 247 | $content = \preg_replace_callback( |
| 211 | 248 | '/<img[^>]+>/', |
| 212 | - function ( $matches ) { | |
| 213 | - \preg_match( '/src="([^"]+)"/', $matches[0], $src_matches ); | |
| 214 | - if ( ! $src_matches || ! isset( $src_matches[1] ) ) { | |
| 215 | - return $matches[0]; | |
| 216 | - } | |
| 217 | - $attachment_id = $this->attachment_src_to_id( $src_matches[1] ); | |
| 218 | - if ( $attachment_id === 0 ) { | |
| 219 | - return $matches[0]; | |
| 220 | - } | |
| 221 | - $image_size = 'full'; | |
| 222 | - \preg_match( '/style="[^"]*width:\s*(\d+)px[^"]*"/', $matches[0], $style_matches ); | |
| 223 | - if ( $style_matches && isset( $style_matches[1] ) ) { | |
| 224 | - $width = (int) $style_matches[1]; | |
| 225 | - $meta_data = \wp_get_attachment_metadata( $attachment_id ); | |
| 226 | - if ( isset( $meta_data['height'] ) && isset( $meta_data['width'] ) && $meta_data['height'] > 0 && $meta_data['width'] > 0 ) { | |
| 227 | - $aspect_ratio = ( $meta_data['height'] / $meta_data['width'] ); | |
| 228 | - $height = ( $width * $aspect_ratio ); | |
| 229 | - $image_size = [ $width, $height ]; | |
| 230 | - } | |
| 231 | - } | |
| 232 | - | |
| 233 | - /** | |
| 234 | - * Filter: 'wpseo_structured_data_blocks_image_size' - Allows adjusting the image size in structured data blocks. | |
| 235 | - * | |
| 236 | - * @since 18.2 | |
| 237 | - * | |
| 238 | - * @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). | |
| 239 | - * @param int $attachment_id The id of the attachment. | |
| 240 | - * @param string $attachment_src The attachment src. | |
| 241 | - */ | |
| 242 | - $image_size = \apply_filters( | |
| 243 | - 'wpseo_structured_data_blocks_image_size', | |
| 244 | - $image_size, | |
| 245 | - $attachment_id, | |
| 246 | - $src_matches[1] | |
| 247 | - ); | |
| 248 | - $image_html = \wp_get_attachment_image( | |
| 249 | - $attachment_id, | |
| 250 | - $image_size, | |
| 251 | - false, | |
| 252 | - [ 'style' => 'max-width: 100%; height: auto;' ] | |
| 253 | - ); | |
| 254 | - | |
| 255 | - if ( empty( $image_html ) ) { | |
| 256 | - return $matches[0]; | |
| 257 | - } | |
| 258 | - | |
| 259 | - return $image_html; | |
| 260 | - }, | |
| 261 | - $content | |
| 249 | + [ $this, 'replace_image_with_optimized_version' ], | |
| 250 | + $content, | |
| 262 | 251 | ); |
| 263 | 252 | |
| 264 | 253 | if ( ! $this->registered_shutdown_function ) { |
| 265 | 254 | \register_shutdown_function( [ $this, 'maybe_save_used_caches' ] ); |
| @@ -269,8 +258,84 @@ | ||
| 269 | 258 | return $content; |
| 270 | 259 | } |
| 271 | 260 | |
| 272 | 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 | + /** | |
| 273 | 338 | * If the caches of structured data block images have been changed, saves them. |
| 274 | 339 | * |
| 275 | 340 | * @return void |
| 276 | 341 | */ |
| @@ -337,24 +402,42 @@ | ||
| 337 | 402 | * |
| 338 | 403 | * @return void |
| 339 | 404 | */ |
| 340 | 405 | private function add_images_from_attributes_to_used_cache( $post_id, $elements, $key ) { |
| 341 | - // First grab all image IDs from the attributes. | |
| 406 | + // First, grab all image IDs from the attributes. | |
| 342 | 407 | $images = []; |
| 343 | 408 | foreach ( $elements as $element ) { |
| 344 | - if ( ! isset( $element[ $key ] ) ) { | |
| 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'] ) ) { | |
| 345 | 426 | continue; |
| 346 | 427 | } |
| 347 | - foreach ( $element[ $key ] as $part ) { | |
| 348 | - if ( ! \is_array( $part ) || ! isset( $part['type'] ) || $part['type'] !== 'img' ) { | |
| 349 | - continue; | |
| 350 | - } | |
| 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 | + } | |
| 351 | 433 | |
| 352 | - if ( ! isset( $part['key'] ) || ! isset( $part['props']['src'] ) ) { | |
| 353 | - continue; | |
| 434 | + if ( ! isset( $part['key'] ) || ! isset( $part['props']['src'] ) ) { | |
| 435 | + continue; | |
| 436 | + } | |
| 437 | + | |
| 438 | + $images[ $part['props']['src'] ] = (int) $part['key']; | |
| 354 | 439 | } |
| 355 | - | |
| 356 | - $images[ $part['props']['src'] ] = (int) $part['key']; | |
| 357 | 440 | } |
| 358 | 441 | } |
| 359 | 442 | |
| 360 | 443 | if ( isset( $this->used_caches[ $post_id ] ) ) { |
| @@ -362,6 +445,20 @@ | ||
| 362 | 445 | } |
| 363 | 446 | else { |
| 364 | 447 | $this->used_caches[ $post_id ] = $images; |
| 365 | 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' ); | |
| 366 | 463 | } |
| 367 | 464 | } |