Merge branch 'master' into fix/bugs

blockeraai · Jan 5, 2025 · 9309a8a · 9309a8a
2 parents 72940c8 + 792861f
commit 9309a8a
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 133 deletions.
diff --git a/packages/controls/js/libs/panel-body-control/index.js b/packages/controls/js/libs/panel-body-control/index.js
@@ -37,7 +37,7 @@ const PanelBodyControl: ComponentType<PanelBodyControlProps> = forwardRef(
 			children,
 			onToggle,
 			scrollAfterOpen = false,
-			showPoweredBy = true,
+			showPoweredBy = false,
 			...props
 		}: PanelBodyControlProps,
 		ref: Object

diff --git a/packages/controls/js/libs/panel-body-control/style.scss b/packages/controls/js/libs/panel-body-control/style.scss
@@ -43,7 +43,7 @@
 	}
 
 	&.is-opened {
-		padding: 16px 16px 10px;
+		padding: 16px 16px 12px;
 		margin-bottom: 10px;
 		position: relative;
 	}

diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
@@ -4,6 +4,9 @@
 - Ensured compatibility with the React.js rendering pipeline [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/single-product-block-error-bXDiO88g7LsP0hV)].
 - Fixed the block mode callback handler to improve functionality and reliability [[🔗 Bug](https://community.blockera.ai/bugs-mdhyb8nc/post/block-mode-switch-not-works-FsR1uwRuIcCakWp)].
 
+### Improvements
+- Updated block sections to remove the "Powered by Blockera" icon from the bottom. Instead, an indicator was added at the top of the block to show whether it is in advanced mode, displayed only once per block. (Based on users feedback)
+
 ## 1.0.0 (2024-12-08)
 
 ### New Features:

diff --git a/packages/editor/js/extensions/components/block-dropdown-all-menu.js b/packages/editor/js/extensions/components/block-dropdown-all-menu.js
@@ -11,7 +11,7 @@ import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 /**
  * Blockera dependencies
  */
-import { Flex } from '@blockera/controls';
+import { Flex, Tooltip } from '@blockera/controls';
 import { Icon } from '@blockera/icons';
 import { classNames } from '@blockera/classnames';
 
@@ -30,168 +30,191 @@ export const BlockDropdownAllMenu = ({
 	const { blockSections, updateBlockSections } = useBlockSections();
 	const { expandAll, collapseAll, focusMode } = blockSections;
 	return (
-		<DropdownMenu
-			icon={<Icon icon="more-vertical" iconSize="24" />}
-			label="Block Settings"
-			popoverProps={{
-				offset: 20,
-				focusOnMount: true,
-				placement: 'bottom-end',
-			}}
-		>
-			{({ onClose }) => {
-				return (
-					<>
-						<MenuGroup label={__('Block Settings', 'blockera')}>
-							<MenuItem
-								data-test={'advanced-mode-block'}
-								icon={isActive ? check : ''}
-								onClick={() => {
-									setActive(!isActive);
-									onClose();
-								}}
-								className={classNames({
-									'blockera-block-menu-item': true,
-									'blockera-block-menu-item-selected':
-										isActive,
-								})}
-							>
-								<Flex alignItems="center" gap="10px">
-									<Icon
-										library="blockera"
-										icon="blockera"
-										iconSize="18"
-									/>
-									{__('Advanced Mode', 'blockera')}
-								</Flex>
-							</MenuItem>
+		<>
+			{isActive && (
+				<Tooltip
+					text={__('Powered by Blockera Site Builder', 'blockera')}
+				>
+					<a
+						href="https://blockera.ai/products/site-builder/?utm_source=block-section-powered-by&utm_medium=referral&utm_campaign=powered-by&utm_content=cta-link"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="blockera-powered-by-icon"
+					>
+						<Icon
+							library="blockera"
+							icon="blockera"
+							iconSize={18}
+						/>
+					</a>
+				</Tooltip>
+			)}
 
-							<MenuItem
-								data-test={'basic-mode-block'}
-								icon={isActive ? '' : check}
-								onClick={() => {
-									setActive(!isActive);
-									onClose();
-								}}
-								className={classNames({
-									'blockera-block-menu-item': true,
-									'blockera-block-menu-item-selected':
-										!isActive,
-								})}
-							>
-								<Flex alignItems="center" gap="10px">
-									<Icon
-										library="wp"
-										icon="wordpress"
-										iconSize="18"
-									/>
-									{__('Basic Mode', 'blockera')}
-								</Flex>
-							</MenuItem>
-						</MenuGroup>
-						{isActive && (
-							<MenuGroup label={__('Block Sections', 'blockera')}>
+			<DropdownMenu
+				icon={<Icon icon="more-vertical" iconSize="24" />}
+				label="Block Settings"
+				popoverProps={{
+					offset: 20,
+					focusOnMount: true,
+					placement: 'bottom-end',
+				}}
+			>
+				{({ onClose }) => {
+					return (
+						<>
+							<MenuGroup label={__('Block Settings', 'blockera')}>
 								<MenuItem
-									data-test={'Expand All'}
-									icon={expandAll ? check : ''}
+									data-test={'advanced-mode-block'}
+									icon={isActive ? check : ''}
 									onClick={() => {
-										if (focusMode) {
-											return;
-										}
-										updateBlockSections({
-											focusMode: false,
-											collapseAll: false,
-											defaultMode: false,
-											expandAll: !expandAll,
-										});
+										setActive(!isActive);
+										onClose();
 									}}
 									className={classNames({
 										'blockera-block-menu-item': true,
 										'blockera-block-menu-item-selected':
-											expandAll,
-										'blockera-not-allowed': focusMode,
+											isActive,
 									})}
 								>
 									<Flex alignItems="center" gap="10px">
 										<Icon
-											library="ui"
-											icon="expand-all"
+											library="blockera"
+											icon="blockera"
 											iconSize="18"
 										/>
-										{__('Expand All', 'blockera')}
+										{__('Advanced Mode', 'blockera')}
 									</Flex>
 								</MenuItem>
+
 								<MenuItem
-									data-test={'Collapse All'}
-									icon={collapseAll ? check : ''}
+									data-test={'basic-mode-block'}
+									icon={isActive ? '' : check}
 									onClick={() => {
-										if (focusMode) {
-											return;
-										}
-
-										updateBlockSections({
-											expandAll: false,
-											focusMode: false,
-											defaultMode: false,
-											collapseAll: !collapseAll,
-										});
+										setActive(!isActive);
+										onClose();
 									}}
 									className={classNames({
 										'blockera-block-menu-item': true,
 										'blockera-block-menu-item-selected':
-											collapseAll,
-										'blockera-not-allowed': focusMode,
+											!isActive,
 									})}
 								>
 									<Flex alignItems="center" gap="10px">
 										<Icon
-											library="ui"
-											icon="collapse-all"
+											library="wp"
+											icon="wordpress"
 											iconSize="18"
 										/>
-										{__('Collapse All', 'blockera')}
+										{__('Basic Mode', 'blockera')}
 									</Flex>
 								</MenuItem>
-								<MenuItem
-									data-test={'Focus Mode'}
-									icon={focusMode ? check : ''}
-									onClick={() => {
-										if (focusMode) {
-											return updateBlockSections({
-												expandAll: false,
+							</MenuGroup>
+							{isActive && (
+								<MenuGroup
+									label={__('Block Sections', 'blockera')}
+								>
+									<MenuItem
+										data-test={'Expand All'}
+										icon={expandAll ? check : ''}
+										onClick={() => {
+											if (focusMode) {
+												return;
+											}
+											updateBlockSections({
 												focusMode: false,
-												defaultMode: true,
 												collapseAll: false,
+												defaultMode: false,
+												expandAll: !expandAll,
 											});
-										}
+										}}
+										className={classNames({
+											'blockera-block-menu-item': true,
+											'blockera-block-menu-item-selected':
+												expandAll,
+											'blockera-not-allowed': focusMode,
+										})}
+									>
+										<Flex alignItems="center" gap="10px">
+											<Icon
+												library="ui"
+												icon="expand-all"
+												iconSize="18"
+											/>
+											{__('Expand All', 'blockera')}
+										</Flex>
+									</MenuItem>
+									<MenuItem
+										data-test={'Collapse All'}
+										icon={collapseAll ? check : ''}
+										onClick={() => {
+											if (focusMode) {
+												return;
+											}
 
-										updateBlockSections({
-											expandAll: false,
-											collapseAll: false,
-											defaultMode: false,
-											focusMode: !focusMode,
-										});
-									}}
-									className={classNames({
-										'blockera-block-menu-item': true,
-										'blockera-block-menu-item-selected':
-											focusMode,
-									})}
-								>
-									<Flex alignItems="center" gap="10px">
-										<Icon
-											library="ui"
-											icon="focus-mode"
-											iconSize="18"
-										/>
-										{__('Focus Mode', 'blockera')}
-									</Flex>
-								</MenuItem>
-							</MenuGroup>
-						)}
-					</>
-				);
-			}}
-		</DropdownMenu>
+											updateBlockSections({
+												expandAll: false,
+												focusMode: false,
+												defaultMode: false,
+												collapseAll: !collapseAll,
+											});
+										}}
+										className={classNames({
+											'blockera-block-menu-item': true,
+											'blockera-block-menu-item-selected':
+												collapseAll,
+											'blockera-not-allowed': focusMode,
+										})}
+									>
+										<Flex alignItems="center" gap="10px">
+											<Icon
+												library="ui"
+												icon="collapse-all"
+												iconSize="18"
+											/>
+											{__('Collapse All', 'blockera')}
+										</Flex>
+									</MenuItem>
+									<MenuItem
+										data-test={'Focus Mode'}
+										icon={focusMode ? check : ''}
+										onClick={() => {
+											if (focusMode) {
+												return updateBlockSections({
+													expandAll: false,
+													focusMode: false,
+													defaultMode: true,
+													collapseAll: false,
+												});
+											}
+
+											updateBlockSections({
+												expandAll: false,
+												collapseAll: false,
+												defaultMode: false,
+												focusMode: !focusMode,
+											});
+										}}
+										className={classNames({
+											'blockera-block-menu-item': true,
+											'blockera-block-menu-item-selected':
+												focusMode,
+										})}
+									>
+										<Flex alignItems="center" gap="10px">
+											<Icon
+												library="ui"
+												icon="focus-mode"
+												iconSize="18"
+											/>
+											{__('Focus Mode', 'blockera')}
+										</Flex>
+									</MenuItem>
+								</MenuGroup>
+							)}
+						</>
+					);
+				}}
+			</DropdownMenu>
+		</>
 	);
 };
diff --git a/packages/editor/js/extensions/components/style.scss b/packages/editor/js/extensions/components/style.scss
@@ -17,6 +17,28 @@
 		top: 0;
 		right: 0;
 
+		.blockera-powered-by-icon {
+			position: absolute;
+			top: 17px;
+			right: 34px;
+			z-index: 2;
+			color: #1e1e1e;
+			fill: currentColor;
+			display: flex;
+			width: 24px;
+			height: 24px;
+			align-items: center;
+			justify-content: center;
+			transition: var(--blockera-controls-transition);
+			border-radius: 2px;
+			opacity: 0.2;
+
+			&:hover {
+				opacity: 1;
+				color: var(--blockera-controls-primary-color);
+			}
+		}
+
 		.components-dropdown-menu {
 			position: absolute;
 			right: 8px;