-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add featured image to Media & Text block (#51491)
* Add featured image to Media & Text block * Try adding the featured image option to the toolbar (replace flow) * fix JS warning in templates where there is no featured image. * Add deprecation, update fixtures * Try adding index.php * Index.php: use the $content and only replace the image source and the image background position. * Update index.php * Update index.php * Add alt and class names to the image tag * Fix white space issue * Add a placeholder for the featured image * Remove the deprecation * Add condition with useFeaturedImage, remove alt text option from placeholder * Set a minimum height for the placeholder image * Remove set_attribute 'alt' from index.php. * Update editor.scss * Update packages/block-library/src/media-text/index.php Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Update packages/block-library/src/media-text/media-container.js Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Try removing the image mediaType and inserting the img tag in index.php. * CS fix Adjust spacing. * Add condition to save.js. * CS: Remove the truthy default value for withIllustration in media-text/media-container.js * Update the condition that outputs the img tag Only output the img tag if there is a mediaURL. The mediaURL is required because img tags without a src attribute is invalid HTML. --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
- Loading branch information
Showing
10 changed files
with
215 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <?php | ||
| /** | ||
| * Server-side rendering of the `core/media-text` block. | ||
| * | ||
| * @package WordPress | ||
| */ | ||
|
|
||
| /** | ||
| * Renders the `core/media-text` block on server. | ||
| * | ||
| * @param array $attributes The block attributes. | ||
| * @param string $content The block rendered content. | ||
| * | ||
| * @return string Returns the Media & Text block markup, if useFeaturedImage is true. | ||
| */ | ||
| function render_block_core_media_text( $attributes, $content ) { | ||
| if ( false === $attributes['useFeaturedImage'] ) { | ||
| return $content; | ||
| } | ||
|
|
||
| if ( in_the_loop() ) { | ||
| update_post_thumbnail_cache(); | ||
| } | ||
|
|
||
| $current_featured_image = get_the_post_thumbnail_url(); | ||
| if ( ! $current_featured_image ) { | ||
| return $content; | ||
| } | ||
|
|
||
| $image_tag = '<figure class="wp-block-media-text__media"><img>'; | ||
| $content = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content ); | ||
|
|
||
| $processor = new WP_HTML_Tag_Processor( $content ); | ||
| if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) { | ||
| $position = '50% 50%'; | ||
| if ( isset( $attributes['focalPoint'] ) ) { | ||
| $position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; | ||
| } | ||
| $processor->next_tag( 'figure' ); | ||
| $processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' ); | ||
| } | ||
| $processor->next_tag( 'img' ); | ||
| $media_size_slug = 'full'; | ||
| if ( isset( $attributes['mediaSizeSlug'] ) ) { | ||
| $media_size_slug = $attributes['mediaSizeSlug']; | ||
| } | ||
| $processor->set_attribute( 'src', esc_url( $current_featured_image ) ); | ||
| $processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); | ||
|
|
||
| $content = $processor->get_updated_html(); | ||
|
|
||
| return $content; | ||
| } | ||
|
|
||
| /** | ||
| * Registers the `core/media-text` block renderer on server. | ||
| */ | ||
| function register_block_core_media_text() { | ||
| register_block_type_from_metadata( | ||
| __DIR__ . '/media-text', | ||
| array( | ||
| 'render_callback' => 'render_block_core_media_text', | ||
| ) | ||
| ); | ||
| } | ||
| add_action( 'init', 'register_block_core_media_text' ); |
Oops, something went wrong.