feat(powered by branding): reduce icons and change it as indicator fo…

…r advanced mode
blockeraai · Jan 5, 2025 · 6723455 · 6723455
1 parent 75d950e
commit 6723455
Show file tree

Hide file tree

Showing 5 changed files with 180 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
@@ -1,5 +1,9 @@
 ## Unreleased
 
+### 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,26 @@
 		top: 0;
 		right: 0;
 
+		.blockera-powered-by-icon {
+			position: absolute;
+			top: 17px;
+			right: 34px;
+			z-index: 2;
+			color: #bdbdbd;
+			fill: currentColor;
+			display: flex;
+			width: 24px;
+			height: 24px;
+			align-items: center;
+			justify-content: center;
+			transition: var(--blockera-controls-transition);
+			border-radius: 2px;
+
+			&:hover {
+				color: var(--blockera-controls-primary-color);
+			}
+		}
+
 		.components-dropdown-menu {
 			position: absolute;
 			right: 8px;