Skip to content

Commit

Permalink
Add styles to Media & Text block (godaddy-wordpress#1605)
Browse files Browse the repository at this point in the history 
* Initial styles for Media Text styles

* Update style.scss

* Add additional spacing vars

* Tweak style labels

* tweak css for top middle and bottom alignment across styles

* add tests for new extension

* fix test spacing

* Make resize control more accessible

Co-authored-by: AnthonyLedesma <[email protected]>
Co-authored-by: JR Tashjian <[email protected]>
  • Loading branch information
@richtabor @AnthonyLedesma @jrtashjian
3 people authored Sep 3, 2020
1 parent 960d2f3 commit 356437e
Show file tree
Hide file tree
Showing 5 changed files with 281 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import './extensions/button-styles';
import './extensions/button-controls';
import './extensions/image-styles';
import './extensions/cover-styles';
import './extensions/media-text-styles';
import './extensions/lightbox-controls';
import './extensions/replace-image';
import './extensions/image-crop';
Expand Down
6 changes: 5 additions & 1 deletion src/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ $spacing: (
5: 2.5em,
6: 3em,
7: 3.5em,
8: 4em
8: 4em,
9: 4.5em,
10: 7em,
);

// CSS Custom Properties
Expand All @@ -37,6 +39,8 @@ $spacing: (
--coblocks-spacing--6: #{map-get($spacing, 6)};
--coblocks-spacing--7: #{map-get($spacing, 7)};
--coblocks-spacing--8: #{map-get($spacing, 8)};
--coblocks-spacing--9: #{map-get($spacing, 9)};
--coblocks-spacing--10: #{map-get($spacing, 10)};
}

// Colors
Expand Down
33 changes: 33 additions & 0 deletions src/extensions/media-text-styles/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { registerBlockStyle } from '@wordpress/blocks';

registerBlockStyle( 'core/media-text', {
name: 'default',
/* translators: block style */
label: __( 'Default', 'coblocks' ),
isDefault: true,
} );

registerBlockStyle( 'core/media-text', {
name: 'card',
/* translators: block style */
label: __( 'Card', 'coblocks' ),
isDefault: false,
} );

registerBlockStyle( 'core/media-text', {
name: 'overlap',
/* translators: block style */
label: __( 'Overlap', 'coblocks' ),
isDefault: false,
} );

registerBlockStyle( 'core/media-text', {
name: 'outline',
/* translators: block style */
label: __( 'Outline', 'coblocks' ),
isDefault: false,
} );
194 changes: 194 additions & 0 deletions src/extensions/media-text-styles/styles/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
.wp-block-media-text.is-style-card {

.wp-block-media-text__content {
background-color: var(--wp--preset--color--background, #fff);
margin-left: auto;
margin-right: auto;
margin-top: calc(-1 * var(--coblocks-spacing--8, map-get($spacing, 8)));
padding: var(--coblocks-spacing--4, map-get($spacing, 4));
width: 95%;

@include break-small() {
margin-left: initial;
margin-right: initial;
margin-top: initial;
padding: calc(2 * var(--coblocks-spacing--3, map-get($spacing, 3)));
width: initial;
right: 1px;
}

@include break-large() {
padding: calc(2 * var(--coblocks-spacing--6, map-get($spacing, 6)));
}
}

&.has-media-on-the-right .wp-block-media-text__content {
margin-top: initial;
margin-bottom: calc(-1 * var(--coblocks-spacing--8, map-get($spacing, 8)));

@include break-small() {
margin-bottom: 0;
}
}
}

.wp-block-media-text.is-style-overlap {

.wp-block-media-text__content {
margin-top: calc(-1 * var(--coblocks-spacing--4, map-get($spacing, 4)));
margin-left: auto;
margin-right: auto;
width: 90%;

@include break-small() {
margin-top: initial;
margin-left: initial;
margin-right: initial;
width: auto;
}

@include break-small() {
margin-left: calc(-1 * var(--coblocks-spacing--8, map-get($spacing, 8)));
}

@include break-large() {
margin-left: calc(-2 * var(--coblocks-spacing--10, map-get($spacing, 10)));
}
}

&.has-media-on-the-right .wp-block-media-text__content {
margin-left: initial;
margin-right: initial;
margin-top: initial;
width: auto;

@include break-small() {
margin-left: 0;
margin-right: calc(-1 * var(--coblocks-spacing--8, map-get($spacing, 8)));
width: 175%;
}

@include break-large() {
margin-right: calc(-2 * var(--coblocks-spacing--10, map-get($spacing, 10)));
}
}
}


.wp-block-media-text.is-style-card,
.wp-block-media-text.is-style-outline {

.wp-block-media-text__content {

@include break-small() {
margin-left: calc(-1 * var(--coblocks-spacing--10, map-get($spacing, 10)));
}
}

&.has-media-on-the-right .wp-block-media-text__content {

@include break-small() {
margin-left: 0;
margin-right: calc(-1 * var(--coblocks-spacing--10, map-get($spacing, 10)));
}
}
}

.wp-block-media-text.is-style-outline {

.wp-block-media-text__content {
margin-left: auto;
margin-right: auto;
width: 90%;

@include break-small() {
margin-left: calc(-1 * var(--coblocks-spacing--10, map-get($spacing, 10)));
margin-right: inherit;
margin-top: inherit;
width: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
background-color: var(--wp--preset--color--background, #fff);
box-shadow: 0.5rem 0 0 var(--wp--preset--color--background, #fff), -0.5rem 0 0 var(--wp--preset--color--background, #fff);
display: inline;
}

.wp-block-buttons {
margin-top: var(--coblocks-spacing--5, map-get($spacing, 5));
}
}

&.has-media-on-the-right .wp-block-media-text__content {
width: 100%;

@include break-small() {
margin-left: 0.5rem;
width: 175%;
}
}
}

.wp-block-media-text .wp-block-media-text__content *:first-child {
margin-top: 0;
}

// Editor UI adjustments.
.editor-styles-wrapper {

.wp-block-media-text.is-style-card .wp-block-media-text__content {

@include break-small() {
right: 1px;
}
}

.wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__content {

@include break-small() {
left: 1px;
right: initial;
}
}

.wp-block-media-text.is-style-card,
.wp-block-media-text.is-style-overlap,
.wp-block-media-text.is-style-outline {

// Move core's handle out of the way.
.components-resizable-box__handle::after {
top: -8px;
}

&.is-selected .wp-block-media-text__media::after {
background: var(--wp-admin-theme-color, #007cba);
border-radius: 50%;
border: 2px solid $white;
bottom: -7px;
content: "";
cursor: inherit;
display: block;
height: 15px;
position: absolute;
width: 15px;
right: -8px;
z-index: 9999;
}

// Move the handle if the media is on the right.
&.has-media-on-the-right .wp-block-media-text__media::after {
left: -8px;
right: inherit;
}
}

.wp-block-media-text.is-style-outline .wp-block-media-text__content .wp-block.wp-block-buttons {
margin-top: var(--coblocks-spacing--5, map-get($spacing, 5)) !important;
}
}
48 changes: 48 additions & 0 deletions src/extensions/media-text-styles/test/media-text-styles.cypress.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Include our constants
*/
import * as helpers from '../../../../.dev/tests/cypress/helpers';

describe( 'Test CoBlocks Media Text styles extension', function() {
/**
* Test that we can add a media-text block as well as save and use alternate styles.
*/
it( 'Test core/media-text block extends with Media-Text styles extension.', function() {
const { imageBase } = helpers.upload.spec;
helpers.addBlockToPost( 'core/media-text', true );
helpers.upload.imageToBlock( 'core/media-text' );

const selectBlock = () => cy.get( `img[src*="${imageBase}"]` ).click();

cy.get( `img[src*="${imageBase}"]` );
cy.get('.wp-block-media-text__content p').first().type( 'Content' );
selectBlock();

helpers.setBlockStyle( 'card' );
cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-card' ).should('exist');
helpers.savePage();
helpers.checkForBlockErrors( 'core/media-text' );
helpers.viewPage();
cy.get( '.wp-block-media-text.is-style-card' ).should('exist');
helpers.editPage();
selectBlock();

helpers.setBlockStyle( 'overlap' );
cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-overlap' ).should('exist');
helpers.savePage();
helpers.checkForBlockErrors( 'core/media-text' );
helpers.viewPage();
cy.get( '.wp-block-media-text.is-style-overlap' ).should('exist');
helpers.editPage();
selectBlock();


helpers.setBlockStyle( 'outline' );
cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-outline' ).should('exist');
helpers.savePage();
helpers.checkForBlockErrors( 'core/media-text' );
helpers.viewPage();
cy.get( '.wp-block-media-text.is-style-outline' ).should('exist');
helpers.editPage();
} );
} );

0 comments on commit 356437e

Please sign in to comment.