History

Alexandre Lara 452c522b95 [DOC] Resolve incorrect branch references in Gutenberg links (#44566 ) * Fix Gutenberg links in the docs pointing to the wrong branch * Add changefile(s) from automation for the following project(s): @woocommerce/notices, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/components, woocommerce-blocks, woocommerce-beta-tester, woo-ai * Fix markdown lint errors * Fix wrong link in the docs --------- Co-authored-by: github-actions <github-actions@github.com>		2024-02-15 14:13:28 -03:00
..
README.md	[DOC] Resolve incorrect branch references in Gutenberg links (#44566 )	2024-02-15 14:13:28 -03:00
index.js	Rename js/components to js/editor-components (https://github.com/woocommerce/woocommerce-blocks/pull/3069 )	2020-09-02 10:21:46 +02:00
style.scss	Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300 )	2020-10-22 12:40:32 +02:00

README.md

TextToolbarButton

TextToolbarButton is used in Toolbar for text buttons which show isToggled state.

Notes:

Gutenberg core has ToolbarGroup and ToolbarButton in progress. When these are available this component may not be needed.
Gutenberg core html block uses regular Button in toolbar, and sets is-active class to trigger "active" styling when button is toggled on.

Usage

Example: two text buttons to select edit modes for cart block.

<BlockControls>
	<Toolbar>
		<TextToolbarButton
			onClick={ toggleFullCartMode }
			isToggled={ isFullCartMode }
		>
			{ __( 'Full Cart', 'woocommerce' ) }
		</TextToolbarButton>
		<TextToolbarButton
			onClick={ toggleFullCartMode }
			isToggled={ ! isFullCartMode }
		>
			{ __( 'Empty Cart', 'woocommerce' ) }
		</TextToolbarButton>
	</Toolbar>
</BlockControls>

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.