标签: wordpress-gutenberg

我在WordPress v4.9.8中安装了Gutenberg插件,我正在尝试删除随附的CSS,以便我可以自己提供.

这是包含的表格:

__CODE__

我尝试过以下方法:

<link rel='stylesheet' id='wp-block-library-css'  href='/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1535795173' type='text/css' media='all' />

除了这个的变化,但文件仍然存在.我该如何删除它？

我正在尝试在文档选项卡下添加一个新的组件面板，例如类别，特色图像等。

我尝试使用“React-Select”作为我的 WordPress 块组件来选择帖子类别。
我想要的是在加载类别时显示“正在加载...”，然后在加载完成时显示类别列表或“未找到类别”。
使用我的代码，它在加载时显示“未找到类别”，然后显示类别列表。

export default class Categories extends Component {
    constructor() {
        super( ...arguments );
        this.state = {cats: []};
    }
    componentDidMount () {
        return apiFetch({path: '/myoriginal-blocks/v1/categories'})
        .then(data => {
            this.setState({cats:data});
        })
    }
    onChangeCategories = newCategories => {
        this.props.setAttributes({ category: newCategories == null ? [] : newCategories });
    }
    render() {
        const { attributes } = this.props;
        const { category } = attributes;
        return (
            <>
                <div>
                    <label>Categories</label>
                    <Select
                        isMulti
                        isClearable
                        placeholder='Search categories...'
                        onChange={ this.onChangeCategories }
                        options={ this.state.cats } …

我想确切地提供将gallery属性提供给<MediaUpload>组件时使用的Media Upload Popup 。与普通Mediaupload的不同之处在于，您会在左侧看到一个侧边栏，并在选择了项目之后进入一个视图，可以在其中重新排列媒体，如下面的第一张图片所示，而不是第二张随我的代码一起出现的媒体使用：

<MediaUpload
  onSelect={ this.onSelectMedia }
  /*todo here should be gallery attr but it will disable video selection*/
  allowedTypes={ [ 'image', 'video' ] }
  accept="image/*,video/*"
  multiple
  value={ this.media.map( ( m ) => m.mediaId ) }
  render={ ( { open } ) => (
    <IconButton
      label={ __( 'Edit Media' ) }
      icon="images-alt2"
      onClick={ open }
    />
  ) }
/>

当我添加gallery属性时，allowedTypes将以某种方式被gallery属性覆盖，并且只有图像会显示在MediaUpload窗口中。

第一张图片，怎么样

第二张图片，我需要什么（但有图片+视频显示）

我使用 @wordpress/create-block 创建了一个自定义块插件（https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/）

它作为一个插件工作，但是当我将它移动到主题中时，block.json 文件中的“editorScript”返回错误的路径。

themeDirectory/blocks/mycustomblock/block.json\n\n{\n    "name": "create-block/mycustomblock",\n    "title": "Mycustomblock",\n    "description": "Example block written with ESNext standard and JSX support \xe2\x80\x93 build step required.",\n    "category": "text",\n    "icon": "smiley",\n    "supports": {\n        "html": false\n    },\n    "attributes":{\n        "backgroundColor": {\n            "type": "string",\n            "default": "red"\n        }\n    },\n    "editorScript": "file:./build/index.js"\n}\n

从 editorScript 返回的路径：

404 | http://localhost:8888/wordpress-test/wp-content/plugins/Users/jonrose/Dropbox/htdocs/wordpress-test/wp-content/themes/mytheme/blocks/mycustomblock/build/index.js?ver=4f45658ee3212a45c5d5367f6fbdfeba\n

如果我在 register_block_type 函数中注册脚本，它可以正常工作

wp_register_script( \'mycustomblock-js\', get_template_directory_uri() . \'/blocks/mycustomblock/build/index.js\', array( \'wp-blocks\' ));\n\n    register_block_type( __DIR__, array(\n        \'editor_script\' => \'mycustomblock-js\'\n    ) );\n

回到TMCE时代,我们可以很容易地获得编辑器内容editor.getContent().然而在新的Gutenberg编辑器中,我找不到一种方法来做到这一点.

我需要所有编辑器内容作为HTML(它将保存在数据库中的方式).

我发现wp.block.serialize()听起来很有前途的方法.但似乎需要块(作为参数).所以我有点卡住了.

如何在wordpress gutenberg编辑器中将新插入的块滚动到视图中？

我正在创建块

const nextBlock = createBlock( 'core/paragraph' );
wp.data.dispatch( 'core/editor' ).insertBlock( nextBlock );
//scroll the block into the view

我还看到古登堡（Gutenberg）dom-scroll-into-view像在这里那样使用软件包。

他们的文件说：

var scrollIntoView = require('dom-scroll-into-view');
scrollIntoView(source,container,config);

但是如何使它在我的情况下起作用，如何获取源和容器DOM元素？

我为 wordpress 的古腾堡编辑器构建了一个自定义组件。我需要一种从已选择类别列表中选择单个类别的方法。我能够使用下面的代码实现这种功能。我的组件的唯一问题是，如果用户在编辑器本身中添加一个全新的类别时，它不会刷新其类别列表，当添加这样的类别时，该类别是自动选择的，因此应出现在自定义下拉列表中.

我一直在查看文档，但没有找到实现这种效果的方法，它似乎select().getEntityRecords()正在缓存它获得的第一组结果，并且不会在没有页面刷新的情况下查询新数据。

旁注：还有其他功能可以限制用户可以检查的常规类别的数量。目前我的代码将其限制为 3，并且不允许用户保存帖子，因为他们检查了超过 3 个。

索引.js

// WordPress dependencies.
import { createElement as el, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

// Internal dependencies.
import PostPrimaryCategory from './post-primary-category';
/**
 * Add new field to category content block
 * Also add a limit check for categories
 * 
 * @param {*} OriginalComponent 
 */
function wrapPostPrimaryCategory( OriginalComponent ) {
    return function( props ) { 
    // create content block 
    let originalElement = el( OriginalComponent, props ); …

我为古腾堡创建了一个自定义横幅图像块，效果很好，但是我想知道在编辑之前是否可以将页面标题用作当前横幅文本占位符？

我的编辑功能是

 return [
            el('div', {className:'header-banner'},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: 'banner-image',
                        style: { backgroundImage: 'url('+attributes.mediaURL+')' }
                    },
                    attributes.title || isSelected ?  el(RichText, {
                            key: 'editable',
                            tagName: "h1",
                            className: "banner-title",
                            //Can i add the page title in here if it is avaiable??
                            //placeholder: i18n.__('Write title…'),
                            value: attributes.title,
                            onChange: function onChange(value) {
                                return props.setAttributes({ title: value });
                            },
                            inlineToolbar: true
                        }) : null 

                    )
                )
            )//header-banner
        ];    

谢谢 ：）

在 WordPress Gutenberg 编辑器中，我试图以编程方式在图像块上设置默认类，该类无需用户通过“附加 CSS”字段手动添加即可应用。

我曾尝试在图像块上应用默认样式，该样式最初有效 -

wp.blocks.registerBlockStyle( 'core/image', {
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
});

但是在用户更改自定义下拉列表中的字段后，我需要更新此默认类。更改此下拉列表时，我将取消注册块样式，然后注册新的默认块样式 - 但它对额外创建的图像没有影响（不使用更新的默认样式创建图像，仍使用旧的）。

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

更新默认图片块样式后是否需要刷新编辑器？或者有没有其他更好的方法来做到这一点？

更新块样式的参考