Merge pull request #169 from xs-khosomi/fix/block-nested-style

ラベルボックスのスタイル継承を修正

blocks/dist/blocks.build.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-rich-text'), 'version' => '8b1e80e37c711f8f082d');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives', 'wp-rich-text'), 'version' => '6589cd6455669ef84e14');

blocks/src/block-universal/label-box/block.json

@@ -32,6 +32,19 @@
     },
     "fontSize": {
       "type": "string"
+    },
+    "notNestedStyle": {
+      "type": "boolean",
+      "default": true
+    },
+    "backgroundColorValue": {
+      "type": "string"
+    },
+    "textColorValue": {
+      "type": "string"
+    },
+    "borderColorValue": {
+      "type": "string"
     }
   },
   "example": {

blocks/src/block-universal/label-box/deprecated.js

@@ -39,13 +39,12 @@ const v1 = {
       default: '',
     },
   },
-
   migrate( attributes ) {
     const { content, color, icon } = attributes;
 
     return {
-      content: content,
-      icon: icon,
+      content,
+      icon,
       backgroundColor: undefined,
       customBackgroundColor: undefined,
       textColor: undefined,
@@ -54,15 +53,15 @@ const v1 = {
       customBorderColor: undefined,
       fontSize: undefined,
       customFontSize: undefined,
+      notNestedStyle: false,
     };
   },
-
   save( { attributes } ) {
     const { content, color, icon } = attributes;
     const classes = classnames( {
       [ CAPTION_BOX_CLASS ]: true,
       [ `lb-${ colorValueToSlug( color ) }` ]: !! colorValueToSlug( color ),
-      [ 'block-box' ]: true,
+      'block-box': true,
     } );
     return (
       <div className={ classes }>
@@ -82,6 +81,12 @@ const v1 = {
 };
 
 const v2 = {
+  migrate( attributes ) {
+    return {
+      ...attributes,
+      notNestedStyle: false,
+    };
+  },
   save( props ) {
     const {
       content,
@@ -113,7 +118,122 @@ const v2 = {
       [ fontSizeClass ]: fontSizeClass,
     } );
     const blockProps = useBlockProps.save( {
-      className: className,
+      className,
+    } );
+
+    return (
+      <div { ...blockProps }>
+        <div
+          className={ classnames(
+            'label-box-label',
+            'block-box-label',
+            'box-label',
+            icon
+          ) }
+        >
+          <span
+            className={ classnames(
+              'label-box-label-text',
+              'block-box-label-text',
+              'box-label-text'
+            ) }
+          >
+            <RichText.Content value={ content } />
+          </span>
+        </div>
+        <div
+          className={ classnames(
+            'label-box-content',
+            'block-box-content',
+            'box-content'
+          ) }
+        >
+          <InnerBlocks.Content />
+        </div>
+      </div>
+    );
+  },
+};
+
+const v3 = {
+  attributes: {
+    content: {
+      type: 'string',
+      default: '見出し',
+    },
+    icon: {
+      type: 'string',
+    },
+    backgroundColor: {
+      type: 'string',
+    },
+    textColor: {
+      type: 'string',
+    },
+    borderColor: {
+      type: 'string',
+    },
+    customBackgroundColor: {
+      type: 'string',
+    },
+    customTextColor: {
+      type: 'string',
+    },
+    customBorderColor: {
+      type: 'string',
+    },
+    fontSize: {
+      type: 'string',
+    },
+  },
+  migrate( attributes ) {
+    return {
+      ...attributes,
+      notNestedStyle: false,
+    };
+  },
+  save( props ) {
+    const {
+      content,
+      icon,
+      backgroundColor,
+      textColor,
+      borderColor,
+      customBackgroundColor,
+      customTextColor,
+      customBorderColor,
+      fontSize,
+    } = props.attributes;
+
+    const backgroundClass = getColorClassName(
+      'background-color',
+      backgroundColor
+    );
+    const textClass = getColorClassName( 'color', textColor );
+    const borderClass = getColorClassName( 'border-color', borderColor );
+    const fontSizeClass = getFontSizeClass( fontSize );
+
+    const className = classnames( {
+      [ CAPTION_BOX_CLASS ]: true,
+      'block-box': true,
+      'has-text-color': textColor || customTextColor,
+      'has-background': backgroundColor || customBackgroundColor,
+      'has-border-color': borderColor || customBorderColor,
+      [ textClass ]: textClass,
+      [ backgroundClass ]: backgroundClass,
+      [ borderClass ]: borderClass,
+      [ fontSizeClass ]: fontSizeClass,
+    } );
+
+    const styles = {
+      '--cocoon-custom-background-color': customBackgroundColor || undefined,
+      '--cocoon-custom-text-color': customTextColor || undefined,
+      '--cocoon-custom-border-color': customBorderColor || undefined,
+    };
+
+    const blockProps = useBlockProps.save( {
+      className,
+      style: styles,
     } );
 
     return (
@@ -150,4 +270,4 @@ const v2 = {
   },
 };
 
-export default [ v2, v1 ];
+export default [ v3, v2, v1 ];

blocks/src/block-universal/label-box/edit.js

@@ -10,8 +10,9 @@ import {
   useBlockProps,
 } from '@wordpress/block-editor';
 import { PanelBody, BaseControl, Button } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import classnames from 'classnames';
 import { times } from 'lodash';
 
@@ -30,6 +31,7 @@ export function LabelBoxEdit( props ) {
     borderColor,
     setBorderColor,
     fontSize,
+    clientId,
   } = props;
 
   const {
@@ -38,8 +40,40 @@ export function LabelBoxEdit( props ) {
     customBackgroundColor,
     customTextColor,
     customBorderColor,
+    notNestedStyle,
+    backgroundColorValue,
+    textColorValue,
+    borderColorValue,
   } = attributes;
 
+  // 親ブロックのnotNestedStyleがfalseかどうかを判定
+  const isParentNestedStyle = useSelect( ( select ) => {
+    const parentBlocks =
+      select( 'core/block-editor' ).getBlockParents( clientId );
+    for ( const parentClientId of parentBlocks ) {
+      const parentBlock =
+        select( 'core/block-editor' ).getBlock( parentClientId );
+      if (
+        parentBlock.name === props.name &&
+        parentBlock.attributes.notNestedStyle === false
+      ) {
+        return true;
+      }
+    }
+    return false;
+  } );
+
+  // 親ブロックのnotNestedStyleがfalseの場合はnotNestedStyleをfalseにする
+  if ( isParentNestedStyle && notNestedStyle ) {
+    setAttributes( { notNestedStyle: false } );
+  }
+
+  useEffect( () => {
+    setAttributes( { backgroundColorValue: backgroundColor.color } );
+    setAttributes( { textColorValue: textColor.color } );
+    setAttributes( { borderColorValue: borderColor.color } );
+  }, [ backgroundColor, textColor, borderColor ] );
+
   const classes = classnames( className, {
     [ CAPTION_BOX_CLASS ]: true,
     'block-box': true,
@@ -50,6 +84,8 @@ export function LabelBoxEdit( props ) {
     [ textColor.class ]: textColor.class,
     [ borderColor.class ]: borderColor.class,
     [ fontSize.class ]: fontSize.class,
+    'not-nested-style': notNestedStyle,
+    'cocoon-block-label-box': true,
   } );
 
   const styles = {
@@ -58,6 +94,12 @@ export function LabelBoxEdit( props ) {
     '--cocoon-custom-text-color': customTextColor || undefined,
   };
 
+  if ( notNestedStyle ) {
+    styles[ '--cocoon-custom-border-color' ] = borderColorValue;
+    styles[ '--cocoon-custom-background-color' ] = backgroundColorValue;
+    styles[ '--cocoon-custom-text-color' ] = textColorValue;
+  }
+
   const blockProps = useBlockProps( {
     className: classes,
     style: styles,
@@ -67,7 +109,7 @@ export function LabelBoxEdit( props ) {
     <Fragment>
       <InspectorControls>
         <PanelBody title={ __( 'スタイル設定', THEME_NAME ) }>
-          <BaseControl label={ __( 'アイコン', THEME_NAME ) }>
+          <BaseControl id="labelBoxIcon" label={ __( 'アイコン', THEME_NAME ) }>
             <div className="icon-setting-buttons">
               { times( ICONS.length, ( index ) => {
                 return (

blocks/src/block-universal/label-box/save.js

@@ -20,6 +20,10 @@ export default function save( props ) {
     customTextColor,
     customBorderColor,
     fontSize,
+    notNestedStyle,
+    backgroundColorValue,
+    textColorValue,
+    borderColorValue,
   } = props.attributes;
 
   const backgroundClass = getColorClassName(
@@ -40,6 +44,8 @@ export default function save( props ) {
     [ backgroundClass ]: backgroundClass,
     [ borderClass ]: borderClass,
     [ fontSizeClass ]: fontSizeClass,
+    'not-nested-style': notNestedStyle,
+    'cocoon-block-label-box': true,
   } );
 
   const styles = {
@@ -48,8 +54,14 @@ export default function save( props ) {
     '--cocoon-custom-border-color': customBorderColor || undefined,
   };
 
+  if ( notNestedStyle ) {
+    styles[ '--cocoon-custom-border-color' ] = borderColorValue;
+    styles[ '--cocoon-custom-background-color' ] = backgroundColorValue;
+    styles[ '--cocoon-custom-text-color' ] = textColorValue;
+  }
+
   const blockProps = useBlockProps.save( {
-    className: className,
+    className,
     style: styles,
   } );
 

blocks/src/block-universal/tab-caption-box/deprecated.js

@@ -54,6 +54,7 @@ const v1 = {
       customBorderColor: undefined,
       fontSize: undefined,
       customFontSize: undefined,
+      notNestedStyle: false,
     };
   },
 
@@ -84,6 +85,12 @@ const v1 = {
 };
 
 const v2 = {
+  migrate( attributes ) {
+    return {
+      ...attributes,
+      notNestedStyle: false,
+    };
+  },
   save( props ) {
     const {
       content,

lib/gutenberg.php

@@ -477,13 +477,13 @@ function get_block_editor_color_palette_css(){
   color: <?php echo $color; ?>;
 }
 <?php //ラベルボックス ?>
-html .body .label-box.has-<?php echo $slug; ?>-border-color .box-content{
+html .body .label-box.has-<?php echo $slug; ?>-border-color:not(.not-nested-style) .box-content{
   border-color: <?php echo $color; ?>;
 }
-html .body .label-box.has-<?php echo $slug; ?>-background-color .box-content{
+html .body .label-box.has-<?php echo $slug; ?>-background-color:not(.not-nested-style) .box-content{
   background-color: <?php echo $color; ?>;
 }
-html .body .label-box.has-<?php echo $slug; ?>-color .box-content{
+html .body .label-box.has-<?php echo $slug; ?>-color:not(.not-nested-style) .box-content{
   color: <?php echo $color; ?>;
 }
 <?php //吹き出しボックス ?>
@@ -668,6 +668,18 @@ function get_block_editor_color_palette_css(){
 }
 .cocoon-block-tab-caption-box.has-border-color.not-nested-style > .box-label{
     color: var(--cocoon-white-color);
+}
+<?php //ラベルボックス ?>
+.cocoon-block-label-box.not-nested-style {
+    background-color:transparent;
+}
+.cocoon-block-label-box.not-nested-style > .label-box-label {
+    color: var(--cocoon-custom-text-color);
+}
+.cocoon-block-label-box.not-nested-style > .box-content {
+    border-color: var(--cocoon-custom-border-color);
+    background-color: var(--cocoon-custom-background-color);
+    color: var(--cocoon-custom-text-color);
 }
     <?php
     $css = ob_get_clean();