Merge pull request #63 from liip/feat/improve-button-block

feat(): Add linkTarget and rel to button block

Author: tschortsch

.wp-env.json

@@ -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"

README.md

@@ -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
@@ -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: `''`)
@@ -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';

build/index.asset.php

@@ -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');

build/index.js

@@ -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\\"} /-->"`;

e2e-tests/button/__snapshots__/button-block.spec.js.snap

@@ -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();
@@ -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();
+	} );
 } );

e2e-tests/button/button-block.spec.js

@@ -13,6 +13,8 @@ import {
 	getInputValueByLabel,
 	getRichTextValueByLabel,
 	getSelectedValueBySelectLabel,
+	getTextControlValueByLabel,
+	getToggleValueByLabel,
 	selectOption,
 	selectOptionIsAvailable,
 	toolbarOptionIsActive,
@@ -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();
 	} );

e2e-tests/button/button-filters.spec.js

@@ -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
@@ -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"]`

e2e-tests/helper.js

@@ -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';

e2e-tests/plugins/button-filters.php

@@ -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"]}}}