Update patterns with #5172 fix

[myroslavve]

And also this only fixes the problem for new blocks, so won't fix https://github.com/maxi-blocks/maxi-blocks/pull/5014#issuecomment-1671673082, will fix patterns in another issue (migrator won't work, so will specifically fix patterns)

Originally posted by @myroslavve in https://github.com/maxi-blocks/maxi-blocks/issues/5172#issuecomment-1839102738

Need to get all patterns wherever we store them and run a script to update their code editors, the script should get all general attributes and check if there exists a responsive attribute for this general attribute (example: test-xxl for test-general), and in that case add baseBreakpoint attribute same as general.

[dosubot[bot]]

🤖

Hey there @myroslavve! 👋

I'm Dosu, a friendly bot here to help you with the Maxi Blocks repository while our human maintainers are away. I'm equipped to assist with bugs, answer questions, and help guide you through contributing. So, feel free to shoot any questions my way! Looking forward to working with you. 😄

Sure, I can provide a script to update the code. The script will check for the existence of a responsive attribute for each general attribute, and if it exists, it will add a baseBreakpoint attribute that is the same as the general one. Here is the updated script:

const breakpoints = ['general', 'xxl', 'xl', 'l', 'm', 's', 'xs'];

const breakpointAttributesCreator = ({
	obj,
	noBreakpointAttr = [],
	diffValAttr = {},
}) => {
	const response = {};
	const diffValAttrKeys = Object.keys(diffValAttr);

	Object.entries(obj).forEach(([key, val]) => {
		if (noBreakpointAttr?.includes(key)) {
			response[key] = val;

			return;
		}

		breakpoints.forEach(breakpoint => {
			const newKey = `${key}-${breakpoint}`;
			const newVal = { ...val };

			if (diffValAttrKeys.includes(newKey))
				newVal.default = diffValAttr[newKey];
			else if (breakpoint !== 'general') delete newVal.default;

			// Check if the responsive attribute exists for the general attribute
			if (breakpoint === 'general' && response[`${key}-responsive`]) {
				// If it exists, add a baseBreakpoint attribute that is the same as the general one
				newVal.baseBreakpoint = { ...val };
			}

			response[newKey] = newVal;
		});
	});

	return response;
};

export default breakpointAttributesCreator;

In this updated script, I added a check inside the breakpoints.forEach loop. If the current breakpoint is 'general' and there is a responsive attribute for the current key in the response object, it adds a baseBreakpoint attribute to newVal that is a copy of val.

Regarding the structure of the patterns stored in the maxi-blocks codebase, I wasn't able to find an answer within the repository. The answer may be available elsewhere or I could have missed it.

In the provided codebase of maxi-blocks, the general attributes are defined and used in the constructor of the MaxiBlockComponent class. They are extracted from the props of the component and used throughout the component's methods. For example, the uniqueID attribute is used to remove deprecated blocks, add a block to the store, get the block root, and set the wrapper ID.

Responsive attributes are not explicitly defined in the provided codebase. However, the codebase does handle responsiveness in terms of device types and breakpoints. The shouldComponentUpdate method checks if the deviceType or baseBreakpoint has changed, and if so, it forces a re-render of the component.

The getSnapshotBeforeUpdate method also checks for changes in deviceType or baseBreakpoint to decide whether to render styles.

The displayStyles method uses the deviceType prop to pass the current breakpoint to the StyleComponent.

The getBreakpoints method seems to be used to get the breakpoints from the block's attributes.

In summary, the general attributes are defined in the component's props and used throughout the component's methods. The responsive attributes are not explicitly defined but are handled in terms of device types and breakpoints.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources:

• src/extensions/styles/breakpointAttributesCreator.js
• src/extensions/maxi-block/maxiBlockComponent.js

Sources

• src/extensions/styles/breakpointAttributesCreator.js
• src/extensions/maxi-block/maxiBlockComponent.js

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.