Forum Replies Created

Viewing 15 replies - 1 through 15 (of 41 total)
  • Thread Starter Steve

    (@bugdens)

    Sorry, don’t follow, which setting?

    Thread Starter Steve

    (@bugdens)

    Hello,

    Thank you for your message.

    I mean the whole cart page:
    https://ecommerce-demo.netmonics.com/cart/

    Steve

    Thread Starter Steve

    (@bugdens)

    Sorry, I meant to say:
    Replace “If I remove the above excludes it still works” with ” > “I then reactivated the plugin and it now displays the cart. If I remove the above excludes it still works.”

    Thread Starter Steve

    (@bugdens)

    Ah, OK. Thank you.

    Thread Starter Steve

    (@bugdens)

    I think I can go the widget route as the block I’m adding is to be displayed on every page.

    I enabled ESI but I don’t see any additional widgets created, particularly the ‘resent posts’ widget mentioned here:
    https://blog.litespeedtech.com/2017/09/06/wpw-esi-and-litespeed-cache/

    Best Regards,

    Steve

    Thread Starter Steve

    (@bugdens)

    OK thank you.

    Thread Starter Steve

    (@bugdens)

    OK thank you.

    Do you happen to know a good resource which explains how to the custom coding?

    Thread Starter Steve

    (@bugdens)

    I’ve had a look at the link but can’t see how to apply ESI to a gutenberg block. Is that possible?

    Thread Starter Steve

    (@bugdens)

    OK thank you!

    Thread Starter Steve

    (@bugdens)

    Hello Takayuki,
    
    Thank you for your reply.
    
    You can't see it because I replace the form with a different type and removed the Contact Form 7 form.
    
    I've put the form details below, I've changed the domain name of the emails.
    
    I tried creating 4 images to show the mail tab but have no way to upload images, the image block here only seems to use urls.
    
    I don't think there's anything wrong with the form because it was working the day before. It could at least send emails to any domain apart from the site's one.
    I found that I had to edit a setting in the cPanel to allow it to email externally, so at least that is working.
    
    Steve
    
    ***********
    Form
    ***********
    
    
    
    Name: [text* your-name]
    
    Email: [email* your-email]
    
    Subject: [text* your-subject]
    
    Message: [textarea* your-message]
    
    [acceptance acceptance-777] I agree to the storage of my data according to the Privacy Policy [/acceptance]
    
    [submit "SEND"]
    
    
    Thread Starter Steve

    (@bugdens)

    Just following up.

    I spoke to the hosting company and they tell me that the site’s IP address has changed. Apparently it still works when viewing the site as the old address is forwarded to the new one. Not sure why it doesn’t work when logging in though.

    Anyway, I’ve updated the IP address and everything is working fine.

    I don’t recall seeing a notification that the IP address would be changing, that’s something I need to follow up on and ensure that this doesn’t happen again.

    Best Regards,

    Steve

    Thread Starter Steve

    (@bugdens)

    Hello Farid,

    Thank you so much for your reply and suggestion.

    What I’m trying to do is to access the attributes for my dynamic block which contains child blocks.

    I can access the top level attributes from my block from the $attributes variable as follows:
    $attributes[‘SomeAttribute’]

    I don’t know how to directly access the attributes for the child blocks.

    The above code retrieves the content for the page/post, so I can iterate through the structure and identify my block, then extract it’s attributes including the nested attributes.

    Though it’s not a very efficient way to obtain the attributes as my block can exist inside a row/column block and so each instance of my block needs to read the content for the whole page/post each time and then navigate through the structure recursively to find possible instances of my block and identify the correct one before extracting it’s attributes. However, at least it works when the block is on a page or post.

    I also want to be able to place my block on a widget but now it won’t work as the parse_blocks() retrieves the values for the page/post not a widget.

    So I suppose there are really two questions:
    1) How can I access the attributes for child blocks directly?
    2) If 1) is not possible, how can I read the content of a widget if the block actually on a widget.

    I’m not sure if my block might need to exist in other places but so far I need it for pages, posts and widgets. Could there be other places where it might exist I wonder?

    Hope that’s clear, it’s tricky to explain.

    Steve

    Thread Starter Steve

    (@bugdens)

    Unfortunately, there’s a problem with this solution.

    get_the_content() doesn’t work in all circumstances.
    I’m using a 3rd party element and this function just returns the content for the page of course and not the element.

    So it would be much better to access the attributes for the nested blocks directly in PHP rather than extracting from the content.

    Just to recap, I can access the top level attributes as follows:

    function render_html($attributes, $content, $post) {
        ob_start();
        $SomeAttribute = $attributes['SomeAttribute'];

    At the risk of repeating my question, does anyone know how to access the attributes for nested blocks?

    Best Regards,

    Steve

    Thread Starter Steve

    (@bugdens)

    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);
    Thread Starter Steve

    (@bugdens)

    I’m not sure because under the section titled ‘block wrapper props’ it says ‘classNames’ plural:

    The first thing to notice here is the use of the useBlockProps React hook on the block wrapper element. In the example above, the block wrapper renders a “div” in the editor, but in order for the Gutenberg editor to know how to manipulate the block, add any extra classNames . . .

    Though the example below does show just a single class.

    Steve

Viewing 15 replies - 1 through 15 (of 41 total)