README.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

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', 'woo-gutenberg-products-block' ) }
		</TextToolbarButton>
		<TextToolbarButton
			onClick={ toggleFullCartMode }
			isToggled={ ! isFullCartMode }
		>
			{ __( 'Empty Cart', 'woo-gutenberg-products-block' ) }
		</TextToolbarButton>
	</Toolbar>
</BlockControls>

---

We're hiring! Come work with us!

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