PLANET-5871 Update button block files with custom colors, remove Bord…

…erPanel & WidthPanel
greenpeace · Mar 12, 2021 · 081fdb2 · 081fdb2
1 parent 34c33ae
commit 081fdb2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 26 deletions.
diff --git a/admin/js/editor.js b/admin/js/editor.js
@@ -1,23 +1,6 @@
 /* global wp */
 
 wp.domReady(() => {
-  // Button block styles
-  wp.blocks.registerBlockStyle( 'core/button', {
-    name: 'secondary',
-    label: 'Secondary',
-    isDefault: true
-  });
-  wp.blocks.registerBlockStyle( 'core/button', {
-    name: 'cta',
-    label: 'CTA'
-  });
-  wp.blocks.registerBlockStyle( 'core/button', {
-    name: 'donate',
-    label: 'Donate'
-  });
-  wp.blocks.unregisterBlockStyle('core/button', 'outline');
-  wp.blocks.unregisterBlockStyle('core/button', 'fill');
-
   // Image block styles
   wp.blocks.unregisterBlockStyle('core/image', 'rounded');
   wp.blocks.unregisterBlockStyle('core/image', 'default');

diff --git a/assets/src/BlockFilters.js b/assets/src/BlockFilters.js
@@ -35,8 +35,31 @@ const addButtonBlockFilter = () => {
     }
 
     if ( settings.name === 'core/button' ) {
+      // Override the Native button block styles and use p4 button styles.
+      const p4ButtonStyle = [
+        {
+          name: 'secondary',
+          label: 'Secondary',
+          isDefault: true
+        },
+        {
+          name: 'cta',
+          label: 'CTA'
+        },
+        {
+          name: 'donate',
+          label: 'Donate'
+        }
+      ];
+
+      const newAttributes = settings.attributes;
+      // Set button block default style.
+      newAttributes.className = Object.assign({ default: "is-style-secondary" }, newAttributes.className);
+
       lodash.assign( settings, {
         edit: P4ButtonEdit,
+        attributes: newAttributes,
+        styles: p4ButtonStyle,
       } );
     }
 

diff --git a/assets/src/components/p4_button/color-edit.js b/assets/src/components/p4_button/color-edit.js
@@ -3,6 +3,7 @@
  * Customize changes(PLANET-4924) :
  *  - Added `p4_button_text_colors` and `p4_button_bg_colors` custom P4 button colors.
  *  - Remove the BorderPanel control(button borderRadius).
+ *  - Remove the WidthPanel control(button width).
  */
 
 /**
@@ -40,6 +41,17 @@ const EMPTY_ARRAY = [];
 
 const isWebPlatform = Platform.OS === 'web';
 
+const P4_BUTTON_TEXT_COLORS = [
+  { name: 'Grey 80%', slug: 'grey-80', color: '#020202' },
+  { name: 'White', slug: 'white', color: '#ffffff' },
+];
+
+const P4_BUTTON_BG_COLORS = [
+  { name: 'Orange', slug: 'orange', color: '#f36d3a' },
+  { name: 'Aquamarine', slug: 'aquamarine', color: '#68dfde' },
+  { name: 'White', slug: 'white', color: '#ffffff' },
+];
+
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
@@ -135,6 +147,7 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) {
 function ColorEdit( props ) {
 	const { attributes } = props;
 	const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
+
 	const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY;
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
@@ -219,21 +232,23 @@ function ColorEdit( props ) {
 				label: __( 'Text Color' ),
 				onColorChange: onChangeColor( 'text' ),
 				colorValue: getColorObjectByAttributeValues(
-					colors,
+					P4_BUTTON_TEXT_COLORS,
 					textColor,
 					style?.color?.text
 				).color,
+				colors: P4_BUTTON_TEXT_COLORS,
 			},
 			{
 				label: __( 'Background Color' ),
 				onColorChange: onChangeColor( 'background' ),
 				colorValue: getColorObjectByAttributeValues(
-					colors,
+					P4_BUTTON_BG_COLORS,
 					backgroundColor,
 					style?.color?.background
 				).color,
 				gradientValue,
 				onGradientChange: onChangeGradient,
+				colors: P4_BUTTON_BG_COLORS,
 			},
 		];
 	}, [

diff --git a/assets/src/components/p4_button/color-props.js b/assets/src/components/p4_button/color-props.js
@@ -3,6 +3,7 @@
  * Customize changes(PLANET-4924) :
  *  - Added `p4_button_text_colors` and `p4_button_bg_colors` custom P4 button colors.
  *  - Remove the BorderPanel control(button borderRadius).
+ *  - Remove the WidthPanel control(button width).
  */
 
 /**

diff --git a/assets/src/components/p4_button/edit.js b/assets/src/components/p4_button/edit.js
@@ -17,11 +17,8 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
 import {
-	Button,
-	ButtonGroup,
 	KeyboardShortcuts,
 	PanelBody,
-	RangeControl,
 	TextControl,
 	ToggleControl,
 	ToolbarButton,
@@ -37,7 +34,6 @@ import {
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
-import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -47,9 +43,6 @@ import ColorEdit from './color-edit';
 import getColorAndStyleProps from './color-props';
 
 const NEW_TAB_REL = 'noreferrer noopener';
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUE = 50;
-const INITIAL_BORDER_RADIUS_POSITION = 5;
 
 const EMPTY_ARRAY = [];