FAQ Block (#5)

* feat: register FAQ block

* Generate

* fix: remove CSS minify script

* Add new changelog

* feat: generate faq schema

feat: register faq script

* feat: add heading support

* fix: reset graph key indexes

assets/js/faq.js

@@ -0,0 +1,139 @@
+( function ( wp, lodash ) {
+	'use strict';
+
+	// Check if the wp object exists.
+	if ( ! wp ) {
+		return;
+	}
+
+	const { times, noop } = lodash;
+	const { createElement: el } = wp.element;
+	const { registerBlockType } = wp.blocks;
+	const { ButtonBlockAppender, InspectorControls, RichText, useBlockProps, useInnerBlocksProps } = wp.blockEditor;
+	const { useSelect } = wp.data;
+	const { SelectControl } = wp.components;
+	const { __ } = wp.i18n;
+
+	registerBlockType( 'seo-ready/faq', {
+		apiVersion: 2,
+		title: __( 'FAQ', 'seo-ready' ),
+		description: __( 'This block displays a list of frequently asked questions.', 'seo-ready' ),
+		keywords: [ 'faq', 'question', 'answer' ],
+		icon: 'editor-help',
+		attributes: {
+			tagName: {
+				type: 'string',
+				default: 'h2',
+				selector: 'summary',
+			},
+			heading: {
+				type: 'string',
+				selector: 'heading',
+			},
+		},
+		category: 'design',
+		supports: {
+			align: [ 'full', 'wide' ],
+			multiple: false,
+			html: false,
+			color: {
+				background: true,
+				text: true,
+				link: false,
+			},
+			layout: {
+				allowSwitching: false,
+				allowInheriting: false,
+				allowEditing: false,
+				default: {
+					type: 'flex',
+					flexWrap: 'nowrap',
+					flexDirection: 'row',
+				},
+			},
+			spacing: {
+				margin: [ 'top', 'bottom' ],
+				padding: true,
+			},
+		},
+		edit: ( { attributes, clientId, setAttributes } ) => {
+			const { heading, tagName } = attributes;
+			const isSelectedBlockInRoot = useSelect(
+				( select ) => {
+					const { isBlockSelected, hasSelectedInnerBlock } = select( 'core/block-editor' );
+
+					return isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId, true );
+				},
+				[ clientId ]
+			);
+			const blockProps = useBlockProps( { className: 'is-layout-flow' } );
+			const { children } = useInnerBlocksProps(
+				{},
+				{
+					allowedBlocks: [ 'core/details' ],
+					renderAppender: noop,
+					template: times( 2, () => [ 'core/details', {} ] ),
+					templateInsertUpdatesSelection: true,
+					__experimentalCaptureToolbars: true,
+				}
+			);
+
+			return el(
+				'div',
+				blockProps,
+				( isSelectedBlockInRoot || heading ) &&
+					el(
+						'div',
+						{ className: 'wp-block-seo-ready-faq__heading' },
+						el( RichText, {
+							identifier: 'heading',
+							'aria-label': __( 'Write heading', 'seo-ready' ),
+							placeholder: __( 'Write heading…', 'seo-ready' ),
+							allowedFormats: [],
+							withoutInteractiveFormatting: true,
+							tagName,
+							value: heading,
+							onChange: ( newHeading ) => setAttributes( { heading: newHeading } ),
+						} )
+					),
+				children,
+				isSelectedBlockInRoot && el( ButtonBlockAppender, { rootClientId: clientId } ),
+				el(
+					InspectorControls,
+					{ group: 'advanced' },
+					el( SelectControl, {
+						__nextHasNoMarginBottom: true,
+						__next40pxDefaultSize: true,
+						label: __( 'Heading tag', 'seo-ready' ),
+						help: __( 'Select the heading tag for the FAQ block.', 'seo-ready' ),
+						options: [
+							{ label: 'p', value: 'p' },
+							{ label: 'H2', value: 'h2' },
+							{ label: 'H3', value: 'h3' },
+							{ label: 'H4', value: 'h4' },
+						],
+						value: tagName,
+						onChange: ( newTagName ) => setAttributes( { tagName: newTagName } ),
+					} )
+				)
+			);
+		},
+		save: ( { attributes } ) => {
+			const { heading, tagName } = attributes;
+			const blockProps = useBlockProps.save( { id: 'faq', className: 'is-layout-flow' } );
+			const { children } = useInnerBlocksProps.save();
+
+			return el(
+				'div',
+				blockProps,
+				heading &&
+					el(
+						'div',
+						{ className: 'wp-block-seo-ready-faq__heading' },
+						el( RichText.Content, { tagName, value: heading } )
+					),
+				children
+			);
+		},
+	} );
+} )( window.wp, window.lodash );

package.json

@@ -23,9 +23,9 @@
 		"lint:wpcs": "composer lint:wpcs",
 		"lint:wpcs:fix": "composer lint:wpcbf",
 		"makepot": "composer make-pot",
-		"minify": "cross-env BABEL_ENV=default NODE_ENV=production npm run minify:css && npm run minify:js && npm run minify:css:path",
+		"minify": "cross-env BABEL_ENV=default NODE_ENV=production npm run minify:js",
 		"minify:css:path": "replace-in-files --string='../' --replacement='../../' assets/css/minified",
-		"minify:css": "rimraf assets/css/minified && cleancss --batch --batch-suffix '' assets/css/*.css --output assets/css/minified",
+		"minify:css": "rimraf assets/css/minified && cleancss --batch --batch-suffix '' assets/css/*.css --output assets/css/minified && npm run minify:css:path",
 		"minify:js": "rimraf assets/js/minified && npm run format && babel assets/js/*.js --out-dir assets/js/minified --no-comments --minified --presets=@babel/preset-env"
 	},
 	"devDependencies": {

readme.txt

@@ -5,7 +5,7 @@ Donate link: https://www.buymeacoffee.com/mahdiyazdani
 Requires at least: 5.5
 Tested up to: 6.6
 Requires PHP: 7.4
-Stable tag: 2.3.1
+Stable tag: 2.4.0
 License: GPLv3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -91,6 +91,12 @@ Yes, our dedicated support team is ready to assist you with any questions or iss
 3. Customize how your content appears on Facebook and Twitter/X with the SEO Ready plugin's social media settings.
 
 == Changelog ===
+= 2.4.0 =
+* Add "FAQ" editor block.
+
+= 2.3.2 =
+* Fix fatal error when endpoint function is not available.
+
 = 2.3.1 =
 * Fix blog breadcrumb trails not displaying in the single post view.