@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/src/missing/edit.native.js

@@ -11,21 +11,20 @@ import {
 /**
  * WordPress dependencies
  */
-import {
-	requestUnsupportedBlockFallback,
-	sendActionButtonPressedAction,
-	actionButtons,
-} from '@wordpress/react-native-bridge';
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
-import { normalizeIconObject } from '@wordpress/blocks';
+import { normalizeIconObject, rawHandler, serialize } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { help, plugins } from '@wordpress/icons';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	UnsupportedBlockDetails,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -36,6 +35,8 @@ import styles from './style.scss';
 const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
 const I18N_BLOCK_SCHEMA_TITLE = 'block title';
 
+const EMPTY_ARRAY = [];
+
 export class UnsupportedBlockEdit extends Component {
 	constructor( props ) {
 		super( props );
@@ -121,122 +122,50 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	renderSheet( blockTitle, blockName ) {
-		const {
-			getStylesFromColorScheme,
-			attributes,
-			clientId,
-			isUnsupportedBlockEditorSupported,
-			canEnableUnsupportedBlockEditor,
-			isEditableInUnsupportedBlockEditor,
-		} = this.props;
-		const infoTextStyle = getStylesFromColorScheme(
-			styles.infoText,
-			styles.infoTextDark
-		);
-		const infoTitleStyle = getStylesFromColorScheme(
-			styles.infoTitle,
-			styles.infoTitleDark
-		);
-		const infoDescriptionStyle = getStylesFromColorScheme(
-			styles.infoDescription,
-			styles.infoDescriptionDark
-		);
-		const infoSheetIconStyle = getStylesFromColorScheme(
-			styles.infoSheetIcon,
-			styles.infoSheetIconDark
-		);
+		const { block, clientId, createSuccessNotice, replaceBlocks } =
+			this.props;
+		const { showHelp } = this.state;
 
 		/* translators: Missing block alert title. %s: The localized block name */
 		const titleFormat = __( "'%s' is not fully-supported" );
-		const infoTitle = sprintf( titleFormat, blockTitle );
-		const missingBlockDetail = applyFilters(
+		const title = sprintf( titleFormat, blockTitle );
+		let description = applyFilters(
 			'native.missing_block_detail',
 			__( 'We are working hard to add more blocks with each release.' ),
 			blockName
 		);
-		const missingBlockActionButton = applyFilters(
-			'native.missing_block_action_button',
-			__( 'Edit using web editor' )
-		);
+		let customActions = EMPTY_ARRAY;
 
-		const actionButtonStyle = getStylesFromColorScheme(
-			styles.actionButton,
-			styles.actionButtonDark
-		);
+		// For Classic blocks, we offer the alternative to convert the content to blocks.
+		if ( blockName === 'core/freeform' ) {
+			description +=
+				' ' +
+				__( 'Alternatively, you can convert the content to blocks.' );
+			/* translators: displayed right after the classic block is converted to blocks. %s: The localized classic block name */
+			const successNotice = __( "'%s' block converted to blocks" );
+			customActions = [
+				{
+					label: __( 'Convert to blocks' ),
+					onPress: () => {
+						createSuccessNotice(
+							sprintf( successNotice, blockTitle )
+						);
+						replaceBlocks( block );
+					},
+				},
+			];
+		}
 
 		return (
-			<BottomSheet
-				isVisible={ this.state.showHelp }
-				hideHeader
-				onClose={ this.closeSheet }
-				onModalHide={ () => {
-					if ( this.state.sendFallbackMessage ) {
-						// On iOS, onModalHide is called when the controller is still part of the hierarchy.
-						// A small delay will ensure that the controller has already been removed.
-						this.timeout = setTimeout( () => {
-							// For the Classic block, the content is kept in the `content` attribute.
-							const content =
-								blockName === 'core/freeform'
-									? attributes.content
-									: attributes.originalContent;
-							requestUnsupportedBlockFallback(
-								content,
-								clientId,
-								blockName,
-								blockTitle
-							);
-						}, 100 );
-						this.setState( { sendFallbackMessage: false } );
-					} else if ( this.state.sendButtonPressMessage ) {
-						this.timeout = setTimeout( () => {
-							sendActionButtonPressedAction(
-								actionButtons.missingBlockAlertActionButton
-							);
-						}, 100 );
-						this.setState( { sendButtonPressMessage: false } );
-					}
-				} }
-			>
-				<View style={ styles.infoContainer }>
-					<Icon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-					{ isEditableInUnsupportedBlockEditor &&
-						missingBlockDetail && (
-							<Text
-								style={ [
-									infoTextStyle,
-									infoDescriptionStyle,
-								] }
-							>
-								{ missingBlockDetail }
-							</Text>
-						) }
-				</View>
-				{ ( isUnsupportedBlockEditorSupported ||
-					canEnableUnsupportedBlockEditor ) &&
-					isEditableInUnsupportedBlockEditor && (
-						<>
-							<TextControl
-								label={ missingBlockActionButton }
-								separatorType="topFullWidth"
-								onPress={ this.requestFallback }
-								labelStyle={ actionButtonStyle }
-							/>
-							<TextControl
-								label={ __( 'Dismiss' ) }
-								separatorType="topFullWidth"
-								onPress={ this.toggleSheet }
-								labelStyle={ actionButtonStyle }
-							/>
-						</>
-					) }
-			</BottomSheet>
+			<UnsupportedBlockDetails
+				clientId={ clientId }
+				showSheet={ showHelp }
+				onCloseSheet={ this.closeSheet }
+				customBlockTitle={ blockTitle }
+				title={ title }
+				description={ description }
+				customActions={ customActions }
+			/>
 		);
 	}
 
@@ -300,8 +229,9 @@ export class UnsupportedBlockEdit extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { attributes } ) => {
-		const { capabilities } = select( blockEditorStore ).getSettings();
+	withSelect( ( select, { attributes, clientId } ) => {
+		const { getBlock, getSettings } = select( blockEditorStore );
+		const { capabilities } = getSettings();
 		return {
 			isUnsupportedBlockEditorSupported:
 				capabilities?.unsupportedBlockEditor === true,
@@ -309,14 +239,23 @@ export default compose( [
 				capabilities?.canEnableUnsupportedBlockEditor === true,
 			isEditableInUnsupportedBlockEditor:
 				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
+			block: getBlock( clientId ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { selectBlock } = dispatch( blockEditorStore );
+		const { selectBlock, replaceBlocks } = dispatch( blockEditorStore );
+		const { createSuccessNotice } = dispatch( noticesStore );
 		return {
 			selectBlock() {
 				selectBlock( ownProps.clientId );
 			},
+			replaceBlocks( block ) {
+				replaceBlocks(
+					ownProps.clientId,
+					rawHandler( { HTML: serialize( block ) } )
+				);
+			},
+			createSuccessNotice,
 		};
 	} ),
 	withPreferredColorScheme,

package/src/missing/style.native.scss

@@ -1,13 +1,3 @@
-/** @format */
-.content {
-	padding-top: 8;
-	padding-bottom: 0;
-	padding-left: 24;
-	padding-right: 24;
-	align-items: center;
-	justify-content: space-evenly;
-}
-
 .helpIconContainer {
 	position: absolute;
 	top: 0;
@@ -20,12 +10,6 @@
 	align-items: flex-end;
 }
 
-.infoContainer {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
 .infoIcon {
 	size: 36;
 	height: 36;
@@ -38,49 +22,6 @@
 	color: $dark-tertiary;
 }
 
-.infoSheetIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.infoSheetIconDark {
-	color: $gray-20;
-}
-
-.infoText {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.infoTextDark {
-	color: $white;
-}
-
-.infoTitle {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.infoTitleDark {
-	color: $white;
-}
-
-.infoDescription {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.infoDescriptionDark {
-	color: $gray-20;
-}
-
 .unsupportedBlock {
 	height: 142;
 	background-color: #e0e0e0; // $light-dim
@@ -136,11 +77,3 @@
 .unsupportedBlockSubtitleDark {
 	color: $gray-20;
 }
-
-.actionButton {
-	color: $blue-50;
-}
-
-.actionButtonDark {
-	color: $blue-30;
-}

package/src/missing/test/edit-integration.native.js

@@ -1,81 +1,167 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent, within } from 'test/helpers';
+import {
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	withFakeTimers,
+	within,
+} from 'test/helpers';
+import { Platform } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { unregisterBlockType } from '@wordpress/blocks';
 import { setLocaleData } from '@wordpress/i18n';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
+
+// Override modal mock to prevent unmounting it when is not visible.
+// This is required to be able to trigger onClose and onDismiss events when
+// the modal is dismissed.
+jest.mock( 'react-native-modal', () => {
+	const mockComponent = require( 'react-native/jest/mockComponent' );
+	return mockComponent( 'react-native-modal' );
+} );
 
-/**
- * Internal dependencies
- */
-import { registerCoreBlocks } from '../..';
+const TABLE_BLOCK_HTML = `<!-- wp:table -->
+<figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
+<!-- /wp:table -->`;
+const MODAL_DISMISS_EVENT = Platform.OS === 'ios' ? 'onDismiss' : 'onModalHide';
 
-beforeAll( () => {
-	// Mock translations.
-	setLocaleData( {
-		'block title\u0004Table': [ 'Tabla' ],
-		"'%s' is not fully-supported": [ '«%s» no es totalmente compatible' ],
-	} );
+setupCoreBlocks();
 
-	// Register all core blocks.
-	registerCoreBlocks();
+beforeAll( () => {
+	// For the purpose of this test suite we consider Reusable blocks/Patterns as unsupported.
+	// For this reason we unregister it to force it to be rendered as an unsupported block.
+	unregisterBlockType( 'core/block' );
 } );
 
-afterAll( () => {
-	// Clean up translations.
-	setLocaleData( {} );
+describe( 'Unsupported block', () => {
+	describe( 'localized elements', () => {
+		beforeEach( () => {
+			// Mock translations.
+			setLocaleData( {
+				'block title\u0004Table': [ 'Tabla' ],
+				"'%s' is not fully-supported": [
+					'«%s» no es totalmente compatible',
+				],
+			} );
+		} );
+
+		afterEach( () => {
+			// Clean up translations.
+			setLocaleData( {} );
+		} );
+
+		it( 'requests translated block title in block placeholder', async () => {
+			await initializeEditor( {
+				initialHtml: TABLE_BLOCK_HTML,
+			} );
+
+			const missingBlock = getBlock( screen, 'Unsupported' );
+
+			const translatedTableTitle =
+				within( missingBlock ).getByText( 'Tabla' );
+
+			expect( translatedTableTitle ).toBeDefined();
+		} );
+
+		it( 'requests translated block title in bottom sheet', async () => {
+			await initializeEditor( {
+				initialHtml: TABLE_BLOCK_HTML,
+			} );
+
+			const missingBlock = getBlock( screen, 'Unsupported' );
+
+			fireEvent.press( missingBlock );
 
-	// Clean up registered blocks.
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
+			const [ helpButton ] =
+				await screen.findAllByLabelText( 'Help button' );
+
+			fireEvent.press( helpButton );
+
+			const bottomSheetTitle = await screen.findByText(
+				'«Tabla» no es totalmente compatible'
+			);
+
+			expect( bottomSheetTitle ).toBeDefined();
+		} );
 	} );
-} );
 
-describe( 'Unsupported block', () => {
-	it( 'requests translated block title in block placeholder', async () => {
-		const initialHtml = `<!-- wp:table -->
-			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
-			 <!-- /wp:table -->`;
-		const screen = await initializeEditor( {
-			initialHtml,
+	it( 'requests web editor when UBE is available', async () => {
+		await initializeEditor( {
+			initialHtml: TABLE_BLOCK_HTML,
+			capabilities: {
+				unsupportedBlockEditor: true,
+				canEnableUnsupportedBlockEditor: true,
+			},
 		} );
 
-		const [ missingBlock ] = await screen.findAllByLabelText(
-			/Unsupported Block\. Row 1/
-		);
+		const missingBlock = getBlock( screen, 'Unsupported' );
+		fireEvent.press( missingBlock );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
 
-		const translatedTableTitle =
-			within( missingBlock ).getByText( 'Tabla' );
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
 
-		expect( translatedTableTitle ).toBeDefined();
+		// UBE is requested after the modal hides and running a timeout
+		await withFakeTimers( async () => {
+			fireEvent.press( actionButton );
+			fireEvent(
+				screen.getByTestId( 'bottom-sheet' ),
+				MODAL_DISMISS_EVENT
+			);
+			jest.runOnlyPendingTimers();
+		} );
+		expect( requestUnsupportedBlockFallback ).toHaveBeenCalled();
 	} );
 
-	it( 'requests translated block title in bottom sheet', async () => {
-		const initialHtml = `<!-- wp:table -->
-		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
-		 <!-- /wp:table -->`;
-		const screen = await initializeEditor( {
-			initialHtml,
+	it( 'does not show web editor option when UBE is not available', async () => {
+		await initializeEditor( {
+			initialHtml: TABLE_BLOCK_HTML,
+			capabilities: {
+				unsupportedBlockEditor: false,
+				canEnableUnsupportedBlockEditor: false,
+			},
 		} );
 
-		const [ missingBlock ] = await screen.findAllByLabelText(
-			/Unsupported Block\. Row 1/
+		const missingBlock = getBlock( screen, 'Unsupported' );
+		fireEvent.press( missingBlock );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
+
+		const actionButton = await screen.queryByText(
+			'Edit using web editor'
 		);
+		expect( actionButton ).toBeNull();
+	} );
 
-		fireEvent.press( missingBlock );
+	it( 'does not show web editor option when block is incompatible with UBE', async () => {
+		await initializeEditor( {
+			// Reusable blocks/Patterns is a block type unsupported by UBE
+			initialHtml: '<!-- wp:block {"ref":7387} /-->',
+			capabilities: {
+				unsupportedBlockEditor: true,
+				canEnableUnsupportedBlockEditor: true,
+			},
+		} );
 
-		const [ helpButton ] = await screen.findAllByLabelText( 'Help button' );
+		const missingBlock = getBlock( screen, 'Unsupported' );
+		fireEvent.press( missingBlock );
 
-		fireEvent.press( helpButton );
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
 
-		const bottomSheetTitle = await screen.findByText(
-			'«Tabla» no es totalmente compatible'
+		const actionButton = await screen.queryByText(
+			'Edit using web editor'
 		);
-
-		expect( bottomSheetTitle ).toBeDefined();
+		expect( actionButton ).toBeNull();
 	} );
 } );

package/src/missing/test/edit.native.js

@@ -63,47 +63,6 @@ describe( 'Missing block', () => {
 					"' is not fully-supported"
 			);
 		} );
-
-		describe( 'Unsupported block editor (UBE)', () => {
-			beforeEach( () => {
-				// By default we set the web editor as available.
-				storeConfig.selectors.getSettings.mockReturnValue( {
-					capabilities: { unsupportedBlockEditor: true },
-				} );
-			} );
-
-			it( 'renders edit action if UBE is available', () => {
-				const testInstance = getTestComponentWithContent();
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				const bottomSheetCells = bottomSheet.props.children[ 1 ];
-				expect( bottomSheetCells ).toBeTruthy();
-				expect( bottomSheetCells.props.children.length ).toBe( 2 );
-				expect( bottomSheetCells.props.children[ 0 ].props.label ).toBe(
-					'Edit using web editor'
-				);
-			} );
-
-			it( 'does not render edit action if UBE is not available', () => {
-				storeConfig.selectors.getSettings.mockReturnValue( {
-					capabilities: { unsupportedBlockEditor: false },
-				} );
-
-				const testInstance = getTestComponentWithContent();
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
-			} );
-
-			it( 'does not render edit action if the block is incompatible with UBE', () => {
-				const testInstance = getTestComponentWithContent( {
-					originalName: 'core/block',
-				} );
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
-			} );
-		} );
 	} );
 
 	it( 'renders admin plugins icon', () => {

package/src/navigation/block.json

@@ -133,7 +133,8 @@
 				}
 			}
 		},
-		"interactivity": true
+		"interactivity": true,
+		"renaming": false
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",

package/src/navigation/edit/index.js

@@ -884,7 +884,6 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
-							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
 							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }

package/src/navigation/index.php

@@ -72,8 +72,8 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
  * Add Interactivity API directives to the navigation-submenu and page-list
  * blocks markup using the Tag Processor.
  *
- * @param string $w Markup of the navigation block.
- * @param array  $block_attributes Block attributes.
+ * @param WP_HTML_Tag_Processor $w                Markup of the navigation block.
+ * @param array                 $block_attributes Block attributes.
  *
  * @return string Submenu markup with the directives injected.
  */
@@ -90,6 +90,13 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+
+		// This is a fix for Safari. Without it, Safari doesn't change the active
+		// element when the user clicks on a button. It can be removed once we add
+		// an overlay to capture the clicks, instead of relying on the focusout
+		// event.
+		$w->set_attribute( 'tabindex', '-1' );
+
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
 			$w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );
@@ -696,9 +703,22 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
 	if ( $should_load_view_script ) {
+		$nav_element_context             = wp_json_encode(
+			array(
+				'core' => array(
+					'navigation' => array(
+						'overlayOpenedBy' => array(),
+						'type'            => 'overlay',
+						'roleAttribute'   => '',
+						'ariaLabel'       => __( 'Menu' ),
+					),
+				),
+			),
+			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
+		);
 		$nav_element_directives          = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
+			data-wp-context=\'' . $nav_element_context . '\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -714,6 +734,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		';
 		$responsive_dialog_directives    = '
 			data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
+			data-wp-bind--aria-label="selectors.core.navigation.ariaLabel"
 			data-wp-bind--role="selectors.core.navigation.roleAttribute"
 			data-wp-effect="effects.core.navigation.focusFirstElement"
 		';
@@ -723,11 +744,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
+		'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s" %11$s>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+					<div class="wp-block-navigation__responsive-dialog" %12$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -741,7 +762,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
 		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
-		__( 'Menu' ),
 		$toggle_button_content,
 		$toggle_close_button_content,
 		$open_button_directives,