古腾堡侧边栏中的 DateTimePicker

Question

我正在编写一个插件，它添加了一个 Gutenbeg 侧边栏来为 post 设置一些新属性（使用 meta），它包括一些下拉菜单、文本、复选框、日期时间选择器等等；一切都按预期工作，从 post 元存储和检索正确的数据。我的问题是 DateTimePicker 组件，尽管它工作正常，但它以丑陋的方式显示，日历扩展，日期和时间选择在其上方，无法为其设置 title/label。我正在考虑使用主 gutenberg 侧边栏中使用的 popover 解决方案进行发布，但我找不到任何关于如何打开 popover 单击文本、将 datepicker 放在 popover 中、在日期选择时更新链接文本的文档有什么建议吗？

Answer 1

你想要这样的东西：

<Dropdown
    position="middle left"
    renderToggle={ ( ( { isOpen, onToggle } ) => (
        <Button isLink onClick={ onToggle } aria-expanded={ isOpen }>
            { currentDate ? date( 'd.m.Y H:i', currentDate ) : "placeholder" }
        </Button>
    ) ) }
    renderContent={ () => (
        <DateTimePicker
            currentDate={ currentDate }
            onChange={ newDate => /* update date */ }
        />
    ) }>
</Dropdown>

isLink 将 is-link class 添加到按钮，使其看起来像 link。使用日期包来格式化日期。

古腾堡侧边栏中的 DateTimePicker

DateTimePicker in Gutenberg sidebar

wordpress

sidebar

datetimepicker

wordpress-gutenberg