page-section_not-working.js

/**
 * BLOCK: wp-block-fns-blocks-page-intro (page-intro)
 */

// == Block dependencies
import classnames from 'classnames';
import blockIcons from '../icons';
import './style.scss';
import './editor.scss';

// == Internal block libraries (get functions from global scope)
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
 	RichText,
	BlockControls,
	AlignmentToolbar,
	InspectorControls,
  ColorPalette,
  PanelColorSettings
} = wp.editor;
const {
  PanelBody,
  PanelRow
} = wp.components;
const { withState } = wp.compose;


/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */

// == Create/register new block ('namespace/block-name').
export default registerBlockType( 'fns-blocks/section-heading',
	{
		// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
		title: __( 'Section heading', 'fns-blocks'),
		description: __( 'Heading for section.', 'fns-blocks' ),
		icon: {
			// background: '#ffffff',
			foreground: '#57be24',
			src: blockIcons.sectionHeading,
		},
	  category: 'layout', // common | formatting | layout | widgets | embed
		keywords: [	// Max 3 items @ this moment.
			__( 'section heading', 'fns-blocks' ),
		],
		supports: {
			html: false,
			// className: true,				// default
			// customClassName: true,	// default
		},
		parent: [
			'fns-blocks/container',
		],
		attributes: {
			content: {
				type: 'array',
				source: 'children', // attribute | text | html | children
				multiline: false,
				selector: 'span',
			},
			textAlignment: {
				type: 'string',
				default: 'center',
			},
			headingColor: {
				type: 'string',
				default: '#414140'
			},
			headingColorClass: {
				type: 'string',
			}
		},

		/**
		 * The edit function describes the structure of your block in the context of the editor.
		 * This represents what the editor will render when the block is used.
		 *
		 * The "edit" property must be a valid function.
		 *
		 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
		 */
		edit: props => {
			const {
				attributes: { content, textAlignment, headingColor, headingColorClass },
				className,
				setAttributes
			} = props;

			const headingColors = [
				{ name: __( 'default', 'fns-blocks' ), slug: 'heading-color-default', color: '#414140' },
        { name: __( 'primary', 'fns-blocks' ), slug: 'heading-color-primary', color: '#52b322' },
        { name: __( 'secondary', 'fns-blocks' ), slug: 'heading-color-secondary', color: '#80817f' },
        { name: __( 'light', 'fns-blocks' ), slug: 'heading-color-light', color: '#f8f9fa' },
	    ];

			return ( [
				<InspectorControls>
					<PanelColorSettings
            title={ __( 'Color Settings', 'fns-blocks' ) }
            colorSettings={ [
                {
									colors: headingColors,
                  value: headingColor,
                  onChange: headingColor => setAttributes( {
										headingColor,
										headingColorClass: getColorObjectByColorValue(headingColors, headingColor).slug,
									 } ),
                  label: __( 'Text color', 'fns-blocks' ),
                },
            ] }
        	></PanelColorSettings>
				</InspectorControls>,
				<h2
					className={ classnames(
						className,
						'section-heading',
					) }
					style={ { textAlign: textAlignment, color: headingColor } }
				>
					<BlockControls>
							<AlignmentToolbar
									value={ textAlignment }
									onChange={ textAlignment => setAttributes( { textAlignment } ) }
							/>
					</BlockControls>
					<RichText
						tagName="span"
						placeholder={ __( 'Add your section heading here', 'fns-blocks' ) }
						value={ content }
						onChange={ content => setAttributes( { content } ) }
					/>
				</h2>
			] );
		},

		/**
		 * The save function defines the way in which the different attributes should be combined
		 * into the final markup, which is then serialized by Gutenberg into post_content.
		 *
		 * The "save" property must be specified and must be a valid function.
		 *
		 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
		 */
		save: props => {
			const {
				attributes: { content, textAlignment, headingColor, headingColorClass },
				className,
			} = props;

			return (
				<h2 className={ classnames(
						className,
						'section-heading',
						`heading-${textAlignment}`,
					) }
					style={ { color: headingColor } } >
					<span>{ content } {headingColorClass}</span>
				</h2>
			);
		},
	}
);

