-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add more data about the image as block props in the image block #11973
Changes from 1 commit
4eb7ee5
fe99150
1105451
1c5b8a0
dc8133c
03444d7
fc7c8a6
1aa5b35
2a9fba9
04706dd
08473d8
32d5c8c
cf50aec
e4cfea3
4c49a8d
f9da97f
8cef6ac
84d6866
db48c26
b2bc0e7
f69ec35
009eceb
bf9d58c
51e6c96
174bee0
c26abe2
579cf12
9563082
6efdb5c
a0a6dd9
8e73feb
8535d73
4d2d959
19dad07
87130e4
e2f8007
bf67408
d8d7d6e
e3a99c7
44c7c68
652ac92
078a75b
4be9bee
4b0425f
648811f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -50,7 +50,7 @@ import { compose } from '@wordpress/compose'; | |
* Internal dependencies | ||
*/ | ||
import { createUpgradedEmbedBlock } from '../embed/util'; | ||
import ImageSize, { getBlockWidth } from './image-size'; | ||
import ImageSize from './image-size'; | ||
|
||
/** | ||
* Module constants | ||
|
@@ -124,6 +124,8 @@ class ImageEdit extends Component { | |
const { attributes, setAttributes } = this.props; | ||
const { id, url = '' } = attributes; | ||
|
||
this.setEditWidth(); | ||
|
||
if ( isTemporaryImage( id, url ) ) { | ||
const file = getBlobByURL( url ); | ||
|
||
|
@@ -143,10 +145,8 @@ class ImageEdit extends Component { | |
const { id: prevID, url: prevURL = '' } = prevProps.attributes; | ||
const { id, url = '', fileWidth } = this.props.attributes; | ||
const imageData = this.props.image; | ||
const blockWidth = getBlockWidth(); | ||
|
||
// Store the current block width inside the editor. | ||
this.props.setAttributes( { editWidth: blockWidth } ); | ||
this.setEditWidth(); | ||
|
||
if ( isTemporaryImage( prevID, prevURL ) && ! isTemporaryImage( id, url ) ) { | ||
revokeBlobURL( url ); | ||
|
@@ -201,18 +201,17 @@ class ImageEdit extends Component { | |
isEditing: false, | ||
} ); | ||
|
||
const blockWidth = getBlockWidth(); | ||
let src = media.url; | ||
let img = {}; | ||
let actualWidth; | ||
let actualHeight; | ||
let fileWidth; | ||
let fileHeight; | ||
|
||
if ( media.sizes ) { | ||
// The "full" size is already included in `sizes`. | ||
img = media.sizes.large || media.sizes.full; | ||
src = img.url; | ||
actualWidth = get( img, [ 'actual_size', 'width' ] ) || img.width; | ||
actualHeight = get( img, [ 'actual_size', 'height' ] ) || img.height; | ||
fileWidth = get( img, [ 'actual_size', 'width' ] ) || img.width; | ||
fileHeight = get( img, [ 'actual_size', 'height' ] ) || img.height; | ||
} | ||
|
||
const attr = pickRelevantMediaFiles( media ); | ||
|
@@ -222,9 +221,8 @@ class ImageEdit extends Component { | |
...attr, | ||
|
||
// Not used in the editor, passed to the front-end in block attributes. | ||
fileWidth: actualWidth, | ||
fileHeight: actualHeight, | ||
editWidth: blockWidth, | ||
fileWidth, | ||
fileHeight, | ||
} ); | ||
} | ||
|
||
|
@@ -451,6 +449,18 @@ class ImageEdit extends Component { | |
}; | ||
} | ||
|
||
/** | ||
* Update the block's `editWidth` attribute if not aligned to the current | ||
* `contentWidth` prop. | ||
*/ | ||
setEditWidth() { | ||
const { attributes, setAttributes, contentWidth } = this.props; | ||
const { editWidth } = attributes; | ||
if ( contentWidth !== editWidth ) { | ||
setAttributes( { editWidth: contentWidth } ); | ||
} | ||
} | ||
|
||
getFilename( url ) { | ||
const path = getPath( url ); | ||
if ( path ) { | ||
|
@@ -500,6 +510,7 @@ class ImageEdit extends Component { | |
noticeUI, | ||
toggleSelection, | ||
isRTL, | ||
contentWidth, | ||
} = this.props; | ||
const { | ||
url, | ||
|
@@ -645,17 +656,15 @@ class ImageEdit extends Component { | |
<div className="block-library-image__dimensions__row"> | ||
<ButtonGroup aria-label={ __( 'Image Size' ) }> | ||
{ [ 25, 50, 75, 100 ].map( ( percent ) => { | ||
const blockWidth = getBlockWidth(); | ||
|
||
// Percentage is relative to the block width. | ||
let scaledWidth = Math.round( blockWidth * ( percent / 100 ) ); | ||
let scaledWidth = Math.round( contentWidth * ( percent / 100 ) ); | ||
let isCurrent = false; | ||
|
||
if ( scaledWidth > imageWidth ) { | ||
scaledWidth = imageWidth; | ||
isCurrent = percent === 100 && ( ! width || width === scaledWidth ); | ||
} else { | ||
isCurrent = ( width === scaledWidth ) || ( ! width && percent === 100 && imageWidth > blockWidth ); | ||
isCurrent = ( width === scaledWidth ) || ( ! width && percent === 100 && imageWidth > contentWidth ); | ||
} | ||
|
||
return ( | ||
|
@@ -755,17 +764,16 @@ class ImageEdit extends Component { | |
|
||
// Floating a resized image can produce inaccurate `imageWidthWithinContainer`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not really sure what this comment has to do with the logic which follows it. If There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Uh, this comment seems left over from previous iterations... At some point it was using the imageWidthWithinContainer. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Removed in a0a6dd9 |
||
const ratio = imageWidth / imageHeight; | ||
const blockWidth = getBlockWidth(); | ||
let constrainedWidth; | ||
let constrainedHeight; | ||
|
||
if ( ( align === 'wide' || align === 'full' ) && imageWidthWithinContainer > blockWidth ) { | ||
if ( ( align === 'wide' || align === 'full' ) && imageWidthWithinContainer > contentWidth ) { | ||
// Do not limit the width. | ||
constrainedWidth = imageWidthWithinContainer; | ||
constrainedHeight = imageHeightWithinContainer; | ||
} else { | ||
constrainedWidth = width || imageWidth; | ||
constrainedWidth = constrainedWidth > blockWidth ? blockWidth : constrainedWidth; | ||
constrainedWidth = constrainedWidth > contentWidth ? contentWidth : constrainedWidth; | ||
constrainedHeight = Math.round( constrainedWidth / ratio ) || undefined; | ||
} | ||
|
||
|
@@ -859,7 +867,7 @@ class ImageEdit extends Component { | |
newWidth = imageWidth; | ||
} | ||
|
||
if ( newWidth >= blockWidth ) { | ||
if ( newWidth >= contentWidth ) { | ||
// The image was resized to greater than the block width. Reset to 100% width and height (that will also highlight the 100% width button). | ||
this.resetWidthHeight( imageWidth, imageHeight ); | ||
} else { | ||
|
@@ -898,13 +906,21 @@ export default compose( [ | |
const { getMedia } = select( 'core' ); | ||
const { getEditorSettings } = select( 'core/editor' ); | ||
const { id } = props.attributes; | ||
const { maxWidth, isRTL, imageSizes } = getEditorSettings(); | ||
const { | ||
maxWidth, | ||
isRTL, | ||
imageSizes, | ||
// Note: At the time of implementation, this value will never be | ||
// found in settings and always default to the hard-coded value. | ||
contentWidth = 580, | ||
} = getEditorSettings(); | ||
|
||
return { | ||
image: id ? getMedia( id ) : null, | ||
maxWidth, | ||
isRTL, | ||
imageSizes, | ||
contentWidth, | ||
}; | ||
} ), | ||
withViewportMatch( { isLargeViewport: 'medium' } ), | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why are we pulling this out? it's still confusing me and makes me think there's something else going on even though to the best of my knowledge there's nothing happening. we can still set the
url
attributes in thesetAttributes()
call just by adding it after...pickRelevantMediaFiles( media )
and then it won't be splitting the computation or providing a point where we could introduce a data consistency bugThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm, this is actually not needed any more as now
pickRelevantMediaFiles()
properly gets the "large" size of the image if it exists. That was the same "fix". (Had to update this pr after the other was merged, sorry)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reintegrated into spread in 8535d73