@wordpress/block-library/src/buttons/deprecated.js

Block library for the WordPress editor.

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

/**
 * @param {Object} attributes Block's attributes.
 */
const migrateWithLayout = ( attributes ) => {
	if ( !! attributes.layout ) {
		return attributes;
	}

	const { contentJustification, orientation, ...updatedAttributes } =
		attributes;

	if ( contentJustification || orientation ) {
		Object.assign( updatedAttributes, {
			layout: {
				type: 'flex',
				...( contentJustification && {
					justifyContent: contentJustification,
				} ),
				...( orientation && { orientation } ),
			},
		} );
	}

	return updatedAttributes;
};

const deprecated = [
	{
		attributes: {
			contentJustification: {
				type: 'string',
			},
			orientation: {
				type: 'string',
				default: 'horizontal',
			},
		},
		supports: {
			anchor: true,
			align: [ 'wide', 'full' ],
			__experimentalExposeControlsToChildren: true,
			spacing: {
				blockGap: true,
				margin: [ 'top', 'bottom' ],
				__experimentalDefaultControls: {
					blockGap: true,
				},
			},
		},
		isEligible: ( { contentJustification, orientation } ) =>
			!! contentJustification || !! orientation,
		migrate: migrateWithLayout,
		save( { attributes: { contentJustification, orientation } } ) {
			return (
				<div
					{ ...useBlockProps.save( {
						className: classnames( {
							[ `is-content-justification-${ contentJustification }` ]:
								contentJustification,
							'is-vertical': orientation === 'vertical',
						} ),
					} ) }
				>
					<InnerBlocks.Content />
				</div>
			);
		},
	},
	{
		supports: {
			align: [ 'center', 'left', 'right' ],
			anchor: true,
		},
		save() {
			return (
				<div>
					<InnerBlocks.Content />
				</div>
			);
		},
		isEligible( { align } ) {
			return align && [ 'center', 'left', 'right' ].includes( align );
		},
		migrate( attributes ) {
			return migrateWithLayout( {
				...attributes,
				align: undefined,
				// Floating Buttons blocks shouldn't have been supported in the
				// first place. Most users using them probably expected them to
				// act like content justification controls, so these blocks are
				// migrated to use content justification.
				// As for center-aligned Buttons blocks, the content justification
				// equivalent will create an identical end result in most cases.
				contentJustification: attributes.align,
			} );
		},
	},
];

export default deprecated;