diff --git a/admin/js/editor.js b/admin/js/editor.js
index c15497061f..4cd13bd34e 100644
--- 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
index 614e87f558..4739b5729a 100644
--- a/assets/src/BlockFilters.js
+++ b/assets/src/BlockFilters.js
@@ -1,11 +1,12 @@
const { addFilter } = wp.hooks;
+import P4ButtonEdit from './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/p4_button/edit.js b/assets/src/p4_button/edit.js
new file mode 100644
index 0000000000..924e94278e
--- /dev/null
+++ b/assets/src/p4_button/edit.js
@@ -0,0 +1,273 @@
+/**
+ * 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
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import {
+ KeyboardShortcuts,
+ PanelBody,
+ RangeControl,
+ TextControl,
+ ToggleControl,
+ withFallbackStyles,
+ ToolbarButton,
+ ToolbarGroup,
+ Popover,
+} from '@wordpress/components';
+import {
+ BlockControls,
+ __experimentalUseGradient,
+ ContrastChecker,
+ InspectorControls,
+ __experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+ RichText,
+ withColors,
+ __experimentalLinkControl as LinkControl,
+} from '@wordpress/block-editor';
+import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+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;
+ const textColorValue = textColor && textColor.color;
+ //avoid the use of querySelector if textColor color is known and verify if node is available.
+ const textNode =
+ ! textColorValue && node
+ ? node.querySelector( '[contenteditable="true"]' )
+ : null;
+ return {
+ fallbackBackgroundColor:
+ backgroundColorValue || ! node
+ ? undefined
+ : getComputedStyle( node ).backgroundColor,
+ fallbackTextColor:
+ textColorValue || ! textNode
+ ? undefined
+ : getComputedStyle( textNode ).color,
+ };
+} );
+
+const NEW_TAB_REL = 'noreferrer noopener';
+
+function URLPicker( {
+ isSelected,
+ url,
+ setAttributes,
+ opensInNewTab,
+ onToggleOpenInNewTab,
+} ) {
+ const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
+ const openLinkControl = () => {
+ setIsURLPickerOpen( true );
+ };
+ const linkControl = isURLPickerOpen && (
+ setIsURLPickerOpen( false ) }
+ >
+ {
+ setAttributes( { url: newURL } );
+
+ if ( opensInNewTab !== newOpensInNewTab ) {
+ onToggleOpenInNewTab( newOpensInNewTab );
+ }
+ } }
+ />
+
+ );
+ return (
+ <>
+
+
+
+
+
+ { isSelected && (
+
+ ) }
+ { linkControl }
+
+ );
+}
+
+function ButtonEdit( {
+ attributes,
+ backgroundColor,
+ textColor,
+ setBackgroundColor,
+ setTextColor,
+ fallbackBackgroundColor,
+ fallbackTextColor,
+ setAttributes,
+ className,
+ isSelected,
+} ) {
+ const {
+ borderRadius,
+ linkTarget,
+ placeholder,
+ rel,
+ text,
+ url,
+ } = attributes;
+ const onSetLinkRel = useCallback(
+ ( value ) => {
+ setAttributes( { rel: value } );
+ },
+ [ setAttributes ]
+ );
+
+ const onToggleOpenInNewTab = useCallback(
+ ( value ) => {
+ const newLinkTarget = value ? '_blank' : undefined;
+
+ let updatedRel = rel;
+ if ( newLinkTarget && ! rel ) {
+ updatedRel = NEW_TAB_REL;
+ } else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+ updatedRel = undefined;
+ }
+
+ setAttributes( {
+ linkTarget: newLinkTarget,
+ rel: updatedRel,
+ } );
+ },
+ [ rel, setAttributes ]
+ );
+ const {
+ gradientClass,
+ gradientValue,
+ setGradient,
+ } = __experimentalUseGradient();
+
+ return (
+
+
setAttributes( { text: value } ) }
+ withoutInteractiveFormatting
+ className={ classnames( 'wp-block-button__link', {
+ 'has-background': backgroundColor.color || gradientValue,
+ [ backgroundColor.class ]:
+ ! gradientValue && backgroundColor.class,
+ 'has-text-color': textColor.color,
+ [ textColor.class ]: textColor.class,
+ [ gradientClass ]: gradientClass,
+ 'no-border-radius': borderRadius === 0,
+ } ) }
+ style={ {
+ ...( ! backgroundColor.color && gradientValue
+ ? { background: gradientValue }
+ : { backgroundColor: backgroundColor.color } ),
+ color: textColor.color,
+ borderRadius: borderRadius
+ ? borderRadius + 'px'
+ : undefined,
+ } }
+ />
+
+
+
+
+
+
+
+
+
+
+