Question

在Gutenberg编辑器中，代码随着“转换为块”而变化。

使用WordPress的旧编辑器，我一直在同一行上将左侧的一些文本和右侧的一些文本对齐的代码是-

HTML：

<p><span class="alignleft"><big><strong>Pelagic thresher</strong></big></span><!--more--><span class="alignright fao"><strong>PTH</strong></span></p>

CSS：

span.fao {
border: 2px solid #2D325A;
border-radius:12px;
padding: 4px;

}

当我在古腾堡（Gutenberg）编辑器中选择“转换为块”时，代码已更改，并变为：

<p><span contenteditable="false" class="abt-citation"><big><strong>Pelagic thresher</strong></big></span><span contenteditable="false" class="abt-citation"><strong>PTH</strong></span></p>

Academic Blogger Toolkit插件发生了什么奇怪的事情？但它似乎仍然可以显示我想要的方式。

如果我将代码修改为：

<p><span class="alignleft"><big><strong>Pelagic thresher</strong></big></span><!--more--><br><span class="alignright fao"><strong>PTH</strong></span></p>

然后它不显示我想要的样子，“ alighleft”文本（Pelagic脱粒机）出现在“ alignright”文本（PTH）上方的行上

感谢帮助

Answer 1

在古腾堡中对齐文本的最佳方法。

首先，声明对齐属性-

alignment: {
    type: 'string',
    default: 'center',
},

然后在编辑器和样式CSS文件中添加这些CSS-

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

编辑和保存功能中的相关HTMl节点-

<div className={`text-${alignment}`}>

当您使用默认的Gutenberg编辑（如工具对齐）时，将应用适当的类。

使用略有不同的技术填充块代码-

/**
 * BLOCK: Tar Text Block One
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';



// let's us call registerBlockType() directly from the wp.blocks library
const { registerBlockType } = wp.blocks;


// let's us use the withAPIData() function from the wp.components library to access the Rest API
const {
    PanelBody,
    Dashicon,
    RangeControl,
    SelectControl,
    Button 
} = wp.components;

// let's us use the __() function from the wp.i18n library to translate strings
const { __ } = wp.i18n;

const {
    RichText,
    BlockControls,
    InspectorControls,
    AlignmentToolbar,
    MediaUpload,
    ColorPalette,
    PanelColor,
    BlockAlignmentToolbar,
    PanelColorSettings,
} = wp.editor;



const textBlockOneEdit = ( props ) => {

    const { isSelected, className, setAttributes } = props;

    const { 
        text,
        alignment,
     } = props.attributes;



    const position = [
        { value: 'left', label: __( 'Left' ) },
        { value: 'center', label: __( 'Center' ) },
        { value: 'right', label: __( 'Right' ) },

    ];



     return [
         isSelected && (
            <InspectorControls key= { 'inspector' } >
                    <PanelBody title={ 'Text Block Settings' }>

                    <SelectControl
                        label={ __( 'Text Alignment' ) }
                        value={ alignment }
                        options={ position.map( ({ value, label }) => ( {
                            value: value,
                            label: label,
                        } ) ) }
                        onChange={ ( newVal ) => { setAttributes( { alignment: newVal } ) } }
                    />

                </PanelBody>
            </InspectorControls>
         ),

         <section className={`text-section-one`}  >

            <div className={`textDiv text-${alignment}`}>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Geo Discovery', 'tar' ) }
                    value={ text }
                    onChange={onChange={ ( val ) => setAttributes( { text : val } ) }
                />

            </div>

        </section>

     ]

}

const textBlockOneSave = ( props ) => {

    const { 
        text,
        alignment,
     } = props.attributes;

     return (
        <section className={`text-section-one`} >


         <div className={`textDiv text-${alignment}`}>
            <RichText.Content
                tagName="h3"
                value={ text }
            />
         </div>
        </section>
     )
}

 registerBlockType('tar-theme/tar-text-block-one',{
     title: __( 'Text Block One', 'tar' ),
     icon: <svg class="svg-icon" viewBox="0 0 20 20">
     <path fill="#2196F3" d="M14.999,8.543c0,0.229-0.188,0.417-0.416,0.417H5.417C5.187,8.959,5,8.772,5,8.543s0.188-0.417,0.417-0.417h9.167C14.812,8.126,14.999,8.314,14.999,8.543 M12.037,10.213H5.417C5.187,10.213,5,10.4,5,10.63c0,0.229,0.188,0.416,0.417,0.416h6.621c0.229,0,0.416-0.188,0.416-0.416C12.453,10.4,12.266,10.213,12.037,10.213 M14.583,6.046H5.417C5.187,6.046,5,6.233,5,6.463c0,0.229,0.188,0.417,0.417,0.417h9.167c0.229,0,0.416-0.188,0.416-0.417C14.999,6.233,14.812,6.046,14.583,6.046 M17.916,3.542v10c0,0.229-0.188,0.417-0.417,0.417H9.373l-2.829,2.796c-0.117,0.116-0.71,0.297-0.71-0.296v-2.5H2.5c-0.229,0-0.417-0.188-0.417-0.417v-10c0-0.229,0.188-0.417,0.417-0.417h15C17.729,3.126,17.916,3.313,17.916,3.542 M17.083,3.959H2.917v9.167H6.25c0.229,0,0.417,0.187,0.417,0.416v1.919l2.242-2.215c0.079-0.077,0.184-0.12,0.294-0.12h7.881V3.959z"></path></svg>,
     description: __('Text block one for Tar Theme', 'tar'),
     category: __('common', 'tar'),
     keywords: [
         __( 'Text Block One', 'text-domain'),
     ],
     attributes: {
        // Hero image attributes

        text: {
            type: 'string',
            selector: 'h3',
            default: __('Geo Discovery', 'tar'),
        },

         alignment: {
            type: 'string',
            default: 'left',

     },

     edit: textBlockOneEdit,

     save: textBlockOneSave,

 })

使用WordPress的新文本编辑器Gutenberg对齐文本的最佳方法？

1 个答案: