-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Media & Text Block: Add image fill option (#14445)
* Add image fill option to Media & Text block * Update label copy * Move imageFillStyles inline * Use identical semantic structure for both image and imageFill * Reset attributes on onSelectMedia * Ensure attributes are reset properly * Remove default for imageFill to prevent tests failing * Add fixtures for image fill tests with/without focal point selected * Visually hide the image but make it accessible to assistive technologies * Remove unnecessary deprecation * Update changelog * Change default background-position to 50%/50% and update fixtures * Updated the transforms snapshot.
- Loading branch information
1 parent
1443f45
commit b3961d0
Showing
17 changed files
with
372 additions
and
52 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
| import { noop } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| InnerBlocks, | ||
| getColorClassName, | ||
| } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { DEFAULT_MEDIA_WIDTH } from './index'; | ||
|
|
||
| export default [ | ||
| { | ||
| attributes: { | ||
| align: { | ||
| type: 'string', | ||
| default: 'wide', | ||
| }, | ||
| backgroundColor: { | ||
| type: 'string', | ||
| }, | ||
| customBackgroundColor: { | ||
| type: 'string', | ||
| }, | ||
| mediaAlt: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'figure img', | ||
| attribute: 'alt', | ||
| default: '', | ||
| }, | ||
| mediaPosition: { | ||
| type: 'string', | ||
| default: 'left', | ||
| }, | ||
| mediaId: { | ||
| type: 'number', | ||
| }, | ||
| mediaUrl: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'figure video,figure img', | ||
| attribute: 'src', | ||
| }, | ||
| mediaType: { | ||
| type: 'string', | ||
| }, | ||
| mediaWidth: { | ||
| type: 'number', | ||
| default: 50, | ||
| }, | ||
| isStackedOnMobile: { | ||
| type: 'boolean', | ||
| default: false, | ||
| }, | ||
| }, | ||
| save( { attributes } ) { | ||
| const { | ||
| backgroundColor, | ||
| customBackgroundColor, | ||
| isStackedOnMobile, | ||
| mediaAlt, | ||
| mediaPosition, | ||
| mediaType, | ||
| mediaUrl, | ||
| mediaWidth, | ||
| } = attributes; | ||
| const mediaTypeRenders = { | ||
| image: () => <img src={ mediaUrl } alt={ mediaAlt } />, | ||
| video: () => <video controls src={ mediaUrl } />, | ||
| }; | ||
| const backgroundClass = getColorClassName( 'background-color', backgroundColor ); | ||
| const className = classnames( { | ||
| 'has-media-on-the-right': 'right' === mediaPosition, | ||
| [ backgroundClass ]: backgroundClass, | ||
| 'is-stacked-on-mobile': isStackedOnMobile, | ||
| } ); | ||
|
|
||
| let gridTemplateColumns; | ||
| if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) { | ||
| gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`; | ||
| } | ||
| const style = { | ||
| backgroundColor: backgroundClass ? undefined : customBackgroundColor, | ||
| gridTemplateColumns, | ||
| }; | ||
| return ( | ||
| <div className={ className } style={ style }> | ||
| <figure className="wp-block-media-text__media" > | ||
| { ( mediaTypeRenders[ mediaType ] || noop )() } | ||
| </figure> | ||
| <div className="wp-block-media-text__content"> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }, | ||
| }, | ||
| ]; |
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
13 changes: 13 additions & 0 deletions
13
packages/e2e-tests/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
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,13 @@ | ||
| <!-- wp:media-text {"mediaType":"image","imageFill":true} --> | ||
| <div class="wp-block-media-text alignwide is-image-fill"> | ||
| <figure class="wp-block-media-text__media" | ||
| style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"> | ||
| <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" | ||
| alt="My alt text" /></figure> | ||
| <div class="wp-block-media-text__content"> | ||
| <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> | ||
| <p class="has-large-font-size">My Content</p> | ||
| <!-- /wp:paragraph --> | ||
| </div> | ||
| </div> | ||
| <!-- /wp:media-text --> |
Oops, something went wrong.