Skip to content

Commit

Permalink
Migrate shape divider block to a server-rendered block (#2107)
Browse files Browse the repository at this point in the history
* Start deprecating for server-rendered solution

* disable tests for now

* Gut the block

* Fix flip controls

* Moar cleanup

* Remove inline color picker

* moar cleanup

* Migrate to UnitControl

* Implement server-rendered shape-divider block

* Re-enable and fix tests

* Re-apply margin toggles

* Clean up tests

* Add new phpunit tests

* removed submodule that I have no idea was added

* Fix failing cypress tests
  • Loading branch information
jrtashjian committed Oct 20, 2021
1 parent 2c032b6 commit 769eb86
Show file tree
Hide file tree
Showing 18 changed files with 455 additions and 582 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ public function test_styles_frontend() {

$post = get_post( $post_id );

$this->assertEquals( '.element > div {height:300px;}@media only screen and (max-width: 768px) {.element > div {:height: 300px; color: green;;}}@media only screen and (max-width: 514px) {.element > div {:height: 200px; color: red;;}}@media only screen and (max-width: 768px) {.divider_key > [class*="__inner"]:not(.is-fullscreen) {min-height:200px !important}}@media only screen and (max-width: 514px) {.divider_key > [class*="__inner"]:not(.is-fullscreen) {min-height:300px !important}}@media only screen and (max-width: 768px) {.divider_key > .wp-block-coblocks-shape-divider__svg-wrapper {min-height:300px !important}}@media only screen and (max-width: 514px) {.divider_key > .wp-block-coblocks-shape-divider__svg-wrapper {min-height:400px !important}}@media only screen and (max-width: 768px) {.divider_key > .wp-block-coblocks-shape-divider__alt-wrapper {min-height:400px !important}}@media only screen and (max-width: 514px) {.divider_key > .wp-block-coblocks-shape-divider__alt-wrapper {min-height:500px !important}}', $this->coblocks_generated_styles->styles() );
$this->assertEquals( '.element > div {height:300px;}@media only screen and (max-width: 768px) {.element > div {:height: 300px; color: green;;}}@media only screen and (max-width: 514px) {.element > div {:height: 200px; color: red;;}}@media only screen and (max-width: 768px) {.divider_key > [class*="__inner"]:not(.is-fullscreen) {min-height:200px !important}}@media only screen and (max-width: 514px) {.divider_key > [class*="__inner"]:not(.is-fullscreen) {min-height:300px !important}}@media only screen and (max-width: 768px) {}@media only screen and (max-width: 514px) {}@media only screen and (max-width: 768px) {}@media only screen and (max-width: 514px) {}', $this->coblocks_generated_styles->styles() );

}
}
142 changes: 142 additions & 0 deletions .dev/tests/phpunit/src/blocks/shape-divider/test-index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<?php
/**
* Test src/blocks/shape-divider/index.php
*
* @package CoBlocks
*/
class CoBlocks_Shape_Divider_Index_Tests extends WP_UnitTestCase {

public function setUp() {
parent::setUp();

include_once COBLOCKS_PLUGIN_DIR . 'src/blocks/shape-divider/index.php';
set_current_screen( 'edit-post' );
}

public function tearDown() {
parent::tearDown();

unset( $GLOBALS['current_screen'] );
}

/**
* Test that block renders with default attributes.
*/
public function test_coblocks_render_block_shape_divider_returns_default_block_with_default_attributes() {
$rendered_block = coblocks_render_block_shape_divider( array() );

$this->assertContains( 'class="wp-block-coblocks-shape-divider mt-0 mb-0" style="color: #111;"', $rendered_block );
$this->assertContains( 'class="wp-block-coblocks-shape-divider__svg-wrapper" style="height:100px;"', $rendered_block );
$this->assertContains( 'svg class="divider--wavy"', $rendered_block );
$this->assertContains( 'class="wp-block-coblocks-shape-divider__alt-wrapper" style="height:50px;"', $rendered_block );

// Test passing the default attributes renders exactly the same as no attributes.
$rendered_block = coblocks_render_block_shape_divider( array(
'shapeHeight' => '100px',
'backgroundHeight' => '50px',
'customColor' => '#111',
'noBottomMargin' => true,
'noTopMargin' => true,
) );

$this->assertContains( 'class="wp-block-coblocks-shape-divider mt-0 mb-0" style="color: #111;"', $rendered_block );
$this->assertContains( 'class="wp-block-coblocks-shape-divider__svg-wrapper" style="height:100px;"', $rendered_block );
$this->assertContains( 'svg class="divider--wavy"', $rendered_block );
$this->assertContains( 'class="wp-block-coblocks-shape-divider__alt-wrapper" style="height:50px;"', $rendered_block );
}

/**
* Test that the block renders color classes or custom styles.
*/
public function test_coblocks_render_block_shape_divider_returns_color_classes_or_styles() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider has-primary-color mt-0 mb-0" style=""',
coblocks_render_block_shape_divider( array( 'color' => 'primary' ) )
);

