Cocoonボタンの設定に幅を追加

blocks/src/block/button/block.json

@@ -52,6 +52,9 @@
     },
     "fontSize": {
       "type": "string"
+    },
+    "width": {
+      "type": "string"
     }
   },
   "example": {

blocks/src/block/button/edit.js

@@ -14,6 +14,8 @@ import {
   SelectControl,
   TextControl,
   ToggleControl,
+  Button,
+  ButtonGroup,
 } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
@@ -45,6 +47,7 @@ export function ButtonEdit( props ) {
     customBackgroundColor,
     customTextColor,
     customBorderColor,
+    width,
   } = attributes;
 
   const classes = classnames( className, {
@@ -57,6 +60,35 @@ export function ButtonEdit( props ) {
     '--cocoon-custom-text-color': customTextColor || undefined,
   };
 
+  function WidthPanel( { selectedWidth, setAttributes } ) {
+    function handleChange( newWidth ) {
+      // Check if we are toggling the width off
+      const width = selectedWidth === newWidth ? undefined : newWidth;
+
+      // Update attributes
+      setAttributes( { width } );
+    }
+
+    return (
+      <PanelBody title={ __( '幅設定', THEME_NAME ) }>
+        <ButtonGroup aria-label={ __( 'ボタン幅', THEME_NAME ) }>
+          { [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+            return (
+              <Button
+                key={ widthValue }
+                isSmall
+                isPrimary={ widthValue === selectedWidth }
+                onClick={ () => handleChange( widthValue ) }
+              >
+                { widthValue }%
+              </Button>
+            );
+          } ) }
+        </ButtonGroup>
+      </PanelBody>
+    );
+  }
+
   const blockProps = useBlockProps( {
     className: classes,
     style: styles,
@@ -121,6 +153,8 @@ export function ButtonEdit( props ) {
           />
         </PanelBody>
 
+        <WidthPanel selectedWidth={ width } setAttributes={ setAttributes } />
+
         <PanelBody
           title={ __( '文字サイズ', THEME_NAME ) }
           className="blocks-font-size"
@@ -170,6 +204,8 @@ export function ButtonEdit( props ) {
             [ textColor.class ]: textColor.class,
             [ borderColor.class ]: borderColor.class,
             [ fontSize.class ]: fontSize.class,
+            [ 'has-custom-width' ]: width,
+            [ `cocoon-block-button__width-${ width }` ]: width,
           } ) }
           href={ url }
           target={ target }

blocks/src/block/button/save.js

@@ -22,6 +22,7 @@ export default function save( { attributes } ) {
     customTextColor,
     customBorderColor,
     fontSize,
+    width,
   } = attributes;
 
   const backgroundClass = getColorClassName(
@@ -64,6 +65,8 @@ export default function save( { attributes } ) {
           [ backgroundClass ]: backgroundClass,
           [ borderClass ]: borderClass,
           [ fontSizeClass ]: fontSizeClass,
+          [ 'has-custom-width' ]: width,
+          [ `cocoon-block-button__width-${ width }` ]: width,
         } ) }
         target={ target }
         rel="noopener"