search

vektor-inc / vk-blocks-pro

13 stars 3 forks source link

1.0.3 新目次ブロックが破損【リカバリー不可】 #351

Closed drill-lancer closed 3 years ago

drill-lancer commented 3 years ago
drill-lancer commented 3 years ago

0.60.1⇒1.00⇒0.61.3⇒1.03 で目次ブロックが破損

<!-- wp:image {"align":"center","id":328,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.drill-lancer.com/wordpress/wp-content/uploads/media/Lightning-Skin-Fort.jpg" alt="" class="wp-image-328"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>この記事では、Lightning / Lightning Pro のスキンの一つである Fort II のヘッダーの固定を Origin 風にする方法について解説します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>このカスタマイズを施すと、下記画像のような状態でヘッダーが固定されます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":324,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.drill-lancer.com/wordpress/wp-content/uploads/media/Fort2_Origin_Prefix-1024x239.jpg" alt="" class="wp-image-324"/></figure>
<!-- /wp:image -->

<!-- wp:vk-blocks/table-of-contents-new {"renderHtml":"\u003cli class=\u0022vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2\u0022 data-reactroot=\u0022\u0022\u003e\u003ca href=\u0022#vk-htags-3893dff7-b972-47df-a74e-2b1167c83fba\u0022 class=\u0022vk_tableOfContents_list_item_link\u0022\u003e\u003cspan class=\u0022vk_tableOfContents_list_item_link_preNumber\u0022\u003e1. \u003c/span\u003eFort II のヘッダー固定を Origin 風にするには？\u003c/a\u003e\u003c/li\u003e\u003cli class=\u0022vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2\u0022 data-reactroot=\u0022\u0022\u003e\u003ca href=\u0022#vk-htags-41813ae9-e1e1-48f2-8b91-c3f1867ad0b7\u0022 class=\u0022vk_tableOfContents_list_item_link\u0022\u003e\u003cspan class=\u0022vk_tableOfContents_list_item_link_preNumber\u0022\u003e2. \u003c/span\u003eFort II のヘッダー固定を Origin 風にするコード\u003c/a\u003e\u003c/li\u003e\u003cli class=\u0022vk_tableOfContents_list_item vk_tableOfContents_list_item-h-3\u0022 data-reactroot=\u0022\u0022\u003e\u003ca href=\u0022#vk-htags-364c5d19-d421-44b3-b1fb-f45b71e6bbbd\u0022 class=\u0022vk_tableOfContents_list_item_link\u0022\u003e\u003cspan class=\u0022vk_tableOfContents_list_item_link_preNumber\u0022\u003e2.1. \u003c/span\u003e子テーマの functions.php に記述するコード\u003c/a\u003e\u003c/li\u003e\u003cli class=\u0022vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2\u0022 data-reactroot=\u0022\u0022\u003e\u003ca href=\u0022#vk-htags-5c6d5433-bceb-4122-b817-cc16a9c80d2b\u0022 class=\u0022vk_tableOfContents_list_item_link\u0022\u003e\u003cspan class=\u0022vk_tableOfContents_list_item_link_preNumber\u0022\u003e3. \u003c/span\u003eまとめ\u003c/a\u003e\u003c/li\u003e\u003cli class=\u0022vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2\u0022 data-reactroot=\u0022\u0022\u003e\u003ca href=\u0022#vk-htags-ec532a88-543a-4f97-883b-8e1a5744a7b9\u0022 class=\u0022vk_tableOfContents_list_item_link\u0022\u003e\u003cspan class=\u0022vk_tableOfContents_list_item_link_preNumber\u0022\u003e4. \u003c/span\u003e更新履歴\u003c/a\u003e\u003c/li\u003e"} -->
<div class="wp-block-vk-blocks-table-of-contents-new vk_tableOfContents vk_tableOfContents-style-default tabs"><div class="tab"><div class="vk_tableOfContents_title">目次</div><input type="checkbox" id="chck1"><label class="tab-label vk_tableOfContents_openCloseBtn button_status button_status-open" for="chck1"></label><ul class="vk_tableOfContents_list tab_content-open"><li class="vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2" data-reactroot=""><a href="#vk-htags-3893dff7-b972-47df-a74e-2b1167c83fba" class="vk_tableOfContents_list_item_link"><span class="vk_tableOfContents_list_item_link_preNumber">1. </span>Fort II のヘッダー固定を Origin 風にするには？</a></li><li class="vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2" data-reactroot=""><a href="#vk-htags-41813ae9-e1e1-48f2-8b91-c3f1867ad0b7" class="vk_tableOfContents_list_item_link"><span class="vk_tableOfContents_list_item_link_preNumber">2. </span>Fort II のヘッダー固定を Origin 風にするコード</a></li><li class="vk_tableOfContents_list_item vk_tableOfContents_list_item-h-3" data-reactroot=""><a href="#vk-htags-364c5d19-d421-44b3-b1fb-f45b71e6bbbd" class="vk_tableOfContents_list_item_link"><span class="vk_tableOfContents_list_item_link_preNumber">2.1. </span>子テーマの functions.php に記述するコード</a></li><li class="vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2" data-reactroot=""><a href="#vk-htags-5c6d5433-bceb-4122-b817-cc16a9c80d2b" class="vk_tableOfContents_list_item_link"><span class="vk_tableOfContents_list_item_link_preNumber">3. </span>まとめ</a></li><li class="vk_tableOfContents_list_item vk_tableOfContents_list_item-h-2" data-reactroot=""><a href="#vk-htags-ec532a88-543a-4f97-883b-8e1a5744a7b9" class="vk_tableOfContents_list_item_link"><span class="vk_tableOfContents_list_item_link_preNumber">4. </span>更新履歴</a></li></ul></div></div>
<!-- /wp:vk-blocks/table-of-contents-new -->

<!-- wp:heading {"className":"is-style-drill-heading-01"} -->
<h2 class="is-style-drill-heading-01" id="vk-htags-3893dff7-b972-47df-a74e-2b1167c83fba">Fort II のヘッダー固定を Origin 風にするには？</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>今回やるべきことは下記の３つです。</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"is-style-vk-group-solid vk-has-vivid-cyan-blue-color"} -->
<div class="wp-block-group is-style-vk-group-solid vk-has-vivid-cyan-blue-color"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"is-style-vk-arrow-mark vk-has-vivid-cyan-blue-color"} -->
<ul class="is-style-vk-arrow-mark vk-has-vivid-cyan-blue-color"><li>Fort II のヘッダー固定を解除 ( 必須 )</li><li>Origin のヘッダー固定を復活 ( 必須 )</li><li>Origin のヘッダーの伸縮を復活 ( 任意 )</li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>上記は全て 子テーマの functions.php で行います。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Origin のヘッダー伸縮を ON にするとスクロール時にヘッダーがびろ～んと一瞬動きます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"is-style-drill-heading-01"} -->
<h2 class="is-style-drill-heading-01" id="vk-htags-41813ae9-e1e1-48f2-8b91-c3f1867ad0b7">Fort II のヘッダー固定を Origin 風にするコード</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Fort II のヘッダー固定を Origin 風にするコードは下記のとおりです。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"className":"is-style-drill-heading-03"} -->
<h3 class="is-style-drill-heading-03" id="vk-htags-364c5d19-d421-44b3-b1fb-f45b71e6bbbd">子テーマの functions.php に記述するコード</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>子テーマの functions.php には下記を記述します。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"php","langName":"PHP","fileName":"functions.php"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-php" data-file="functions.php" data-lang="PHP"><code>/**
 * Header Prefix Setting for Fort II
 */
function lightning_disable_fort2_header_prefix() {
    // Fort II のヘッダー固定を解除 ( 必須 ).
    remove_filter( &#39;lightning_localize_options&#39;, &#39;lightning_fort_add_js_option&#39;, 10, 1 );
    // Origin のヘッダー固定を復活 ( 必須 ).
    remove_filter( &#39;lightning_headfix_enable&#39;, &#39;ltg_fort_headfix_disabel&#39; );
    // Origin のヘッダー伸縮を復活 ( 任意 ).
    remove_filter( &#39;lightning_header_height_changer_enable&#39;, &#39;ltg_fort_header_height_changer_disabel&#39; );
}
add_action( &#39;init&#39;, &#39;lightning_disable_fort2_header_prefix&#39; );</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:heading {"className":"is-style-drill-heading-01"} -->
<h2 class="is-style-drill-heading-01" id="vk-htags-5c6d5433-bceb-4122-b817-cc16a9c80d2b">まとめ</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>この記事では Lightning / Lightning Pro のスキンの一つである Fort II のヘッダーの固定を Origin 風にする方法について解説しました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>子テーマの functions.php にコードを追記することで可能でした。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"is-style-drill-heading-01"} -->
<h2 class="is-style-drill-heading-01" id="vk-htags-ec532a88-543a-4f97-883b-8e1a5744a7b9">更新履歴</h2>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>更新日時</th><th>更新履歴</th></tr></thead><tbody><tr><td>【更新１】2020/05/13</td><td>ヘッダー固定の方法が変わったので記事を更新</td></tr></tbody></table></figure>
<!-- /wp:table -->
naogify commented 3 years ago

http://dev.vkblocks.vektor-inc.co.jp/wp-admin/post.php?post=72&action=edit　 のログを見たところ、目次ブロックのエラーはコンソールに確認できなかった。

仮説：見出しブロックが壊れてるから、壊れてる？

drill-lancer commented 3 years ago

私のサイトでは VK 見出しは一切使わずコアの見出ししか使ってません。 というか目次以外の VK Blocks は使ってませんね（笑）

drill-lancer commented 3 years ago 
var toc_utils_returnHtml = function returnHtml(source, attributes, className) {
  var style = attributes.style;

  if (!className) {
    className = 'vk_tableOfContents';
  } else {
    className = className + ' vk_tableOfContents';
  }

  if (style) {
    className = className + ' vk_tableOfContents-style-' + style;
  }

  var countSeparater = '.';
  var h2Count = 0;
  var h3Count = 0;
  var h4Count = 0;
  var h5Count = 0;
  var h6Count = 0;

  var fixZero = function fixZero(count) {
    if (count === 0) {
      return 1;
    }

    return count;
  };

  var returnHtmlContent = '';

  if (source) {
    returnHtmlContent = source.map(function (data) {
      var baseClass = 'vk_tableOfContents_list_item';
      var level = data.attributes.level;
      var preNumber = '';

      if (level === 2) {
        h2Count++;
        preNumber = h2Count; // Reset

        h3Count = 0;
        h4Count = 0;
        h5Count = 0;
        h6Count = 0;
      }

      if (level === 3) {
        h3Count++;
        preNumber = h2Count + countSeparater + h3Count; // Reset

        h4Count = 0;
        h5Count = 0;
        h6Count = 0;
      }

      if (level === 4) {
        h4Count++;
        preNumber = h2Count + countSeparater + fixZero(h3Count) + countSeparater + h4Count; // Reset

        h5Count = 0;
        h6Count = 0;
      }

      if (level === 5) {
        h5Count++;
        preNumber = h2Count + countSeparater + fixZero(h3Count) + countSeparater + fixZero(h4Count) + countSeparater + h5Count; // Reset

        h6Count = 0;
      }

      if (level === 6) {
        h6Count++;
        preNumber = h2Count + countSeparater + fixZero(h3Count) + countSeparater + fixZero(h4Count) + countSeparater + fixZero(h5Count) + countSeparater + h6Count;
      }

      preNumber = preNumber + '. ';
      var content = data.attributes.content ? data.attributes.content : data.attributes.title; // この条件分岐がないと見出し配置して文字列が undefinedの時にreplace対象がなくてエディタがクラッシュする

      if (content) {
        content = content.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
      }

      return Object(external_wp_element_["createElement"])("li", {
        key: data.clientId,
        className: "".concat(baseClass, " ").concat(baseClass, "-h-").concat(level)
      }, Object(external_wp_element_["createElement"])("a", {
        href: "#".concat(data.attributes.anchor),
        className: "".concat(baseClass, "_link")
      }, Object(external_wp_element_["createElement"])("span", {
        className: "".concat(baseClass, "_link_preNumber")
      }, preNumber), content));
    });
  }

  return server_browser_default.a.renderToString(returnHtmlContent); 【🚨ログでハイライトされていた行】
};
// CONCATENATED MODULE: ./src/blocks/_pro/table-of-contents-new/edit.js
drill-lancer commented 3 years ago 
function TOCEdit(props) {
  var attributes = props.attributes,
      setAttributes = props.setAttributes,
      className = props.className;
  var style = attributes.style,
      open = attributes.open,
      renderHtml = attributes.renderHtml;
  var blockProps = Object(external_wp_blockEditor_["useBlockProps"])({
    className: "vk_tableOfContents vk_tableOfContents-style-".concat(style, " tabs")
  });
  var blocks = hooks_useCurrentBlocks();
  var findBlocks = hooks_useBlocksByName('vk-blocks/table-of-contents-new');
  Object(external_wp_element_["useEffect"])(function () {
    // 投稿に目次ブロックがなければ処理を実行しない
    if (!findBlocks) {
      return;
    }

    blocks.forEach(function (block) {　【🚨ログでハイライトされていた行】
      var _dispatch = Object(external_wp_data_["dispatch"])('core/block-editor'),
          updateBlockAttributes = _dispatch.updateBlockAttributes;

      var headingBlocks = ['core/heading', 'vk-blocks/heading'];
      var hasInnerBlocks = ['vk-blocks/outer', 'core/cover', 'core/group']; // 見出しにカスタムIDを追加

      if (block.attributes.anchor === undefined && isAllowedBlock(block.name, headingBlocks)) {
        updateBlockAttributes(block.clientId, {
          anchor: "vk-htags-".concat(block.clientId)
        }); // InnerBlock内の見出しにカスタムIDを追加
      } else if (isAllowedBlock(block.name, hasInnerBlocks)) {
        block.innerBlocks.forEach(function (innerBlock) {
          // 見出しにカスタムIDを追加
          if (innerBlock.attributes.anchor === undefined && isAllowedBlock(innerBlock.name, headingBlocks)) {
            updateBlockAttributes(innerBlock.clientId, {
              anchor: "vk-htags-".concat(innerBlock.clientId)
            });
          }
        });
      } // 目次ブロックをアップデート

      if (isAllowedBlock(block.name, ['vk-blocks/table-of-contents-new'])) {
        var headings = toc_utils_getHeadings(headingBlocks);
        var innerHeadings = toc_utils_getInnerHeadings(headingBlocks, hasInnerBlocks);
        var allHeadings = headings.concat(innerHeadings);
        var render = toc_utils_returnHtml(allHeadings, block.attributes, className, block.attributes.open);【🚨ログでハイライトされていた行】
        updateBlockAttributes(block.clientId, {
          renderHtml: render
        });
      }
    });
  }, [blocks]);
  /* eslint jsx-a11y/label-has-associated-control: 0 */
drill-lancer commented 3 years ago 
return server_browser_default.a.renderToString(returnHtmlContent);
drill-lancer commented 3 years ago 
var render = toc_utils_returnHtml(allHeadings, block.attributes, className, block.attributes.open);
drill-lancer commented 3 years ago 
    blocks.forEach(function (block) {
      var _dispatch = Object(external_wp_data_["dispatch"])('core/block-editor'),
          updateBlockAttributes = _dispatch.updateBlockAttributes;

      var headingBlocks = ['core/heading', 'vk-blocks/heading'];
      var hasInnerBlocks = ['vk-blocks/outer', 'core/cover', 'core/group']; // 見出しにカスタムIDを追加

      if (block.attributes.anchor === undefined && isAllowedBlock(block.name, headingBlocks)) {
        updateBlockAttributes(block.clientId, {
          anchor: "vk-htags-".concat(block.clientId)
        }); // InnerBlock内の見出しにカスタムIDを追加
      } else if (isAllowedBlock(block.name, hasInnerBlocks)) {
        block.innerBlocks.forEach(function (innerBlock) {
          // 見出しにカスタムIDを追加
          if (innerBlock.attributes.anchor === undefined && isAllowedBlock(innerBlock.name, headingBlocks)) {
            updateBlockAttributes(innerBlock.clientId, {
              anchor: "vk-htags-".concat(innerBlock.clientId)
            });
          }
        });
      } // 目次ブロックをアップデート
drill-lancer commented 3 years ago 
react-dom.min.js:125 TypeError: Cannot read property 'getCurrentStack' of undefined
    at pushCurrentDebugStack (webpack:///./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:2665)
    at ReactDOMServerRenderer.read (webpack:///./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:3366)
    at Object.renderToString (webpack:///./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:3987)
    at returnHtml (webpack:///./src/blocks/index.js_+_405_modules?:9906)
    at eval (webpack:///./src/blocks/index.js_+_405_modules?:9952)
    at Array.forEach (<anonymous>)
    at addIdToHeadingAndUpdateTOCHtml (webpack:///./src/blocks/index.js_+_405_modules?:9925)
    at eval (webpack:///./src/blocks/index.js_+_405_modules?:9976)
    at Bh (react-dom.min.js:126)
    at Dj (react-dom.min.js:162)
naogify commented 3 years ago

@here デベロップメントモードでビルドしていたのが原因。（npm run build:dev ） プロダクションモードでビルドすると解消（npm run build ）

https://github.com/diegomura/react-pdf/issues/336