$this->assertContains(
'class="wp-block-coblocks-shape-divider mt-0 mb-0" style="color: #123;"',
coblocks_render_block_shape_divider( array( 'customColor' => '#123' ) )
);
}

/**
* Test that the block renders background color classes or custom color styles.
*/
public function test_coblocks_render_block_shape_divider_returns_background_color_classes_or_styles() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider has-primary-background-color mt-0 mb-0" style="color: #111;"',
coblocks_render_block_shape_divider( array( 'backgroundColor' => 'primary' ) )
);

$this->assertContains(
'class="wp-block-coblocks-shape-divider mt-0 mb-0" style="color: #111; background-color: #123;"',
coblocks_render_block_shape_divider( array( 'customBackgroundColor' => '#123' ) )
);
}

/**
* Test that the block renders vertically flipped class.
*/
public function test_coblocks_render_block_shape_divider_returns_vertically_flipped_class() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider is-vertically-flipped mt-0 mb-0" style="color: #111;"',
coblocks_render_block_shape_divider( array( 'verticalFlip' => true ) )
);
}

/**
* Test that the block renders vertically flipped class.
*/
public function test_coblocks_render_block_shape_divider_returns_horizontally_flipped_class() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider is-horizontally-flipped mt-0 mb-0" style="color: #111;"',
coblocks_render_block_shape_divider( array( 'horizontalFlip' => true ) )
);
}

/**
* Test that the block renders a custom height styles.
*/
public function test_coblocks_render_block_shape_divider_returns_custom_shape_height() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider__svg-wrapper" style="height:123px;"',
coblocks_render_block_shape_divider( array( 'shapeHeight' => '123px' ) )
);
$this->assertContains(
'class="wp-block-coblocks-shape-divider__alt-wrapper" style="height:123px;"',
coblocks_render_block_shape_divider( array( 'backgroundHeight' => '123px' ) )
);
}

/**
* Test that the block renders margin classes.
*/
public function test_coblocks_render_block_shape_divider_returns_margin_classes() {
$this->assertContains(
'class="wp-block-coblocks-shape-divider mt-0" style="color: #111;"',
coblocks_render_block_shape_divider( array( 'noBottomMargin' => false ) )
);
$this->assertContains(
'class="wp-block-coblocks-shape-divider mb-0" style="color: #111;"',
coblocks_render_block_shape_divider( array( 'noTopMargin' => false ) )
);
}

/**
* Test the file actions are hooked properly.
*/
public function test_file_actions() {
$actions = [
[ 'init', 'coblocks_register_block_shape_divider' ],
];

foreach ( $actions as $action_data ) {
if ( ! has_action( $action_data[0], $action_data[1] ) ) {
$this->fail( "$action_data[0] is not attached to $action_data[1]." );
}
}

$this->assertTrue( true );
}
}
21 changes: 0 additions & 21 deletions includes/class-coblocks-generated-styles.php
Original file line number Diff line number Diff line change
Expand Up @@ -148,30 +148,9 @@ public function styles() {
$output .= 'min-height:' . $divider_el_obj->heightTablet . 'px !important'; // @codingStandardsIgnoreLine
$output .= '}';
}

