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

Jump to bottom

Add option for vertical orientation of Buttons block #20160

Closed
wants to merge 23 commits into from
Closed

Add option for vertical orientation of Buttons block #20160

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
3f4d522
Added a vertical style to the Buttons block
Feb 11, 2020
0560911
Reverted the styles approach
Apr 5, 2020
8c4fd9b
Attempted the solution with attributes and a RadioControl
Apr 5, 2020
825693e
Updated tests
Apr 5, 2020
13c99c9
Added deprecation
Apr 5, 2020
de8adae
Added missing newline at end of files
Apr 5, 2020
6cce01c
Fixed failed integration error
Apr 5, 2020
cedeacc
Fixed misspelled class
Apr 10, 2020
97b9079
Add the 'is-direction-vertical' class only when there's a vertical di…
Apr 11, 2020
bc1c4c6
Updated styles
Apr 11, 2020
2e9ca53
Remove deprecation as we're not changing the markup by default
Apr 11, 2020
97cc42b
Re-wrote tests
Apr 11, 2020
06e4d1b
Fixed formatting
Apr 11, 2020
f1002cd
Updated tests
Apr 25, 2020
46ead0c
Renamed attribute 'blockDirection' to 'orientation'
May 15, 2020
6a9ca40
Used 'classnames'
May 15, 2020
4e84c11
Renamed 'is-direction-vertical' to 'is-vertical'
May 15, 2020
811d874
Reformed styles according to review
May 15, 2020
602c287
Renamed label 'direction' to 'orientation'
May 15, 2020
4303e37
Updated tests
May 15, 2020
e635abf
Updated the tests according to the new full-content test instructions
May 27, 2020
83b50ba
Implemented suggested code quality changes
May 30, 2020
a874f75
Extracted orientation options to a file-level constant named ORIENTAT…
Jun 9, 2020
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
6 changes: 6 additions & 0 deletions packages/block-library/src/buttons/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,11 @@
"align": true,
"alignWide": false,
"lightBlockWrapper": true
},
"attributes": {
"orientation": {
"type": "string",
"default": "horizontal"
}
}
}
40 changes: 36 additions & 4 deletions packages/block-library/src/buttons/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import {
__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
InnerBlocks,
__experimentalBlock as Block,
InnerBlocks,
InspectorControls,
} from '@wordpress/block-editor';
import { PanelBody, RadioControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -20,16 +28,40 @@ const alignmentHooksSetting = {
isEmbedButton: true,
};

function ButtonsEdit() {
function ButtonsEdit( { attributes: { orientation }, setAttributes } ) {
return (
<Block.div>
<Block.div
className={ classnames( {
'is-vertical': orientation === 'vertical',
} ) }
>
<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ BUTTONS_TEMPLATE }
__experimentalMoverDirection="horizontal"
__experimentalMoverDirection={ orientation }
/>
</AlignmentHookSettingsProvider>
<InspectorControls>
<PanelBody title={ __( 'Buttons Settings' ) }>
<RadioControl
label={ __( 'Orientation' ) }
selected={ orientation }
options={ [
{ label: __( 'Horizontal' ), value: 'horizontal' },
{
label: __( 'Vertical' ),
value: 'vertical',
},
] }
ZebulanStanphill marked this conversation as resolved.
Show resolved Hide resolved
onChange={ ( value ) =>
setAttributes( {
orientation: value,
} )
}
/>
</PanelBody>
</InspectorControls>
</Block.div>
);
}
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/buttons/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
width: auto;
}

.wp-block-buttons.is-vertical .wp-block.block-editor-block-list__block[data-type="core/button"] {
display: block;
}

