Add button style options

WordPress · Dec 17, 2024 · 4cf587e · 4cf587e
1 parent 1480d5c
commit 4cf587e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/mu-plugins/blocks/modal/render.php b/mu-plugins/blocks/modal/render.php
@@ -13,6 +13,11 @@
 $style .= get_style_decl_from_attr( $attributes, 'overlayColor' );
 $style .= get_style_decl_from_attr( $attributes, 'closeButtonColor' );
 
+$button_class = 'wp-block-button';
+if ( ! empty( $attributes['buttonStyle'] ) ) {
+	$button_class .= ' is-style-' . $attributes['buttonStyle'];
+}
+
 // Initial state to pass to Interactivity API.
 $init_state = [
 	'isOpen' => false,
@@ -31,7 +36,7 @@
 	<?php echo wp_interactivity_data_wp_context( $init_state ); // phpcs:ignore ?>
 >
 	<div class="wp-block-buttons">
-		<div class="wp-block-button">
+		<div class="<?php echo esc_attr( $button_class ); ?>">
 		<?php if ( ! empty( $attributes['href'] ) ) : ?>
 			<a
 				href="<?php echo esc_attr( $attributes['href'] ); ?>"

diff --git a/mu-plugins/blocks/modal/src/block.json b/mu-plugins/blocks/modal/src/block.json
@@ -42,6 +42,10 @@
 		"label": {
 			"type": "string",
 			"default": "Open modal"
+		},
+		"buttonStyle": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"supports": {

diff --git a/mu-plugins/blocks/modal/src/index.js b/mu-plugins/blocks/modal/src/index.js
@@ -13,8 +13,9 @@ import {
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	withColors,
 } from '@wordpress/block-editor';
-import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
-import { registerBlockType } from '@wordpress/blocks';
+import { PanelBody, SelectControl, TextControl, ToggleControl } from '@wordpress/components';
+import { store as blocksStore, registerBlockType } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useState } from 'react';
 
@@ -38,8 +39,15 @@ function Edit( {
 	clientId,
 } ) {
 	const [ isModalPreview, setIsModalPreview ] = useState( false );
+	const [ buttonStyles, setButtonStyles ] = useState( [] );
 	const { customBackgroundColor, customCloseButtonColor, customTextColor, customOverlayColor } = attributes;
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	useSelect( ( select ) => {
+		const { getBlockStyles } = select( blocksStore );
+		setButtonStyles( getBlockStyles( 'core/button' ) );
+	}, [] );
+
 	const classes = [];
 	if ( isModalPreview ) {
 		classes.push( 'is-modal-open' );
@@ -141,11 +149,22 @@ function Edit( {
 						value={ attributes.href }
 						onChange={ ( href ) => setAttributes( { href } ) }
 					/>
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Button style', 'wporg' ) }
+						help={ __( 'Style to use for the toggle button.', 'wporg' ) }
+						onChange={ ( newValue ) => {
+							setAttributes( { buttonStyle: newValue } );
+						} }
+						value={ attributes.buttonStyle }
+						options={ buttonStyles.map( ( item ) => ( { label: item.label, value: item.name } ) ) }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...blockProps }>
 				<div className="wp-block-buttons">
-					<div className="wp-block-button">
+					<div className={ `wp-block-button is-style-${ attributes.buttonStyle }` }>
 						<RichText
 							tagName="div"
 							className="wp-block-button__link"