[mengland]

Zac,

Thank you for the advice. Luckily all of the toggles and control panel settings worked perfectly before hand. So, I took your advice in a little bit different direction to try and narrow down what I could change in the query versus what didn’t work. I searched through the Gutenberg repo and didn’t find too many helpful bits that actually altered the query which led me to ask where the query keys and terms originated from. Long story short the answer involved referring to the Rest API Documentation.

When I looked at the term categories in the document it said “The terms assigned to the object in the category taxonomy”. I then added hms_event_types: categories to change the endpoint to match my taxonomy. Everything worked like a charm after that. The categories constant returns an integer for the post id which fixed the post query displayed in the editor.

Just wanted to share this bit of information in hopes that it might help save time.

Here is the updated version of my block
Event Custom Post Feed Block

[mengland]

I have one final follow up and I wanted to share this because it was a lot of work to get here. I have a working example of a block that pulls in custom colors that have been defined in theme support. The original link I shared showed how to utilize your own custom color sets defined at the block level.

/**
* Based on a block by Florian Brinkmann
*/

import classnames from 'classnames';

const {
	registerBlockType,
} = wp.blocks;
const {
	InspectorControls,
	InnerBlocks,
	PanelColor,
	withColors,
	getColorClass
} = wp.editor;
const {
	PanelBody,
	withFallbackStyles,
	ColorPalette,
} = wp.components;

const {
	compose,
	Component,
} = wp.element;

const {getComputedStyle} = window;

const FallbackStyles = withFallbackStyles((node, ownProps) => {
	const {textColor, backgroundColor} = ownProps.attributes;
	const editableNode = node.querySelector('[contenteditable="true"]');
	//verify if editableNode is available, before using getComputedStyle.
	const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
	return {
		fallbackBackgroundColor: backgroundColor || !computedStyles ? undefined : computedStyles.backgroundColor,
		fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color,
	};
});

class OneColumnBlock extends Component {
	constructor() {
		super(...arguments);
	}

	render() {
		const {
			attributes,
			setAttributes,
			mergeBlocks,
			onReplace,
			className,
			backgroundColor,
			textColor,
			setBackgroundColor,
			setTextColor,
			fallbackBackgroundColor,
			fallbackTextColor,
			fallbackFontSize,
		} = this.props;

		const {
			align,
			content,
			dropCap,
			placeholder,
		} = attributes;

		return (
			<div
				className={classnames(className, {
					'has-background': backgroundColor.value,
					[backgroundColor.class]: backgroundColor.class,
					[textColor.class]: textColor.class,
				})}

				style={{
					backgroundColor: backgroundColor.value,
					color: textColor.value,
				}}
			>
				<InnerBlocks
        layouts={ [
          { name: 'inner-content', label: 'Story Container', icon: 'columns' },
        ] }

        template={
          [
            [ 'core/heading', { layout:'inner-content', placeholder:'Example Title...' } ],
            [ 'core/paragraph', { layout:'inner-content', placeholder:'Example Heading...' } ],
          ]
        }
        />
				<InspectorControls>
						<PanelColor
              {...{
                title: 'Background Color',
                colorName: backgroundColor.name,
                colorValue: backgroundColor.value,
                initialOpen: false,
                onChange: setBackgroundColor
              } }
            />

            <PanelColor
              {...{
                title: 'Text Color',
                colorName: textColor.name,
                colorValue: textColor.value,
                initialOpen: false,
                onChange: setTextColor
              } }
            />

				</InspectorControls>
			</div>
		);
	}
}

export default registerBlockType('slug/one-column', {
	title: 'ColorPanel Example Column',
	icon: 'admin-appearance',
	category: 'common',
	edit: compose( [
		withColors('backgroundColor', {textColor: 'color'}),
		FallbackStyles,
	] )(OneColumnBlock),
	save: props => {
		const {
			backgroundColor,
			textColor,
			customBackgroundColor,
			customTextColor,
		} = props.attributes;

		const textClass = getColorClass( 'color', textColor );
		const backgroundClass = getColorClass( 'background-color', backgroundColor );

		const className = classnames( {
			'has-background': backgroundColor || customBackgroundColor,
			[ textClass ]: textClass,
			[ backgroundClass ]: backgroundClass,
		} );
		return (
			<div className={className}>
				<InnerBlocks.Content/>
			</div>
		);
	},
});

[mengland]

I hopped on there and presented the question. I’ll post back if they share anything helpful. However, in the meantime I believe I stumbled upon something that provides a solution and I hope it helps someone else.

Florian created a remake of the paragraph block which has a working Color Palette with color class names.
Create different color palettes with Gutenberg

[mengland]

@ericvalois

Ironically I’m working on the same thing and having some struggles getting the color classes to work. Were you able to get a working example?

[mengland]

Zac,

Thanks for replying, I did some additional research into more files and eventually I found something that actually works and is really simple to include!

InnerBlock List has the following elements inside of it. <BlockList { ...{ layouts, allowedBlocks, template } } />.

In my example code we already utilized layouts, so I started experimenting with template. Using the example PHP I was able to fabricate a working version for having a block with a template inside.

          <InnerBlocks
            layouts={ [
              { name: 'column-1', label: 'Column 1', icon: 'columns' },
            ] }

           template={ [
            [ 'core/paragraph', { layout:'column-1', placeholder:'temp-stuff' } ],
           ] }

          />

I’m now really interested in experimenting with allowedBlocks.

[Author]

Posts