PLANET-4924 Re-enable the native buttons block

greenpeace · Apr 21, 2020 · 216cfd7 · 216cfd7
1 parent 15f7b66
commit 216cfd7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 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/7dd6c58c3c6e17c85423fff7a666eab29d749689/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;
@@ -79,8 +97,8 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 				allowReset
 				onChange={ setBorderRadius }
 			/>
-		</PanelBody>
-	);
+			</PanelBody>
+		);
 }
 
 function URLPicker( {
@@ -121,7 +139,7 @@ function URLPicker( {
 				<ToolbarGroup>
 					<ToolbarButton
 						name="link"
-						icon={ link }
+						icon="admin-links"
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
 						onClick={ openLinkControl }
@@ -230,11 +248,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 +275,6 @@ function ButtonEdit( {
 						} }
 					/>
 				</PanelColorGradientSettings>
-				<BorderPanel
-					borderRadius={ borderRadius }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ __( 'Open in new tab' ) }

diff --git a/classes/class-loader.php b/classes/class-loader.php
@@ -337,7 +337,7 @@ public function enqueue_editor_scripts( $hook ) {
 				'wp-i18n',        // - Exports the __() function
 				'wp-editor',
 			],
-			'0.1.13',
+			'0.1.14',
 			true
 		);
 
@@ -570,6 +570,10 @@ public function set_color_palette() {
 
 		// Disable custom color option.
 		add_theme_support( 'disable-custom-colors' );
+
+		// Disable gradient presets & custom gradients.
+		add_theme_support( 'editor-gradient-presets', [] );
+		add_theme_support( 'disable-custom-gradients' );
 	}
 
 	/**

diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php
@@ -168,7 +168,7 @@ function set_allowed_block_types( $allowed_block_types, $post ) {
 		'core/table', // TODO: Styling.
 		// 'core/pullquote', // removed, normal quote element is available.
 		// 'core/verse', // removed, not needed, not styled.
-		'core/button', // TODO: Styling.
+		'core/buttons', // TODO: Styling.
 		// 'core/media-text' // removed, not needed.
 		// 'core/more', // removed, not needed.
 		// 'core/nextpage', // removed, not needed.