+ { img }
+
+
+ );
+ }
+
+ const currentWidth =
+ width || imageWidthWithinContainer;
+ const currentHeight =
+ height || imageHeightWithinContainer;
+
+ const ratio = imageWidth / imageHeight;
+ const minWidth =
+ imageWidth < imageHeight
+ ? MIN_SIZE
+ : MIN_SIZE * ratio;
+ const minHeight =
+ imageHeight < imageWidth
+ ? MIN_SIZE
+ : MIN_SIZE / ratio;
+
+ // With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
+ // In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
+ // The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
+ // This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
+ // @todo It would be good to revisit this once a content-width variable becomes available.
+ const maxWidthBuffer = maxWidth * 2.5;
+
+ let showRightHandle = false;
+ let showLeftHandle = false;
+
+ /* eslint-disable no-lonely-if */
+ // See https://github.com/WordPress/gutenberg/issues/7584.
+ if ( align === 'center' ) {
+ // When the image is centered, show both handles.
+ showRightHandle = true;
+ showLeftHandle = true;
+ } else if ( isRTL ) {
+ // In RTL mode the image is on the right by default.
+ // Show the right handle and hide the left handle only when it is aligned left.
+ // Otherwise always show the left handle.
+ if ( align === 'left' ) {
+ showRightHandle = true;
+ } else {
+ showLeftHandle = true;
+ }
+ } else {
+ // Show the left handle and hide the right handle only when the image is aligned right.
+ // Otherwise always show the right handle.
+ if ( align === 'right' ) {
+ showLeftHandle = true;
+ } else {
+ showRightHandle = true;
+ }
+ }
+ /* eslint-enable no-lonely-if */
- if (
- ! isResizable ||
- ! imageWidthWithinContainer
- ) {
return (
<>
{ getInspectorControls(
imageWidth,
imageHeight
) }
-
+ {
+ onResizeStop();
+ setAttributes( {
+ width: parseInt(
+ currentWidth +
+ delta.width,
+ 10
+ ),
+ height: parseInt(
+ currentHeight +
+ delta.height,
+ 10
+ ),
+ } );
+ } }
+ >
{ img }
-
+
);
- }
-
- const currentWidth =
- width || imageWidthWithinContainer;
- const currentHeight =
- height || imageHeightWithinContainer;
-
- const ratio = imageWidth / imageHeight;
- const minWidth =
- imageWidth < imageHeight
- ? MIN_SIZE
- : MIN_SIZE * ratio;
- const minHeight =
- imageHeight < imageWidth
- ? MIN_SIZE
- : MIN_SIZE / ratio;
-
- // With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
- // In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
- // The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
- // This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
- // @todo It would be good to revisit this once a content-width variable becomes available.
- const maxWidthBuffer = maxWidth * 2.5;
-
- let showRightHandle = false;
- let showLeftHandle = false;
-
- /* eslint-disable no-lonely-if */
- // See https://github.com/WordPress/gutenberg/issues/7584.
- if ( align === 'center' ) {
- // When the image is centered, show both handles.
- showRightHandle = true;
- showLeftHandle = true;
- } else if ( isRTL ) {
- // In RTL mode the image is on the right by default.
- // Show the right handle and hide the left handle only when it is aligned left.
- // Otherwise always show the left handle.
- if ( align === 'left' ) {
- showRightHandle = true;
- } else {
- showLeftHandle = true;
+ } }
+