Apply content only mode (#207)

* Add content only mode

* Add e2e test

* Fix lint

* Fix e2e test

Author: t-hamano

src/block.json

@@ -42,7 +42,8 @@
 		"caption": {
 			"type": "string",
 			"source": "html",
-			"selector": "figcaption"
+			"selector": "figcaption",
+			"__experimentalRole": "content"
 		},
 		"captionStyles": {
 			"type": "string",
@@ -64,7 +65,8 @@
 					"query": {
 						"content": {
 							"type": "string",
-							"source": "html"
+							"source": "html",
+							"__experimentalRole": "content"
 						},
 						"styles": {
 							"type": "string",
@@ -124,7 +126,8 @@
 					"query": {
 						"content": {
 							"type": "string",
-							"source": "html"
+							"source": "html",
+							"__experimentalRole": "content"
 						},
 						"styles": {
 							"type": "string",
@@ -184,7 +187,8 @@
 					"query": {
 						"content": {
 							"type": "string",
-							"source": "html"
+							"source": "html",
+							"__experimentalRole": "content"
 						},
 						"styles": {
 							"type": "string",

src/edit.tsx

@@ -10,7 +10,13 @@ import type { Properties } from 'csstype';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockControls,
+	useBlockProps,
+	// @ts-ignore: has no exported member
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
 import {
 	// @ts-ignore: has no exported member
 	ToolbarDropdownMenu,
@@ -79,6 +85,8 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 		[]
 	);
 	const { createWarningNotice } = useDispatch( noticesStore );
+	const blockEditingMode = useBlockEditingMode();
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
 	// Release cell selection.
 	useEffect( () => {
@@ -256,6 +264,7 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
 			'show-dot-on-th': options.show_dot_on_th,
 			'show-control-button': options.show_control_button,
+			'is-content-only': isContentOnlyMode,
 		} ),
 	} );
 
@@ -270,6 +279,7 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 		setSelectedCells,
 		selectedLine,
 		setSelectedLine,
+		isContentOnlyMode,
 	};
 
 	const tableSettingsProps = {
@@ -316,28 +326,33 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 			) }
 			{ ! isEmpty && (
 				<figure { ...tableFigureProps }>
-					<BlockControls
-						// @ts-ignore: `group` prop is not exist at @types
-						group="block"
-					>
-						<ToolbarDropdownMenu
-							label={ __( 'Change table justification', 'flexible-table-block' ) }
-							icon={
-								( contentJustification &&
-									TableJustifyControls.find( ( control ) => control.value === contentJustification )
-										?.icon ) ||
-								justifyLeft
-							}
-							controls={ TableJustifyControls }
-							hasArrowIndicator
-						/>
-						<ToolbarDropdownMenu
-							label={ __( 'Edit table', 'flexible-table-block' ) }
-							icon={ blockTable }
-							controls={ TableEditControls }
-							hasArrowIndicator
-						/>
-					</BlockControls>
+					{ ! isContentOnlyMode && (
+						<>
+							<BlockControls
+								// @ts-ignore: `group` prop is not exist at @types
+								group="block"
+							>
+								<ToolbarDropdownMenu
+									label={ __( 'Change table justification', 'flexible-table-block' ) }
+									icon={
+										( contentJustification &&
+											TableJustifyControls.find(
+												( control ) => control.value === contentJustification
+											)?.icon ) ||
+										justifyLeft
+									}
+									controls={ TableJustifyControls }
+									hasArrowIndicator
+								/>
+								<ToolbarDropdownMenu
+									label={ __( 'Edit table', 'flexible-table-block' ) }
+									icon={ blockTable }
+									controls={ TableEditControls }
+									hasArrowIndicator
+								/>
+							</BlockControls>
+						</>
+					) }
 					<InspectorControls>
 						<PanelBody
 							title={ __( 'Table settings', 'flexible-table-block' ) }

src/editor.scss

@@ -67,7 +67,7 @@
 			border-radius: 50%;
 		}
 
-		&.show-control-button {
+		&.show-control-button:not(.is-content-only) {
 			padding-left: 40px;
 
 			&.is-caption-side-bottom {

src/elements/table.tsx

@@ -67,6 +67,7 @@ type Props = {
 	setSelectedCells: Dispatch< SetStateAction< VSelectedCells > >;
 	selectedLine: VSelectedLine;
 	setSelectedLine: Dispatch< SetStateAction< VSelectedLine > >;
+	isContentOnlyMode: boolean;
 };
 
 export default function Table( {
@@ -80,6 +81,7 @@ export default function Table( {
 	setSelectedCells,
 	selectedLine,
 	setSelectedLine,
+	isContentOnlyMode,
 }: Props ) {
 	const { hasFixedLayout, isStackedOnMobile, sticky } = attributes;
 
@@ -465,6 +467,7 @@ export default function Table( {
 										onClick={ ( event: MouseEvent ) => onClickCell( event, cell ) }
 									>
 										{ isSelected &&
+											! isContentOnlyMode &&
 											options.show_label_on_section &&
 											rowIndex === 0 &&
 											vColIndex === 0 && (
@@ -480,7 +483,7 @@ export default function Table( {
 													{ `t${ sectionName }` }
 												</Button>
 											) }
-										{ isSelected && options.show_control_button && (
+										{ isSelected && ! isContentOnlyMode && options.show_control_button && (
 											<>
 												{ rowIndex === 0 && vColIndex === 0 && (
 													<Button
@@ -613,6 +616,7 @@ export default function Table( {
 											aria-label={ CELL_ARIA_LABEL[ sectionName as SectionName ] }
 										/>
 										{ isSelected &&
+											! isContentOnlyMode &&
 											options.show_control_button &&
 											sectionIndex === 0 &&
 											rowIndex === 0 && (

test/e2e/specs/various.spec.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ * Internal dependencies
+ */
+import FlexibleTableBlockUtils from '../util';
+
+test.use( {
+	fsbUtils: async ( { page, editor }, use ) => {
+		await use( new FlexibleTableBlockUtils( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Various', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'contentOnly mode should be enabled', async ( { editor, page } ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				templateLock: 'contentOnly',
+			},
+			innerBlocks: [ { name: 'flexible-table-block/table' } ],
+		} );
+		await editor.canvas.getByRole( 'button', { name: 'Create Table' } ).click();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByRole( 'button', { name: 'Flexible Table' } )
+		).toBeVisible();
+	} );
+} );