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

タブ見出しボックスのスタイル継承を修正
xserver-inc · Dec 10, 2023 · bab1c99 · bab1c99
2 parents 30b35cc + 706355c
commit bab1c99
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 22 deletions.
diff --git a/amp.css b/amp.css
@@ -4805,7 +4805,7 @@ div.search-form {
 .tab-caption-box.block-box.has-background {
   background-color: transparent !important;
 }
-.tab-caption-box.has-border-color .box-label {
+.tab-caption-box.has-border-color:not(.not-nested-style) .box-label {
   color: var(--cocoon-white-color);
 }
 

diff --git a/blocks/dist/blocks.build.asset.php b/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' => 'a544d94fae58a58e5b63');
+<?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');
diff --git a/blocks/dist/blocks.build.js b/blocks/dist/blocks.build.js
diff --git a/blocks/src/block-universal/tab-caption-box/block.json b/blocks/src/block-universal/tab-caption-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": {

diff --git a/blocks/src/block-universal/tab-caption-box/deprecated.js b/blocks/src/block-universal/tab-caption-box/deprecated.js
@@ -44,8 +44,8 @@ const v1 = {
     const { content, color, icon } = attributes;
 
     return {
-      content: content,
-      icon: icon,
+      content,
+      icon,
       backgroundColor: undefined,
       customBackgroundColor: undefined,
       textColor: undefined,
@@ -62,7 +62,7 @@ const v1 = {
     const classes = classnames( {
       [ CAPTION_BOX_CLASS ]: true,
       [ `tcb-${ colorValueToSlug( color ) }` ]: !! colorValueToSlug( color ),
-      [ 'block-box' ]: true,
+      'block-box': true,
     } );
     return (
       <div className={ classes }>
@@ -115,7 +115,122 @@ const v2 = {
       [ fontSizeClass ]: fontSizeClass,
     } );
     const blockProps = useBlockProps.save( {
-      className: className,
+      className,
+    } );
+
+    return (
+      <div { ...blockProps }>
+        <div
+          className={ classnames(
+            'tab-caption-box-label',
+            'block-box-label',
+            'box-label',
+            icon
+          ) }
+        >
+          <span
+            className={ classnames(
+              'tab-caption-box-label-text',
+              'block-box-label-text',
+              'box-label-text'
+            ) }
+          >
+            <RichText.Content value={ content } />
+          </span>
+        </div>
+        <div
+          className={ classnames(
+            'tab-caption-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 (
@@ -152,4 +267,4 @@ const v2 = {
   },
 };
 
-export default [ v2, v1 ];
+export default [ v3, v2, v1 ];
diff --git a/blocks/src/block-universal/tab-caption-box/edit.js b/blocks/src/block-universal/tab-caption-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 TabCaptionBoxEdit( props ) {
     borderColor,
     setBorderColor,
     fontSize,
+    clientId,
   } = props;
 
   const {
@@ -38,8 +40,40 @@ export function TabCaptionBoxEdit( 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 TabCaptionBoxEdit( props ) {
     [ textColor.class ]: textColor.class,
     [ borderColor.class ]: borderColor.class,
     [ fontSize.class ]: fontSize.class,
+    'not-nested-style': notNestedStyle,
+    'cocoon-block-tab-caption-box': true,
   } );
 
   const styles = {
@@ -58,6 +94,12 @@ export function TabCaptionBoxEdit( 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,10 @@ export function TabCaptionBoxEdit( props ) {
     <Fragment>
       <InspectorControls>
         <PanelBody title={ __( 'スタイル設定', THEME_NAME ) }>
-          <BaseControl label={ __( 'アイコン', THEME_NAME ) }>
+          <BaseControl
+            id="tabCaptionBoxIcon"
+            label={ __( 'アイコン', THEME_NAME ) }
+          >
             <div className="icon-setting-buttons">
               { times( ICONS.length, ( index ) => {
                 return (

diff --git a/blocks/src/block-universal/tab-caption-box/save.js b/blocks/src/block-universal/tab-caption-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-tab-caption-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,
   } );
 

diff --git a/css/admin.css b/css/admin.css
@@ -4755,7 +4755,7 @@ body.wp-admin {
 .admin-settings .demo .tab-caption-box.block-box.has-background {
   background-color: transparent !important;
 }
-.admin-settings .demo .tab-caption-box.has-border-color .box-label {
+.admin-settings .demo .tab-caption-box.has-border-color:not(.not-nested-style) .box-label {
   color: var(--cocoon-white-color);
 }
 .admin-settings .demo .tab-caption-box-label {
@@ -12862,7 +12862,7 @@ body.wp-admin {
 .admin-settings .demo .tab-caption-box.block-box.has-background {
   background-color: transparent !important;
 }
-.admin-settings .demo .tab-caption-box.has-border-color .box-label {
+.admin-settings .demo .tab-caption-box.has-border-color:not(.not-nested-style) .box-label {
   color: var(--cocoon-white-color);
 }
 .admin-settings .demo .tab-caption-box-label {
@@ -21751,7 +21751,7 @@ textarea[name=the_page_memo] {
 .components-popover__content .tab-caption-box.block-box.has-background {
   background-color: transparent !important;
 }
-.components-popover__content .tab-caption-box.has-border-color .box-label {
+.components-popover__content .tab-caption-box.has-border-color:not(.not-nested-style) .box-label {
   color: var(--cocoon-white-color);
 }
 .components-popover__content .tab-caption-box-label {

diff --git a/css/gutenberg-editor.css b/css/gutenberg-editor.css
@@ -2967,7 +2967,7 @@ div.search-form {
 .tab-caption-box.block-box.has-background {
   background-color: transparent !important;
 }
-.tab-caption-box.has-border-color .box-label {
+.tab-caption-box.has-border-color:not(.not-nested-style) .box-label {
   color: var(--cocoon-white-color);
 }
 

diff --git a/lib/gutenberg.php b/lib/gutenberg.php
@@ -464,16 +464,16 @@ function get_block_editor_color_palette_css(){
   background-color: <?php echo $color; ?>;
 }
 <?php //タブ見出しボックス ?>
-html .body .tab-caption-box.has-<?php echo $slug; ?>-border-color .box-label{
+html .body .tab-caption-box.has-<?php echo $slug; ?>-border-color:not(.not-nested-style) .box-label{
   background-color: <?php echo $color; ?>;
 }
-html .body .tab-caption-box.has-<?php echo $slug; ?>-border-color .box-content{
+html .body .tab-caption-box.has-<?php echo $slug; ?>-border-color:not(.not-nested-style) .box-content{
   border-color: <?php echo $color; ?>;
 }
-html .body .tab-caption-box.has-<?php echo $slug; ?>-background-color .box-content{
+html .body .tab-caption-box.has-<?php echo $slug; ?>-background-color:not(.not-nested-style) .box-content{
   background-color: <?php echo $color; ?>;
 }
-html .body .tab-caption-box.has-<?php echo $slug; ?>-color .box-content{
+html .body .tab-caption-box.has-<?php echo $slug; ?>-color:not(.not-nested-style) .box-content{
   color: <?php echo $color; ?>;
 }
 <?php //ラベルボックス ?>
@@ -662,7 +662,13 @@ function get_block_editor_color_palette_css(){
     color: var(--cocoon-custom-text-color);
     border-color: var(--cocoon-custom-border-color);
 }
-
+<?php //タブ見出しボックス ?>
+.cocoon-block-tab-caption-box.not-nested-style > .box-label{
+    color: var(--cocoon-custom-text-color);
+}
+.cocoon-block-tab-caption-box.has-border-color.not-nested-style > .box-label{
+    color: var(--cocoon-white-color);
+}
     <?php
     $css = ob_get_clean();
     return $css;

diff --git a/scss/_extension.scss b/scss/_extension.scss
@@ -1423,7 +1423,7 @@ div.search-form{
   &.block-box.has-background{
     background-color: transparent !important;
   }
-  &.has-border-color .box-label{
+  &.has-border-color:not(.not-nested-style) .box-label{
     color: var(--cocoon-white-color);
   }
 }