Skip to content

Commit

Permalink
Merge pull request #63 from liip/feat/improve-button-block
Browse files Browse the repository at this point in the history
feat(): Add linkTarget and rel to button block
  • Loading branch information
tschortsch authored Nov 3, 2020
2 parents 1a9e4e6 + a198da8 commit fa6f4be
Show file tree
Hide file tree
Showing 33 changed files with 850 additions and 464 deletions.
2 changes: 1 addition & 1 deletion .wp-env.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"core": "WordPress/WordPress#5.5",
"core": "WordPress/WordPress#5.5.3",
"plugins": [ "." ],
"mappings": {
"wp-content/plugins/wp-bootstrap-blocks-test-plugins": "./e2e-tests/plugins"
Expand Down
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ Bootstrap Gutenberg Blocks for WordPress. Supports Bootstrap 4 and **Bootstrap 5
#### Options

* Style: Choose the styling of the button.
* Open in new tab: Choose if link should be opened in a new tab.
* Rel: Set rel attribute of the link.
* Alignment: Horizontal alignment of the button.

## Further Information
Expand Down Expand Up @@ -368,6 +370,10 @@ Modify default attributes of the button block.

* `$default_attributes` (`array`) Default attributes of button block.
* `url` (`string`) Default url of the button (Default: `''`)
* `linkTarget` (`string`) Default link target (Default: `''`). Possible values:
* `''`: Target attribute empty
* `_blank`: Target attribute is set to `_blank`
* `rel` (`string`) Default rel attribute of the link (Default: `''`)
* `text` (`string`) Default text of the button (Default: `''`)
* `style` (`string`) Default style of the button (Default: `''`)
* `alignment` (`string`) Default alignment of the button (Default: `''`)
Expand All @@ -379,6 +385,8 @@ add_filter( 'wp_bootstrap_blocks_button_default_attributes', 'my_button_default_

function my_button_default_attributes( $default_attributes ) {
$default_attributes['url'] = 'https://getbootstrap.com/';
$default_attributes['linkTarget'] = '_blank';
$default_attributes['rel'] = 'noreferrer noopener';
$default_attributes['text'] = 'Bootstrap';
$default_attributes['style'] = 'secondary';
$default_attributes['alignment'] = 'right';
Expand Down
2 changes: 1 addition & 1 deletion build/index.asset.php
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '0c2c0621be9f2289794f9955ae3690f9');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill'), 'version' => '67aee816442ce60ef154e852f39f18fa');
2 changes: 1 addition & 1 deletion build/index.js

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions e2e-tests/button/__snapshots__/button-block.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@

exports[`button block Button block should be initialized with default attributes 1`] = `"<!-- wp:wp-bootstrap-blocks/button /-->"`;

exports[`button block Should be possible to enable and disable open in new tab 1`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"linkTarget\\":\\"_blank\\",\\"rel\\":\\"noreferrer noopener\\"} /-->"`;

exports[`button block Should be possible to enable and disable open in new tab 2`] = `"<!-- wp:wp-bootstrap-blocks/button /-->"`;

exports[`button block Should be possible to select style 1`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"style\\":\\"secondary\\"} /-->"`;

exports[`button block Should be possible to set link url and text 1`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"text\\":\\"Liip\\"} /-->"`;

exports[`button block Should be possible to set link url and text 2`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"url\\":\\"https://liip.ch\\",\\"text\\":\\"Liip\\"} /-->"`;

exports[`button block Should keep rel value if set when open in new tab is enabled or disabled 1`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"linkTarget\\":\\"_blank\\",\\"rel\\":\\"custom rel value\\"} /-->"`;

exports[`button block Should keep rel value if set when open in new tab is enabled or disabled 2`] = `"<!-- wp:wp-bootstrap-blocks/button {\\"rel\\":\\"custom rel value\\"} /-->"`;
69 changes: 68 additions & 1 deletion e2e-tests/button/button-block.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,17 @@ import {
createNewPost,
getEditedPostContent,
} from '@wordpress/e2e-test-utils';
import { ensureSidebarOpened, selectOption } from '../helper';
import {
clickElementByText,
ensureSidebarOpened,
getTextControlValueByLabel,
selectOption,
setTextControlValueByLabel,
} from '../helper';
import { insertButtonBlock, selectButtonBlock } from './button-helper';

const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';

describe( 'button block', () => {
beforeEach( async () => {
await createNewPost();
Expand Down Expand Up @@ -72,4 +80,63 @@ describe( 'button block', () => {
// Editor content should match snapshot
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'Should be possible to enable and disable open in new tab', async () => {
await insertButtonBlock();
await selectButtonBlock();
await ensureSidebarOpened();

// Enable open in new tab
await clickElementByText( 'label', 'Open in new tab' );

// Check if default rel value is set
expect( await getTextControlValueByLabel( 'Link rel' ) ).toMatch(
NEW_TAB_REL_DEFAULT_VALUE
);

// Editor content should match snapshot
expect( await getEditedPostContent() ).toMatchSnapshot();

// Disable open in new tab
await clickElementByText( 'label', 'Open in new tab' );

// Check if default rel value is removed
expect( await getTextControlValueByLabel( 'Link rel' ) ).toMatch( '' );

// Editor content should match snapshot
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'Should keep rel value if set when open in new tab is enabled or disabled', async () => {
await insertButtonBlock();
await selectButtonBlock();
await ensureSidebarOpened();

const customRelValue = 'custom rel value';

// Enable no gutters option
await setTextControlValueByLabel( 'Link rel', customRelValue );

// Enable open in new tab
await clickElementByText( 'label', 'Open in new tab' );

// Check if rel value hasn't changed
expect( await getTextControlValueByLabel( 'Link rel' ) ).toMatch(
customRelValue
);

// Editor content should match snapshot
expect( await getEditedPostContent() ).toMatchSnapshot();

// Disable open in new tab
await clickElementByText( 'label', 'Open in new tab' );

// Check if rel value hasn't changed
expect( await getTextControlValueByLabel( 'Link rel' ) ).toMatch(
customRelValue
);

// Editor content should match snapshot
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );
10 changes: 10 additions & 0 deletions e2e-tests/button/button-filters.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
getInputValueByLabel,
getRichTextValueByLabel,
getSelectedValueBySelectLabel,
getTextControlValueByLabel,
getToggleValueByLabel,
selectOption,
selectOptionIsAvailable,
toolbarOptionIsActive,
Expand Down Expand Up @@ -76,6 +78,14 @@ describe( 'button block filters', () => {
'https://liip.ch'
);

// Open in new tab is enabled
expect( await getToggleValueByLabel( 'Open in new tab' ) ).toBe( true );

// Rel should be set
expect( await getTextControlValueByLabel( 'Link rel' ) ).toBe(
'custom rel'
);

// Check if attributes are set correctly
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
Expand Down
21 changes: 21 additions & 0 deletions e2e-tests/helper.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,20 @@ export const getRichTextValueByLabel = async ( label ) => {
);
};

export const getTextControlValueByLabel = async ( label ) => {
const [ inputEl ] = await page.$x(
`//label[@class="components-base-control__label"][contains(text(),"${ label }")]/following-sibling::input[@class="components-text-control__input"]`
);
return await page.evaluate( ( el ) => el.value, inputEl );
};

export const setTextControlValueByLabel = async ( label, value ) => {
const [ inputEl ] = await page.$x(
`//label[@class="components-base-control__label"][contains(text(),"${ label }")]/following-sibling::input[@class="components-text-control__input"]`
);
await inputEl.type( value );
};

export const inputIsDisabledByLabel = async ( label ) => {
return (
( await page.$( `input[aria-label="${ label }"][disabled]` ) ) !== null
Expand Down Expand Up @@ -110,6 +124,13 @@ export const getCheckboxValueByLabel = async ( label ) => {
return await page.evaluate( ( el ) => el.checked, inputEl );
};

export const getToggleValueByLabel = async ( label ) => {
const [ inputEl ] = await page.$x(
`//label[@class="components-toggle-control__label"][contains(text(),"${ label }")]/preceding-sibling::span[contains(@class, "components-form-toggle")]/input`
);
return await page.evaluate( ( el ) => el.checked, inputEl );
};

export const getSelectedValueBySelectLabel = async ( label ) => {
const [ selectEl ] = await page.$x(
`//label[@class="components-base-control__label"][contains(text(),"${ label }")]/following-sibling::select[@class="components-select-control__input"]`
Expand Down
2 changes: 2 additions & 0 deletions e2e-tests/plugins/button-filters.php
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ function enqueue_button_filters_plugin_script() {
*/
function button_filters_default_attributes( $default_attributes ) {
$default_attributes['url'] = 'https://liip.ch';
$default_attributes['linkTarget'] = '_blank';
$default_attributes['rel'] = 'custom rel';
$default_attributes['text'] = 'Liip';
$default_attributes['style'] = 'secondary';
$default_attributes['alignment'] = 'center';
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"translation-revision-date":"2020-10-18 20:43+0200","generator":"WP-CLI\/2.4.0","source":"build\/index.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"de_CH","plural-forms":"nplurals=2; plural=(n != 1);"},"Button":["Button"],"Bootstrap Button":["Bootstrap Button"],"Bootstrap":["Bootstrap"],"Primary":["Primary"],"Secondary":["Secondary"],"Add text...":["Text hinzuf\u00fcgen..."],"Style":["Stil"],"Change button alignment":["\u00c4ndere die Positionierung des Buttons"],"Apply":["\u00dcbernehmen"],"Column":["Column"],"Bootstrap Column":["Bootstrap Column"],"None":["Deaktiviert"],"Small":["Klein"],"Medium":["Mittel"],"Large":["Gross"],"Column size":["Anzahl Spalten"],"Xs Column count":["Xs Anzahl Spalten"],"Xs equal-width":["Xs gleiche Breite (equal-width)"],"Sm Column count":["Sm Anzahl Spalten"],"Sm equal-width":["Sm gleiche Breite (equal-width)"],"Md Column count":["Md Anzahl Spalten"],"Md equal-width":["Md gleiche Breite (equal-width)"],"Lg Column count":["Lg Anzahl Spalten"],"Lg equal-width":["Lg gleiche Breite (equal-width)"],"Xl Column count":["Xl Anzahl Spalten"],"Xl equal-width":["Xl gleiche Breite (equal-width)"],"Xxl Column count":["Xxl Anzahl Spalten"],"Xxl equal-width":["Xxl gleiche Breite (equal-width)"],"Background color":["Hintergrundfarbe"],"Center content vertically in row":["Zeileninhalt vertikal zentrieren"],"This setting only applies if there is no vertical alignment set on the parent row block.":["Diese Einstellung kann nur verwendet werden, wenn auf dem umschliessenden Row-Block keine vertikale Positionierung gesetzt ist."],"Padding (inside column)":["Padding (innerhalb der Spalte)"],"Size":["Gr\u00f6sse"],"Container":["Container"],"Bootstrap Container":["Bootstrap Container"],"Xl":["Xl"],"Lg":["Lg"],"Md":["Md"],"Sm":["Sm"],"Xxl":["Xxl"],"No breakpoint selected":["Kein Breakpoint ausgew\u00e4hlt"],"Fluid":["Fluid"],"Fluid Breakpoint":["Fluid Breakpoint"],"Fluid breakpoints only work with Bootstrap v4.4+. The container will be 100% wide until the specified breakpoint is reached, after which max-widths for each of the higher breakpoints will be applied.":["Fluid Breakpoints werden erst ab Bootstrap v4.4+ unterst\u00fctzt. Wenn die Option aktiviert ist, nimmt der Container 100% der Breite ein bis zum gew\u00e4hlten Breakpoint. Ab diesem Breakpoint gilt die jeweilige maximale Breite (max-width) des Containers."],"Margin":["Margin"],"Margin After":["Margin unterhalb vom Block"],"Row":["Row"],"Bootstrap Row":["Bootstrap Row"],"2 Columns (1:1)":["2 Spalten (1:1)"],"2 Columns (1:2)":["2 Spalten (1:2)"],"2 Columns (2:1)":["2 Spalten (2:1)"],"3 Columns (1:1:1)":["3 Spalten (1:1:1)"],"Custom":["Benutzerdefiniert"],"Bootstrap Default":["Bootstrap Standardwert"],"Bootstrap Default (None)":["Bootstrap Standardwert (Kein Abstand)"],"Align columns left":["Spalten links positionieren"],"Align columns center":["Spalten zentrieren"],"Align columns right":["Spalten rechts positionieren"],"Align columns top":["Spalten oben positionieren"],"Align columns bottom":["Spalten unten positionieren"],"Editor: Display columns stacked":["Editor: Spalten untereinander darstellen"],"Displays stacked columns in editor to enhance readability of block content. This option is only used in the editor and won't affect the output of the row.":["Stellt die Spalten untereinander dar um die Lesbarkeit der Block-Inhalte zu verbessern. Diese Option wird lediglich f\u00fcr den Editor verwendet und ver\u00e4ndert die Ausgabe des Blocks nicht."],"Change layout":["Layout \u00e4ndern"],"Row options":["Zeilen Optionen"],"No Gutters":["Keine Abst\u00e4nde zwischen Spalten (No Gutters)"],"Horizontal Gutters":["Horizontale Abst\u00e4nde zwischen Spalten"],"Vertical Gutters":["Vertikale Abst\u00e4nde zwischen Spalten"],"Change horizontal alignment of columns":["\u00c4ndere die horizontale Positionierung der Spalten"],"Change vertical alignment of columns":["\u00c4ndere die vertikale Positionierung der Spalten"]}}}
{"translation-revision-date":"2020-10-18 22:25+0200","generator":"WP-CLI\/2.4.0","source":"build\/index.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"de_CH","plural-forms":"nplurals=2; plural=(n != 1);"},"Button":["Button"],"Bootstrap Button":["Bootstrap Button"],"Bootstrap":["Bootstrap"],"Primary":["Primary"],"Secondary":["Secondary"],"Add text...":["Text hinzuf\u00fcgen..."],"Style":["Stil"],"Link settings":["Link-Einstellungen"],"Open in new tab":["In einem neuen Tab \u00f6ffnen"],"Link rel":["Link rel"],"Change button alignment":["\u00c4ndere die Positionierung des Buttons"],"Apply":["\u00dcbernehmen"],"Column":["Column"],"Bootstrap Column":["Bootstrap Column"],"None":["Deaktiviert"],"Small":["Klein"],"Medium":["Mittel"],"Large":["Gross"],"Column size":["Anzahl Spalten"],"Xs Column count":["Xs Anzahl Spalten"],"Xs equal-width":["Xs gleiche Breite (equal-width)"],"Sm Column count":["Sm Anzahl Spalten"],"Sm equal-width":["Sm gleiche Breite (equal-width)"],"Md Column count":["Md Anzahl Spalten"],"Md equal-width":["Md gleiche Breite (equal-width)"],"Lg Column count":["Lg Anzahl Spalten"],"Lg equal-width":["Lg gleiche Breite (equal-width)"],"Xl Column count":["Xl Anzahl Spalten"],"Xl equal-width":["Xl gleiche Breite (equal-width)"],"Xxl Column count":["Xxl Anzahl Spalten"],"Xxl equal-width":["Xxl gleiche Breite (equal-width)"],"Background color":["Hintergrundfarbe"],"Center content vertically in row":["Zeileninhalt vertikal zentrieren"],"This setting only applies if there is no vertical alignment set on the parent row block.":["Diese Einstellung kann nur verwendet werden, wenn auf dem umschliessenden Row-Block keine vertikale Positionierung gesetzt ist."],"Padding (inside column)":["Padding (innerhalb der Spalte)"],"Size":["Gr\u00f6sse"],"Container":["Container"],"Bootstrap Container":["Bootstrap Container"],"Xl":["Xl"],"Lg":["Lg"],"Md":["Md"],"Sm":["Sm"],"Xxl":["Xxl"],"No breakpoint selected":["Kein Breakpoint ausgew\u00e4hlt"],"Fluid":["Fluid"],"Fluid Breakpoint":["Fluid Breakpoint"],"Fluid breakpoints only work with Bootstrap v4.4+. The container will be 100% wide until the specified breakpoint is reached, after which max-widths for each of the higher breakpoints will be applied.":["Fluid Breakpoints werden erst ab Bootstrap v4.4+ unterst\u00fctzt. Wenn die Option aktiviert ist, nimmt der Container 100% der Breite ein bis zum gew\u00e4hlten Breakpoint. Ab diesem Breakpoint gilt die jeweilige maximale Breite (max-width) des Containers."],"Margin":["Margin"],"Margin After":["Margin unterhalb vom Block"],"Row":["Row"],"Bootstrap Row":["Bootstrap Row"],"2 Columns (1:1)":["2 Spalten (1:1)"],"2 Columns (1:2)":["2 Spalten (1:2)"],"2 Columns (2:1)":["2 Spalten (2:1)"],"3 Columns (1:1:1)":["3 Spalten (1:1:1)"],"Custom":["Benutzerdefiniert"],"Bootstrap Default":["Bootstrap Standardwert"],"Bootstrap Default (None)":["Bootstrap Standardwert (Kein Abstand)"],"Align columns left":["Spalten links positionieren"],"Align columns center":["Spalten zentrieren"],"Align columns right":["Spalten rechts positionieren"],"Align columns top":["Spalten oben positionieren"],"Align columns bottom":["Spalten unten positionieren"],"Editor: Display columns stacked":["Editor: Spalten untereinander darstellen"],"Displays stacked columns in editor to enhance readability of block content. This option is only used in the editor and won't affect the output of the row.":["Stellt die Spalten untereinander dar um die Lesbarkeit der Block-Inhalte zu verbessern. Diese Option wird lediglich f\u00fcr den Editor verwendet und ver\u00e4ndert die Ausgabe des Blocks nicht."],"Change layout":["Layout \u00e4ndern"],"Row options":["Zeilen Optionen"],"No Gutters":["Keine Abst\u00e4nde zwischen Spalten (No Gutters)"],"Horizontal Gutters":["Horizontale Abst\u00e4nde zwischen Spalten"],"Vertical Gutters":["Vertikale Abst\u00e4nde zwischen Spalten"],"Change horizontal alignment of columns":["\u00c4ndere die horizontale Positionierung der Spalten"],"Change vertical alignment of columns":["\u00c4ndere die vertikale Positionierung der Spalten"]}}}
Binary file modified languages/wp-bootstrap-blocks-de_CH.mo
Binary file not shown.
Loading

0 comments on commit fa6f4be

Please sign in to comment.