if ( 'shapeHeight' === $divider_element && isset( $divider_el_obj->heightTablet ) ) { // @codingStandardsIgnoreLine
$output .= sprintf( '.%1$s > .wp-block-coblocks-shape-divider__svg-wrapper {', esc_attr( $divider_key ) );
$output .= 'min-height:' . $divider_el_obj->heightTablet . 'px !important'; // @codingStandardsIgnoreLine
$output .= '}';
}
if ( 'backgroundHeight' === $divider_element && isset( $divider_el_obj->heightTablet ) ) { // @codingStandardsIgnoreLine
$output .= sprintf( '.%1$s > .wp-block-coblocks-shape-divider__alt-wrapper {', esc_attr( $divider_key ) );
$output .= 'min-height:' . $divider_el_obj->heightTablet . 'px !important'; // @codingStandardsIgnoreLine
$output .= '}';
}
$output .= '}';

$output .= '@media only screen and (max-width: ' . apply_filters( 'coblocks_desktop_breakpoint', '514px' ) . ') {';
if ( 'shapeHeight' === $divider_element && isset( $divider_el_obj->heightMobile ) ) { // @codingStandardsIgnoreLine
$output .= sprintf( '.%1$s > .wp-block-coblocks-shape-divider__svg-wrapper {', esc_attr( $divider_key ) );
$output .= 'min-height:' . $divider_el_obj->heightMobile . 'px !important'; // @codingStandardsIgnoreLine
$output .= '}';
}
if ( 'backgroundHeight' === $divider_element && isset( $divider_el_obj->heightMobile ) ) { // @codingStandardsIgnoreLine
$output .= sprintf( '.%1$s > .wp-block-coblocks-shape-divider__alt-wrapper {', esc_attr( $divider_key ) );
$output .= 'min-height:' . $divider_el_obj->heightMobile . 'px !important'; // @codingStandardsIgnoreLine
$output .= '}';
}
if ( 'height' === $divider_element && isset( $divider_el_obj->heightMobile ) ) { // @codingStandardsIgnoreLine
$output .= sprintf( '.%1$s > [class*="__inner"]:not(.is-fullscreen) {', esc_attr( $divider_key ) );
$output .= 'min-height:' . $divider_el_obj->heightMobile . 'px !important'; // @codingStandardsIgnoreLine
Expand Down
43 changes: 4 additions & 39 deletions src/blocks/shape-divider/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,13 @@
"name": "coblocks/shape-divider",
"category": "layout",
"attributes": {
"align": {
"type": "string",
"default": "full"
},
"height": {
"type": "number",
"default": 100
},
"heightTablet": {
"type": "number"
},
"heightMobile": {
"type": "number"
},
"shapeHeight": {
"type": "number",
"default": 100
},
"shapeHeightTablet": {
"type": "number"
"type": "string",
"default": "100px"
},
"backgroundHeight": {
"type": "number",
"default": 50
},
"backgroundHeightTablet": {
"type": "number"
},
"backgroundHeightMobile": {
"type": "number"
},
"syncHeight": {
"type": "boolean",
"default": true
},
"syncHeightAlt": {
"type": "boolean",
"default": true
"type": "string",
"default": "50px"
},
"verticalFlip": {
"type": "boolean",
Expand Down Expand Up @@ -69,10 +38,6 @@
"noTopMargin": {
"type": "boolean",
"default": true
},
"justAdded": {
"type": "boolean",
"default": true
}
}
}
8 changes: 4 additions & 4 deletions src/blocks/shape-divider/controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ const Controls = ( props ) => {
const toolbarControls = [ {
icon: <Icon icon={ FlipHorizontalIcon } />,
title: __( 'Flip horiztonally', 'coblocks' ),
isActive: !! verticalFlip,
onClick: () => setAttributes( { verticalFlip: ! verticalFlip } ),
isActive: !! horizontalFlip,
onClick: () => setAttributes( { horizontalFlip: ! horizontalFlip } ),
}, {
icon: <Icon icon={ FlipVerticalIcon } />,
title: __( 'Flip vertically', 'coblocks' ),
isActive: !! horizontalFlip,
onClick: () => setAttributes( { horizontalFlip: ! horizontalFlip } ),
isActive: !! verticalFlip,
onClick: () => setAttributes( { verticalFlip: ! verticalFlip } ),
} ];

return (
Expand Down
73 changes: 73 additions & 0 deletions src/blocks/shape-divider/deprecated.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ const deprecated = [
{
attributes: {
...metadata.attributes,
shapeHeight: { type: 'number', default: 100 },
backgroundHeight: { type: 'number', default: 50 },
},
save( props ) {
const { attributes } = props;
Expand Down Expand Up @@ -116,16 +118,87 @@ const deprecated = [
{
attributes: {
...metadata.attributes,
shapeHeight: { type: 'number', default: 100 },
backgroundHeight: { type: 'number', default: 50 },
},
save: deprecatedSVGs,
},
{
attributes: {
...metadata.attributes,
coblocks: { type: 'object' },
align: { type: 'string', default: 'full' },
height: { type: 'number', default: 100 },
heightTablet: { type: 'number' },
heightMobile: { type: 'number' },
shapeHeight: { type: 'number', default: 100 },
shapeHeightTablet: { type: 'number' },
backgroundHeight: { type: 'number', default: 50 },
backgroundHeightTablet: { type: 'number' },
backgroundHeightMobile: { type: 'number' },
syncHeight: { type: 'boolean', default: true },
syncHeightAlt: { type: 'boolean', default: true },
justAdded: { type: 'boolean', default: true },
},
migrate: ( attributes ) => {
return {
...attributes,
shapeHeight: parseInt( attributes.shapeHeight ) + 'px',
backgroundHeight: parseInt( attributes.backgroundHeight ) + 'px',
};
},
save: ( { attributes, className } ) => {
const {
backgroundColor,
backgroundHeight,
coblocks,
color,
customBackgroundColor,
customColor,
horizontalFlip,
shapeHeight,
verticalFlip,
} = attributes;

const shapeClass = getColorClassName( 'color', color );
const backgroundClass = getColorClassName( 'background-color', backgroundColor );

let classes = classnames(
className, {
'is-vertically-flipped': verticalFlip,
'is-horizontally-flipped': horizontalFlip,
[ shapeClass ]: shapeClass,
[ backgroundClass ]: backgroundClass,
} );

if ( coblocks && ( typeof coblocks.id !== 'undefined' ) ) {
classes = classnames( classes, `coblocks-shape-divider-${ coblocks.id }` );
}

const styles = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
color: shapeClass ? undefined : customColor,
};

return (
<div className={ classes } style={ styles } aria-hidden="true">
<div className="wp-block-coblocks-shape-divider__svg-wrapper" style={ { minHeight: shapeHeight } }>
{ getDividerFromStyle( attributes.className ) }
</div>
<div className="wp-block-coblocks-shape-divider__alt-wrapper" style={ { minHeight: backgroundHeight } }></div>
</div>
);
},
},
];

// Deprecations for Advanced Spacing controls.
[ 'noTopMargin', 'noBottomMargin' ].forEach( ( attr ) => {
deprecated.push( {
attributes: {
...metadata.attributes,
shapeHeight: { type: 'number', default: 100 },
backgroundHeight: { type: 'number', default: 50 },
[ attr ]: false,
},
save: deprecatedSVGs,
Expand Down
Loading

0 comments on commit 769eb86

Please sign in to comment.