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.

Sign up for GitHub

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

Fix image caption margins #9566

Merged
merged 1 commit into from
Sep 5, 2018
Merged

Fix image caption margins #9566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions edit-post/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@

@mixin caption-style() {
margin-top: 0.5em;
margin-bottom: 1em;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary for themes that zero out the margin on the figure, which many themes do.

Could be worth visiting separately, adding a default margin to the image block, so they don't all stack up next to each other. Or not? Maybe that's squarely theme territory. Could be a theme.scss property?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary for themes that zero out the margin on the figure, which many themes do.

Good call, this makes sure things don't look broken out of the box on many themes (TwentyFifteen, Independent Publisher 2, etc.)

Could be worth visiting separately, adding a default margin to the image block, so they don't all stack up next to each other. Or not? Maybe that's squarely theme territory. Could be a theme.scss property?

This is definitely worth exploring. Ideally, images inserted via Gutenberg (inside of figure/div wrappers) are styled exactly like images inserted normally (without those wrappers). Not sure the right answer, but it's worth an exploration.

color: $dark-gray-300;
text-align: center;
font-size: $default-font-size;
Expand Down
10 changes: 7 additions & 3 deletions packages/block-library/src/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@
.aligncenter,
&.is-resized {
display: table;
margin: 0;

// The figure is born with left and right margin.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note the removal of top and bottom margin rules. We let the theme handle those.

The figure is born with left and right margins, though, and unless we zero them out left/right/fullwide images will look weird.

// We remove this by default, and then customize it for left, right, and center.
margin-left: 0;
margin-right: 0;

> figcaption {
display: table-caption;
Expand All @@ -38,9 +42,9 @@
margin-left: 1em;
}

// Centered images.
.aligncenter {
margin: 0 auto;
margin-left: auto;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We still need to customize the centering, but rules here were rewritten to refer to the previous rules above.

margin-right: auto;
}

// Supply caption styles to images, even if the theme hasn't opted in.
Expand Down