| 1 |
/** |
| 2 |
* External dependencies |
| 3 |
*/ |
| 4 |
import styled from "@emotion/styled"; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
import { __ } from "@wordpress/i18n"; |
| 10 |
import { ExternalLink, Spinner } from "@wordpress/components"; |
| 11 |
import { addQueryArgs } from "@wordpress/url"; |
| 12 |
import { useContext } from "@wordpress/element"; |
| 13 |
|
| 14 |
/** |
| 15 |
* Internal dependencies |
| 16 |
*/ |
| 17 |
import { Section, Widget } from "sdk/components"; |
| 18 |
import { DataContext } from "../data"; |
| 19 |
|
| 20 |
/* |
| 21 |
$break-huge: 1440px; |
| 22 |
$break-wide: 1280px; |
| 23 |
$break-xlarge: 1080px; |
| 24 |
$break-large: 960px; // admin sidebar auto folds |
| 25 |
$break-medium: 782px; // adminbar goes big |
| 26 |
$break-small: 600px; |
| 27 |
$break-mobile: 480px; |
| 28 |
$break-zoomed-in: 280px; |
| 29 |
*/ |
| 30 |
|
| 31 |
const WidgetStyled = styled(Widget)` |
| 32 |
border-top: 0; |
| 33 |
color: #000 !important; |
| 34 |
|
| 35 |
a, |
| 36 |
ul, |
| 37 |
p { |
| 38 |
font-size: 1rem; |
| 39 |
} |
| 40 |
|
| 41 |
h1, |
| 42 |
h2, |
| 43 |
h3, |
| 44 |
h4, |
| 45 |
h5 { |
| 46 |
margin: 0 0 10px !important; |
| 47 |
font-weight: 500 !important; |
| 48 |
} |
| 49 |
|
| 50 |
h1 { |
| 51 |
padding: 0; |
| 52 |
font-size: 2rem; |
| 53 |
} |
| 54 |
|
| 55 |
h2 { |
| 56 |
font-size: 1.5rem; |
| 57 |
} |
| 58 |
|
| 59 |
h3 { |
| 60 |
font-size: 1.25rem; |
| 61 |
} |
| 62 |
|
| 63 |
h4 { |
| 64 |
font-size: 1.185rem; |
| 65 |
} |
| 66 |
|
| 67 |
h5 { |
| 68 |
font-size: 1rem; |
| 69 |
} |
| 70 |
|
| 71 |
ul { |
| 72 |
padding-left: 20px; |
| 73 |
list-style: disc; |
| 74 |
} |
| 75 |
|
| 76 |
.flex-list { |
| 77 |
display: flex; |
| 78 |
flex-wrap: wrap; |
| 79 |
gap: 1rem; |
| 80 |
padding-left: 0; |
| 81 |
list-style: none; |
| 82 |
} |
| 83 |
|
| 84 |
.leading { |
| 85 |
font-size: 1.45em; |
| 86 |
} |
| 87 |
|
| 88 |
.section-title { |
| 89 |
margin-top: 1em !important; |
| 90 |
} |
| 91 |
|
| 92 |
.section-summary { |
| 93 |
font-size: 1.35em; |
| 94 |
} |
| 95 |
|
| 96 |
.feature-line { |
| 97 |
font-size: 1.15em; |
| 98 |
} |
| 99 |
|
| 100 |
details { |
| 101 |
padding: 0 0.5rem; |
| 102 |
|
| 103 |
ul { |
| 104 |
margin: 0; |
| 105 |
} |
| 106 |
|
| 107 |
li { |
| 108 |
margin-bottom: 4px; |
| 109 |
} |
| 110 |
} |
| 111 |
|
| 112 |
details + details { |
| 113 |
border-top: none; |
| 114 |
} |
| 115 |
|
| 116 |
details[open] { |
| 117 |
padding-bottom: 1em; |
| 118 |
} |
| 119 |
|
| 120 |
summary { |
| 121 |
padding: 0.35rem 2em 0.35rem 0; |
| 122 |
font-size: 1rem; |
| 123 |
font-weight: 500; |
| 124 |
cursor: pointer; |
| 125 |
} |
| 126 |
|
| 127 |
.feature-summary { |
| 128 |
details { |
| 129 |
margin: 1rem 0; |
| 130 |
} |
| 131 |
} |
| 132 |
|
| 133 |
.technical-feature { |
| 134 |
display: flex; |
| 135 |
flex-direction: column; |
| 136 |
justify-content: space-between; |
| 137 |
} |
| 138 |
|
| 139 |
.video-tutorial { |
| 140 |
margin: 16px 0; |
| 141 |
} |
| 142 |
|
| 143 |
.grid { |
| 144 |
display: grid; |
| 145 |
grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); |
| 146 |
gap: 1rem; |
| 147 |
|
| 148 |
&-item { |
| 149 |
padding: 1rem; |
| 150 |
border: 1px solid #ddd; |
| 151 |
border-radius: 8px; |
| 152 |
|
| 153 |
h3 { |
| 154 |
margin: 0 0 0.5rem; |
| 155 |
font-weight: 700; |
| 156 |
} |
| 157 |
|
| 158 |
h4, |
| 159 |
h5 { |
| 160 |
margin: 16px 0 !important; |
| 161 |
} |
| 162 |
} |
| 163 |
} |
| 164 |
|
| 165 |
.grid--large { |
| 166 |
grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); |
| 167 |
} |
| 168 |
|
| 169 |
.video-frame { |
| 170 |
position: relative; |
| 171 |
width: 100%; |
| 172 |
height: 0; |
| 173 |
padding-bottom: 56.25%; |
| 174 |
margin: 0; |
| 175 |
border: 1px solid #e1e1e1; |
| 176 |
|
| 177 |
iframe { |
| 178 |
position: absolute; |
| 179 |
top: 0; |
| 180 |
left: 0; |
| 181 |
width: 100%; |
| 182 |
height: 100%; |
| 183 |
} |
| 184 |
} |
| 185 |
|
| 186 |
.video-caption { |
| 187 |
margin: 4px 0; |
| 188 |
font-size: 0.9rem; |
| 189 |
} |
| 190 |
|
| 191 |
.video-tutorials { |
| 192 |
display: grid; |
| 193 |
grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); |
| 194 |
gap: 12px; |
| 195 |
} |
| 196 |
`; |
| 197 |
|
| 198 |
const VideoFrame = ({ videoId }) => ( |
| 199 |
<div className="video-frame"> |
| 200 |
<iframe |
| 201 |
src={`https://www.youtube.com/embed/${videoId}`} |
| 202 |
srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.btn-play{position: absolute;top: 50%;left: 50%;z-index: 1;display: block;width: 68px;height: 48px;margin:0;cursor: pointer;transform: translate3d(-50%, -50%, 0);background-color: transparent;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter: grayscale(100%);transition: filter .1s cubic-bezier(0, 0, 0.2, 1);border: none;}body:hover .btn-play,.btn-play:focus{filter:none}.visually-hidden{clip: rect(0 0 0 0);clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px;}</style><a href="https://www.youtube.com/embed/${videoId}?autoplay=1&enablejsapi=1&playsinline=1"><img src="https://img.youtube.com/vi/${videoId}/maxresdefault.jpg" alt="Video tutorial"><button type="button" class="btn-play"><span class="visually-hidden">Play</span></button></a>`} |
| 203 |
title="YouTube video player" |
| 204 |
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| 205 |
allowFullScreen |
| 206 |
></iframe> |
| 207 |
</div> |
| 208 |
); |
| 209 |
|
| 210 |
const WelcomeWidget = () => { |
| 211 |
const { Docs: { loading, docs } = {} } = useContext(DataContext); |
| 212 |
|
| 213 |
const features = [ |
| 214 |
{ |
| 215 |
title: "Carousel layouts", |
| 216 |
keyFeatures: |
| 217 |
"Ease to use, fast, clean, flexible, responsive, multiple effects, navigation, pagination, etc. Works on any devices with any kind of content,", |
| 218 |
worksWith: "Carousel repeater blocks, Post template inside Query Loop", |
| 219 |
builtWith: ( |
| 220 |
<> |
| 221 |
{`Based on the `} |
| 222 |
<ExternalLink href="https://swiperjs.com">SwiperJS</ExternalLink> |
| 223 |
{` carousel, and Vanilla JS, this is designed as a layout for repeater blocks. It can also work with the Query Loop block.`} |
| 224 |
</> |
| 225 |
), |
| 226 |
goodFor: |
| 227 |
"Banner slider, Posts carousel, Gallery, Carousel of features, testimonials, services, etc.", |
| 228 |
howToUse: ( |
| 229 |
<ul> |
| 230 |
<li> |
| 231 |
<h5>{`Carousel repeater blocks`}</h5> |
| 232 |
<ol> |
| 233 |
<li>{`Add a carousel repeater block to the Block Editor`}</li> |
| 234 |
<li>{`Add nested carousel item blocks`}</li> |
| 235 |
<li>{`Choose preview mode and customize the settings`}</li> |
| 236 |
</ol> |
| 237 |
</li> |
| 238 |
<li> |
| 239 |
<h5>{`Query Loop`}</h5> |
| 240 |
<ol> |
| 241 |
<li>{`Choose the Post Template block inside a Query Loop`}</li> |
| 242 |
<li>{`Choose the carousel layout`}</li> |
| 243 |
<li>{`Choose preview mode and customize the settings`}</li> |
| 244 |
</ol> |
| 245 |
</li> |
| 246 |
</ul> |
| 247 |
), |
| 248 |
videoId: "Eh3kX-9_mDg", |
| 249 |
videoDesc: "How to create a banner slider", |
| 250 |
tutorials: [ |
| 251 |
{ |
| 252 |
url: addQueryArgs( |
| 253 |
"edit.php?post_type=boldblocks_block&page=cbb-block-library&s=carousel", |
| 254 |
), |
| 255 |
title: "Prebuilt carousel blocks from the block library", |
| 256 |
target: "_blank", |
| 257 |
}, |
| 258 |
{ |
| 259 |
url: "https://youtu.be/i8d8Pha921c", |
| 260 |
title: "[YouTube] How to create a carousel of posts ↗", |
| 261 |
target: "_blank", |
| 262 |
}, |
| 263 |
{ |
| 264 |
url: "https://youtu.be/EEk-kSa59VE", |
| 265 |
title: "[YouTube] How to create a custom banner slider block ↗", |
| 266 |
target: "_blank", |
| 267 |
}, |
| 268 |
{ |
| 269 |
url: "https://youtu.be/XfhgqvzRTRQ", |
| 270 |
title: "[YouTube] How to create another banner slider ↗", |
| 271 |
target: "_blank", |
| 272 |
}, |
| 273 |
{ |
| 274 |
url: "https://www.youtube.com/playlist?list=PLPuEwc7dZkleS_5ATLat8arnVUflXSfTk", |
| 275 |
title: "[YouTube] Watch all playlist ↗", |
| 276 |
target: "_blank", |
| 277 |
}, |
| 278 |
], |
| 279 |
}, |
| 280 |
{ |
| 281 |
title: "Responsive grid layouts", |
| 282 |
keyFeatures: |
| 283 |
"Ease to use, flexible, responsive, grid template columns, gap, row, column, span, order", |
| 284 |
worksWith: "Grid repeater blocks, Post template inside Query Loop", |
| 285 |
builtWith: |
| 286 |
"Based on the CSS grid layout, this is designed as a layout for repeater blocks. It can also work with the Query Loop block.", |
| 287 |
goodFor: |
| 288 |
"Posts grid, blog page, Gallery, grid of features, testimonials, services, etc.", |
| 289 |
howToUse: ( |
| 290 |
<ul> |
| 291 |
<li> |
| 292 |
<h5>{`Grid repeater blocks`}</h5> |
| 293 |
<ol> |
| 294 |
<li>{`Add a grid repeater block to the Block Editor`}</li> |
| 295 |
<li>{`Add nested grid item blocks`}</li> |
| 296 |
<li>{`Customize the settings for both grid and grid item blocks`}</li> |
| 297 |
</ol> |
| 298 |
</li> |
| 299 |
<li> |
| 300 |
<h5>{`Query Loop`}</h5> |
| 301 |
<ol> |
| 302 |
<li>{`Choose the Post Template block inside a Query Loop`}</li> |
| 303 |
<li>{`Choose the responsive grid layout`}</li> |
| 304 |
<li>{`Customize the grid settings, customize layout for each item to if you want a magazine layout`}</li> |
| 305 |
</ol> |
| 306 |
</li> |
| 307 |
</ul> |
| 308 |
), |
| 309 |
videoId: "awSC09tTnS8", |
| 310 |
videoDesc: "How to create a responsive grid", |
| 311 |
tutorials: [ |
| 312 |
{ |
| 313 |
url: addQueryArgs( |
| 314 |
"edit.php?post_type=boldblocks_block&page=cbb-block-library&s=grid", |
| 315 |
), |
| 316 |
title: "Prebuilt grid blocks from the block library", |
| 317 |
target: "_blank", |
| 318 |
}, |
| 319 |
{ |
| 320 |
url: "https://youtu.be/mICLfKkF6tU", |
| 321 |
title: "[YouTube] How to create a custom grid block ↗", |
| 322 |
target: "_blank", |
| 323 |
}, |
| 324 |
{ |
| 325 |
url: "https://youtu.be/AnCpVKxhBlM", |
| 326 |
title: "[YouTube] How to create a testimonial grid block ↗", |
| 327 |
target: "_blank", |
| 328 |
}, |
| 329 |
{ |
| 330 |
url: "https://www.youtube.com/playlist?list=PLPuEwc7dZklfsbrRAKe_iUywkjk0fPMUE", |
| 331 |
title: "[YouTube] Watch all playlist ↗", |
| 332 |
target: "_blank", |
| 333 |
}, |
| 334 |
], |
| 335 |
}, |
| 336 |
{ |
| 337 |
title: "Accordion layouts", |
| 338 |
keyFeatures: "Ease to use, works with any content, multiple options", |
| 339 |
worksWith: "Accordion repeater blocks", |
| 340 |
builtWith: |
| 341 |
"Based on the CBB Collapse component and Vanilla JS, this is designed as a layout for repeater blocks.", |
| 342 |
goodFor: "FAQ section, long list of features", |
| 343 |
howToUse: ( |
| 344 |
<ol> |
| 345 |
<li>{`Add an accordion repeater block to the Block Editor`}</li> |
| 346 |
<li>{`Add nested accordion item blocks`}</li> |
| 347 |
<li>{`Customize the settings`}</li> |
| 348 |
</ol> |
| 349 |
), |
| 350 |
videoId: "YA4-duNF_w4", |
| 351 |
videoDesc: "How to create an accordion layout", |
| 352 |
tutorials: [ |
| 353 |
{ |
| 354 |
url: addQueryArgs( |
| 355 |
"edit.php?post_type=boldblocks_block&page=cbb-variation-library&s=accordion", |
| 356 |
), |
| 357 |
title: "Prebuilt accordion variations from the variation library", |
| 358 |
target: "_blank", |
| 359 |
}, |
| 360 |
], |
| 361 |
}, |
| 362 |
{ |
| 363 |
title: "Modal, off-canvas, popover, toggle content layouts", |
| 364 |
keyFeatures: "Ease to use, works with any content, multiple options", |
| 365 |
worksWith: |
| 366 |
"All CBB blocks that have the toggle content support feature enabled.", |
| 367 |
builtWith: |
| 368 |
"Built with Vanilla JS, this is designed as an extended support feature for CBB blocks", |
| 369 |
goodFor: |
| 370 |
"Popup, Mega menu, off-canvas menu, popover, show/hide content, etc.", |
| 371 |
howToUse: ( |
| 372 |
<ol> |
| 373 |
<li>{`Add a CBB block that has the toggle content feature enabled`}</li> |
| 374 |
<li>{`Add inner blocks`}</li> |
| 375 |
<li>{`Turn on the toggle content feature from the inspector settings`}</li> |
| 376 |
<li>{`Customize the settings such as trigger element, show/hide on the first load, etc.`}</li> |
| 377 |
</ol> |
| 378 |
), |
| 379 |
videoId: "y31TAKHZOD0", |
| 380 |
videoDesc: "How to create a modal or off-canvas layout step by step", |
| 381 |
tutorials: [ |
| 382 |
{ |
| 383 |
url: "https://youtu.be/5QQRzhO9VJM", |
| 384 |
title: "[YouTube] How to create a toggle search box ↗", |
| 385 |
target: "_blank", |
| 386 |
}, |
| 387 |
{ |
| 388 |
url: "https://youtu.be/E4usfCydR7U", |
| 389 |
title: |
| 390 |
"[YouTube] How to create a responsive header with hamburger menu, toggle search box ↗", |
| 391 |
target: "_blank", |
| 392 |
}, |
| 393 |
{ |
| 394 |
url: "https://youtu.be/YnUt-zQXnCU", |
| 395 |
title: "[YouTube] How to create an off-canvas content ↗", |
| 396 |
target: "_blank", |
| 397 |
}, |
| 398 |
{ |
| 399 |
url: "https://youtu.be/g_KOCqvU0Ps", |
| 400 |
title: "[YouTube] How to create a notification, promotion bar ↗", |
| 401 |
target: "_blank", |
| 402 |
}, |
| 403 |
{ |
| 404 |
url: "https://youtu.be/52jD9eeBJ78", |
| 405 |
title: "[YouTube] How to create a video popup ↗", |
| 406 |
target: "_blank", |
| 407 |
}, |
| 408 |
{ |
| 409 |
url: "https://youtu.be/UEh_Da9Sozs", |
| 410 |
title: "[YouTube] How to create a cookies popup ↗", |
| 411 |
target: "_blank", |
| 412 |
}, |
| 413 |
], |
| 414 |
}, |
| 415 |
{ |
| 416 |
title: "Background effects: parallax, zooming, infinite scrolling, video", |
| 417 |
keyFeatures: "Ease to use, fast, custom image, featured image, video", |
| 418 |
worksWith: |
| 419 |
"All CBB blocks that have the background media support feature enabled.", |
| 420 |
builtWith: |
| 421 |
"Built with Vanilla JS and CSS animations, this is designed as an extended support feature for CBB blocks", |
| 422 |
goodFor: "Hero section, zooming image on grid layout, etc.", |
| 423 |
howToUse: ( |
| 424 |
<ol> |
| 425 |
<li>{`Add a CBB block that has the background media feature enabled`}</li> |
| 426 |
<li>{`Input background media from the inspector settings`}</li> |
| 427 |
<li>{`Choose background effect and customize the settings.`}</li> |
| 428 |
</ol> |
| 429 |
), |
| 430 |
videoId: "nDpeQbpu50s", |
| 431 |
videoDesc: "How to create a hero section with parallax background", |
| 432 |
tutorials: [ |
| 433 |
{ |
| 434 |
url: "https://youtu.be/mBleA20caGo", |
| 435 |
title: |
| 436 |
"[YouTube] How to add infinite scrolling effect to background ↗", |
| 437 |
target: "_blank", |
| 438 |
}, |
| 439 |
{ |
| 440 |
url: "https://youtu.be/0g1SLTq-lQ4", |
| 441 |
title: |
| 442 |
"[YouTube] How to create a page title bar with parallax background ↗", |
| 443 |
target: "_blank", |
| 444 |
}, |
| 445 |
], |
| 446 |
}, |
| 447 |
{ |
| 448 |
title: |
| 449 |
"Query Loop: add carousel, responsive grid layout, extended filters and sorting", |
| 450 |
keyFeatures: |
| 451 |
"Responsive grid layout, carousel layout, filters by parent, postIds, meta fields, multiple post types, multiple sorting fields, etc.", |
| 452 |
worksWith: "The default Query Loop block", |
| 453 |
builtWith: |
| 454 |
"Using WordPress Core API, and responsive grid and carousel layouts", |
| 455 |
goodFor: "Blog page, post grid, post carousel", |
| 456 |
howToUse: ( |
| 457 |
<ul> |
| 458 |
<li> |
| 459 |
<h5>{`Extended filters and sorting`}</h5> |
| 460 |
<ol> |
| 461 |
<li>{`Choose a Query Loop block`}</li> |
| 462 |
<li>{`Customize the settings inside the Extended filters and sorting panel from the inspector setting`}</li> |
| 463 |
</ol> |
| 464 |
</li> |
| 465 |
<li> |
| 466 |
<h5>{`Set responsive grid and carousel layouts`}</h5> |
| 467 |
<ol> |
| 468 |
<li>{`Choose the Post Template block inside a Query Loop block`}</li> |
| 469 |
<li>{`Choose responsive grid or carousel layout`}</li> |
| 470 |
<li>{`Customize the settings inside the inspector settings`}</li> |
| 471 |
</ol> |
| 472 |
</li> |
| 473 |
</ul> |
| 474 |
), |
| 475 |
videoId: "aHy3spQVBGc", |
| 476 |
videoDesc: "How to create a blog page", |
| 477 |
tutorials: [ |
| 478 |
{ |
| 479 |
url: "https://youtu.be/bcK_k3IfW8g", |
| 480 |
title: |
| 481 |
"[YouTube] How to create a banner slider using the Query Loop block ↗", |
| 482 |
target: "_blank", |
| 483 |
}, |
| 484 |
{ |
| 485 |
url: "https://youtu.be/yDVaRm9Sehg", |
| 486 |
title: "[YouTube] How to create a related posts section ↗", |
| 487 |
target: "_blank", |
| 488 |
}, |
| 489 |
{ |
| 490 |
url: "https://youtu.be/paSXmpHU9K4", |
| 491 |
title: "[YouTube] How to create a card-style posts sections ↗", |
| 492 |
target: "_blank", |
| 493 |
}, |
| 494 |
{ |
| 495 |
url: "https://youtu.be/TSRKEFNwE8M", |
| 496 |
title: |
| 497 |
"[YouTube] How to create a magazine layout using just one Query Loop ↗", |
| 498 |
target: "_blank", |
| 499 |
}, |
| 500 |
{ |
| 501 |
url: addQueryArgs( |
| 502 |
"edit.php?post_type=boldblocks_block&page=cbb-variation-library&s=query+loop", |
| 503 |
), |
| 504 |
title: "Prebuilt query loop variations from the variation library", |
| 505 |
target: "_blank", |
| 506 |
}, |
| 507 |
{ |
| 508 |
url: `https://www.youtube.com/playlist?list=PLPuEwc7dZklchm8nVUOKqSOc6OgmRQyha`, |
| 509 |
title: "[YouTube] View all playlist ↗", |
| 510 |
target: "_blank", |
| 511 |
}, |
| 512 |
], |
| 513 |
}, |
| 514 |
{ |
| 515 |
title: "Sticky content: fixed and sticky with state awareness", |
| 516 |
keyFeatures: |
| 517 |
"Always fixed to viewport, sticky on scroll down, or sticky on scroll up", |
| 518 |
worksWith: |
| 519 |
"All CBB blocks that have the sticky content support feature enabled and the core/template-part block.", |
| 520 |
builtWith: |
| 521 |
"Built with VanilaJS, this is designed as an extended block support feature", |
| 522 |
goodFor: |
| 523 |
"Sticky header, sticky footer, two or more columns with one fixed on a side", |
| 524 |
howToUse: ( |
| 525 |
<ul> |
| 526 |
<li> |
| 527 |
<h5>{`CBB blocks`}</h5> |
| 528 |
<ol> |
| 529 |
<li>{`Add a CBB block that has the sticky content feature enabled`}</li> |
| 530 |
<li>{`Turn on the sticky content feature from the inspector settings`}</li> |
| 531 |
<li>{`Customize the settings`}</li> |
| 532 |
</ol> |
| 533 |
</li> |
| 534 |
<li> |
| 535 |
<h5>{`Core template part block`}</h5> |
| 536 |
<ol> |
| 537 |
<li>{`Choose the core/template block`}</li> |
| 538 |
<li>{`Turn on the sticky content feature from the inspector settings`}</li> |
| 539 |
<li>{`Customize the settings`}</li> |
| 540 |
</ol> |
| 541 |
</li> |
| 542 |
</ul> |
| 543 |
), |
| 544 |
videoId: "KEryi1y1UZ4", |
| 545 |
videoDesc: "How to create a sticky header", |
| 546 |
}, |
| 547 |
{ |
| 548 |
title: |
| 549 |
"Reveal animation: Add stunning effects to blocks when they appear in the viewport", |
| 550 |
keyFeatures: "Easy to use, multiple effects in sequence", |
| 551 |
worksWith: |
| 552 |
"All CBB blocks that have the reveal animation support feature enabled. This feature can be combined with carousel and modal, off-canvas layouts.", |
| 553 |
builtWith: |
| 554 |
"Built with VanilaJS and CSS animations, this is designed as an extended block support feature", |
| 555 |
goodFor: |
| 556 |
"Add reveal animations to any CBB blocks when they appear in the viewport", |
| 557 |
howToUse: ( |
| 558 |
<ol> |
| 559 |
<li>{`Add a CBB block that has the reveal animations feature enabled`}</li> |
| 560 |
<li>{`Add effects from the inspector settings`}</li> |
| 561 |
<li>{`Customize effect settings`}</li> |
| 562 |
</ol> |
| 563 |
), |
| 564 |
}, |
| 565 |
]; |
| 566 |
|
| 567 |
const technicalFeatures = [ |
| 568 |
{ |
| 569 |
title: "CBB blocks", |
| 570 |
summary: ( |
| 571 |
<> |
| 572 |
<p>{`The main idea of CBB is to enable you to easily create custom container blocks from other blocks. These container blocks are similar to core layout blocks but offer additional benefits. `}</p> |
| 573 |
<details> |
| 574 |
<summary>{`Why CBB blocks?`}</summary> |
| 575 |
<ul> |
| 576 |
<li>{`They are as fast as core blocks, and have all core support features`}</li> |
| 577 |
<li>{`They have extended support features from CBB`}</li> |
| 578 |
<li>{`They are content blocks that have predefined content, format and style`}</li> |
| 579 |
<li>{`The layout and style can be synchronized across multiple locations, while allowing for different content in each instance.`}</li> |
| 580 |
<li>{`You can customize the style, add interactivity to them with external JS/CSS or custom JS/CSS`}</li> |
| 581 |
</ul> |
| 582 |
</details> |
| 583 |
<a |
| 584 |
href="https://contentblocksbuilder.com/documentation/custom-blocks/" |
| 585 |
target="_blank" |
| 586 |
> |
| 587 |
{"[contentblocksbuilder.com] Learn more about CBB blocks ↗"} |
| 588 |
</a> |
| 589 |
<h4>{`How to create CBB blocks`}</h4> |
| 590 |
<p> |
| 591 |
{`CBB blocks are stored as custom post types, making their creation as easy as creating a blog post. The most important part when creating a CBB block is setting up its block settings in the sidebar from the block edit screen. There are several methods to create CBB blocks. The fastest way is to navigate to the block list screen and copy an existing one. If you want more advanced prebuilt blocks, you can navigate to the CBB block library, find the one you need, and import it to your site. You can then copy or edit the existing one to fit your needs.`} |
| 592 |
</p> |
| 593 |
<h5>{`Helpful links:`}</h5> |
| 594 |
<ul> |
| 595 |
<li> |
| 596 |
<a |
| 597 |
href="https://contentblocksbuilder.com/documentation/custom-blocks/how-to-create-a-gutenberg-block-with-cbb/" |
| 598 |
target="_blank" |
| 599 |
> |
| 600 |
{`[contentblocksbuilder.com] How to create CBB blocks ↗`} |
| 601 |
</a> |
| 602 |
</li> |
| 603 |
<li> |
| 604 |
<a |
| 605 |
href={addQueryArgs( |
| 606 |
"edit.php?post_type=boldblocks_block&page=cbb-block-library", |
| 607 |
)} |
| 608 |
target="_blank" |
| 609 |
> |
| 610 |
{`Visit CBB block library`} |
| 611 |
</a> |
| 612 |
</li> |
| 613 |
</ul> |
| 614 |
</> |
| 615 |
), |
| 616 |
videoTutorials: [ |
| 617 |
{ |
| 618 |
videoId: "paSXmpHU9K4", |
| 619 |
videoCaption: `How to create a features posts section block`, |
| 620 |
}, |
| 621 |
{ |
| 622 |
videoId: "kHmaZ2-8v1Q", |
| 623 |
videoCaption: `How to create a mega menu block`, |
| 624 |
}, |
| 625 |
], |
| 626 |
tutorials: [ |
| 627 |
{ |
| 628 |
url: "https://www.youtube.com/watch?v=1tmIWXHv4gE&list=PLPuEwc7dZklcFBm-hwtNGJmuB-J8nV-fD&index=5", |
| 629 |
title: "[YouTube] View all playlist", |
| 630 |
}, |
| 631 |
], |
| 632 |
}, |
| 633 |
{ |
| 634 |
title: "CBB repeater blocks", |
| 635 |
summary: ( |
| 636 |
<> |
| 637 |
<p> |
| 638 |
{`One of the best features of CBB is that it allows you to create repeater blocks that display repeating content, similar to repeater fields in meta field frameworks. |
| 639 |
However, since they are just container blocks with built in layouts, they are much more flexible and easier to use.`} |
| 640 |
</p> |
| 641 |
<details> |
| 642 |
<summary>{`Supported layouts for CBB repeater blocks`}</summary> |
| 643 |
<ul> |
| 644 |
<li>{`Grid layout`}</li> |
| 645 |
<li>{`Carousel layout`}</li> |
| 646 |
<li>{`Accordion layout`}</li> |
| 647 |
<li>{`Vertical stack layout`}</li> |
| 648 |
</ul> |
| 649 |
</details> |
| 650 |
<a |
| 651 |
href="https://contentblocksbuilder.com/documentation/custom-blocks/#repeater-blocks" |
| 652 |
target="_blank" |
| 653 |
> |
| 654 |
{ |
| 655 |
"[contentblocksbuilder.com] Learn more about CBB repeater blocks ↗" |
| 656 |
} |
| 657 |
</a> |
| 658 |
<h4>{`How to create CBB repeater blocks`}</h4> |
| 659 |
<p> |
| 660 |
{`To turn a CBB block into a repeater block, simply toggle on the 'Create a repeater parent block for this block' setting and input the block details.`} |
| 661 |
</p> |
| 662 |
<h5>{`Helpful links:`}</h5> |
| 663 |
<ul> |
| 664 |
<li> |
| 665 |
<a |
| 666 |
href="https://contentblocksbuilder.com/documentation/custom-blocks/how-to-adjust-attributes-and-settings-for-cbb-blocks/#settings-for-parent-blocks" |
| 667 |
target="_blank" |
| 668 |
> |
| 669 |
{`[contentblocksbuilder.com] How to turn a CBB block to a repeater block ↗`} |
| 670 |
</a> |
| 671 |
</li> |
| 672 |
<li> |
| 673 |
<a |
| 674 |
href={addQueryArgs( |
| 675 |
"edit.php?post_type=boldblocks_block&page=cbb-block-library", |
| 676 |
)} |
| 677 |
target="_blank" |
| 678 |
> |
| 679 |
{`Visit CBB block library`} |
| 680 |
</a> |
| 681 |
</li> |
| 682 |
</ul> |
| 683 |
</> |
| 684 |
), |
| 685 |
videoTutorials: [ |
| 686 |
{ |
| 687 |
videoId: "QKIPH5pmEWw", |
| 688 |
videoCaption: `How to create a repeater grid block`, |
| 689 |
}, |
| 690 |
{ |
| 691 |
videoId: "EEk-kSa59VE", |
| 692 |
videoCaption: `How to create a banner slider`, |
| 693 |
}, |
| 694 |
], |
| 695 |
tutorials: [ |
| 696 |
{ |
| 697 |
url: "https://www.youtube.com/watch?v=1tmIWXHv4gE&list=PLPuEwc7dZklcFBm-hwtNGJmuB-J8nV-fD&index=5", |
| 698 |
title: "[YouTube] View all playlist", |
| 699 |
}, |
| 700 |
], |
| 701 |
}, |
| 702 |
{ |
| 703 |
title: "Block variations, and styles", |
| 704 |
summary: ( |
| 705 |
<> |
| 706 |
<p> |
| 707 |
{`Block variations and styles are really useful features. They help developers provide predefined options for their blocks, making it super easy for end users. However, it's not easy for non-developers to create them. CBB makes it super easy for everyone to create them directly in the Block Editor and apply them in their workflow. You don't need to set up and maintain source code for your block variations anymore.`} |
| 708 |
</p> |
| 709 |
</> |
| 710 |
), |
| 711 |
videoTutorials: [ |
| 712 |
{ |
| 713 |
videoId: "rAWeQ2XLQJc", |
| 714 |
videoCaption: `How to create a variation for the core button block`, |
| 715 |
}, |
| 716 |
{ |
| 717 |
videoId: "BAY8_evbyL0", |
| 718 |
videoCaption: `How to create a variation for the core image block`, |
| 719 |
}, |
| 720 |
], |
| 721 |
}, |
| 722 |
{ |
| 723 |
title: "A library of blocks, variations, and patterns", |
| 724 |
summary: ( |
| 725 |
<> |
| 726 |
<p> |
| 727 |
{`CBB provides a library of prebuilt blocks, variations, and patterns, all created directly in the Block Editor. You can easily import them into your site with one click. You can use, clone, or edit them to suit your needs.`} |
| 728 |
</p> |
| 729 |
<ul className="flex-list"> |
| 730 |
<li> |
| 731 |
<a |
| 732 |
href={addQueryArgs( |
| 733 |
"edit.php?post_type=boldblocks_block&page=cbb-block-library", |
| 734 |
)} |
| 735 |
target="_blank" |
| 736 |
> |
| 737 |
{`Visit CBB block library`} |
| 738 |
</a> |
| 739 |
</li> |
| 740 |
<li> |
| 741 |
<a |
| 742 |
href={addQueryArgs( |
| 743 |
"edit.php?post_type=boldblocks_block&page=cbb-variation-library", |
| 744 |
)} |
| 745 |
target="_blank" |
| 746 |
> |
| 747 |
{`Visit CBB variation library`} |
| 748 |
</a> |
| 749 |
</li> |
| 750 |
</ul> |
| 751 |
</> |
| 752 |
), |
| 753 |
videoTutorials: [ |
| 754 |
{ |
| 755 |
videoId: "TSRKEFNwE8M", |
| 756 |
videoCaption: `How to create a magazine layout using variations from the CBB variation library`, |
| 757 |
}, |
| 758 |
{ |
| 759 |
videoId: "U-e6wbFGiYg", |
| 760 |
videoCaption: `How to create a animated arrow button`, |
| 761 |
}, |
| 762 |
], |
| 763 |
}, |
| 764 |
{ |
| 765 |
title: "Extended block supports", |
| 766 |
summary: ( |
| 767 |
<> |
| 768 |
<p> |
| 769 |
{`Besides core support features, CBB adds a range of extended features to enhance the layout and style of CBB blocks. You can opt in or out of these features for your CBB blocks. You can also apply these extended features to other blocks by wrapping them with a CBB block.`} |
| 770 |
</p> |
| 771 |
<details> |
| 772 |
<summary>{`The full list of extended support features`}</summary> |
| 773 |
<ul> |
| 774 |
<li>Responsive width & height</li> |
| 775 |
<li>Responsive spacing: padding, margin, block spacing</li> |
| 776 |
<li>Responsive aspect ratio</li> |
| 777 |
<li>Responsive border & radius</li> |
| 778 |
<li>Background media</li> |
| 779 |
<li>Background overlay</li> |
| 780 |
<li>Responsive Text alignment</li> |
| 781 |
<li>Responsive Vertical alignment</li> |
| 782 |
<li>Responsive Justify alignment</li> |
| 783 |
<li>Box shadow</li> |
| 784 |
<li>Responsive Transform</li> |
| 785 |
<li>Visibility</li> |
| 786 |
<li>Toggle content</li> |
| 787 |
<li>Sticky content</li> |
| 788 |
<li>Custom attributes</li> |
| 789 |
<li>Reveal animation (PRO)</li> |
| 790 |
<li>Custom CSS (PRO)</li> |
| 791 |
<li>Copy/Paste styles (PRO)</li> |
| 792 |
</ul> |
| 793 |
</details> |
| 794 |
</> |
| 795 |
), |
| 796 |
}, |
| 797 |
]; |
| 798 |
|
| 799 |
const FeatureLine = ({ label, value }) => |
| 800 |
value ? ( |
| 801 |
<details className="feature-line"> |
| 802 |
<summary className="label">{label}</summary> |
| 803 |
<div className="value">{value}</div> |
| 804 |
</details> |
| 805 |
) : null; |
| 806 |
|
| 807 |
return ( |
| 808 |
<WidgetStyled |
| 809 |
isHeaderHidden={true} |
| 810 |
isFullRow={true} |
| 811 |
className="welcome-widget welcome" |
| 812 |
> |
| 813 |
<h1>{"Welcome to Content Blocks Builder (CBB)"}</h1> |
| 814 |
<div className="welcome__description"> |
| 815 |
<p className="leading"> |
| 816 |
{`Content Blocks Builder (CBB) adheres to Gutenberg and enhances it with practical and functional features. |
| 817 |
Whether you are a beginner with no coding experience or a professional, with CBB you can create complex layouts for real-world websites directly in the Block Editor without using a code editor. |
| 818 |
It works with any Gutenberg-ready themes.`} |
| 819 |
</p> |
| 820 |
<a |
| 821 |
href="https://contentblocksbuilder.com" |
| 822 |
target="_blank" |
| 823 |
>{`Visit contentblocksbuilder.com`}</a> |
| 824 |
<h2 className="section-title"> |
| 825 |
{`CBB provides many practical features while remaining fast, clean, and bloat-free.`} |
| 826 |
</h2> |
| 827 |
<p className="section-summary">{`With minimal effort, you can build most real-world features on your WordPress sites using CBB and core blocks, with any block theme, directly in the Block Editor.`}</p> |
| 828 |
<div className="grid"> |
| 829 |
{features.map( |
| 830 |
( |
| 831 |
{ |
| 832 |
title, |
| 833 |
summary, |
| 834 |
keyFeatures, |
| 835 |
worksWith, |
| 836 |
builtWith, |
| 837 |
goodFor, |
| 838 |
howToUse, |
| 839 |
videoId, |
| 840 |
videoDesc, |
| 841 |
tutorials, |
| 842 |
}, |
| 843 |
featureIndex, |
| 844 |
) => ( |
| 845 |
<div className="grid-item" key={`feature-${featureIndex}`}> |
| 846 |
<div className="feature"> |
| 847 |
<h3>{title}</h3> |
| 848 |
{summary ? <p>{summary}</p> : null} |
| 849 |
<FeatureLine label={`Key features`} value={keyFeatures} /> |
| 850 |
<FeatureLine label={`Works with`} value={worksWith} /> |
| 851 |
<FeatureLine label={`Good for`} value={goodFor} /> |
| 852 |
<FeatureLine label={`How it's built`} value={builtWith} /> |
| 853 |
<FeatureLine label={`How to use`} value={howToUse} /> |
| 854 |
</div> |
| 855 |
{!!videoId && ( |
| 856 |
<div className="video-tutorial"> |
| 857 |
<h4>{`Video tutorial`}</h4> |
| 858 |
<VideoFrame videoId={videoId} /> |
| 859 |
<div className="video-caption">{videoDesc}</div> |
| 860 |
</div> |
| 861 |
)} |
| 862 |
{!!tutorials?.length && ( |
| 863 |
<div className="more-resources"> |
| 864 |
<h4>{`More resources`}</h4> |
| 865 |
<ul> |
| 866 |
{tutorials.map(({ title, url, target }, index) => ( |
| 867 |
<li key={`tutorial-${featureIndex}-${index}`}> |
| 868 |
<a href={url} target={target}> |
| 869 |
{title} |
| 870 |
</a> |
| 871 |
</li> |
| 872 |
))} |
| 873 |
</ul> |
| 874 |
</div> |
| 875 |
)} |
| 876 |
</div> |
| 877 |
), |
| 878 |
)} |
| 879 |
</div> |
| 880 |
<h2 className="section-title">{`How does CBB provide a lot of features and still remain super fast and bloat-free?`}</h2> |
| 881 |
<p className="section-summary">{`Unlike other multi-feature plugins, CBB doesn’t come bundled with a ton of blocks for specific needs. Instead, it offers extended block support features and an easy way to create container blocks. You can add any feature to any CBB block, and to apply those features to core or third-party blocks, you only need to wrap them with a CBB block.`}</p> |
| 882 |
<div className="grid grid--large"> |
| 883 |
{technicalFeatures.map( |
| 884 |
( |
| 885 |
{ title, summary, videoTutorials = [], tutorials }, |
| 886 |
featureIndex, |
| 887 |
) => ( |
| 888 |
<div |
| 889 |
className="grid-item technical-feature" |
| 890 |
key={`feature-${featureIndex}`} |
| 891 |
> |
| 892 |
<div className="feature-details"> |
| 893 |
<h3>{title}</h3> |
| 894 |
<div className="feature-summary">{summary}</div> |
| 895 |
</div> |
| 896 |
<div className="feature-resource"> |
| 897 |
{!!videoTutorials?.length && ( |
| 898 |
<> |
| 899 |
<h4>{`Video tutorials`}</h4> |
| 900 |
<div className="video-tutorials"> |
| 901 |
{videoTutorials.map(({ videoId, videoCaption }) => ( |
| 902 |
<div className="video-item"> |
| 903 |
<VideoFrame videoId={videoId} /> |
| 904 |
<div className="video-caption">{videoCaption}</div> |
| 905 |
</div> |
| 906 |
))} |
| 907 |
</div> |
| 908 |
</> |
| 909 |
)} |
| 910 |
{!!tutorials?.length && ( |
| 911 |
<> |
| 912 |
<h4>{`More resources`}</h4> |
| 913 |
<ul> |
| 914 |
{tutorials.map(({ title, url }, index) => ( |
| 915 |
<li key={`tutorial-${featureIndex}-${index}`}> |
| 916 |
<a href={url} target="_blank"> |
| 917 |
{title} |
| 918 |
</a> |
| 919 |
</li> |
| 920 |
))} |
| 921 |
</ul> |
| 922 |
</> |
| 923 |
)} |
| 924 |
</div> |
| 925 |
</div> |
| 926 |
), |
| 927 |
)} |
| 928 |
</div> |
| 929 |
<p className="leading"> |
| 930 |
{`Thank you for choosing Content Blocks Builder (CBB) for your website. CBB sticks to Gutenberg and maintain the primary user experience of it, so if you are already familiar with the Block Editor, you will find it easy to use. If you need any help, contact us through the `} |
| 931 |
<a |
| 932 |
target="_blank" |
| 933 |
href={addQueryArgs( |
| 934 |
"edit.php?post_type=boldblocks_block&page=content-blocks-builder-contact", |
| 935 |
)} |
| 936 |
> |
| 937 |
contact page |
| 938 |
</a> |
| 939 |
{`, visit the `} |
| 940 |
<a |
| 941 |
target="_blank" |
| 942 |
href="https://wordpress.org/support/plugin/content-blocks-builder" |
| 943 |
> |
| 944 |
support forum ↗ |
| 945 |
</a>{" "} |
| 946 |
or email us at{" "} |
| 947 |
<a href="mailto://hello@contentblocksbuilder.com?subject=Hello+CBB"> |
| 948 |
hello@contentblocksbuilder.com |
| 949 |
</a> |
| 950 |
.{` We’re sure to get back to you promptly.`} |
| 951 |
</p> |
| 952 |
</div> |
| 953 |
</WidgetStyled> |
| 954 |
); |
| 955 |
}; |
| 956 |
|
| 957 |
const GettingStarted = () => { |
| 958 |
return ( |
| 959 |
<Section> |
| 960 |
<WelcomeWidget /> |
| 961 |
</Section> |
| 962 |
); |
| 963 |
}; |
| 964 |
|
| 965 |
export default GettingStarted; |
| 966 |
|
