Skip to content

Commit ac405ae

Browse files
ilicfilipilicfilip
committed
re-order blocks & add new one
1 parent 28bef27 commit ac405ae

File tree

3 files changed

+343
-6
lines changed

3 files changed

+343
-6
lines changed

‎guided-tour/class-guided-tour.php‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,13 +205,34 @@ private function register_tours(): void {
205205
'fallback_description' => __( 'We couldn\'t find any images on this page yet. Consider adding some authentic photos to make your homepage more engaging! You can add an image block using the + button in the editor.', 'progress-planner' ),
206206
'side' => 'right',
207207
],
208-
// Step 4: Save the changes.
208+
// Step 4: Reorder blocks.
209+
[
210+
'context' => 'editor',
211+
'page' => 'front_page',
212+
'element' => 'list-view-button',
213+
'title' => __( 'Reorder your blocks', 'progress-planner' ),
214+
'description' => __( 'The page consists of a number of blocks. You can change the order of these blocks. Are your blocks in the order you want them to be? Try reordering them!', 'progress-planner' ),
215+
'hint' => __( 'Click here to open the List View where you can drag and drop blocks to reorder them.', 'progress-planner' ),
216+
'side' => 'bottom',
217+
],
218+
// Step 5: Add or remove blocks.
219+
[
220+
'context' => 'editor',
221+
'page' => 'front_page',
222+
'element' => 'block-inserter',
223+
'title' => __( 'Add or remove blocks', 'progress-planner' ),
224+
'description' => __( 'Perhaps you want to delete some of the blocks. Or add some! Check whether you need all the blocks that are now on your homepage.', 'progress-planner' ),
225+
'hint' => __( 'Click the + button to add new blocks, or select a block and press Delete to remove it.', 'progress-planner' ),
226+
'side' => 'bottom',
227+
],
228+
// Step 6: Save the changes.
209229
[
210230
'context' => 'editor',
211231
'page' => 'front_page',
212232
'element' => 'save-button',
213233
'title' => __( 'Save your changes', 'progress-planner' ),
214234
'description' => __( 'Great job! Now click the Save button to publish your changes and make them live on your website.', 'progress-planner' ),
235+
'hint' => __( 'Your changes won\'t be visible to visitors until you save them.', 'progress-planner' ),
215236
'side' => 'bottom',
216237
],
217238
],

‎guided-tour/guided-tour.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,14 +310,30 @@ body.pp-guided-tour-active #wpadminbar {
310310
========================================================================== */
311311

312312
.pp-guided-tour-editor-popover .pp-guided-tour-hint {
313+
display: block;
314+
width: 100%;
313315
font-size: 12px;
314316
line-height: 1.5;
315317
color: #757575;
316318
margin: 12px 0 0 0;
317319
padding: 10px 12px;
318320
background: #f6f7f7;
319321
border-radius: 4px;
322+
border: none;
320323
border-left: 3px solid #667eea;
324+
text-align: left;
325+
}
326+
327+
/* Clickable hint styling */
328+
.pp-guided-tour-hint-clickable {
329+
cursor: pointer;
330+
transition: all 0.2s ease;
331+
}
332+
333+
.pp-guided-tour-hint-clickable:hover {
334+
background: #e8f0fe;
335+
color: #2271b1;
336+
border-left-color: #2271b1;
321337
}
322338

323339
/* Fallback popover for when elements aren't found */
@@ -353,13 +369,17 @@ body.pp-guided-tour-active #wpadminbar {
353369
}
354370

355371
.pp-guided-tour-fallback-content .pp-guided-tour-hint {
372+
display: block;
373+
width: 100%;
356374
font-size: 12px;
357375
color: #757575;
358376
padding: 10px 12px;
359377
background: #f6f7f7;
360378
border-radius: 4px;
379+
border: none;
361380
border-left: 3px solid #667eea;
362381
margin-bottom: 16px;
382+
text-align: left;
363383
}
364384

365385
.pp-guided-tour-fallback-actions {
@@ -398,6 +418,123 @@ body.pp-guided-tour-active #wpadminbar {
398418
color: #1e1e1e;
399419
}
400420

