Background attribute gets API for 3rd party plugins to allow other background types, e.g. patterns (tiles)

[porg]

Proposal

Possible plugin applications

Background pattern

• A tile generator like https://doodad.dev/pattern-generator/ could be run as a plugin right from within Gutenberg without the need to save intermediary PNGs/SVGs.
• You can play around with the controls of the plugin and see the outcome immediately on the canvas of your Site Editor / Block Editor.

Many more possibilities

• Color palette generators
• Integration of centrally managed color palettes (cross websites) of design system
• Dynamic content rendered by JS or WebGL
• ... (=whatever else the imagination of plugin developers come up with)

[t-hamano]

Hi @porg,

The tabs are hard-coded with only two colors, a solid color, and a gradient color, so for now it appears that arbitrary tabs cannot be inserted.

However, it is possible to inject a new button using the ToolsPanelItem component. You are free to decide what you want to display and how you want it to be processed when the button is pressed. Here is a sample code. Does this approach help?

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import {
	Button,
	Dropdown,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';

export default function Edit( { clientId } ) {
	const [ customBackground, setCustomBackground ] = useState();
	const blockProps = useBlockProps();

	return (
		<>
			<InspectorControls group="color">
				<ToolsPanelItem
					className="block-editor-tools-panel-color-gradient-settings__item"
					hasValue={ () => !! customBackground }
					label={ __( 'Custom background' ) }
					onDeselect={ () => setCustomBackground( undefined ) }
					resetAllFilter={ () => ( {
						customBackground: undefined,
					} ) }
					isShownByDefault={ true }
					panelId={ clientId }
				>
					<Dropdown
						popoverProps={ { placement: 'bottom-start' } }
						renderToggle={ ( { onToggle } ) => (
							<Button onClick={ onToggle }>
								Custom background
							</Button>
						) }
						renderContent={ ( { onClose } ) => (
							<>
								<p>This is the content of the popover.</p>
								<Button
									onClick={ () => {
										onClose();
										setCustomBackground( '#ff0000' );
									} }
								>
									Set custom background
								</Button>
							</>
						) }
					/>
				</ToolsPanelItem>
			</InspectorControls>
			<div { ...blockProps }>Hello World</div>
		</>
	);
}

[porg]

@t-hamano

1. I'm no developer, cannot judge the sample code.
2. As a UX designer I can judge the interaction and integration though:

• I cannot give feedback to your proposal as I do not get the whole picture yet: Could you please write up the steps how the user would get to the point which is shown on the screenshot? Where from was the open dropdown menu triggered? How did you create the "Custom background" in the first place? Please as a short video recording or a description of the single steps. Thanks.

[t-hamano]

Could you please write up the steps how the user would get to the point which is shown on the screenshot? Where from was the open dropdown menu triggered?

All of these are included in the sample code provided in this comment. If a third-party plugin were to add items to the color control or display a drop-down, it would need to write code like this. The same goes for implementing a background pattern like the one you suggested.

It may be difficult, but [Reference Guides](https://developer.wordpress.org/block-editor/reference-guides/) would be helpful.

[porg]

Dear t-hamano, thanks but this is again not an answer to my question.

Again: How would the user get to the point which is shown on the screenshot? Please as a step by step description like:

1. Select a block.
2. Open the Inspector.
3. Go to …
   …

X. … which opens a dropdown with the options …

Because from the screenshot alone one can really not recognize from where that dropdown menu has opened, and I have also no idea which previous steps led here. Please explain these. Thanks.

[t-hamano]

Again: How would the user get to the point which is shown on the screenshot? Please as a step by step description like:

The screenshot I showed you cannot be reached by normal operation. Because unless you write code on the plugin side like I have shown and extend it explicitly, you will not see the UI as shown in the screenshot.

[porg]

That's clear to me.

Let me rephrase: How would you get to it, if it would be implemented.

[porg]

We discuss a concept. Hence in order to give feedback I'd like to know how you would get there.

[t-hamano]

Let me rephrase: How would you get to it, if it would be implemented.

Is the following answer what you expect?

• Create a custom block with the Edit component as indicated in this comment. Or hook a core block and inject InspectorControls.
• Insert that block.
• Click on the "Custom background" item shown in the block sidebar.

[t-hamano]

@porg

Is there anything else I can do regarding this issue? I'm having trouble determining what you're looking for, whether you're expecting a new API to be implemented in Gutenberg, or whether you want to know how to implement it using existing APIs.

[t-hamano]

To me, this issue feels like a question about specific implementation methods rather than a proposal for a new feature, so I'm closing it.

@porg If there's anything I've missed, feel free to comment.