| @@ -3,14 +3,18 @@ | ||
| 3 | 3 | * Dashboard (overview) screen. |
| 4 | 4 | * |
| 5 | 5 | * @package GutSliderBlocks |
| 6 | 6 | * |
| 7 | - * @var GutSlider_Admin $admin Admin controller. | |
| 8 | - * @var array $blocks Decorated block definitions. | |
| 9 | - * @var int $total Total block count. | |
| 10 | - * @var int $enabled Enabled block count. | |
| 11 | - * @var string $current Current page slug. | |
| 12 | - * @var bool $has_pro Whether the Pro plugin is active. | |
| 7 | + * @var GutSlider_Admin $admin Admin controller. | |
| 8 | + * @var array $blocks Decorated block definitions. | |
| 9 | + * @var int $total Total block count. | |
| 10 | + * @var int $enabled Enabled block count. | |
| 11 | + * @var string $current Current page slug. | |
| 12 | + * @var bool $has_pro Whether the Pro plugin is active. | |
| 13 | + * @var array<string,mixed> $settings General settings. | |
| 14 | + * @var array $usage Cached content usage figures. | |
| 15 | + * @var array $css_stats Generated stylesheet figures. | |
| 16 | + * @var array $changelog Release notes for this version. | |
| 13 | 17 | */ |
| 14 | 18 | |
| 15 | 19 | if ( ! defined( 'ABSPATH' ) ) { |
| 16 | 20 | exit; |
| @@ -26,261 +30,480 @@ | ||
| 26 | 30 | ++$gs_free_total; |
| 27 | 31 | } |
| 28 | 32 | } |
| 29 | 33 | |
| 34 | +$gs_disabled = max( 0, (int) $total - (int) $enabled ); | |
| 35 | +$gs_license = GutSlider_Admin::get_license(); | |
| 36 | +$gs_notice = GutSlider_Admin::get_dashboard_notice(); | |
| 37 | +$gs_blocks_url = admin_url( 'admin.php?page=gutslider-blocks-settings' ); | |
| 38 | +$gs_settings_url = admin_url( 'admin.php?page=gutslider-settings' ); | |
| 39 | + | |
| 40 | +/* | |
| 41 | + * Front-end weight is reported as the average size of one generated | |
| 42 | + * stylesheet, which is what a single page actually downloads. | |
| 43 | + */ | |
| 44 | +$gs_inline = isset( $settings['css_delivery'] ) && 'inline' === $settings['css_delivery']; | |
| 45 | +$gs_weight_kb = $css_stats['average'] > 0 ? max( 1, (int) round( $css_stats['average'] / 1024 ) ) : 0; | |
| 46 | +$gs_fonts_on = ! empty( $settings['google_fonts'] ); | |
| 47 | + | |
| 48 | +$gs_steps = array( | |
| 49 | + array( | |
| 50 | + 'n' => '01', | |
| 51 | + 'title' => __( 'Pick your blocks', 'slider-blocks' ), | |
| 52 | + 'text' => __( 'Disable anything you will not use so the editor stays fast.', 'slider-blocks' ), | |
| 53 | + 'link' => $gs_blocks_url, | |
| 54 | + 'label' => __( 'Open blocks', 'slider-blocks' ), | |
| 55 | + 'done' => GutSlider_Admin::onboarding_done( 'blocks' ), | |
| 56 | + ), | |
| 57 | + array( | |
| 58 | + 'n' => '02', | |
| 59 | + 'title' => __( 'Insert & style', 'slider-blocks' ), | |
| 60 | + 'text' => __( 'Search "GutSlider" in the inserter, then style it in the sidebar.', 'slider-blocks' ), | |
| 61 | + 'link' => 'https://gutslider.com/docs', | |
| 62 | + 'label' => __( 'Read the docs', 'slider-blocks' ), | |
| 63 | + 'ext' => true, | |
| 64 | + 'done' => $usage['sliders'] > 0, | |
| 65 | + ), | |
| 66 | + array( | |
| 67 | + 'n' => '03', | |
| 68 | + 'title' => __( 'Tune performance', 'slider-blocks' ), | |
| 69 | + 'text' => __( 'Choose how CSS is delivered and whether fonts load on the front end.', 'slider-blocks' ), | |
| 70 | + 'link' => $gs_settings_url, | |
| 71 | + 'label' => __( 'Open settings', 'slider-blocks' ), | |
| 72 | + 'done' => GutSlider_Admin::onboarding_done( 'settings' ), | |
| 73 | + ), | |
| 74 | +); | |
| 75 | + | |
| 76 | +$gs_steps_done = 0; | |
| 77 | + | |
| 78 | +foreach ( $gs_steps as $gs_step ) { | |
| 79 | + if ( ! empty( $gs_step['done'] ) ) { | |
| 80 | + ++$gs_steps_done; | |
| 81 | + } | |
| 82 | +} | |
| 83 | + | |
| 30 | 84 | require GUTSLIDER_DIR . '/admin/views/header.php'; |
| 31 | 85 | ?> |
| 32 | 86 | |
| 33 | -<section class="gs-hero"> | |
| 34 | - <div class="gs-shell"> | |
| 35 | - <div class="gs-hero__grid"> | |
| 36 | - <div class="gs-hero__copy"> | |
| 37 | - <span class="gs-eyebrow"><?php esc_html_e( 'GutSlider Blocks', 'slider-blocks' ); ?></span> | |
| 38 | - <h1 class="gs-hero__title"><?php esc_html_e( 'Sliders that feel effortless.', 'slider-blocks' ); ?></h1> | |
| 39 | - <p class="gs-hero__lead"> | |
| 40 | - <?php esc_html_e( 'Every slider, carousel and marquee you need — built natively for the block editor. Turn on what you use, switch off the rest, keep your site light.', 'slider-blocks' ); ?> | |
| 41 | - </p> | |
| 42 | - <div class="gs-hero__actions"> | |
| 43 | - <a class="gs-btn gs-btn--primary" href="<?php echo esc_url( admin_url( 'admin.php?page=gutslider-blocks-settings' ) ); ?>"> | |
| 44 | - <?php esc_html_e( 'Manage blocks', 'slider-blocks' ); ?> | |
| 45 | - <svg class="gs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6" /></svg> | |
| 46 | - </a> | |
| 47 | - <a class="gs-btn gs-btn--quiet" href="<?php echo esc_url( admin_url( 'post-new.php?post_type=page' ) ); ?>"> | |
| 48 | - <?php esc_html_e( 'Create a page', 'slider-blocks' ); ?> | |
| 49 | - </a> | |
| 87 | +<div class="gs-shell gs-page" data-gs-blocks> | |
| 88 | + | |
| 89 | + <?php if ( $gs_notice ) : ?> | |
| 90 | + <div class="gs-banner gs-banner--<?php echo esc_attr( $gs_notice['tone'] ); ?>"> | |
| 91 | + <span class="gs-banner__icon" aria-hidden="true"> | |
| 92 | + <?php GutSlider_Admin::icon( 'error' === $gs_notice['tone'] ? 'alert-triangle' : 'key' ); ?> | |
| 93 | + </span> | |
| 94 | + <div class="gs-banner__text"> | |
| 95 | + <span class="gs-banner__title"><?php echo esc_html( $gs_notice['title'] ); ?></span> | |
| 96 | + <?php if ( '' !== $gs_notice['text'] ) : ?> | |
| 97 | + <p class="gs-banner__sub"><?php echo esc_html( $gs_notice['text'] ); ?></p> | |
| 98 | + <?php endif; ?> | |
| 99 | + </div> | |
| 100 | + <?php if ( '' !== $gs_notice['action_label'] && '' !== $gs_notice['action_url'] ) : ?> | |
| 101 | + <a class="gs-btn gs-btn--primary" href="<?php echo esc_url( $gs_notice['action_url'] ); ?>"> | |
| 102 | + <?php echo esc_html( $gs_notice['action_label'] ); ?> | |
| 103 | + </a> | |
| 104 | + <?php endif; ?> | |
| 105 | + </div> | |
| 106 | + <?php endif; ?> | |
| 107 | + | |
| 108 | + <div class="gs-page-head"> | |
| 109 | + <div> | |
| 110 | + <h1 class="gs-page-title"><?php esc_html_e( 'Dashboard', 'slider-blocks' ); ?></h1> | |
| 111 | + <p class="gs-page-sub"> | |
| 112 | + <?php esc_html_e( 'Every slider, carousel and marquee you need — built natively for the block editor.', 'slider-blocks' ); ?> | |
| 113 | + </p> | |
| 114 | + </div> | |
| 115 | + <div class="gs-page-head__actions"> | |
| 116 | + <?php if ( $gs_license ) : ?> | |
| 117 | + <span class="gs-pill gs-pill--<?php echo esc_attr( $gs_license['state'] ); ?>"> | |
| 118 | + <span class="gs-pill__dot" aria-hidden="true"></span> | |
| 119 | + <?php echo esc_html( $gs_license['label'] ); ?> | |
| 120 | + </span> | |
| 121 | + <?php endif; ?> | |
| 122 | + <a class="gs-btn gs-btn--quiet" href="<?php echo esc_url( $gs_blocks_url ); ?>"> | |
| 123 | + <?php GutSlider_Admin::icon( 'sliders-horizontal' ); ?> | |
| 124 | + <?php esc_html_e( 'Manage blocks', 'slider-blocks' ); ?> | |
| 125 | + </a> | |
| 126 | + </div> | |
| 127 | + </div> | |
| 128 | + | |
| 129 | + <div class="gs-metrics"> | |
| 130 | + <div class="gs-metric"> | |
| 131 | + <div class="gs-metric__head"> | |
| 132 | + <span class="gs-metric__label"><?php esc_html_e( 'Blocks active', 'slider-blocks' ); ?></span> | |
| 133 | + <span class="gs-metric__icon"><?php GutSlider_Admin::icon( 'layout-grid' ); ?></span> | |
| 134 | + </div> | |
| 135 | + <p class="gs-metric__value"> | |
| 136 | + <span data-gs-metric-enabled><?php echo esc_html( (string) $enabled ); ?></span> | |
| 137 | + <span class="gs-metric__unit"><?php echo esc_html( '/ ' . $total ); ?></span> | |
| 138 | + </p> | |
| 139 | + <p class="gs-metric__foot" data-gs-metric-note> | |
| 140 | + <?php | |
| 141 | + if ( $gs_disabled > 0 ) { | |
| 142 | + printf( | |
| 143 | + /* translators: %d: number of disabled blocks. */ | |
| 144 | + esc_html__( '%d turned off', 'slider-blocks' ), | |
| 145 | + (int) $gs_disabled | |
| 146 | + ); | |
| 147 | + } else { | |
| 148 | + esc_html_e( 'All blocks enabled', 'slider-blocks' ); | |
| 149 | + } | |
| 150 | + ?> | |
| 151 | + </p> | |
| 152 | + </div> | |
| 153 | + | |
| 154 | + <div class="gs-metric"> | |
| 155 | + <div class="gs-metric__head"> | |
| 156 | + <span class="gs-metric__label"><?php esc_html_e( 'Sliders in use', 'slider-blocks' ); ?></span> | |
| 157 | + <span class="gs-metric__icon"><?php GutSlider_Admin::icon( 'layers' ); ?></span> | |
| 158 | + </div> | |
| 159 | + <p class="gs-metric__value"><?php echo esc_html( number_format_i18n( $usage['sliders'] ) ); ?></p> | |
| 160 | + <p class="gs-metric__foot"> | |
| 161 | + <?php | |
| 162 | + if ( $usage['sliders'] > 0 ) { | |
| 163 | + printf( | |
| 164 | + /* translators: %s: number of posts. */ | |
| 165 | + esc_html__( 'Across %s pages and posts', 'slider-blocks' ), | |
| 166 | + esc_html( number_format_i18n( $usage['posts'] ) . ( $usage['capped'] ? '+' : '' ) ) | |
| 167 | + ); | |
| 168 | + } else { | |
| 169 | + esc_html_e( 'None added to content yet', 'slider-blocks' ); | |
| 170 | + } | |
| 171 | + ?> | |
| 172 | + </p> | |
| 173 | + </div> | |
| 174 | + | |
| 175 | + <div class="gs-metric"> | |
| 176 | + <div class="gs-metric__head"> | |
| 177 | + <span class="gs-metric__label"><?php esc_html_e( 'Front-end weight', 'slider-blocks' ); ?></span> | |
| 178 | + <span class="gs-metric__icon"><?php GutSlider_Admin::icon( 'gauge' ); ?></span> | |
| 179 | + </div> | |
| 180 | + <p class="gs-metric__value"> | |
| 181 | + <?php if ( $gs_weight_kb > 0 ) : ?> | |
| 182 | + <?php echo esc_html( number_format_i18n( $gs_weight_kb ) ); ?> | |
| 183 | + <span class="gs-metric__unit"><?php esc_html_e( 'KB', 'slider-blocks' ); ?></span> | |
| 184 | + <?php else : ?> | |
| 185 | + — | |
| 186 | + <?php endif; ?> | |
| 187 | + </p> | |
| 188 | + <p class="gs-metric__foot"> | |
| 189 | + <?php | |
| 190 | + if ( $gs_inline ) { | |
| 191 | + esc_html_e( 'Inline delivery — nothing cached', 'slider-blocks' ); | |
| 192 | + } elseif ( $css_stats['files'] > 0 ) { | |
| 193 | + printf( | |
| 194 | + /* translators: %s: number of generated stylesheets. */ | |
| 195 | + esc_html__( 'Average of %s cached stylesheets', 'slider-blocks' ), | |
| 196 | + esc_html( number_format_i18n( $css_stats['files'] ) ) | |
| 197 | + ); | |
| 198 | + } else { | |
| 199 | + esc_html_e( 'No pages rendered yet', 'slider-blocks' ); | |
| 200 | + } | |
| 201 | + ?> | |
| 202 | + </p> | |
| 203 | + </div> | |
| 204 | + | |
| 205 | + <div class="gs-metric"> | |
| 206 | + <div class="gs-metric__head"> | |
| 207 | + <span class="gs-metric__label"><?php esc_html_e( 'Google Fonts', 'slider-blocks' ); ?></span> | |
| 208 | + <span class="gs-metric__icon"><?php GutSlider_Admin::icon( 'type' ); ?></span> | |
| 209 | + </div> | |
| 210 | + <p class="gs-metric__value"> | |
| 211 | + <?php echo $gs_fonts_on ? esc_html__( 'On', 'slider-blocks' ) : esc_html__( 'Off', 'slider-blocks' ); ?> | |
| 212 | + </p> | |
| 213 | + <p class="gs-metric__foot"> | |
| 214 | + <?php | |
| 215 | + echo $gs_fonts_on | |
| 216 | + ? esc_html__( 'Served from Google on the front end', 'slider-blocks' ) | |
| 217 | + : esc_html__( 'Not loaded on the front end', 'slider-blocks' ); | |
| 218 | + ?> | |
| 219 | + </p> | |
| 220 | + </div> | |
| 221 | + </div> | |
| 222 | + | |
| 223 | + <div class="gs-cols"> | |
| 224 | + <div class="gs-col"> | |
| 225 | + | |
| 226 | + <section class="gs-card gs-card--flush"> | |
| 227 | + <header class="gs-card__head"> | |
| 228 | + <div> | |
| 229 | + <h2 class="gs-card__heading"><?php esc_html_e( 'Your blocks', 'slider-blocks' ); ?></h2> | |
| 230 | + <p class="gs-card__sub"><?php esc_html_e( 'Turn off what you don’t use to keep the editor light.', 'slider-blocks' ); ?></p> | |
| 231 | + </div> | |
| 232 | + <div class="gs-search gs-search--sm"> | |
| 233 | + <?php GutSlider_Admin::icon( 'search' ); ?> | |
| 234 | + <input | |
| 235 | + type="search" | |
| 236 | + class="gs-search__input" | |
| 237 | + data-gs-search | |
| 238 | + placeholder="<?php esc_attr_e( 'Search blocks', 'slider-blocks' ); ?>" | |
| 239 | + aria-label="<?php esc_attr_e( 'Search blocks', 'slider-blocks' ); ?>" | |
| 240 | + autocomplete="off" | |
| 241 | + /> | |
| 242 | + </div> | |
| 243 | + </header> | |
| 244 | + | |
| 245 | + <div class="gs-rows" data-gs-grid> | |
| 246 | + <?php foreach ( $blocks as $gs_block ) : ?> | |
| 247 | + <?php | |
| 248 | + $gs_is_pro = ! empty( $gs_block['is_pro'] ); | |
| 249 | + $gs_locked = ! empty( $gs_block['locked'] ); | |
| 250 | + $gs_on = ! empty( $gs_block['enabled'] ); | |
| 251 | + $gs_toggle = 'gs-row-' . sanitize_html_class( $gs_block['name'] ); | |
| 252 | + $gs_classes = 'gs-row'; | |
| 253 | + $gs_classes .= $gs_locked ? ' is-locked' : ''; | |
| 254 | + $gs_classes .= $gs_on ? ' is-on' : ' is-off'; | |
| 255 | + ?> | |
| 256 | + <div | |
| 257 | + class="<?php echo esc_attr( $gs_classes ); ?>" | |
| 258 | + data-gs-block="<?php echo esc_attr( $gs_block['name'] ); ?>" | |
| 259 | + data-gs-tier="<?php echo $gs_is_pro ? 'pro' : 'free'; ?>" | |
| 260 | + data-gs-locked="<?php echo $gs_locked ? '1' : '0'; ?>" | |
| 261 | + data-gs-initial="<?php echo $gs_on ? '1' : '0'; ?>" | |
| 262 | + data-gs-name="<?php echo esc_attr( strtolower( $gs_block['title'] . ' ' . $gs_block['description'] ) ); ?>" | |
| 263 | + > | |
| 264 | + <span class="gs-row__icon"> | |
| 265 | + <?php GutSlider_Admin::icon( GutSlider_Admin::block_icon( $gs_block['name'] ) ); ?> | |
| 266 | + </span> | |
| 267 | + | |
| 268 | + <div class="gs-row__text"> | |
| 269 | + <span class="gs-row__name"><?php echo esc_html( $gs_block['title'] ); ?></span> | |
| 270 | + <span class="gs-row__desc"><?php echo esc_html( $gs_block['description'] ); ?></span> | |
| 271 | + </div> | |
| 272 | + | |
| 273 | + <span class="gs-tag<?php echo $gs_is_pro ? ' gs-tag--pro' : ''; ?>"> | |
| 274 | + <?php echo $gs_is_pro ? esc_html__( 'Pro', 'slider-blocks' ) : esc_html__( 'Free', 'slider-blocks' ); ?> | |
| 275 | + </span> | |
| 276 | + | |
| 277 | + <?php if ( $gs_locked ) : ?> | |
| 278 | + <a class="gs-lock" href="https://gutslider.com/pricing" target="_blank" rel="noopener noreferrer"> | |
| 279 | + <?php GutSlider_Admin::icon( 'lock' ); ?> | |
| 280 | + <span class="screen-reader-text"> | |
| 281 | + <?php | |
| 282 | + printf( | |
| 283 | + /* translators: %s: block title. */ | |
| 284 | + esc_html__( 'Unlock the %s block', 'slider-blocks' ), | |
| 285 | + esc_html( $gs_block['title'] ) | |
| 286 | + ); | |
| 287 | + ?> | |
| 288 | + </span> | |
| 289 | + </a> | |
| 290 | + <?php else : ?> | |
| 291 | + <label class="gs-switch" for="<?php echo esc_attr( $gs_toggle ); ?>"> | |
| 292 | + <span class="screen-reader-text"> | |
| 293 | + <?php | |
| 294 | + printf( | |
| 295 | + /* translators: %s: block title. */ | |
| 296 | + esc_html__( 'Enable the %s block', 'slider-blocks' ), | |
| 297 | + esc_html( $gs_block['title'] ) | |
| 298 | + ); | |
| 299 | + ?> | |
| 300 | + </span> | |
| 301 | + <input | |
| 302 | + type="checkbox" | |
| 303 | + id="<?php echo esc_attr( $gs_toggle ); ?>" | |
| 304 | + class="gs-switch__input" | |
| 305 | + data-gs-toggle="<?php echo esc_attr( $gs_block['name'] ); ?>" | |
| 306 | + <?php checked( $gs_on ); ?> | |
| 307 | + /> | |
| 308 | + <span class="gs-switch__track" aria-hidden="true"><span class="gs-switch__thumb"></span></span> | |
| 309 | + </label> | |
| 310 | + <?php endif; ?> | |
| 311 | + </div> | |
| 312 | + <?php endforeach; ?> | |
| 50 | 313 | </div> |
| 51 | - </div> | |
| 52 | 314 | |
| 53 | - <div class="gs-hero__stats"> | |
| 54 | - <div class="gs-stat"> | |
| 55 | - <span class="gs-stat__value" data-gs-count="<?php echo esc_attr( (string) $enabled ); ?>"><?php echo esc_html( (string) $enabled ); ?></span> | |
| 56 | - <span class="gs-stat__label"><?php esc_html_e( 'Blocks active', 'slider-blocks' ); ?></span> | |
| 57 | - <span class="gs-stat__meta"> | |
| 315 | + <div class="gs-empty gs-empty--sm" data-gs-empty hidden> | |
| 316 | + <?php GutSlider_Admin::icon( 'search' ); ?> | |
| 317 | + <p><?php esc_html_e( 'No blocks match your search.', 'slider-blocks' ); ?></p> | |
| 318 | + </div> | |
| 319 | + | |
| 320 | + <footer class="gs-card__foot"> | |
| 321 | + <span class="gs-card__summary" data-gs-summary> | |
| 58 | 322 | <?php |
| 59 | 323 | printf( |
| 60 | - /* translators: %d: total number of blocks. */ | |
| 61 | - esc_html__( 'of %d available', 'slider-blocks' ), | |
| 324 | + /* translators: 1: free block count, 2: pro block count, 3: enabled count, 4: total count. */ | |
| 325 | + esc_html__( '%1$d free blocks · %2$d pro blocks · %3$d of %4$d enabled', 'slider-blocks' ), | |
| 326 | + (int) $gs_free_total, | |
| 327 | + (int) $gs_pro_total, | |
| 328 | + (int) $enabled, | |
| 62 | 329 | (int) $total |
| 63 | 330 | ); |
| 64 | 331 | ?> |
| 65 | 332 | </span> |
| 66 | - <div class="gs-meter" role="img" aria-label="<?php echo esc_attr( sprintf( /* translators: 1: enabled count, 2: total count. */ __( '%1$d of %2$d blocks enabled', 'slider-blocks' ), (int) $enabled, (int) $total ) ); ?>"> | |
| 67 | - <span class="gs-meter__fill" style="--gs-meter:<?php echo esc_attr( (string) ( $total > 0 ? round( ( $enabled / $total ) * 100 ) : 0 ) ); ?>%"></span> | |
| 68 | - </div> | |
| 69 | - </div> | |
| 333 | + <a class="gs-link" href="<?php echo esc_url( $gs_blocks_url ); ?>"> | |
| 334 | + <?php esc_html_e( 'View all blocks', 'slider-blocks' ); ?> | |
| 335 | + <?php GutSlider_Admin::icon( 'arrow-right' ); ?> | |
| 336 | + </a> | |
| 337 | + </footer> | |
| 338 | + </section> | |
| 70 | 339 | |
| 71 | - <div class="gs-stat gs-stat--split"> | |
| 340 | + <section class="gs-card gs-card--pad"> | |
| 341 | + <header class="gs-card__head gs-card__head--plain"> | |
| 72 | 342 | <div> |
| 73 | - <span class="gs-stat__value"><?php echo esc_html( (string) $gs_free_total ); ?></span> | |
| 74 | - <span class="gs-stat__label"><?php esc_html_e( 'Free blocks', 'slider-blocks' ); ?></span> | |
| 343 | + <h2 class="gs-card__heading"><?php esc_html_e( 'Get started', 'slider-blocks' ); ?></h2> | |
| 344 | + <p class="gs-card__sub"><?php esc_html_e( 'Three minutes from install to your first slider.', 'slider-blocks' ); ?></p> | |
| 75 | 345 | </div> |
| 76 | - <div> | |
| 77 | - <span class="gs-stat__value"><?php echo esc_html( (string) $gs_pro_total ); ?></span> | |
| 78 | - <span class="gs-stat__label"><?php esc_html_e( 'Pro blocks', 'slider-blocks' ); ?></span> | |
| 79 | - </div> | |
| 80 | - </div> | |
| 81 | - | |
| 82 | - <div class="gs-stat gs-stat--status <?php echo $has_pro ? 'is-pro' : ''; ?>"> | |
| 83 | - <span class="gs-stat__label"><?php esc_html_e( 'Your plan', 'slider-blocks' ); ?></span> | |
| 84 | - <span class="gs-stat__value gs-stat__value--sm"> | |
| 85 | - <?php echo $has_pro ? esc_html__( 'GutSlider Pro', 'slider-blocks' ) : esc_html__( 'GutSlider Free', 'slider-blocks' ); ?> | |
| 86 | - </span> | |
| 87 | - <?php if ( $has_pro ) : ?> | |
| 88 | - <a class="gs-link" href="<?php echo esc_url( admin_url( 'admin.php?page=gutslider-license' ) ); ?>"><?php esc_html_e( 'Manage license', 'slider-blocks' ); ?></a> | |
| 89 | - <?php else : ?> | |
| 90 | - <a class="gs-link" href="https://gutslider.com/pricing" target="_blank" rel="noopener noreferrer"> | |
| 346 | + <div class="gs-progress"> | |
| 347 | + <span class="gs-progress__count"> | |
| 91 | 348 | <?php |
| 92 | 349 | printf( |
| 93 | - /* translators: %d: number of Pro blocks. */ | |
| 94 | - esc_html__( 'Unlock %d Pro blocks', 'slider-blocks' ), | |
| 95 | - (int) $gs_pro_total | |
| 350 | + /* translators: 1: completed step count, 2: total step count. */ | |
| 351 | + esc_html__( '%1$d of %2$d done', 'slider-blocks' ), | |
| 352 | + (int) $gs_steps_done, | |
| 353 | + count( $gs_steps ) | |
| 96 | 354 | ); |
| 97 | 355 | ?> |
| 98 | - </a> | |
| 99 | - <?php endif; ?> | |
| 356 | + </span> | |
| 357 | + <span class="gs-progress__track"> | |
| 358 | + <span | |
| 359 | + class="gs-progress__fill" | |
| 360 | + style="width:<?php echo esc_attr( (string) round( ( $gs_steps_done / count( $gs_steps ) ) * 100 ) ); ?>%" | |
| 361 | + ></span> | |
| 362 | + </span> | |
| 363 | + </div> | |
| 364 | + </header> | |
| 365 | + | |
| 366 | + <div class="gs-steps"> | |
| 367 | + <?php foreach ( $gs_steps as $gs_step ) : ?> | |
| 368 | + <div class="gs-step<?php echo ! empty( $gs_step['done'] ) ? ' is-done' : ''; ?>"> | |
| 369 | + <div class="gs-step__top"> | |
| 370 | + <?php if ( ! empty( $gs_step['done'] ) ) : ?> | |
| 371 | + <span class="gs-step__check" aria-hidden="true"><?php GutSlider_Admin::icon( 'check' ); ?></span> | |
| 372 | + <?php else : ?> | |
| 373 | + <span class="gs-step__n"><?php echo esc_html( $gs_step['n'] ); ?></span> | |
| 374 | + <?php endif; ?> | |
| 375 | + <h3 class="gs-step__title"><?php echo esc_html( $gs_step['title'] ); ?></h3> | |
| 376 | + </div> | |
| 377 | + <p class="gs-step__text"><?php echo esc_html( $gs_step['text'] ); ?></p> | |
| 378 | + <a class="gs-link" href="<?php echo esc_url( $gs_step['link'] ); ?>" <?php echo empty( $gs_step['ext'] ) ? '' : 'target="_blank" rel="noopener noreferrer"'; ?>> | |
| 379 | + <?php echo esc_html( $gs_step['label'] ); ?> | |
| 380 | + <?php GutSlider_Admin::icon( 'arrow-right' ); ?> | |
| 381 | + </a> | |
| 382 | + </div> | |
| 383 | + <?php endforeach; ?> | |
| 100 | 384 | </div> |
| 101 | - </div> | |
| 385 | + </section> | |
| 102 | 386 | </div> |
| 103 | - </div> | |
| 104 | -</section> | |
| 105 | 387 | |
| 106 | -<div class="gs-shell gs-stack"> | |
| 388 | + <aside class="gs-col gs-col--side"> | |
| 107 | 389 | |
| 108 | - <section class="gs-section"> | |
| 109 | - <div class="gs-section__head"> | |
| 110 | - <h2 class="gs-section__title"><?php esc_html_e( 'Get started', 'slider-blocks' ); ?></h2> | |
| 111 | - <p class="gs-section__sub"><?php esc_html_e( 'Three minutes from install to your first slider.', 'slider-blocks' ); ?></p> | |
| 112 | - </div> | |
| 113 | - | |
| 114 | - <div class="gs-grid gs-grid--feature"> | |
| 115 | - <div class="gs-card gs-card--media"> | |
| 116 | - <div class="gs-embed"> | |
| 117 | - <iframe | |
| 118 | - src="https://www.youtube-nocookie.com/embed/P9Zj4bSVq4I" | |
| 119 | - title="<?php esc_attr_e( 'GutSlider walkthrough', 'slider-blocks' ); ?>" | |
| 120 | - loading="lazy" | |
| 121 | - allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| 122 | - referrerpolicy="strict-origin-when-cross-origin" | |
| 123 | - allowfullscreen | |
| 124 | - ></iframe> | |
| 125 | - </div> | |
| 390 | + <section class="gs-card gs-card--flush"> | |
| 391 | + <button | |
| 392 | + type="button" | |
| 393 | + class="gs-video" | |
| 394 | + data-gs-video="https://www.youtube-nocookie.com/embed/Hob3WgBTVZI?autoplay=1" | |
| 395 | + data-gs-video-title="<?php esc_attr_e( 'GutSlider: all in one slider and carousel blocks', 'slider-blocks' ); ?>" | |
| 396 | + > | |
| 397 | + <span class="gs-video__stage" aria-hidden="true"> | |
| 398 | + <span class="gs-video__slides"> | |
| 399 | + <span class="gs-video__slide"></span> | |
| 400 | + <span class="gs-video__slide gs-video__slide--main"></span> | |
| 401 | + <span class="gs-video__slide"></span> | |
| 402 | + </span> | |
| 403 | + <span class="gs-video__dots"> | |
| 404 | + <span class="gs-video__dot is-active"></span> | |
| 405 | + <span class="gs-video__dot"></span> | |
| 406 | + <span class="gs-video__dot"></span> | |
| 407 | + </span> | |
| 408 | + <span class="gs-video__play"><?php GutSlider_Admin::icon( 'play' ); ?></span> | |
| 409 | + </span> | |
| 410 | + <span class="screen-reader-text"><?php esc_html_e( 'Play the GutSlider video', 'slider-blocks' ); ?></span> | |
| 411 | + </button> | |
| 126 | 412 | <div class="gs-card__body"> |
| 127 | - <span class="gs-card__kicker"> | |
| 128 | - <svg class="gs-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5.5v13l11-6.5z" /></svg> | |
| 129 | - <?php esc_html_e( 'Watch the walkthrough', 'slider-blocks' ); ?> | |
| 130 | - </span> | |
| 131 | - <h3 class="gs-card__title gs-card__title--lg"><?php esc_html_e( 'Build your first slider in three minutes', 'slider-blocks' ); ?></h3> | |
| 132 | - <p class="gs-card__text"><?php esc_html_e( 'A short tour of the blocks, the controls and the responsive settings.', 'slider-blocks' ); ?></p> | |
| 413 | + <span class="gs-eyebrow"><?php esc_html_e( 'Watch the video', 'slider-blocks' ); ?></span> | |
| 414 | + <h2 class="gs-card__heading"><?php esc_html_e( 'See GutSlider in action', 'slider-blocks' ); ?></h2> | |
| 415 | + <p class="gs-card__sub"><?php esc_html_e( 'The blocks, the ready-made designs and what Pro adds, in one short video.', 'slider-blocks' ); ?></p> | |
| 133 | 416 | </div> |
| 134 | - </div> | |
| 417 | + </section> | |
| 135 | 418 | |
| 136 | - <div class="gs-stack gs-stack--sm"> | |
| 419 | + <?php if ( ! empty( $changelog ) ) : ?> | |
| 420 | + <section class="gs-card gs-card--pad"> | |
| 421 | + <header class="gs-card__head gs-card__head--plain"> | |
| 422 | + <h2 class="gs-card__heading"><?php esc_html_e( 'What’s new', 'slider-blocks' ); ?></h2> | |
| 423 | + <span class="gs-chip gs-chip--pro"><?php echo esc_html( 'v' . GUTSLIDER_VERSION ); ?></span> | |
| 424 | + </header> | |
| 425 | + | |
| 426 | + <ul class="gs-news"> | |
| 427 | + <?php foreach ( $changelog as $gs_entry ) : ?> | |
| 428 | + <li class="gs-news__item"> | |
| 429 | + <span class="gs-tag gs-tag--<?php echo esc_attr( $gs_entry['tag'] ); ?>"><?php echo esc_html( $gs_entry['label'] ); ?></span> | |
| 430 | + <span class="gs-news__text"><?php echo esc_html( $gs_entry['text'] ); ?></span> | |
| 431 | + </li> | |
| 432 | + <?php endforeach; ?> | |
| 433 | + </ul> | |
| 434 | + | |
| 435 | + <a class="gs-link" href="https://wordpress.org/plugins/slider-blocks/#developers" target="_blank" rel="noopener noreferrer"> | |
| 436 | + <?php esc_html_e( 'Read the changelog', 'slider-blocks' ); ?> | |
| 437 | + <?php GutSlider_Admin::icon( 'arrow-right' ); ?> | |
| 438 | + </a> | |
| 439 | + </section> | |
| 440 | + <?php endif; ?> | |
| 441 | + | |
| 442 | + <section class="gs-card gs-card--flush"> | |
| 443 | + <header class="gs-card__head gs-card__head--tight"> | |
| 444 | + <h2 class="gs-card__heading"><?php esc_html_e( 'Help & support', 'slider-blocks' ); ?></h2> | |
| 445 | + </header> | |
| 446 | + | |
| 137 | 447 | <?php |
| 138 | - $gs_steps = array( | |
| 139 | - array( | |
| 140 | - 'n' => '01', | |
| 141 | - 'title' => __( 'Pick your blocks', 'slider-blocks' ), | |
| 142 | - 'text' => __( 'Disable anything you will not use so the editor stays fast and tidy.', 'slider-blocks' ), | |
| 143 | - 'link' => admin_url( 'admin.php?page=gutslider-blocks-settings' ), | |
| 144 | - 'label' => __( 'Open blocks', 'slider-blocks' ), | |
| 145 | - ), | |
| 146 | - array( | |
| 147 | - 'n' => '02', | |
| 148 | - 'title' => __( 'Insert & style', 'slider-blocks' ), | |
| 149 | - 'text' => __( 'Search "GutSlider" in the block inserter, then style it from the sidebar.', 'slider-blocks' ), | |
| 150 | - 'link' => 'https://gutslider.com/docs', | |
| 151 | - 'label' => __( 'Read the docs', 'slider-blocks' ), | |
| 152 | - 'ext' => true, | |
| 153 | - ), | |
| 154 | - array( | |
| 155 | - 'n' => '03', | |
| 156 | - 'title' => __( 'Tune performance', 'slider-blocks' ), | |
| 157 | - 'text' => __( 'Choose how CSS is delivered and whether Google Fonts load on the front end.', 'slider-blocks' ), | |
| 158 | - 'link' => admin_url( 'admin.php?page=gutslider-settings' ), | |
| 159 | - 'label' => __( 'Open settings', 'slider-blocks' ), | |
| 160 | - ), | |
| 161 | - ); | |
| 162 | - ?> | |
| 163 | - <?php foreach ( $gs_steps as $gs_step ) : ?> | |
| 164 | - <div class="gs-card gs-card--step"> | |
| 165 | - <span class="gs-step__n"><?php echo esc_html( $gs_step['n'] ); ?></span> | |
| 166 | - <div class="gs-card__body"> | |
| 167 | - <h3 class="gs-card__title"><?php echo esc_html( $gs_step['title'] ); ?></h3> | |
| 168 | - <p class="gs-card__text"><?php echo esc_html( $gs_step['text'] ); ?></p> | |
| 169 | - <a class="gs-link" href="<?php echo esc_url( $gs_step['link'] ); ?>" <?php echo empty( $gs_step['ext'] ) ? '' : 'target="_blank" rel="noopener noreferrer"'; ?>> | |
| 170 | - <?php echo esc_html( $gs_step['label'] ); ?> | |
| 171 | - </a> | |
| 172 | - </div> | |
| 173 | - </div> | |
| 174 | - <?php endforeach; ?> | |
| 175 | - </div> | |
| 176 | - </div> | |
| 177 | - | |
| 178 | - <div class="gs-grid gs-grid--3"> | |
| 179 | - <?php | |
| 180 | 448 | $gs_support = array( |
| 181 | 449 | array( |
| 450 | + 'icon' => 'book-open', | |
| 182 | 451 | 'title' => __( 'Documentation', 'slider-blocks' ), |
| 183 | - 'text' => __( 'Guides, block references and troubleshooting.', 'slider-blocks' ), | |
| 184 | - 'label' => __( 'Browse docs', 'slider-blocks' ), | |
| 452 | + 'text' => __( 'Guides and block references', 'slider-blocks' ), | |
| 185 | 453 | 'link' => 'https://gutslider.com/docs', |
| 186 | - 'icon' => '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>', | |
| 187 | 454 | ), |
| 188 | 455 | array( |
| 189 | - 'title' => __( 'Support', 'slider-blocks' ), | |
| 190 | - 'text' => __( 'Stuck on something? Send us the details and we will dig in.', 'slider-blocks' ), | |
| 191 | - 'label' => __( 'Open a ticket', 'slider-blocks' ), | |
| 456 | + 'icon' => 'life-buoy', | |
| 457 | + 'title' => __( 'Open a ticket', 'slider-blocks' ), | |
| 458 | + 'text' => __( 'Usually answered within a day', 'slider-blocks' ), | |
| 192 | 459 | 'link' => 'https://gutslider.com/support', |
| 193 | - 'icon' => '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>', | |
| 194 | 460 | ), |
| 195 | 461 | array( |
| 462 | + 'icon' => 'star', | |
| 196 | 463 | 'title' => __( 'Leave a review', 'slider-blocks' ), |
| 197 | - 'text' => __( 'Reviews keep the plugin free and moving forward.', 'slider-blocks' ), | |
| 198 | - 'label' => __( 'Rate on WordPress.org', 'slider-blocks' ), | |
| 464 | + 'text' => __( 'Reviews keep GutSlider free', 'slider-blocks' ), | |
| 199 | 465 | 'link' => 'https://wordpress.org/support/plugin/slider-blocks/reviews/', |
| 200 | - 'icon' => '<path d="m12 3 2.6 5.7 6.4.7-4.7 4.3 1.3 6.3L12 17l-5.6 3 1.3-6.3L3 9.4l6.4-.7z"/>', | |
| 201 | 466 | ), |
| 202 | 467 | ); |
| 203 | 468 | ?> |
| 204 | 469 | <?php foreach ( $gs_support as $gs_item ) : ?> |
| 205 | - <a class="gs-card gs-card--link" href="<?php echo esc_url( $gs_item['link'] ); ?>" target="_blank" rel="noopener noreferrer"> | |
| 206 | - <span class="gs-card__icon"> | |
| 207 | - <svg class="gs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> | |
| 208 | - <?php echo $gs_item['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static inline SVG path data. ?> | |
| 209 | - </svg> | |
| 470 | + <a class="gs-help" href="<?php echo esc_url( $gs_item['link'] ); ?>" target="_blank" rel="noopener noreferrer"> | |
| 471 | + <span class="gs-help__icon"><?php GutSlider_Admin::icon( $gs_item['icon'] ); ?></span> | |
| 472 | + <span class="gs-help__text"> | |
| 473 | + <span class="gs-help__title"><?php echo esc_html( $gs_item['title'] ); ?></span> | |
| 474 | + <span class="gs-help__sub"><?php echo esc_html( $gs_item['text'] ); ?></span> | |
| 210 | 475 | </span> |
| 211 | - <div class="gs-card__body"> | |
| 212 | - <h3 class="gs-card__title"><?php echo esc_html( $gs_item['title'] ); ?></h3> | |
| 213 | - <p class="gs-card__text"><?php echo esc_html( $gs_item['text'] ); ?></p> | |
| 214 | - <span class="gs-link"><?php echo esc_html( $gs_item['label'] ); ?></span> | |
| 215 | - </div> | |
| 476 | + <?php GutSlider_Admin::icon( 'chevron-right', 'gs-help__chevron' ); ?> | |
| 216 | 477 | </a> |
| 217 | 478 | <?php endforeach; ?> |
| 218 | - </div> | |
| 219 | - </section> | |
| 479 | + </section> | |
| 480 | + </aside> | |
| 481 | + </div> | |
| 220 | 482 | |
| 221 | - <?php if ( ! $has_pro ) : ?> | |
| 222 | - <section class="gs-promo"> | |
| 223 | - <div class="gs-promo__copy"> | |
| 224 | - <span class="gs-eyebrow gs-eyebrow--light"><?php esc_html_e( 'GutSlider Pro', 'slider-blocks' ); ?></span> | |
| 225 | - <h2 class="gs-promo__title"> | |
| 226 | - <?php | |
| 227 | - printf( | |
| 228 | - /* translators: %d: number of Pro blocks. */ | |
| 229 | - esc_html__( '%d more ways to move.', 'slider-blocks' ), | |
| 230 | - (int) $gs_pro_total | |
| 231 | - ); | |
| 232 | - ?> | |
| 233 | - </h2> | |
| 234 | - <p class="gs-promo__text"><?php esc_html_e( 'Shader, shutters, slicer, tinder, 3D, panorama and WooCommerce carousels — plus priority support and one year of updates.', 'slider-blocks' ); ?></p> | |
| 235 | - <a class="gs-btn gs-btn--invert" href="https://gutslider.com/pricing" target="_blank" rel="noopener noreferrer"> | |
| 236 | - <?php esc_html_e( 'See pricing', 'slider-blocks' ); ?> | |
| 237 | - <svg class="gs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6" /></svg> | |
| 238 | - </a> | |
| 239 | - </div> | |
| 240 | - <ul class="gs-promo__list"> | |
| 241 | - <?php | |
| 242 | - $gs_pro_points = array( | |
| 243 | - sprintf( | |
| 244 | - /* translators: %d: number of Pro blocks. */ | |
| 245 | - __( '%d premium slider & carousel blocks', 'slider-blocks' ), | |
| 246 | - (int) $gs_pro_total | |
| 247 | - ), | |
| 248 | - __( 'WebGL shader and 3D transitions', 'slider-blocks' ), | |
| 249 | - __( 'WooCommerce product carousels', 'slider-blocks' ), | |
| 250 | - __( 'Priority support & updates', 'slider-blocks' ), | |
| 251 | - ); | |
| 252 | - ?> | |
| 253 | - <?php foreach ( $gs_pro_points as $gs_point ) : ?> | |
| 254 | - <li> | |
| 255 | - <svg class="gs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m5 13 4 4L19 7" /></svg> | |
| 256 | - <?php echo esc_html( $gs_point ); ?> | |
| 257 | - </li> | |
| 258 | - <?php endforeach; ?> | |
| 259 | - </ul> | |
| 260 | - </section> | |
| 261 | - <?php endif; ?> | |
| 262 | - | |
| 263 | - <section class="gs-section"> | |
| 264 | - <div class="gs-section__head"> | |
| 265 | - <h2 class="gs-section__title"><?php esc_html_e( 'More from the workshop', 'slider-blocks' ); ?></h2> | |
| 266 | - <p class="gs-section__sub"><?php esc_html_e( 'Other block plugins built with the same care.', 'slider-blocks' ); ?></p> | |
| 483 | + <section class="gs-workshop"> | |
| 484 | + <div class="gs-workshop__head"> | |
| 485 | + <h2 class="gs-card__heading"><?php esc_html_e( 'More from the workshop', 'slider-blocks' ); ?></h2> | |
| 486 | + <p class="gs-card__sub"><?php esc_html_e( 'Other block plugins built with the same care.', 'slider-blocks' ); ?></p> | |
| 267 | 487 | </div> |
| 268 | 488 | |
| 269 | - <div class="gs-grid gs-grid--3"> | |
| 489 | + <div class="gs-workshop__grid"> | |
| 270 | 490 | <?php |
| 271 | 491 | $gs_products = array( |
| 272 | 492 | array( |
| 493 | + 'icon' => 'layout-template', | |
| 273 | 494 | 'title' => __( 'GutenLayouts', 'slider-blocks' ), |
| 274 | 495 | 'text' => __( 'Ready-made layouts and patterns built entirely from core blocks.', 'slider-blocks' ), |
| 275 | 496 | 'link' => 'https://gutenlayouts.com', |
| 276 | 497 | ), |
| 277 | 498 | array( |
| 499 | + 'icon' => 'chevrons-down-up', | |
| 278 | 500 | 'title' => __( 'Easy Accordion', 'slider-blocks' ), |
| 279 | 501 | 'text' => __( 'Accessible, responsive accordions with a block-native editing flow.', 'slider-blocks' ), |
| 280 | 502 | 'link' => 'https://accordion.gutenbergkits.com', |
| 281 | 503 | ), |
| 282 | 504 | array( |
| 505 | + 'icon' => 'map-pin', | |
| 283 | 506 | 'title' => __( 'Gmap Block', 'slider-blocks' ), |
| 284 | 507 | 'text' => __( 'Interactive Google Maps with markers, styles and zero fuss.', 'slider-blocks' ), |
| 285 | 508 | 'link' => 'https://gmap.gutenbergkits.com', |
| 286 | 509 | ), |
| @@ -286,14 +509,18 @@ | ||
| 286 | 509 | ), |
| 287 | 510 | ); |
| 288 | 511 | ?> |
| 289 | 512 | <?php foreach ( $gs_products as $gs_product ) : ?> |
| 290 | - <a class="gs-card gs-card--link" href="<?php echo esc_url( $gs_product['link'] ); ?>" target="_blank" rel="noopener noreferrer"> | |
| 291 | - <div class="gs-card__body"> | |
| 292 | - <h3 class="gs-card__title"><?php echo esc_html( $gs_product['title'] ); ?></h3> | |
| 293 | - <p class="gs-card__text"><?php echo esc_html( $gs_product['text'] ); ?></p> | |
| 294 | - <span class="gs-link"><?php esc_html_e( 'Take a look', 'slider-blocks' ); ?></span> | |
| 295 | - </div> | |
| 513 | + <a class="gs-card gs-card--pad gs-card--link" href="<?php echo esc_url( $gs_product['link'] ); ?>" target="_blank" rel="noopener noreferrer"> | |
| 514 | + <span class="gs-product__top"> | |
| 515 | + <span class="gs-help__icon"><?php GutSlider_Admin::icon( $gs_product['icon'] ); ?></span> | |
| 516 | + <span class="gs-product__title"><?php echo esc_html( $gs_product['title'] ); ?></span> | |
| 517 | + </span> | |
| 518 | + <span class="gs-card__sub"><?php echo esc_html( $gs_product['text'] ); ?></span> | |
| 519 | + <span class="gs-link"> | |
| 520 | + <?php esc_html_e( 'Take a look', 'slider-blocks' ); ?> | |
| 521 | + <?php GutSlider_Admin::icon( 'arrow-right' ); ?> | |
| 522 | + </span> | |
| 296 | 523 | </a> |
| 297 | 524 | <?php endforeach; ?> |
| 298 | 525 | </div> |
| 299 | 526 | </section> |
