Merge pull request #4365 from Codeinwp/prf/fix/blog-hide-title

PRF: Fixes
Codeinwp · Jan 28, 2025 · ffda984 · ffda984
2 parents 73eabb2 + d48dab2
commit ffda984
Show file tree

Hide file tree

Showing 24 changed files with 179 additions and 682 deletions.
diff --git a/assets/apps/customizer-controls/src/builder-upsell/BannerUpsell.tsx b/assets/apps/customizer-controls/src/builder-upsell/BannerUpsell.tsx
diff --git a/assets/apps/customizer-controls/src/controls.js b/assets/apps/customizer-controls/src/controls.js
@@ -40,7 +40,6 @@ import './style.scss';
 import Documentation from './documentation-section/Documentation.tsx';
 import Instructions from './builder-instructions/Instructions.tsx';
 import Upsells from './builder-upsell/Upsells.tsx';
-import BannerUpsell from './builder-upsell/BannerUpsell.tsx';
 import { initLocalGoogleFonts } from './typography-extra/LocalGoogleFonts';
 
 import MainSearch from './customizer-search/MainSearch.tsx';
@@ -217,34 +216,6 @@ const initUpsellSection = () => {
 
 		render(<Upsells control={section} />, section.container[0]);
 	});
-
-	const upsellBannerSections = document.querySelectorAll(
-		'.control-section.neve-upsell-banner'
-	);
-	upsellBannerSections.forEach((node) => {
-		const slug = node.getAttribute('data-slug');
-		const section = wp.customize.section(slug);
-
-		if (!section) {
-			return;
-		}
-
-		render(<BannerUpsell control={section} />, section.container[0]);
-	});
-
-	const upsellBannerControls = document.querySelectorAll(
-		'.customize-control.neve-upsell-banner'
-	);
-	upsellBannerControls.forEach((node) => {
-		const slug = node.getAttribute('data-slug');
-		const control = wp.customize.control(slug);
-
-		if (!control) {
-			return;
-		}
-
-		render(<BannerUpsell control={control} />, control.container[0]);
-	});
 };
 
 const initQuickLinksSections = () => {

diff --git a/assets/apps/customizer-controls/src/ordering/Ordering.js b/assets/apps/customizer-controls/src/ordering/Ordering.js
@@ -8,7 +8,7 @@ import {
 	RangeControl,
 	ToggleControl,
 } from '@wordpress/components';
-import { dragHandle, chevronDown, chevronUp, lock } from '@wordpress/icons';
+import { dragHandle, chevronDown, chevronUp } from '@wordpress/icons';
 import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 import { RadioIcons } from '@neve-wp/components';
 
@@ -91,9 +91,13 @@ const Item = ({
 		>
 			<div className="top-bar">
 				{locked ? (
-					<button className="locked" disabled>
-						<Icon icon={lock} size={18} />
-					</button>
+					<Tooltip
+						text={__('Ordering locked for current layout', 'neve')}
+					>
+						<button className="locked" disabled>
+							<Icon icon={dragHandle} size={18} />
+						</button>
+					</Tooltip>
 				) : (
 					<Handle />
 				)}
@@ -231,9 +235,10 @@ const InnerControl = ({ id, args }) => {
 				<>
 					{label && <span className="subcontrol-label">{label}</span>}
 					{description && (
-						<span className="subcontrol-description">
-							{description}
-						</span>
+						<span
+							className="subcontrol-description"
+							dangerouslySetInnerHTML={{ __html: description }}
+						/>
 					)}
 				</>
 			)}

diff --git a/assets/apps/customizer-controls/src/scss/_ordering.scss b/assets/apps/customizer-controls/src/scss/_ordering.scss
@@ -36,6 +36,10 @@ $icon-bright: #00a0d2;
 				opacity: 0.9; 
 				pointer-events: none;
 			}
+
+			&.locked svg {
+				opacity: .35;
+			}
 		}
 
 		.separator {
@@ -61,9 +65,6 @@ $icon-bright: #00a0d2;
 			cursor: move;
 		}
 
-		.locked {
-			cursor: not-allowed;
-		}
 
 		.actions {
 			height: 100%;

diff --git a/assets/apps/customizer-controls/src/scss/_upsell.scss b/assets/apps/customizer-controls/src/scss/_upsell.scss
@@ -34,76 +34,3 @@ $upsell_blue: #0065A6 !default;
 	  }
 	}
 }
