core/quote Variation (full)

quote-variation-full.js

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerBlockVariation } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { addFilter } from '@wordpress/hooks';

const { createHigherOrderComponent } = wp.compose;

const VARIATION_NAME = 'allswater/quote-with-name';

// Register Block Variation
registerBlockVariation( 'core/quote', {
	name: VARIATION_NAME,
	title: __( 'Quote with Name (Plugin)' ),
	icon: 'format-quote',
	description: __(
		'Display a quote with person’s name and credentials and save it as post meta so it can be queried in Projects.',
		'allswater'
	),
	category: 'text',
    isActive: ( { namespace, authorCredentials } ) => {
        return (
            namespace === VARIATION_NAME
        );
    },
    attributes: {
        namespace: VARIATION_NAME,
		authorCredentials: {
			type: 'string'
		}
	},
	usesContext: ['postId', 'postType']
} );

// Helper to see if current block is our custom quote block
const isQuoteVariation = ( props ) => {
    const {
        attributes: { namespace }
    } = props;
    return namespace && namespace === VARIATION_NAME;
};

// Display modified quote editor
const CustomQuoteEditor = ( { props: {
	attributes: { authorCredentials },
	setAttributes,
	context: { postType, postId },
} } ) => {
	const [ meta, updateMeta ] = useEntityProp(
		'postType',
		'project',
		'meta',
		postId
	);
	const { testimonial_quote } = meta;
	return (
    	<>
			<blockquote>
				<RichText
					placeholder={ __( 'Testimonial goes here', 'allswater' ) }
					tagName="p"
					value={ testimonial_quote }
					onChange={ ( newTestimonialContent ) =>
						updateMeta( {
							...meta,
							testimonial_quote: newTestimonialContent,
						} )
					}
				/>
				<cite>
					<h5>Post Title Here</h5>
					<RichText
						tagName="span"
						placeholder={ __( 'Author Credentials / Organization', 'allswater' ) }
						allowedFormats={ [] }
						disableLineBreaks
						value={ authorCredentials }
						onChange={ ( newAuthorCredentials ) =>
							setAttributes( { authorCredentials: newAuthorCredentials } )
						}
					/>
				</cite>
			</blockquote>
		</>
    );
};

// Display new "Order By" control
export const withCustomQuoteEditor = ( BlockEdit ) => ( props ) => {
    return isQuoteVariation( props ) ? (
		<>
			<BlockEdit {...props} />
			<CustomQuoteEditor props={props} />
			<p>If</p>
		</>
    ) : (
		<>
			<BlockEdit {...props} />
			<p>Else</p>
		</>
    );
};
addFilter(
	'editor.BlockEdit',
	'core/quote',
	withCustomQuoteEditor
);