Skip to content

Commit

Permalink
post rebase fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta committed May 13, 2019
1 parent 32b0141 commit 6c7efc1
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 12 deletions.
38 changes: 31 additions & 7 deletions packages/block-library/src/media-text/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,59 @@
grid-row: 2;
}

.wp-block-media-text.is-vertically-aligned-top {
.block-editor-inner-blocks,
.editor-media-container__resizer {
align-self: start;
}
}
.wp-block-media-text,
.wp-block-media-text.is-vertically-aligned-center {
.block-editor-inner-blocks,
.editor-media-container__resizer {
align-self: center;
}
}

.wp-block-media-text.is-vertically-aligned-bottom {
.block-editor-inner-blocks,
.editor-media-container__resizer {
align-self: end;
}
}

.wp-block-media-text .editor-media-container__resizer {
grid-column: 1;
grid-row: 1;
align-self: center;
// The resizer sets a inline width but as we are using a grid layout,
// we set the width on container.
width: 100% !important;
}

.wp-block-media-text.is-image-fill .editor-media-container__resizer {
// The resizer sets an inline height but for the image fill we set it to full height.
height: 100% !important;
}

.wp-block-media-text.has-media-on-the-right .editor-media-container__resizer {
grid-column: 2;
grid-row: 1;
}

.wp-block-media-text .editor-inner-blocks {
.wp-block-media-text .block-editor-inner-blocks {
word-break: break-word;
grid-column: 2;
grid-row: 1;
text-align: initial;
padding: 0 8% 0 8%;
align-self: center;
}

.wp-block-media-text.has-media-on-the-right .editor-inner-blocks {
.wp-block-media-text.has-media-on-the-right .block-editor-inner-blocks {
grid-column: 1;
grid-row: 1;
}

.wp-block-media-text > .editor-inner-blocks > .editor-block-list__layout > .editor-block-list__block {
.wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
max-width: unset;
}

Expand Down Expand Up @@ -67,7 +91,7 @@ figure.block-library-media-text__media-container {

@media (max-width: #{ ($break-small) }) {
.wp-block-media-text.is-stacked-on-mobile {
.editor-inner-blocks {
.block-editor-inner-blocks {
grid-column: 1;
grid-row: 2;
}
Expand All @@ -77,7 +101,7 @@ figure.block-library-media-text__media-container {
}
}
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
.editor-inner-blocks {
.block-editor-inner-blocks {
grid-column: 1;
grid-row: 1;
}
Expand Down
43 changes: 38 additions & 5 deletions packages/block-library/src/media-text/style.scss
Original file line number Diff line number Diff line change
@@ -1,28 +1,44 @@
.wp-block-media-text {
display: grid;
}

.wp-block-media-text {
grid-template-rows: auto;
grid-template-columns: 50% 1fr;
.has-media-on-the-right {
grid-template-columns: 1fr 50%;
}
}

.wp-block-media-text.is-vertically-aligned-top {
.wp-block-media-text__content,
.wp-block-media-text__media {
align-self: start;
}
}
.wp-block-media-text,
.wp-block-media-text.is-vertically-aligned-center {
.wp-block-media-text__content,
.wp-block-media-text__media {
align-self: center;
}
}

.wp-block-media-text.is-vertically-aligned-bottom {
.wp-block-media-text__content,
.wp-block-media-text__media {
align-self: end;
}
}

.wp-block-media-text .wp-block-media-text__media {
grid-column: 1;
grid-row: 1;
margin: 0;
align-self: center;
}

.wp-block-media-text .wp-block-media-text__content {
grid-column: 2;
grid-row: 1;
word-break: break-word;
padding: 0 8% 0 8%;
align-self: center;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
Expand All @@ -42,6 +58,23 @@
vertical-align: middle;
}

.wp-block-media-text.is-image-fill figure {
height: 100%;
min-height: 250px;
background-size: cover;
}

.wp-block-media-text.is-image-fill figure > img {
// The image is visually hidden but accessible to assistive technologies.
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/*
* Here we here not able to use a mobile first CSS approach.
* Custom widths are set using inline styles, and on mobile,
Expand Down

0 comments on commit 6c7efc1

Please sign in to comment.