Skip to content
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

Closed
wants to merge 45 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
4eb7ee5
Add fileWidth, fileHeight, userSet, editWidth props
azaozz Nov 16, 2018
fe99150
Merge branch 'master' into fix/image-block-add-props
azaozz Nov 16, 2018
1105451
Fix upscaling
azaozz Nov 16, 2018
1c5b8a0
Fix param/prop names
azaozz Nov 16, 2018
dc8133c
Merge branch 'master' into fix/image-block-add-props
azaozz Nov 17, 2018
03444d7
Better filter name, allow valueless attributes
azaozz Nov 17, 2018
fc7c8a6
Merge branch 'master' into fix/image-block-add-props
aduth Nov 20, 2018
1aa5b35
Compat: Resolve PHP lint errors
aduth Nov 20, 2018
2a9fba9
Compat: Correct closing img tag
aduth Nov 20, 2018
04706dd
Compat: Allow optional space after img tag name
aduth Nov 20, 2018
08473d8
Compat: PHPDoc formatting and arrangement style
aduth Nov 20, 2018
32d5c8c
Blocks: Use Math.round for image rounding
aduth Nov 20, 2018
cf50aec
Blocks: Add deprecation for attribute-sourced URL, alt
aduth Nov 20, 2018
e4cfea3
Blocks: Use hard-coded content width for block width
aduth Nov 20, 2018
4c49a8d
Blocks: Limit editWith assignment to insert, resize
aduth Nov 20, 2018
f9da97f
Blocks: Rename Image userSet to userSetDimensions
aduth Nov 20, 2018
8cef6ac
Blocks: Remove redundant userSetDimensions normalization
aduth Nov 20, 2018
84d6866
Blocks: Document constrainImageDimensions as ported from PHP
aduth Nov 20, 2018
db48c26
Blocks: Avoid mutative, unused Array#map result
aduth Nov 20, 2018
b2bc0e7
Block: Avoid overloading Image block updateImageURL
aduth Nov 20, 2018
f69ec35
Blocks: Fix Image accidental inline tab character
aduth Nov 20, 2018
009eceb
Compat: Avoid assumption of ID as non-last attribute of image
aduth Nov 20, 2018
bf9d58c
Compat: Document image block RegEx as temporary solution
aduth Nov 20, 2018
51e6c96
Blocks: Pick url, alt in raw transform from image node
aduth Nov 20, 2018
174bee0
Framework: Regenerate fixtures
aduth Nov 20, 2018
c26abe2
Blocks: Update image fixtures per url, alt as comment attributes
aduth Nov 20, 2018
579cf12
Compat: Align PHPDoc return
aduth Nov 20, 2018
9563082
Compat: Add PHPDoc since tag
aduth Nov 20, 2018
6efdb5c
Merge branch 'master' into fix/image-block-add-props
aduth Nov 20, 2018
a0a6dd9
Blocks: Remove outdated comment about floated images width accuracy
aduth Nov 20, 2018
8e73feb
Compat: Remove any attributes containing invalid characters
aduth Nov 20, 2018
8535d73
Blocks: Reintegrate media attributes pick to setAttributes spread
aduth Nov 20, 2018
4d2d959
Blocks: Set Image fileWidth, fileHeight only if both present
aduth Nov 20, 2018
19dad07
Compat: Use spec standard for valid attribute characters
aduth Nov 20, 2018
87130e4
Editor: Compute expected block width by DOM compute
aduth Nov 20, 2018
e2f8007
Compat: Always write img attribute value, even empty
aduth Nov 20, 2018
bf67408
Blocks: Avoid multiple calls to setAttributes in resetWidthHeight
aduth Nov 20, 2018
d8d7d6e
Update the 25-50-75-100% buttons
azaozz Nov 23, 2018
e3a99c7
Check only for valid HTML 5.0 attribute names
azaozz Nov 24, 2018
44c7c68
Update handling of "wide" and "full" alignment for the front-end
azaozz Nov 24, 2018
652ac92
Merge master
azaozz Nov 24, 2018
078a75b
Update `const getBlockWidth` to get the width from `div.editor-block-…
azaozz Nov 24, 2018
4be9bee
Fix typo in https://github.com/WordPress/gutenberg/pull/11973/commits…
azaozz Nov 25, 2018
4b0425f
Fix missing space to make wpcs happy
azaozz Nov 25, 2018
648811f
Update `gutenberg_render_block_core_image()`
azaozz Nov 28, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Blocks: Use hard-coded content width for block width
  • Loading branch information
aduth committed Nov 20, 2018
commit e4cfea37d57f78922d6eb0f6b9797b92077034ea
58 changes: 37 additions & 21 deletions packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 );

Expand All @@ -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 );
Expand Down Expand Up @@ -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 );
Copy link
Member

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 the setAttributes() 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 bug

Copy link
Contributor Author

@azaozz azaozz Nov 20, 2018

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)

Copy link
Member

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

Expand All @@ -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,
} );
}

Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -500,6 +510,7 @@ class ImageEdit extends Component {
noticeUI,
toggleSelection,
isRTL,
contentWidth,
} = this.props;
const {
url,
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -755,17 +764,16 @@ class ImageEdit extends Component {

// Floating a resized image can produce inaccurate `imageWidthWithinContainer`.
Copy link
Member

Choose a reason for hiding this comment

The 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 imageWidthWithinContainer is producing an inaccurate value, should that be corrected from within ImageSize ? I don't really see how it has any impact one way or the other on how it's used here though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.

Copy link
Member

Choose a reason for hiding this comment

The 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.

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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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' } ),
Expand Down
5 changes: 0 additions & 5 deletions packages/block-library/src/image/image-size.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@ import { noop } from 'lodash';
import { withGlobalEvents } from '@wordpress/compose';
import { Component } from '@wordpress/element';

export function getBlockWidth() {
const node = document.querySelector( 'div.editor-block-list__block' );
return node && node.clientWidth - 30;
}

class ImageSize extends Component {
constructor() {
super( ...arguments );
Expand Down