PLANET-4924 Re-enable the native buttons block

greenpeace · Apr 20, 2020 · 476dcfa · 476dcfa
1 parent 15f7b66
commit 476dcfa
Show file tree

Hide file tree

Showing 6 changed files with 323 additions and 35 deletions.
diff --git a/admin/js/editor.js b/admin/js/editor.js
@@ -14,7 +14,6 @@ wp.domReady(() => {
     name: 'donate',
     label: 'Donate'
   });
-  wp.blocks.unregisterBlockStyle('core/button', 'default');
   wp.blocks.unregisterBlockStyle('core/button', 'outline');
-  wp.blocks.unregisterBlockStyle('core/button', 'squared');
+  wp.blocks.unregisterBlockStyle('core/button', 'fill');
 });
diff --git a/assets/src/BlockFilters.js b/assets/src/BlockFilters.js
@@ -1,11 +1,12 @@
 const { addFilter } = wp.hooks;
 
+import P4ButtonEdit from './components/p4_button/edit';
 
 export const addBlockFilters = () => {
   addFileBlockFilter();
+  addButtonBlockFilter();
 };
 
-
 const addFileBlockFilter = () => {
   const setDownloadButtonToggleDefualtFalse = (settings, name) => {
 
@@ -20,3 +21,23 @@ const addFileBlockFilter = () => {
 
   addFilter('blocks.registerBlockType', 'planet4-blocks/filters/file', setDownloadButtonToggleDefualtFalse);
 };
+
+const addButtonBlockFilter = () => {
+
+  const updateButtonBlockEditMethod = (settings, name) => {
+
+    if ('core/button' !== name) {
+      return settings;
+    }
+
+    if ( settings.name = 'core/button' ) {
+      lodash.assign( settings, {
+        edit: P4ButtonEdit,
+      } );
+    }
+
+    return settings;
+  };
+
+  addFilter('blocks.registerBlockType', 'planet4-blocks/filters/button', updateButtonBlockEditMethod);
+};
diff --git a/assets/src/components/p4_button/edit.js b/assets/src/components/p4_button/edit.js
@@ -1,3 +1,10 @@
+/**
+ * This file is copy of core button block edit.js (https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/edit.js), with customize changes.
+ * Customize changes(PLANET-4924) :
+ *  - Added `p4_button_text_colors` and `p4_button_bg_colors` custom P4 button colors.
+ *  - Remove the BorderPanel control(button borderRadius).
+ */
+
 /**
  * External dependencies
  */
@@ -35,6 +42,17 @@ import { link } from '@wordpress/icons';
 
 const { getComputedStyle } = window;
 
+const p4_button_text_colors = [
+  { name: 'dark-shade-black', color: '#1a1a1a' },
+  { name: 'white', color: '#ffffff' },
+];
+
+const p4_button_bg_colors = [
+  { name: 'orange', color: '#f36d3a' },
+  { name: 'aquamarine', color: '#68dfde' },
+  { name: 'white', color: '#ffffff' },
+];
+
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 	const { textColor, backgroundColor } = ownProps;
 	const backgroundColorValue = backgroundColor && backgroundColor.color;
@@ -57,31 +75,6 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 } );
 
 const NEW_TAB_REL = 'noreferrer noopener';
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUE = 50;
-const INITIAL_BORDER_RADIUS_POSITION = 5;
-
-function BorderPanel( { borderRadius = '', setAttributes } ) {
-	const setBorderRadius = useCallback(
-		( newBorderRadius ) => {
-			setAttributes( { borderRadius: newBorderRadius } );
-		},
-		[ setAttributes ]
-	);
-	return (
-		<PanelBody title={ __( 'Border settings' ) }>
-			<RangeControl
-				value={ borderRadius }
-				label={ __( 'Border radius' ) }
-				min={ MIN_BORDER_RADIUS_VALUE }
-				max={ MAX_BORDER_RADIUS_VALUE }
-				initialPosition={ INITIAL_BORDER_RADIUS_POSITION }
-				allowReset
-				onChange={ setBorderRadius }
-			/>
-		</PanelBody>
-	);
-}
 
 function URLPicker( {
 	isSelected,
@@ -121,7 +114,7 @@ function URLPicker( {
 				<ToolbarGroup>
 					<ToolbarButton
 						name="link"
-						icon={ link }
+						icon="admin-links"
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
 						onClick={ openLinkControl }
@@ -230,11 +223,13 @@ function ButtonEdit( {
 					title={ __( 'Background & Text Color' ) }
 					settings={ [
 						{
+							colors: p4_button_text_colors,
 							colorValue: textColor.color,
 							onColorChange: setTextColor,
 							label: __( 'Text color' ),
 						},
 						{
+							colors: p4_button_bg_colors,
 							colorValue: backgroundColor.color,
 							onColorChange: setBackgroundColor,
 							gradientValue,
@@ -255,10 +250,6 @@ function ButtonEdit( {
 						} }
 					/>
 				</PanelColorGradientSettings>
-				<BorderPanel
-					borderRadius={ borderRadius }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ __( 'Open in new tab' ) }