Custom slug namespace (#330)

* added filters for constructor general settings * extended checks for slugs with custom namespaces * build * added dropdown for slug namespace button in constructor * added slug columns to the admin blocks list * build * build * fixed displaying of custom slug in admin block list * added `lzb.constructor.post-change` action when post changing * improve block slug component ui * remove duplicate unused classname * added add_collection method to main class * fixed undefined variable usage fixed block slug namespace incorrect styles * prevent slug validation when there is no slug specified yet * build
nk-crew · Nov 27, 2024 · af9abb4 · af9abb4
1 parent e604767
commit af9abb4
Show file tree

Hide file tree

Showing 20 changed files with 484 additions and 243 deletions.
diff --git a/assets/admin/index.scss b/assets/admin/index.scss
@@ -20,14 +20,18 @@
 		}
 	}
 
+	.lzb-admin-block-slug {
+		font-size: 12px;
+	}
+
 	.wp-list-table {
 		th.column-lazyblocks_post_icon {
 			width: 42px;
 			text-align: center;
 		}
 
 		th.column-lazyblocks_post_category {
-			width: 200px;
+			width: 80px;
 		}
 
 		@media screen and (max-width: 782px) {

diff --git a/assets/components/block-slug/editor.scss b/assets/components/block-slug/editor.scss
@@ -4,13 +4,35 @@
 	display: flex;
 	align-items: flex-start;
 
-	> .lazyblocks-component-block-slug-prefix {
-		padding: 7px 8px;
+	.lazyblocks-component-block-slug-prefix {
+		position: relative;
+		display: inline-block;
+		max-width: 100%;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		padding: 6px 8px;
+		padding-right: 10px;
+		height: 32px;
+		border: 1px solid #949494;
 		line-height: normal;
-		color: #fff;
-		background-color: $gray-900;
-		border-top-left-radius: 3px;
-		border-bottom-left-radius: 3px;
+		color: $gray-800;
+		background-color: $gray-100;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		transition: 0.2s background-color;
+
+		&:hover:not(:disabled,[aria-disabled="true"]),
+		&.components-button[aria-expanded="true"] {
+			background-color: $gray-300;
+			color: $gray-800;
+		}
+
+		// Slash after namespace.
+		> span {
+			position: absolute;
+			right: 5px;
+		}
 	}
 
 	> .components-base-control {
@@ -29,3 +51,25 @@
 		}
 	}
 }
+
+.lazyblocks-component-block-slug-prefix-dropdown {
+	max-width: 60%;
+}
+.lazyblocks-component-block-slug-prefix-dropdown-content {
+	.components-popover__content {
+		width: 260px;
+		padding: 16px;
+	}
+
+	.components-tab-panel__tabs {
+		margin-top: -16px;
+		margin-right: -16px;
+		margin-bottom: 16px;
+		margin-left: -16px;
+	}
+
+	a.lazyblocks-component-pro-notice-btn {
+		margin-bottom: 0;
+		margin-top: 12px;
+	}
+}
diff --git a/assets/components/block-slug/index.js b/assets/components/block-slug/index.js
@@ -6,15 +6,56 @@ import './editor.scss';
 /**
  * WordPress dependencies.
  */
-import { BaseControl, TextControl } from '@wordpress/components';
+import {
+	BaseControl,
+	Button,
+	TextControl,
+	Dropdown,
+} from '@wordpress/components';
+
+import { __ } from '@wordpress/i18n';
 
 export default function BlockSlug(props) {
 	return (
 		<BaseControl id={props.label} label={props.label || ''}>
 			<div className="lazyblocks-component-block-slug">
-				<div className="lazyblocks-component-block-slug-prefix">
-					lazyblock/
-				</div>
+				<Dropdown
+					className="lazyblocks-component-block-slug-prefix-dropdown"
+					contentClassName="lazyblocks-component-block-slug-prefix-dropdown-content"
+					popoverProps={{
+						placement: 'left-start',
+						offset: 36,
+						shift: true,
+					}}
+					renderToggle={({ isOpen, onToggle }) => (
+						<Button
+							className="lazyblocks-component-block-slug-prefix"
+							aria-expanded={isOpen}
+							onClick={onToggle}
+						>
+							lazyblock
+							<span>/</span>
+						</Button>
+					)}
+					renderContent={() => (
+						<div className="lazyblocks-component-pro-notice">
+							Custom block collections and slug namespaces are
+							only available in the Pro plugin.
+							{window?.lazyblocksConstructorData?.pro_url && (
+								<a
+									className="lazyblocks-component-pro-notice-btn"
+									target="_blank"
+									rel="noreferrer"
+									href={
+										window.lazyblocksConstructorData.pro_url
+									}
+								>
+									{__('Upgrade Now', 'lazy-blocks')}
+								</a>
+							)}
+						</div>
+					)}
+				/>
 				<TextControl
 					{...{
 						...props,

diff --git a/assets/components/pro-notice/index.js b/assets/components/pro-notice/index.js
@@ -33,6 +33,9 @@ export default function ProNotice() {
 						{__('Upgrade Now', 'lazy-blocks')}
 					</a>
 					<ul className="ul-square">
+						<li>
+							{__('Custom Slugs and Collections', 'lazy-blocks')}
+						</li>
 						<li>
 							{__('Controls Conditional Logic', 'lazy-blocks')}
 						</li>