使用WordPress的新文本编辑器Gutenberg对齐文本的最佳方式是什么？

Question

代码在古腾堡编辑器中随着"转换为块"而变化。

使用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;   

}

当我在古腾堡编辑器中选择"转换为块"时，代码已更改，它变为：

<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>

学术博主工具包插件发生了一些奇怪的事情？ 但它似乎仍然显示我想要的方式。

如果我将代码修改为：

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

然后它不显示我想要的方式，"alighleft"文本(远洋脱粒机(出现在"右对齐"文本 (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}`}>

当您使用默认的古腾堡编辑(如工具对齐(时，将应用相应的类。

FUll 使用略有不同的技术进行块代码 -

/**
 * 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,
 })