循环WordPress元以创建`<TextControl>`?

时间:2022-01-14 作者:Beaniie

我正在寻找一种智能的方法来迭代可用的post-meta,最好使用前缀_postcode_pricing_, 并创建新的<TextControl> 每个的组件。真的,我有两个问题,因为我还不太熟悉如何反应和WordPress/脚本。

Question One:

select("core/editor").getEditedPostAttribute("meta") 获取整个post meta?

Question Two:

如何迭代生成的post-meta(如果它得到了全部)来获取每个,_postcode_pricing_ 选项,并创建<TextControl> 对于每个?

这是我当前的代码,希望您能看到我在使用它。(这段代码不起作用,我也不希望它起作用。我提供它只是希望它能帮助您理解我的问题。)

const TextController = (props) => {
  // Get post meta
  const meta = useSelect((select) =>
    select("core/editor").getEditedPostAttribute("meta")
  );

  const { editPost } = useDispatch("core/editor");

  // loop through the meta array creating textFields as we go.
  var metaOptions = meta;
  for ($i = 0, $size = count(metaOptions); $i < $size; ++$i) {
    panelInputs.push(
      <PanelRow>
        <TextControl
          label={__("META FIELD NAME", "postcode-pricing")}
          value={meta}
          class={"metaControl-".i} // note: using class to allow react to uniquely identify each element
          onChange={(value) =>
            editPost({ meta: { _postcode_pricing_META_FIELD_NAME: value } })
          }
        />
      </PanelRow>
    );
  }
  return <div>{panelInputs}</div>;
};
My Current JSON output - example.com/wp-json/wp/v2/postcode_pricing_pt/POST-ID

"meta": {
  "_generate-full-width-content": "",
  "_postcode_pricing_outward_code": "",           // <-- I only want to grab the following lines
  "_postcode_pricing_postal_town": "",            // <--
  "_postcode_pricing_postal_county": "",          // <--
  "_postcode_pricing_auto_1hr": "",               // <--
  "_postcode_pricing_auto_5hr": "",               // <--
  "_postcode_pricing_auto_10hr": "",              // <--
  "_postcode_pricing_auto_weekend_evening": "",   // <--
  "_postcode_pricing_manual_1hr": "",             // <--
  "_postcode_pricing_manual_5hr": "",             // <--
  "_postcode_pricing_manual_10hr": "",            // <--
  "_postcode_pricing_manual_weekend_evening": ""  // <--
},

My Meta Registration

/**
 * Registers postcode_pricing_pt meta data
 *
 * @since    1.0.0
 */
public function postcode_pricing_register_meta() {

    // Meta array.
    $postcodePricingMetaFields = array(
        \'outward_code\',
        \'postal_town\',
        \'postal_county\',
        \'auto_1hr\',
        \'auto_5hr\',
        \'auto_10hr\',
        \'auto_weekend_evening\',
        \'manual_1hr\',
        \'manual_5hr\',
        \'manual_10hr\',
        \'manual_weekend_evening\'
    );

    // Loop over meta array and register each new value.
    // example.com/wp-json/wp/v2/postcode_pricing_pt/POST-ID
    for ($i = 0, $size = count($postcodePricingMetaFields); $i < $size; ++$i) {

        // Register additional meta fields.
        register_post_meta(\'postcode_pricing_pt\', \'_postcode_pricing_\' . $postcodePricingMetaFields[$i], array(
            \'show_in_rest\' => true,
            \'type\' => \'string\',
            \'single\' => true,
            \'sanitize_callback\' => \'sanitize_text_field\',
            \'auth_callback\' => function () {
                return current_user_can(\'edit_posts\');
            }
        ));

    }

}

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

select("core/editor").getEditedPostAttribute("meta") 获取整个post meta?

只有使用register_post_meta()register_meta() 使用show_in_rest 参数设置为true. 例如,meta可以这样注册:

register_post_meta( \'post\', \'_postcode_pricing_postal_town\', array(
    \'show_in_rest\'  => true,
    \'single\'        => true,
    \'type\'          => \'string\',
    // I set this because the meta is *protected*, i.e. the key starts with a _
    // (i.e. an underscore), and when the meta is protected, by default it will
    // not be editable via the REST API (even if the request was authenticated).
    \'auth_callback\' => function () {
        return current_user_can( \'edit_posts\' );
    },
) );
如何迭代生成的post-meta(如果它得到了全部)来获取每个,_postcode_pricing_ 选项,并创建<TextControl> 对于每个?

首先,我建议你使用useEntityProp 要检索和更新post meta-请参阅here 了解更多详细信息。

下面是一个如何正确填写panelInputs 具有一个或多个<TextControl> 根据您的帖子元:

const postType = useSelect(
    ( select ) => select( \'core/editor\' ).getCurrentPostType(),
    []
);

const [ meta, setMeta ] = useEntityProp( \'postType\', postType, \'meta\' );

const updateMetaValue = ( key, value ) => {
    // Clone the existing meta object.
    const newMeta = { ...meta };

    // Update the specific meta only.
    newMeta[ key ] = value;

    // Then set the updated meta.
    setMeta( newMeta );
};

let panelInputs = [];
for ( let key in meta ) {
    if ( /^_postcode_pricing_/.test( key ) ) {
        panelInputs.push(
            <TextControl
                label={ key }
                value={ meta[ key ] }
                onChange={ ( value ) => updateMetaValue( key, value ) }
            />
        );
    }
}
不要忘记加载useEntityProp, e、 g。import { useEntityProp } from \'@wordpress/core-data\';.

在上述示例中<input>\'s标签是元键。。但我想你能自己改变吗?

相关推荐

如何从JavaScript生成COOKIEHASH

首要问题是如何获取PHP变量的内容:COOKIEHASH 在柏树测试中。我正在为WordPress编写一些Cypress测试,为了设置cookiesto log in a user in WordPress using Cypress, 那么我需要COOKIEHASH-变量对于那些不熟悉COOKIEHASH, 转到WordPress安装并将此代码放入任何位置:echo \'<pre>\'; print_r(COOKIEHASH); echo \'</pre>\';&