Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/README.md

1.3 KiB
Raw Blame History

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.