.wp-block[data-align="center"] > .wp-block-buttons {
display: flex;
align-items: center;
Expand Down
13 changes: 11 additions & 2 deletions packages/block-library/src/buttons/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { InnerBlocks } from '@wordpress/block-editor';

export default function save() {
export default function save( { attributes: { orientation } } ) {
return (
<div>
<div
className={ classnames( {
'is-vertical': orientation === 'vertical',
} ) }
>
<InnerBlocks.Content />
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/buttons/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,9 @@
.wp-block-buttons.aligncenter {
text-align: center;
}

.wp-block-buttons.is-vertical .wp-block-button {
display: block;
margin-left: 0;
margin-right: 0;
}
10 changes: 7 additions & 3 deletions packages/e2e-tests/fixtures/blocks/core__buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<!-- wp:buttons -->
<!-- wp:buttons {"orientation":"horizontal"} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
<div class="wp-block-button">
<a class="wp-block-button__link">My button 1</a>
</div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
<div class="wp-block-button">
<a class="wp-block-button__link">My button 2</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
8 changes: 5 additions & 3 deletions packages/e2e-tests/fixtures/blocks/core__buttons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"clientId": "_clientId_0",
"name": "core/buttons",
"isValid": true,
"attributes": {},
"attributes": {
"orientation": "horizontal"
},
"innerBlocks": [
{
"clientId": "_clientId_0",
Expand All @@ -13,7 +15,7 @@
"text": "My button 1"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>"
"originalContent": "<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>"
},
{
"clientId": "_clientId_1",
Expand All @@ -23,7 +25,7 @@
"text": "My button 2"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>"
"originalContent": "<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>"
}
],
"originalContent": "<div class=\"wp-block-buttons\">\n\t\n\n\t\n</div>"
Expand Down
12 changes: 7 additions & 5 deletions packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
[
{
"blockName": "core/buttons",
"attrs": {},
"attrs": {
"orientation": "horizontal"
},
"innerBlocks": [
{
"blockName": "core/button",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>\n\t",
"innerHTML": "\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>\n\t"
"\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>\n\t"
]
},
{
"blockName": "core/button",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>\n\t",
"innerHTML": "\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>\n\t"
"\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>\n\t"
]
}
],
Expand Down
15 changes: 15 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__buttons__vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- wp:buttons {"orientation":"vertical"} -->
<div class="wp-block-buttons is-vertical">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">My button 1</a>
</div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">My button 2</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
33 changes: 33 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__buttons__vertical.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
[
{
"clientId": "_clientId_0",
"name": "core/buttons",
"isValid": true,
"attributes": {
"orientation": "vertical"
},
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/button",
"isValid": true,
"attributes": {
"text": "My button 1"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>"
},
{
"clientId": "_clientId_1",
"name": "core/button",
"isValid": true,
"attributes": {
"text": "My button 2"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>"
}
],
"originalContent": "<div class=\"wp-block-buttons is-vertical\">\n\t\n\n\t\n</div>"
}
]
45 changes: 45 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__buttons__vertical.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
[
{
"blockName": "core/buttons",
"attrs": {
"orientation": "vertical"
},
"innerBlocks": [
{
"blockName": "core/button",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 1</a>\n\t</div>\n\t"
]
},
{
"blockName": "core/button",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>\n\t",
"innerContent": [
"\n\t<div class=\"wp-block-button\">\n\t\t<a class=\"wp-block-button__link\">My button 2</a>\n\t</div>\n\t"
]
}
],
"innerHTML": "\n<div class=\"wp-block-buttons is-vertical\">\n\t\n\n\t\n</div>\n",
"innerContent": [
"\n<div class=\"wp-block-buttons is-vertical\">\n\t",
null,
"\n\n\t",
null,
"\n</div>\n"
]
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
9 changes: 9 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__buttons__vertical.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!-- wp:buttons {"orientation":"vertical"} -->
<div class="wp-block-buttons is-vertical"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- wp:buttons -->
<!-- wp:buttons {"orientation":"horizontal"} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<a class="wp-block-button wp-block-button__link">My button 1</a>
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"clientId": "_clientId_0",
"name": "core/buttons",
"isValid": true,
"attributes": {},
"attributes": {
"orientation": "horizontal"
},
"innerBlocks": [
{
"clientId": "_clientId_0",
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
[
{
"blockName": "core/buttons",
"attrs": {},
"attrs": {
"orientation": "horizontal"
},
"innerBlocks": [
{
"blockName": "core/button",
Expand Down