Skip to content

Commit

Permalink
Revert the part that limits caption width on unresized images
Browse files Browse the repository at this point in the history
We have a plethora of different combinations of images and captions.

Floated images with captions, non floated images with captions, small images with captions, etc. etc.

In general we use a `display: table;` trick to get the caption to size itself according to the image. However if an unfloated image follows a floated image, this means the unfloated image can size itself down to "fit in the available space", which is not what we want. So for now, if you upload a small image and _don't_ float it, a wide caption will be as centered as the block itself.

This might be worth revisiting, but at this point I'd like to look at that separately from this PR which is already big.
  • Loading branch information
jasmussen committed Aug 20, 2018
1 parent 888fecb commit 35bf4c1
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 13 deletions.
2 changes: 1 addition & 1 deletion packages/block-library/src/image/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
}

// This is similar to above but for resized unfloated images only, where the markup is different.
[data-type="core/image"] .editor-block-list__block-edit figure:not(.alignfull):not(.alignwide) {
[data-type="core/image"] .editor-block-list__block-edit figure.is-resized {
margin: 0;
display: table;

Expand Down
12 changes: 0 additions & 12 deletions packages/block-library/src/image/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,3 @@
@include caption-style();
}
}

// Resized images that are not floated, so they need the caption trick too.
// These apply the .wp-block-image class on the <figure> element itself.
figure.wp-block-image {
display: table;
margin: 0;

> figcaption {
display: table-caption;
caption-side: bottom;
}
}

0 comments on commit 35bf4c1

Please sign in to comment.