page-section_working.js

/**
 * BLOCK: wp-block-fns-blocks-page-intro (page-intro)
 */

// == Block dependencies
import classnames from 'classnames';
import blockIcons from '../icons';
import './style.scss';
import './editor.scss';

// == Internal block libraries (get functions from global scope)
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
 	RichText,
	BlockControls,
	AlignmentToolbar,
	InspectorControls,
  ColorPalette,
  PanelColorSettings
} = wp.editor;
const {
  PanelBody,
  PanelRow
} = wp.components;
const { withState } = wp.compose;


/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */

// == Create/register new block ('namespace/block-name').
export default registerBlockType( 'fns-blocks/section-heading',
	{
		// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
		title: __( 'Section heading', 'fns-blocks'),
		description: __( 'Heading for section.', 'fns-blocks' ),
		icon: {
			// background: '#ffffff',
			foreground: '#57be24',
			src: blockIcons.sectionHeading,
		},
	  category: 'layout', // common | formatting | layout | widgets | embed
		keywords: [	// Max 3 items @ this moment.
			__( 'section heading', 'fns-blocks' ),
		],
		supports: {
			html: false,
			// className: true,				// default
			// customClassName: true,	// default
		},
		attributes: {
			content: {
				type: 'array',
				source: 'children', // attribute | text | html | children
				multiline: false,
				selector: 'span',
			},
			textAlignment: {
				type: 'string',
				default: 'center',
			},
			headingColor: {
				type: 'string',
				default: '#414140'
			},
			headingColorClass: {
				type: 'string',
			}
		},

		/**
		 * The edit function describes the structure of your block in the context of the editor.
		 * This represents what the editor will render when the block is used.
		 *
		 * The "edit" property must be a valid function.
		 *
		 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
		 */
		edit: props => {
			const {
				attributes: { content, textAlignment, headingColor, headingColorClass },
				className,
				setAttributes
			} = props;

			const headingColors = [
				{ name: __( 'default', 'fns-blocks' ), slug: 'heading-color-default', color: '#414140' },
        { name: __( 'primary', 'fns-blocks' ), slug: 'heading-color-primary', color: '#52b322' },
        { name: __( 'secondary', 'fns-blocks' ), slug: 'heading-color-secondary', color: '#80817f' },
        { name: __( 'light', 'fns-blocks' ), slug: 'heading-color-light', color: '#f8f9fa' },
	    ];

			return ( [
				<InspectorControls>
					<PanelColorSettings
            title={ __( 'Color Settings', 'fns-blocks' ) }
            colorSettings={ [
                {
									colors: headingColors,
                  value: headingColor,
                  onChange: headingColor => setAttributes( { headingColor } ),
                  label: __( 'Text color', 'fns-blocks' ),
                },
            ] }
        	></PanelColorSettings>
				</InspectorControls>,
				<h2
					className={ classnames(
						className,
						'section-heading',
					) }
					style={ { textAlign: textAlignment, color: headingColor } }
				>
					<BlockControls>
							<AlignmentToolbar
									value={ textAlignment }
									onChange={ textAlignment => setAttributes( { textAlignment } ) }
							/>
					</BlockControls>
					<RichText
						tagName="span"
						placeholder={ __( 'Add your section heading here', 'fns-blocks' ) }
						value={ content }
						onChange={ content => setAttributes( { content } ) }
					/>
				</h2>
			] );
		},

		/**
		 * The save function defines the way in which the different attributes should be combined
		 * into the final markup, which is then serialized by Gutenberg into post_content.
		 *
		 * The "save" property must be specified and must be a valid function.
		 *
		 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
		 */
		save: props => {
			const {
				attributes: { content, textAlignment, headingColor, headingColorClass },
				className,
			} = props;

			return (
				<h2 className={ classnames(
						className,
						'section-heading',
						`heading-${textAlignment}`,
					) }
					style={ { color: headingColor } } >
					<span>{ content }</span>
				</h2>
			);
		},
	}
);