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

Improve image figure widths, remove inline styles #5973

Merged
merged 4 commits into from
Apr 13, 2018
Merged

Improve image figure widths, remove inline styles #5973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
418342d
Fix various image width problems
Apr 4, 2018
a0178b0
Remove inline style for unscaled images.
Apr 4, 2018
2a1b983
Restore float widths for blocks without intrinsice width
jasmussen Apr 11, 2018
6d6c954
Remove inline style on figure for scaled images
jasmussen Apr 11, 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
8 changes: 8 additions & 0 deletions blocks/library/cover-image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,12 @@
height: inherit;
}

// Apply max-width to floated items that have no intrinsic width
[data-align="left"] &,
[data-align="right"] &,
&.alignleft,
&.alignright {
max-width: $content-width / 2;
width: 100%;
}
}
9 changes: 9 additions & 0 deletions blocks/library/embed/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,12 @@
text-align: center;
font-size: $default-font-size;
}

// Apply max-width to floated items that have no intrinsic width
.editor-block-list__block[data-type="core/embed"][data-align="left"] .editor-block-list__block-edit,
.editor-block-list__block[data-type="core/embed"][data-align="right"] .editor-block-list__block-edit,
.wp-block-embed.alignleft,
.wp-block-embed.alignright {
max-width: $content-width / 2;
width: 100%;
}
14 changes: 10 additions & 4 deletions blocks/library/gallery/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.wp-block-gallery,
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright,
.wp-block-gallery.aligncenter {
.wp-block-gallery {
display: flex;
flex-wrap: wrap;
list-style-type: none;
Expand Down Expand Up @@ -78,4 +75,13 @@
}
}
}

// Apply max-width to floated items that have no intrinsic width
[data-align="left"] &,
[data-align="right"] &,
&.alignleft,
&.alignright {
max-width: $content-width / 2;
width: 100%;
}
}
10 changes: 1 addition & 9 deletions blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,16 +170,8 @@ export const settings = {
/>
);

let figureStyle = {};

if ( width ) {
figureStyle = { width };
} else if ( align === 'left' || align === 'right' ) {
figureStyle = { maxWidth: '50%' };
}

return (
<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
<figure className={ align ? `align${ align }` : null }>
{ href ? <a href={ href }>{ image }</a> : image }
{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
</figure>
Expand Down
1 change: 1 addition & 0 deletions blocks/library/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.wp-block-image {
width: fit-content;
figcaption {
margin-top: 0.5em;
color: $dark-gray-300;
Expand Down
1 change: 1 addition & 0 deletions components/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
justify-content: center;
padding: 1em;
min-height: 200px;
width: 100%;
text-align: center;
font-family: $default-font;
font-size: $default-font-size;
Expand Down
22 changes: 6 additions & 16 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,21 +273,6 @@
}
}

// Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
&[data-align="left"],
&[data-align="right"] {
> .editor-block-list__block-edit {
max-width: 360px;
width: 100%;
}

// reset when data-resized
&[data-resized="true"] > .editor-block-list__block-edit {
max-width: none;
width: auto;
}
}

// Left
&[data-align="left"] {
.editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated
Expand Down Expand Up @@ -319,7 +304,7 @@

// Full-wide
&[data-align="full"] {

// compensate for main container padding
@include break-small() {
margin-left: -$block-side-ui-padding;
Expand All @@ -334,6 +319,11 @@
margin-left: -$block-side-ui-padding - $block-padding;
margin-right: -$block-side-ui-padding - $block-padding;
}

// this explicitly sets the width of the block, to override the fit-content from the image block
figure {
width: 100%;
}
}

> .editor-block-list__block-edit:before {
Expand Down