Question

我尝试复制标题以创建自定义标题。

不幸的是，该块未保存元数据。

为什么内容正确保存，但backgroundColor不正确？

index.js

/**
 * External dependencies
 */
import { isEmpty } from 'lodash';

/**
 * WordPress dependencies
 */
import { heading as icon } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import deprecated from './deprecated';
import edit from './edit';
import metadata from './block.json';
import save from './save';
import transforms from './transforms';

const { name } = metadata;

export { metadata, name };

export const settings = {
    title: __( 'Heading' ),
    description: __(
        'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
    ),
    icon,
    keywords: [ __( 'title' ), __( 'subtitle' ) ],
    example: {
        attributes: {
            content: __( 'Code is Poetry' ),
            level: 2,
        },
    },
    __experimentalLabel( attributes, { context } ) {
        if ( context === 'accessibility' ) {
            const { content, level } = attributes;

            return isEmpty( content )
                ? sprintf(
                        /* translators: accessibility text. %s: heading level. */
                        __( 'Level %s. Empty.' ),
                        level
                  )
                : sprintf(
                        /* translators: accessibility text. 1: heading level. 2: heading content. */
                        __( 'Level %1$s. %2$s' ),
                        level,
                        content
                  );
        }
    },
    transforms,
    deprecated,
    merge( attributes, attributesToMerge ) {
        return {
            content:
                ( attributes.content || '' ) +
                ( attributesToMerge.content || '' ),
        };
    },
    edit,
    save,
};

block.json

{
    "name": "afs/heading",
    "category": "text",
    "attributes": {
        "align": {
            "type": "string"
        },
        "backgroundColor": {
            "type": "string",
            "source": "meta"
        },
        "content": {
            "type": "string",
            "source": "html",
            "selector": "h1,h2,h3,h4,h5,h6",
            "default": ""
        },
        "level": {
            "type": "number",
            "default": 2
        },
        "placeholder": {
            "type": "string"
        }
    },
    "supports": {
        "anchor": true,
        "className": false,
        "lightBlockWrapper": true,
        "__experimentalColor": {
            "linkColor": true
        },
        "__experimentalFontSize": true,
        "__experimentalLineHeight": true,
        "__experimentalSelector": {
            "afs/heading/h1": "h1",
            "afs/heading/h2": "h2",
            "afs/heading/h3": "h3",
            "afs/heading/h4": "h4",
            "afs/heading/h5": "h5",
            "afs/heading/h6": "h6"
        },
        "__unstablePasteTextInline": true
    }
}

edit.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import {
    AlignmentToolbar,
    BlockControls,
    RichText,
    InspectorControls,
    __experimentalBlock as Block,
} from '@wordpress/block-editor';
import { ToolbarGroup } from '@wordpress/components';
const {
    PanelColorSettings,
} = wp.editor;
/**
 * Internal dependencies
 */
import HeadingLevelDropdown from './heading-level-dropdown';

function HeadingEdit( {
    attributes,
    setAttributes,
    mergeBlocks,
    onReplace,
    mergedStyle,
} ) {
    const { align, content, level, placeholder, backgroundColor } = attributes;
    const tagName = 'h' + level;

    const onChangeBackgroundColor = ( colorValue ) => {
        setAttributes( { backgroundColor: colorValue } );
    };

    return (
        <div>
            {
            <InspectorControls>
                <PanelColorSettings
                    title={ __( 'Color Settings' ) }
                    colorSettings={ [
                        {
                            value: backgroundColor,
                            onChange: onChangeBackgroundColor,
                            label: __( 'Background Color' ),
                        }
                    ] }
                >

                </PanelColorSettings>
            </InspectorControls>
            }
            <BlockControls>
                <ToolbarGroup>
                    <HeadingLevelDropdown
                        selectedLevel={ level }
                        onChange={ ( newLevel ) =>
                            setAttributes( { level: newLevel } )
                        }
                    />
                </ToolbarGroup>
                <AlignmentToolbar
                    value={ align }
                    onChange={ ( nextAlign ) => {
                        setAttributes( { align: nextAlign } );
                    } }
                />
            </BlockControls>

            <RichText
                identifier="content"
                tagName={ Block[ tagName ] }
                value={ content }
                onChange={ ( value ) => setAttributes( { content: value } ) }
                onMerge={ mergeBlocks }
                onSplit={ ( value ) => {
                    if ( ! value ) {
                        return createBlock( 'core/paragraph' );
                    }

                    return createBlock( 'afs/heading', {
                        ...attributes,
                        content: value,
                    } );
                } }
                onReplace={ onReplace }
                onRemove={ () => onReplace( [] ) }
                className={ classnames( {
                    [ `has-text-align-${ align }` ]: align,
                } ) }
                placeholder={ placeholder || __( 'Write heading…' ) }
                textAlign={ align }
                style={ mergedStyle }
                allowedFormats={ [ 'afs/light', 'core/link', 'core/code', 'core/image', 'core/strikethrough', 'core/subscript', 'core/superscript', 'core/text-color' ] }
            />
        </div>
    );
}

export default HeadingEdit;

save.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { RichText } from '@wordpress/block-editor';


export default function save( { attributes } ) {
    const { align, content, level } = attributes;
    const tagName = 'h' + level;

    const className = classnames( {
        [ `has-text-align-${ align }` ]: align,
    } );

    return (
        <RichText.Content
            className={ className ? className : undefined }
            tagName={ tagName }
            value={ content }
        />
    );
}

Answer 1

即使创建新的Gutenberg块，也需要通过PHP函数注册元字段，参考：https://developer.wordpress.org/block-editor/tutorials/metabox/meta-block-2-register-meta/

如果您已经注册了元字段backgroundColor，则接下来检查 show_in_rest 的属性是否设置为 true ，因为这是使用Gutenberg保存/更新元值的方式。下面是注册元字段backgroundColor所需功能的示例：

<?php 
function afs_heading_register_meta(){
    register_meta( 'post', 'backgroundColor', array(
      'show_in_rest' => true,
      'single' => true,
      'type' => 'string',
    ) );
}
add_action( 'init', 'afs_heading_register_meta' );
?>

另一个常见问题是帖子类型（或自定义帖子类型）不支持元值-可以通过调用来确认：

<?php post_type_supports( $post_type, 'custom-fields' ); ?>

如果您发现自己的帖子类型不支持元值（也称为自定义字段），则可以通过add_post_type_support启用它。

您块中的“内容”已正确保存为源于html的内容，并保存在post_content中。如果backgroundColor属性仅适用于您的块的实例，则也许它也可以另存为一个属性并用作内联样式。

古腾堡块无法保存块元数据

1 个答案: