The best way to align text using WordPress's new text editor Gutenberg?

Question

Code is changing with 'convert to blocks' in Gutenberg editor.

With WordPress's old editor, the code I have been using to align some text on the left and some text on the right, on the same line has been-

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;   

}

When I select 'convert to blocks' in the Gutenberg editor the code has changed and it becomes:

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

Something strange happening with Academic Blogger Toolkit plugin? but it still seems to display how I want it to.

If I modify the code to:

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

Then it does not display how I want, the "alighleft" text (Pelagic thresher) appears on the line ABOVE the "alignright" text (PTH)

help appreciated

Answer 1

Best way to align text in Gutenberg.

First, declare alignment attribute -

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

Then in the editor and style css file add these css -

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

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

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

And the relevant HTMl nodes in edit and save function -

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

When you use default Gutenberg editing like tool alignment, appropriate class will be applied.

FUll block code using slightly different technique -

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

 })