Steve

Hi Adam,

Thank you so much for taking a look at this.

Sure, I put the edit.js below.

Steve

import { useEffect } from '@wordpress/element';

import {
	RichText,
	useBlockProps,
	InnerBlocks,
	InspectorControls,
	PanelColorSettings,
	//ContrastChecker,
	withColors,
} from '@wordpress/block-editor';

import {
	Panel,
	PanelBody,
	PanelRow,
	RangeControl,
	RadioControl,
	ToggleControl,
	TextControl,
} from '@wordpress/components';

import { __ } from '@wordpress/i18n';
import './editor.scss';

function Edit(props) {
	const {
		attributes,
		setAttributes,
		backgroundColor,
		//textColor,
		setBackgroundColor,
		//setTextColor,
	} = props;

	const {
		ColumnsXS,
		ColumnsSM,
		ColumnsMD,
		ColumnsLG,
		ColumnsXL,
		ColumnsXXL,
		mainTitle,
		mainTitleAlignment,
		EnableSocialMediaButtons,
		DefaultButtonTextValue,
		TitlePosition,
		UniqueID,
		LayoutStyle,
		//BelowImageCardTitleClass,
		//AboveImageCardTitleClass,
	} = attributes;

	//Generate a value for the UniqueID if not set

	const onChangeID = (newID) => {
		setAttributes({ UniqueID: newID });
	};

	const onChangeColumnsXS = (newColumns) => {
		setAttributes({ ColumnsXS: newColumns });
	};

	const onChangeColumnsSM = (newColumns) => {
		setAttributes({ ColumnsSM: newColumns });
	};

	const onChangeColumnsMD = (newColumns) => {
		setAttributes({ ColumnsMD: newColumns });
	};

	const onChangeColumnsLG = (newColumns) => {
		setAttributes({ ColumnsLG: newColumns });
	};

	const onChangeColumnsXL = (newColumns) => {
		setAttributes({ ColumnsXL: newColumns });
	};

	const onChangeColumnsXXL = (newColumns) => {
		setAttributes({ ColumnsXXL: newColumns });
	};

	const onChangeMainTitle = (value) => {
		setAttributes({ mainTitle: value });
	};

	const onChangeTitleAlignment = (value) => {
		setAttributes({ mainTitleAlignment: value });
	};

	const onChangeLayoutStyle = (value) => {
		setAttributes({ LayoutStyle: value });
	};

	const onChangedDefaultButtonText = (value) => {
		setAttributes({ DefaultButtonTextValue: value });
	};

	const onChangeTitlePosition = (value) => {
		setAttributes({ TitlePosition: value });
		//(value);
	};

	useEffect(() => {
		if (TitlePosition === 'above-image') {
			setAttributes({
				AboveImageCardTitleClass: 'title-above-image-displayed',
			});
			setAttributes({
				BelowImageCardTitleClass: 'title-below-image-not-displayed',
			});
		} else {
			setAttributes({
				AboveImageCardTitleClass: 'title-above-image-not-displayed',
			});
			setAttributes({
				BelowImageCardTitleClass: 'title-below-image-displayed',
			});
		}
	}, [TitlePosition]);

	//useEffect(() => {
	//return;
	//document.getElementById {UniqueID}
	//const SetTitlePosition = (value) => {
	// 	if (TitlePosition === 'above-image') {
	// 		//Display the title above the image

	// 		const a = document.getElementsByClassName(
	// 			<code>title-above-image-not-displayed ${UniqueID}</code>
	// 		);

	// 		[...a].forEach(
	// 			(x) => (x.className += ' title-above-image-displayed ')
	// 		);
	// 		[...a].forEach((x) =>
	// 			x.classList.remove('title-above-image-not-displayed')
	// 		);

	// 		//Hide the title below the image
	// 		const b = document.getElementsByClassName(
	// 			<code>title-below-image-displayed  ${UniqueID}</code>
	// 		);
	// 		[...b].forEach(
	// 			(x) => (x.className += ' title-below-image-not-displayed')
	// 		);
	// 		[...b].forEach((x) =>
	// 			x.classList.remove('title-below-image-displayed')
	// 		);
	// 	} else {
	// 		//**************************************************************************************************************
	// 		//Find every instance of the class which disables the display of the social media buttons and replace it with
	// 		//the class to enable the display.
	// 		const a = document.getElementsByClassName(
	// 			<code>title-above-image-displayed ${UniqueID}</code>
	// 		);
	// 		[...a].forEach(
	// 			(x) => (x.className += ' title-above-image-not-displayed')
	// 		);
	// 		[...a].forEach((x) =>
	// 			x.classList.remove('title-above-image-displayed')
	// 		);

	// 		const b = document.getElementsByClassName(
	// 			<code>title-below-image-not-displayed  ${UniqueID}</code>
	// 		);
	// 		[...b].forEach(
	// 			(x) => (x.className += ' title-below-image-displayed')
	// 		);
	// 		[...b].forEach((x) =>
	// 			x.classList.remove('title-below-image-not-displayed')
	// 		);

	// 		//**************************************************************************************************************
	// 	}
	// 	//};
	// }, [TitlePosition, LayoutStyle]);

	const onChangeEnableSocialMediaButtons = (value) => {
		setAttributes({ EnableSocialMediaButtons: value });
	};

	//If the social media buttons are enabled, search through each card and display the social media buttons for each.
	useEffect(() => {
		if (EnableSocialMediaButtons === true) {
			//Find every instance of the class which disables the display of the social media buttons and replace it with
			//the class to enable the display.
			const a = document.getElementsByClassName(
				'social-media-links-disabled'
			);
			[...a].forEach(
				(x) => (x.className += ' social-media-links-enabled')
			);
			[...a].forEach((x) =>
				x.classList.remove('social-media-links-disabled')
			);
		} else {
			//**************************************************************************************************************
			//Find every instance of the class which disables the display of the social media buttons and replace it with
			//the class to enable the display.
			const a = document.getElementsByClassName(
				'social-media-links-enabled'
			);
			[...a].forEach(
				(x) => (x.className += ' social-media-links-disabled')
			);
			[...a].forEach((x) =>
				x.classList.remove('social-media-links-enabled')
			);
			//**************************************************************************************************************
		}
	}, [EnableSocialMediaButtons]);

	//heading alignment
	const mainTitleClass = <code>main-heading-align-${mainTitleAlignment}</code>;

	if (UniqueID === '') {
		const lID =
			Math.random().toString(36).substring(2, 15) +
			Math.random().toString(36).substring(2, 15);
		onChangeID(lID);
		// console.log('just set it to = ' + lID);
	}

	// let divStyles = {};
	// const className = getColorClassName(
	// 	'background-color',

	//);
	//className={backgroundColor.class}
	//console.log('props');
	//console.log(props);
	//const myClasses = <code><code>${backgroundColor.class} netmonics-xs-is-${ColumnsXS}-columns netmonics-sm-is-${ColumnsSM}-columns netmonics-md-is-${ColumnsMD}-columns netmonics-lg-is-${ColumnsLG}-columns netmonics-xl-is-${ColumnsXL}-columns netmonics-xxl-is-${ColumnsXXL}-columns</code></code>;

	//console.log(myClasses);
	const myClasses = <code>${backgroundColor.class} netmonics-xs-is-${ColumnsXS}-columns netmonics-sm-is-${ColumnsSM}-columns netmonics-md-is-${ColumnsMD}-columns netmonics-lg-is-${ColumnsLG}-columns netmonics-xl-is-${ColumnsXL}-columns netmonics-xxl-is-${ColumnsXXL}-columns</code>;
	//console.log(myClasses);
	//const myClasses =
	//' netmonics-xs-is-2-columns netmonics-sm-is-3-columns netmonics-md-is-3-columns netmonics-lg-is-4-columns netmonics-xl-is-4-columns netmonics-xxl-is-4-columns ';

	return (
		<div
			id="{UniqueID}"
			{...useBlockProps({
				className: myClasses,
			})}
		>
			<InspectorControls>
				<PanelColorSettings
					title={__('Color Settings', 'text-box')}
					icon="admin-appearance"
					initialOpen={false}
					disableCustomColors={false}
					colorSettings={[
						{
							value: backgroundColor.color,
							onChange: setBackgroundColor,
							label: __('Background Color', 'text-box'),
						},
						// {
						// 	value: textColor.color,
						// 	onChange: setTextColor,
						// 	label: __('Text Color', 'text-box'),
						// },
					]}
				>
					{/* <ContrastChecker
						textColor={textColor.color}
						backgroundColor={backgroundColor.color}
					/> */}
				</PanelColorSettings>

				<Panel header="">
					<PanelBody title="Columns" initialOpen={false}>
						<PanelRow>
							{__(
								'Set the number of columns for each screen size',
								'team-members'
							)}
						</PanelRow>
						<PanelRow>{__('', 'team-members')}</PanelRow>
						<RangeControl
							label={__(
								'Extra Small (less than 575px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsXS}
							value={ColumnsXS}
						/>
						<RangeControl
							label={__(
								'Small (between 575px and 768px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsSM}
							value={ColumnsSM}
						/>
						<RangeControl
							label={__(
								'Medium (between 768px and 992px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsMD}
							value={ColumnsMD}
						/>
						<RangeControl
							label={__(
								'Large (between 992px and 1200px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsLG}
							value={ColumnsLG}
						/>
						<RangeControl
							label={__(
								'XL (between 1200px and 1400px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsXL}
							value={ColumnsXL}
						/>
						<RangeControl
							label={__(
								'XXL (greater than 1400px)',
								'team-members'
							)}
							min={1}
							max={6}
							onChange={onChangeColumnsXXL}
							value={ColumnsXXL}
						/>
					</PanelBody>
				</Panel>

				<Panel header="">
					<PanelBody
						title="Call to Action Button "
						initialOpen={false}
					>
						<TextControl
							label="Default Text"
							value={DefaultButtonTextValue}
							onChange={onChangedDefaultButtonText}
							help={__('Enter the default text for the button')}
						/>
					</PanelBody>
				</Panel>

				<Panel header="">
					<PanelBody title="Main Heading" initialOpen={false}>
						<PanelRow>
							{__('Configure the heading', 'team-members')}
						</PanelRow>
						<PanelRow>
							{__('', 'team-members')}

							<RadioControl
								label="Alignment"
								selected={mainTitleAlignment}
								options={[
									{ label: 'Left', value: 'left' },
									{ label: 'Centre', value: 'center' },
								]}
								onChange={onChangeTitleAlignment}
							/>
						</PanelRow>
					</PanelBody>
				</Panel>

				<Panel header="">
					<PanelBody title="Layout Style" initialOpen={false}>
						<PanelRow>
							{__('Configure the layout', 'team-members')}
						</PanelRow>
						<PanelRow>
							{__('', 'team-members')}

							<RadioControl
								label="Layout"
								selected={LayoutStyle}
								options={[
									{ label: 'Stacked', value: 'stacked' },
									{
										label: 'Image Left',
										value: 'image-left',
									},
								]}
								onChange={onChangeLayoutStyle}
							/>
						</PanelRow>
					</PanelBody>
				</Panel>

				<Panel header="">
					<PanelBody title="Social Media Buttons" initialOpen={false}>
						<PanelRow>{__('', 'team-members')}</PanelRow>

						<PanelRow>
							<ToggleControl
								label="Enable Social Media Buttons"
								checked={EnableSocialMediaButtons}
								onChange={onChangeEnableSocialMediaButtons}
							/>
						</PanelRow>
					</PanelBody>
				</Panel>

				{/* It only makes sense to display the title position options if the layout style is stacked */}
				{LayoutStyle === 'stacked' && (
					<Panel header="">
						<PanelBody title="Title" initialOpen={false}>
							<PanelRow>{__('', 'team-members')}</PanelRow>

							<PanelRow>
								<RadioControl
									label="Set title position above or below the image"
									selected={TitlePosition}
									options={[
										{
											label: 'Above',
											value: 'above-image',
										},
										{
											label: 'Below',
											value: 'below-image',
										},
									]}
									onChange={onChangeTitlePosition}
								/>
							</PanelRow>
						</PanelBody>
					</Panel>
				)}
			</InspectorControls>

			<RichText
				placeholder={__('UniqueID', 'team-member')}
				tagName="p"
				onChange={onChangeID}
				value={UniqueID}
				allowedFormats={[]}
				className="netmonics-cards-unique-id"
			/>

			<RichText
				placeholder={__('Main Title', 'team-members')}
				tagName="h2"
				value={mainTitle}
				allowedFormats={[]}
				onChange={onChangeMainTitle}
				className={mainTitleClass}
			/>

			<InnerBlocks
				allowedBlocks={['netmonics/generic-card']}
				orientation="horizontal" // Set the orientation to horizontal as the blocks are aligned horizontally and when dragged and dropped
				// this will cause a blue vertical line to appear indicating where the block will be dropped.
				template={[
					['netmonics/generic-card'],
					['netmonics/generic-card'],
					['netmonics/generic-card'],
				]}
				//templateLock="all"  //Prevent more items being added, 'insert' is also a valid option.
			/>
		</div>
	);
}

export default withColors({
	backgroundColor: 'background-color',
	// textColor: 'color',
})(Edit);

I’ve just noticed you modified your reply, sorry, I’ll take a look at that.

Hi Adam,

Thank you for the idea.

It doesn’t work unfortunately, I got errors with the above line, tried putting it in ticks i.e. ` but still didn’t work.
const myClasses =<code>${backgroundColor.class} netmonics-xs-is-${ColumnsXS}-columns netmonics-sm-is-${ColumnsSM}-columns netmonics-md-is-${ColumnsMD}-columns netmonics-lg-is-${ColumnsLG}-columns netmonics-xl-is-${ColumnsXL}-columns netmonics-xxl-is-${ColumnsXXL}-columns</code>;

Please let me know if you have any other ideas and I’ll give them a try.

Best Regards,

Steve

• This reply was modified 3 years, 11 months ago by Steve.

Unfortunately, I discovered an issue with the above code.

I’ve now discovered that it extracts the content for all blocks on the page not just the block making the call.

Does anyone know how to obtain the content for the block making the call rather than for the whole page?

To recap, I use a callback function ‘render_html’ function which extracts the comments as follows:

function render_html($attributes, $content, $post) {

    ob_start();

    //Load the block's content
    $dom1 = new DOMDocument;
    $dom1->loadHTML(get_the_content());

    $xpath1 = new DOMXpath($dom1);
    //Get the comments
    $comments = $xpath1->query('.//comment()', $dom1);

Best Regards,

Steve

• This reply was modified 3 years, 11 months ago by Steve.

I’ve tried modifying the function to include the $content variable:

function render_html($attributes, $content) {
	
	ob_start(); ?>
 	  <h1>Attributes<?php echo esc_html(var_dump($attributes)) ?>!</h3>
 	  <h3>The number of columns is <?php echo esc_html($attributes['myColumns']) ?>!</h3>
	   <h2>The content is:</h2><p><?php echo esc_html($content) ?>!</p>
	   <h2>The content is </h2><p><?php echo esc_html(get_the_content()) ?>!</p>
	   <h2>The content is </h2><p><?php echo var_dump(parse_blocks( get_the_content() )) ?>!</p>
	   
	   
 	  <?php 
	   return ob_get_clean();
}

But I don’t see the attributes in the output.

I’ve defined the attributes as follows:

attributes: {
		name: {
			type: 'string',
		},
		bio: {
			type: 'string',
		},
		id: {
			type: 'number',
		},
		alt: {
			type: 'string',
			default: '',
		},
		url: {
			type: 'string',
		},
		description: {
			type: 'string',
		}

So as I don’t use the source as ‘html’ I thought that meant the values would be stored separately in a JSON block.

I’m stuck for what to try next. Can anyone please help?

If my question isn’t clear, please let me know, I can try to clarify my explanations.

Best Regards,

Steve

Does it perhaps mean:

save: () => {
      return <InnerBlocks.Content />
}

I’ve tried this and it doesn’t make any difference to the attributes, I only get the top level not the attributes from the innerblocks.

Resolved!