PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / breadcrumb / src / edit.js

edit.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/breadcrumb/src/edit.js

267 lines 10.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from '@wordpress/i18n';
2 import { useEffect, useState } from '@wordpress/element';
3 import { select } from '@wordpress/data';
4 import { useBlockProps } from '@wordpress/block-editor';
5 import { safeHTML } from '@wordpress/dom';
6
7 import Inspector from "./inspector";
8
9 import { BREADCRUMB_TITLE_MARGIN, BREADCRUMB_TITLE_PADDING, BREADCRUMB_ICON_MARGIN, BREADCRUMB_ICON_PADDING, BREADCRUMB_TITLE_MARGIN_LAYOUT_TWO, BREADCRUMB_ICON_MARGIN_LAYOUT_TWO, BREADCRUMB_ICON_PADDING_LAYOUT_TWO, BREADCRUMB_TITLE_PADDING_LAYOUT_TWO } from './constants';
10
11 import {
12 typoPrefix_title,
13 typoPrefix_title_two,
14 } from "./typographyPrefixConstants";
15
16 import {
17 generateTypographyStyles,
18 duplicateBlockIdFix,
19 softMinifyCssStrings,
20 generateDimensionsControlStyles,
21 isCssExists
22 } from "../../../util/helpers";
23
24 import { BreadCrumbIcon1, BreadCrumbIcon2, BreadCrumbIcon3, BreadCrumbIconNew } from '../icons/breadCrumbIcon';
25 import { usePreviewDeviceType } from '../../../hooks';
26
27 const edit = ({ attributes, setAttributes, isSelected, clientId }) => {
28
29 const { align, align_layout_two, wrapper_background_color_layout_two, blockMeta, resOption, blockId, breadcrumb_title_color, breadcrumb_title_color_layout_two, breadcrumb_icon_color, breadcrumb_icon_color_two, layout } = attributes;
30
31 const { dimensionStylesDesktop: breadcrumbMarginDesk, dimensionStylesMobile: breadcrumbMarginMob, dimensionStylesTab: breadcrumbMarginTab } = generateDimensionsControlStyles({
32 controlName: layout == 'layout-1' ? BREADCRUMB_TITLE_MARGIN : BREADCRUMB_TITLE_MARGIN_LAYOUT_TWO,
33 styleFor: 'margin',
34 attributes
35 });
36
37 const { dimensionStylesDesktop: breadcrumbPaddingDesk, dimensionStylesMobile: breadcrumbPaddingMob, dimensionStylesTab: breadcrumbPaddingTab } = generateDimensionsControlStyles({
38 controlName: layout == 'layout-1' ? BREADCRUMB_TITLE_PADDING : BREADCRUMB_TITLE_PADDING_LAYOUT_TWO,
39 styleFor: 'padding',
40 attributes
41 });
42
43 const { typoStylesDesktop: titleTypoDesk, typoStylesTab: titleTypoTab, typoStylesMobile: titleTypoMobile } = generateTypographyStyles({
44 attributes,
45 defaultFontSize: layout == 'layout-1' ? 16 : 12,
46 prefixConstant: layout == 'layout-1' ? typoPrefix_title : typoPrefix_title_two,
47 });
48
49 const { dimensionStylesDesktop: breadcrumbIconMarDesk, dimensionStylesMobile: breadcrumbIconMarMob, dimensionStylesTab: breadcrumbIconMarTab } = generateDimensionsControlStyles({
50 controlName: layout == 'layout-1' ? BREADCRUMB_ICON_MARGIN : BREADCRUMB_ICON_MARGIN_LAYOUT_TWO,
51 styleFor: 'margin',
52 attributes
53 });
54
55 const { dimensionStylesDesktop: breadcrumbIconPadDesk, dimensionStylesMobile: breadcrumbIconPadMob, dimensionStylesTab: breadcrumbIconPadTab } = generateDimensionsControlStyles({
56 controlName: layout == 'layout-1' ? BREADCRUMB_ICON_PADDING : BREADCRUMB_ICON_PADDING_LAYOUT_TWO,
57 styleFor: 'padding',
58 attributes
59 });
60
61 const desktopStyles = `
62 .betterdocs-breadcrumb.${blockId} {
63 ${align ? `display:flex; justify-content:${align}` : ''}
64 }
65
66 .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
67 ${titleTypoDesk ? titleTypoDesk.trim() : ''}
68 ${breadcrumbPaddingDesk}
69 ${breadcrumbMarginDesk}
70 color:${breadcrumb_title_color};
71 }
72
73 .betterdocs-breadcrumb.${blockId} .breadcrumb-delimiter .breadcrumb-delimiter-icon{
74 ${breadcrumbIconMarDesk}
75 ${breadcrumbIconPadDesk}
76 color:${breadcrumb_icon_color}
77 }
78
79 .betterdocs-breadcrumb.${blockId}.layout-2 {
80 ${align_layout_two ? `display:flex; justify-content:${align_layout_two}` : ''}
81 }
82
83 .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
84 ${titleTypoDesk ? titleTypoDesk.trim() : ''}
85 ${breadcrumbPaddingDesk}
86 ${breadcrumbMarginDesk}
87 color:${breadcrumb_title_color_layout_two};
88 }
89
90 .betterdocs-breadcrumb.${blockId}.layout-2 .breadcrumb-delimiter .breadcrumb-delimiter-icon path{
91 ${breadcrumbIconMarDesk}
92 ${breadcrumbIconPadDesk}
93 color:${breadcrumb_icon_color_two} !important;
94 }
95
96 .betterdocs-breadcrumb.${blockId}.layout-2 ul.betterdocs-breadcrumb-list {
97 background:${wrapper_background_color_layout_two};
98 }
99 `;
100
101 const tabStyles = `
102 .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
103 ${titleTypoTab ? titleTypoTab.trim() : ''}
104 ${breadcrumbPaddingTab}
105 ${breadcrumbMarginTab}
106 color:${breadcrumb_title_color}
107 }
108
109 .betterdocs-breadcrumb.${blockId} .breadcrumb-delimiter .breadcrumb-delimiter-icon{
110 ${breadcrumbIconMarMob}
111 ${breadcrumbIconPadTab}
112 color:${breadcrumb_icon_color}
113 }
114
115 .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
116 ${titleTypoTab ? titleTypoTab.trim() : ''}
117 ${breadcrumbPaddingTab}
118 ${breadcrumbMarginTab}
119 color:${breadcrumb_title_color}
120 }
121
122 .betterdocs-breadcrumb.${blockId}.layout-2 .breadcrumb-delimiter .breadcrumb-delimiter-icon path{
123 ${breadcrumbIconMarMob}
124 ${breadcrumbIconPadTab}
125 color:${breadcrumb_icon_color}
126 }
127 `;
128
129 const mobileStyles = `
130 .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId} .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
131 ${titleTypoMobile ? titleTypoMobile.trim() : ''}
132 ${breadcrumbPaddingMob}
133 ${breadcrumbMarginMob}
134 color:${breadcrumb_title_color}
135 }
136
137 .betterdocs-breadcrumb.${blockId} .breadcrumb-delimiter .breadcrumb-delimiter-icon{
138 ${breadcrumbIconMarTab}
139 ${breadcrumbIconPadMob}
140 color:${breadcrumb_icon_color}
141 }
142
143 .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item a, .betterdocs-breadcrumb.${blockId}.layout-2 .betterdocs-breadcrumb-list .betterdocs-breadcrumb-item span{
144 ${titleTypoMobile ? titleTypoMobile.trim() : ''}
145 ${breadcrumbPaddingMob}
146 ${breadcrumbMarginMob}
147 color:${breadcrumb_title_color_layout_two}
148 }
149
150 .betterdocs-breadcrumb.${blockId}.layout-2 .breadcrumb-delimiter .breadcrumb-delimiter-icon path{
151 ${breadcrumbIconMarTab}
152 ${breadcrumbIconPadMob}
153 color:${breadcrumb_icon_color_two} !important;
154 }
155 `;
156
157 //Desktop CSS Styles
158 const desktopAllStyles = softMinifyCssStrings(`
159 ${isCssExists(desktopStyles) ? desktopStyles : ''}
160 `);
161
162 //Tablet CSS Styles
163 const tabAllStyles = softMinifyCssStrings(`
164 ${isCssExists(tabStyles) ? tabStyles : ''}
165 `);
166
167 //Mobile CSS Styles
168 const mobileAllStyles = softMinifyCssStrings(`
169 ${isCssExists(mobileStyles) ? mobileStyles : ''}
170 `);
171
172 //Save Styles In An Object Form On Block Meta Attribute
173 useEffect(() => {
174 const styleObject = {
175 desktop: desktopAllStyles,
176 tab: tabAllStyles,
177 mobile: mobileAllStyles,
178 };
179
180 if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
181 setAttributes({ blockMeta: styleObject });
182 }
183 }, [attributes]);
184
185 /**
186 * resOption: __experimentalPreviewDeviceType()
187 * Set Responsive Option
188 */
189 usePreviewDeviceType(setAttributes);
190
191 //Generate Unique Block ID For Every Block Instance
192 useEffect(() => {
193 const BLOCK_PREFIX = "betterdocs-breadcrumb";
194 duplicateBlockIdFix({
195 BLOCK_PREFIX,
196 blockId,
197 setAttributes,
198 select,
199 clientId,
200 });
201 });
202
203 //Current Block Default Parent Wrapper
204 const blockProps = useBlockProps({
205 className: `eb-guten-block-main-parent-wrapper`,
206 });
207
208 //Render The Main Content Of The Block
209 return (
210 <>
211 <div {...blockProps}>
212 <style>
213 {`
214
215 ${desktopAllStyles}
216
217 ${resOption === 'Tablet' ? tabAllStyles : ''}
218 ${resOption === 'Mobile' ? mobileAllStyles : ''}
219
220 @media all and (max-width: 1024px) {
221 ${tabAllStyles}
222 }
223
224 @media all and (max-width: 767px) {
225 ${mobileAllStyles}
226 }
227
228 `}
229 </style>
230 {isSelected && (<Inspector attributes={attributes} setAttributes={setAttributes} />)}
231 <nav id="betterdocs-breadcrumb" className={`betterdocs-breadcrumb ${layout == 'layout-2' ? 'layout-2' : ''} ${safeHTML(blockId)}`}>
232 <ul className={'betterdocs-breadcrumb-list'}>
233 <li className={'betterdocs-breadcrumb-item item-home'}>
234 <a className={'bread-link bread-home'} href='#' title="Home">Home</a>
235 </li>
236 <li className={'betterdocs-breadcrumb-item breadcrumb-delimiter'}>
237 <span className={'icon-container'}>
238 {layout == 'layout-1' ? <BreadCrumbIcon1 /> : <BreadCrumbIconNew/>}
239 </span>
240 </li>
241 <li className="betterdocs-breadcrumb-item item-cat item-custom-post-type-docs"><a className="bread-cat bread-custom-post-type-docs" href="#" title="Docs Man">Taxonomy-1</a>
242 </li>
243 <li className={'betterdocs-breadcrumb-item breadcrumb-delimiter'}>
244 <span className={'icon-container'}>
245 {layout == 'layout-1' ? <BreadCrumbIcon2 /> : <BreadCrumbIconNew/>}
246 </span>
247 </li>
248 <li className="betterdocs-breadcrumb-item">
249 <a href="#">Taxonomy-2</a>
250 </li>
251 <li className={'betterdocs-breadcrumb-item breadcrumb-delimiter'}>
252 <span className={'icon-container'}>
253 {layout == 'layout-1' ? <BreadCrumbIcon3 /> : <BreadCrumbIconNew/>}
254 </span>
255 </li>
256 <li className="betterdocs-breadcrumb-item">
257 <a href="#">Taxonomy-3</a>
258 </li>
259 </ul>
260 </nav>
261 </div>
262 </>
263 );
264 };
265
266 export default edit;
267