-
-#acordion-section-neve_hfg_header_upsell_section,
-#acordion-section-neve_hfg_footer_upsell_section,
-ul[id^=sub-accordion-panel-hfg_] .control-subsection.neve-upsell-banner,
-ul[id^=sub-accordion-section-hfg_] .customize-control.neve-upsell-banner {
-  display: block !important;
-  &.control-section.neve-upsell-banner,
-  &.customize-control.neve-upsell-banner {
-	.upsell-inner {
-	  bottom: 240px;
-	  z-index: 10;
-	}
-  }
-}
-
-@media (max-width: 960px){
-  .control-section.neve-upsell-banner .upsell-inner {
-	bottom: calc(240px + 2vh + 0.8em) !important;
-  }
-}
-
-.control-section.neve-upsell-banner,
-.customize-control.neve-upsell-banner {
-  .upsell-inner {
-	position: fixed;
-	bottom: 0;
-	right: 0;
-	width: calc(100% - clamp(300px, 18%, 600px) - 12px);
-	border: none;
-	.neve-customizer-heading {
-	  border: none;
-	  background-color: $upsell_blue;
-	  color: #fff;
-	  padding: 2px 12px;
-	  display: flex;
-	  align-items: center;
-	  justify-content: start;
-	  gap: 12px;
-	  font-weight: normal;
-	  height: auto;
-
-	  .accordion-heading {
-		padding: 8px 2px;
-	  }
-
-	  .logo {
-		width: 24px;
-		filter: grayscale(1) invert(1) brightness(10);
-	  }
-
-	  .components-button.is-primary {
-		margin: 6px 6px 6px 24px;
-		background-color: #fff;
-		color: $upsell_blue;
-		font-weight: bold;
-		&:hover {
-		  background-color: #4f94d4cc;
-		  color: #fff;
-		}
-	  }
-
-	  .nv-dismiss-upsell {
-		color: #fff;
-		margin-left: auto;
-		margin-right: 12px;
-		&:hover {
-		  color: #000;
-		}
-	  }
-	}
-  }
-}
-
diff --git a/assets/apps/customizer-controls/src/starter-content/Notice.js b/assets/apps/customizer-controls/src/starter-content/Notice.js
@@ -1,20 +1,18 @@
 /* global NeveReactCustomize fetch ajaxurl */
 
-import StarterContentNotice from './StarterContentNotice.js';
 import { render, useState } from '@wordpress/element';
 
-const noticeId = 'neve-starter-content';
-
 const NoticeWrapper = () => {
 	const [error, setError] = useState(null);
+	const [dismissed, setDismissed] = useState(false);
 
 	const handleKeep = () => {
 		setError(null);
 		wp.customize.previewer.save();
 		if (wp.customize.previewer) {
 			wp.customize.previewer.refresh();
 		}
-		wp.customize.notifications.remove(noticeId);
+		setDismissed(true);
 	};
 
 	const handleRemove = () => {
@@ -35,7 +33,7 @@ const NoticeWrapper = () => {
 					setError(response.data.message);
 					return;
 				}
-				wp.customize.notifications.remove(noticeId);
+				setDismissed(true);
 				window.location.reload();
 			})
 			.catch((err) => {
@@ -46,13 +44,35 @@ const NoticeWrapper = () => {
 			});
 	};
 
+	const { labels } = window.NeveReactCustomize.starterContent;
+
+	if (dismissed) {
+		return null;
+	}
+
 	return (
-		<StarterContentNotice
-			onKeep={handleKeep}
-			onRemove={handleRemove}
-			error={error}
-			labels={window.NeveReactCustomize.starterContent.labels}
-		/>
+		<div id="nv-starter-content-notice">
+			<div className="nv-notice">
+				<h3>{labels.title}</h3>
+				<p>{labels.description}</p>
+				<button
+					type="button"
+					className="button button-primary"
+					onClick={handleKeep}
+				>
+					{labels.save}
+				</button>
+				<button
+					type="button"
+					className="button secondary"
+					onClick={handleRemove}
+				>
+					{labels.dismiss}
+				</button>
+				{error && <div className="nv-notice-error">{error}</div>}
+				<span className="nv-subtitle">{labels.info}</span>
+			</div>
+		</div>
 	);
 };
 
@@ -62,22 +82,13 @@ export const initStarterContentNotice = () => {
 	}
 
 	const renderNotice = () => {
-		const root = document.querySelector('#nv-starter-content-notice');
-		if (!root) {
-			return;
-		}
-		render(<NoticeWrapper />, root);
-	};
+		const titleSection = document.getElementById('customize-info');
+		const targetNode = document.createElement('div');
 
-	const notice = new wp.customize.Notification(noticeId, {
-		type: 'info',
-		message: '<div id="nv-starter-content-notice"></div>',
-		dismissible: true,
-	});
+		titleSection.append(targetNode);
 
-	wp.customize.notifications.add(noticeId, notice);
+		render(<NoticeWrapper />, targetNode);
+	};
 
-	wp.customize.notifications.bind('add', renderNotice);
-	wp.customize.notifications.bind('remove', renderNotice);
-	wp.customize.bind('pane-contents-reflowed', renderNotice);
+	wp.customize.bind('ready', renderNotice);
 };