421+
/* ==========================================================================
422+
Fixed Popover (for toolbar buttons - no overlay)
423+
========================================================================== */
424+
425+
.pp-guided-tour-fixed-popover {
426+
position: fixed;
427+
bottom: 32px;
428+
right: 32px;
429+
z-index: 100001;
430+
animation: pp-slide-in 0.3s ease-out;
431+
}
432+
433+
.pp-guided-tour-fixed-popover-content {
434+
position: relative;
435+
background: #fff;
436+
border-radius: 8px;
437+
box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.15 );
438+
border: 1px solid #e0e0e0;
439+
padding: 20px;
440+
max-width: 360px;
441+
min-width: 300px;
442+
}
443+
444+
.pp-guided-tour-fixed-popover-close {
445+
position: absolute;
446+
top: 8px;
447+
right: 8px;
448+
width: 28px;
449+
height: 28px;
450+
padding: 0;
451+
display: flex;
452+
align-items: center;
453+
justify-content: center;
454+
background: transparent;
455+
border: none;
456+
border-radius: 4px;
457+
color: #757575;
458+
font-size: 20px;
459+
line-height: 1;
460+
cursor: pointer;
461+
transition: all 0.2s ease;
462+
}
463+
464+
.pp-guided-tour-fixed-popover-close:hover {
465+
background: #f0f0f1;
466+
color: #1e1e1e;
467+
}
468+
469+
.pp-guided-tour-fixed-popover-title {
470+
font-size: 16px;
471+
font-weight: 600;
472+
color: #1e1e1e;
473+
margin: 0 0 8px 0;
474+
padding-right: 24px;
475+
}
476+
477+
.pp-guided-tour-fixed-popover-description {
478+
font-size: 14px;
479+
line-height: 1.6;
480+
color: #50575e;
481+
margin: 0 0 12px 0;
482+
}
483+
484+
.pp-guided-tour-fixed-popover .pp-guided-tour-hint {
485+
display: block;
486+
width: 100%;
487+
font-size: 12px;
488+
line-height: 1.5;
489+
color: #757575;
490+
margin: 0 0 16px 0;
491+
padding: 10px 12px;
492+
background: #f6f7f7;
493+
border-radius: 4px;
494+
border: none;
495+
border-left: 3px solid #667eea;
496+
text-align: left;
497+
}
498+
499+
.pp-guided-tour-fixed-popover-footer {
500+
display: flex;
501+
align-items: center;
502+
justify-content: space-between;
503+
padding-top: 12px;
504+
border-top: 1px solid #f0f0f0;
505+
}
506+
507+
.pp-guided-tour-fixed-popover-skip {
508+
padding: 8px 12px;
509+
font-size: 13px;
510+
font-weight: 500;
511+
color: #757575;
512+
background: transparent;
513+
border: none;
514+
cursor: pointer;
515+
transition: color 0.2s ease;
516+
}
517+
518+
.pp-guided-tour-fixed-popover-skip:hover {
519+
color: #1e1e1e;
520+
}
521+
522+
.pp-guided-tour-fixed-popover-next {
523+
padding: 10px 20px;
524+
font-size: 14px;
525+
font-weight: 500;
526+
color: #fff;
527+
background: #2271b1;
528+
border: none;
529+
border-radius: 4px;
530+
cursor: pointer;
531+
transition: background 0.2s ease;
532+
}
533+
534+
.pp-guided-tour-fixed-popover-next:hover {
535+
background: #135e96;
536+
}
537+
401538
/* ==========================================================================
402539
Custom Editor Popover (for iframe editors)
403540
========================================================================== */
@@ -460,14 +597,18 @@ body.pp-guided-tour-active #wpadminbar {
460597
}
461598

462599
.pp-guided-tour-custom-popover .pp-guided-tour-hint {
600+
display: block;
601+
width: 100%;
463602
font-size: 12px;
464603
line-height: 1.5;
465604
color: #757575;
466605
margin: 0 0 16px 0;
467606
padding: 10px 12px;
468607
background: #f6f7f7;
469608
border-radius: 4px;
609+
border: none;
470610
border-left: 3px solid #667eea;
611+
text-align: left;
471612
}
472613

473614
.pp-guided-tour-custom-popover-footer {

0 commit comments

Comments
 (0)