在 wordpress Gutenberg 块中调用 DateTimePicker

Question

我想这应该是比较容易的，但是我想不通。

我正在使用 React 组件在 JSX 中创建一个自定义的 Gutenberg 块，它有一个我称之为

datetime

的属性。使用该块，您可以选择将保存到数据库并在前端呈现的日期和时间。

使用文档我导入所有依赖项并创建一个

const

像这样：

const MyDateTimePicker = withState( {
    date: new Date(),
} )( ( { date, setState } ) => {
    const settings = __experimentalGetSettings();

    // To know if the current timezone is a 12 hour time with look for an "a" in the time format.
    // We also make sure this a is not escaped by a "/".
    const is12HourTime = /a(?!\\)/i.test(
        settings.formats.time
            .toLowerCase() // Test only the lower case a
            .replace( /\\\\/g, '' ) // Replace "//" with empty strings
            .split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash
    );

    return (
        <DateTimePicker
            currentDate={ date }
            onChange={ ( date ) => setState( { date } ) }
            is12Hour={ is12HourTime }
        />
    );
} );

我的问题是：我怎么称呼它？

我试过

{ MyDateTimePicker }

、

{ MyDateTimePicker() }

和

<button onClick={ MyDateTimePicker }>test</button>

。这些似乎都不起作用。

Answer 1

您需要阅读编辑和保存功能

在编辑时，假设您已经根据需要定义了属性日期时间，您会像这样使用它：

const { Fragment, createElement } = window.wp.element;
const { InspectorControls } = window.wp.editor;
const { Panel, PanelBody, PanelRow, DateTimePicker } = window.wp.components;

export default function edit( { attributes, setAttributes } ) {

  const { datetime } = attributes;

  const onUpdateDate = ( dateTime ) => {
    var newDateTime = moment(dateTime).format( 'YYYY-MM-DD HH:mm' );
    setAttributes( { datetime: newDateTime } );
  };

  return (
    <Fragment>
      <InspectorControls>
        <PanelBody
            title="Some title for the date-tile panel"
            icon=""
            initialOpen={ false }
        >
          <PanelRow>
            <DateTimePicker
                currentDate={ datetime }
                onChange={ ( val ) => onUpdateDate( val ) }
                is12Hour={ true }
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    </Fragment>
  );
}

在保存功能上，您可以像这样轻松显示输出：

const { createElement, Fragment } = window.wp.element;
export default function save( { attributes } ) {

    const { datetime } = attributes;

    return (
        <Fragment>
        { datetime ?
      <div>
        <p>The Date-Time: <span>{datetime}</span></p>
      </div> :
        <p>No date defined</p>
        </Fragment>
    );
}

注意： 上面的示例将在块编辑器右侧面板的面板行中显示日期时间选择器，如果您希望它以不同方式显示或作为某些操作的一部分，您需要有点创意和创建你自己的 React 组件。

Answer 2

有人可以告诉我如何在主题中添加/加载这个 js 文件吗？

谢谢。