在 wordpress Gutenberg 块中调用 DateTimePicker

Question

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

我正在使用 React 组件在 JSX 中创建一个自定义的 Gutenberg 块，它有一个我称之为 datetime 的属性。使用该块，您可以选择将保存到数据库并在前端呈现的日期和时间。

使用 documentation 我导入所有依赖项并创建一个 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>。 None 这似乎有效。

Answer 1

您需要阅读有关 Edit and Save functions

的内容

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

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 组件。

在 wordpress Gutenberg 块中调用 DateTimePicker

call DateTimePicker in wordpress Gutenberg block

javascript

wordpress

jsx

wordpress-gutenberg