# Help4 Professional Widgets and Layered Slider

Help4 Builder Suite 1.3.271 added a first-party professional widget catalog and layered slider foundation without requiring another builder or addon pack. Help4 Builder Suite 1.3.346 adds a complete visual slide canvas while retaining the same JSON and shortcode contracts. Version 1.3.347 adds full-workspace and collapsible-settings modes so the canvas can use the available screen. The features use Help4-owned PHP, JavaScript, CSS, and editor contracts. Compatibility shortcode aliases remain available for existing Help4 layouts, but the Builder presents the new controls under **Help4 Pro Widgets**.

## Professional Widgets

The Builder widget rail includes 28 professional widgets:

- Content: dual heading, feature list, linked icon list, image box, team grid, testimonial grid, business hours, price menu, and timeline.
- Actions: creative button, modal, offcanvas panel, content toggle, tooltip, protected content, alert, social links, and share buttons.
- Media: image comparison, lightbox gallery, animated heading, sticky video, and scroll-to-top.
- Progress and navigation: progress bar, counter, circle progress, table of contents, and reading progress.

Each widget has structured controls in Builder Studio. Its stylesheet and runtime are enqueued only when a widget shortcode renders. Interactive widgets support keyboard operation, focus restoration where applicable, and reduced-motion preferences.

## Layered Slider

Create a Help4 Slider in WordPress admin, then add `[h4_slider id="123"]` or use the native Slider element in Builder Studio. Existing title, caption, button, image, snapshot, and link slides remain supported.

The Help4 Slider edit screen now provides a visual 16:9 canvas with desktop, tablet, and mobile previews. Slides can be added, duplicated, deleted, and reordered. Layers can be added, selected on canvas, dragged, resized, reordered, duplicated, hidden per device, and edited through labeled controls for content, media, links, colors, typography, position, entrance, delay, duration, and easing. Background image/video, poster, fit, focal point, color, overlay, alternative text, and per-slide duration are editable without opening JSON. The synchronized Advanced JSON panel remains available for migrations and precise compatibility work.

Use **Full workspace** to let the Slider cover the WordPress editor while composing. Use **Hide settings** when positioning layers to give the canvas the full available width, then restore the settings without losing the selected slide, layer, device, or draft JSON. Escape exits the full workspace. On narrower WordPress editor columns, settings move below the canvas automatically instead of squeezing it.

The public runtime follows carousel accessibility patterns: it has a labeled region and slide groups, a real pause/play button whenever autoplay exists, keyboard arrows, touch/pointer swipe, inert and untabbable hidden slides, user-initiated (not autoplay) status announcements, and automatic pause on interaction, focus, hover, hidden documents, or when out of view. Reduced-motion preferences disable autoplay and motion. Without JavaScript, only the first slide appears and inactive controls stay hidden.

Slider-level controls include:

- Manual or dynamic public-post sources with bounded post type, taxonomy, term, order, and limit controls.
- Fixed or automatic height plus independent desktop, tablet, and mobile heights.
- Slide, fade, zoom, flip, stack, or no-motion transitions with duration and easing.
- Autoplay, per-slide duration, start index, loop, shuffle, arrows, dots, thumbnails, progress, play/pause, hover pause, out-of-view pause, keyboard control, and swipe.
- Image fit, snapshot fit, background, media motion, and accessible carousel label.

## Slide Layers

The `_h4_slider_slides` JSON supports up to 80 sanitized layers per slide and 200 slides per rendered slider. Layer types are `heading`, `text`, `button`, `image`, `icon`, `video`, `shape`, `counter`, `progress`, and `html`. Safe HTML is passed through WordPress KSES.

Each layer can set desktop position, width, optional height, font size, color, background, alignment, stacking order, opacity, radius, padding, entrance, exit, delay, duration, easing, and parallax. Tablet and mobile can independently override horizontal position, vertical position, width, font size, and visibility.

Changing breakpoints in Builder Studio updates the signed frontend preview using the same frontend CSS and JavaScript used after publishing. Reduced-motion visitors receive no slide, media, progress, or layer animation.

## Extension Hooks

- `h4bs_slider_dynamic_slides` filters the final slide list for any source.
- `h4bs_slider_dynamic_post_slide` filters one normalized dynamic-post slide.
- `h4bs_builder_widget_catalog` extends the Builder widget rail.
- `h4bs_builder_widget_control_schemas` extends structured widget controls.

Extensions should return the documented normalized arrays and keep public queries bounded. Avoid outputting untrusted markup outside WordPress escaping and KSES APIs.
