Add sticky positioning mode for Back to Top button

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a Button Icon selector panel for core Button blocks, including left/right positioning and up/down icon options.
 - Added a Back to Top option as a `core/button` variation so users inherit native Button styling controls and icon compatibility.
 - Added smooth scrolling support for Back to Top button clicks and internal anchor links using vanilla JavaScript.
+- Added sticky positioning mode for Back to Top button with scroll-based visibility control.
+- Added inspector controls for Back to Top button with position mode selection (Inline/Scroll, Sticky, Fixed) and configurable visibility threshold (0-100%).
 - Linkable Group Blocks support for `core/group`, `core/column`, and `core/cover`, including custom URLs and current-post linking from the block toolbar.
 - Added plugin-managed SCF Local JSON handling and validation utilities for field groups, post types, and taxonomies.
 - Added an SCF field-group schema for repository validation workflows.

build/js/back-to-top-view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '84a35a129b8cf8105805');
+<?php return array('dependencies' => array(), 'version' => '2f878e4e9811d7262c21');

build/js/back-to-top.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-blocks', 'wp-hooks', 'wp-i18n'), 'version' => '9d676336fdab1bdceaa8');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-hooks', 'wp-i18n'), 'version' => 'fea66ba289b98b6e8f9d');

src/plugins/back-to-top/index.js

@@ -5,7 +5,10 @@
 
 import { addFilter } from '@wordpress/hooks';
 import { registerBlockVariation } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, SelectControl, RangeControl } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Register Back to Top as a core/button variation
@@ -60,9 +63,82 @@ addFilter(
 );
 
 /**
- * Add back-to-top inspector controls and editor classes
- * We don't need to override BlockEdit - the attributes filter handles everything
+ * Add back-to-top inspector controls
  */
+const withBackToTopControls = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const { attributes, setAttributes, name } = props;
+
+		// Only apply to core/button blocks with isBackToTop enabled
+		if ( name !== 'core/button' || ! attributes.isBackToTop ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				<InspectorControls>
+					<PanelBody
+						title={ __( 'Back to Top Settings', 'ls-plugin' ) }
+						initialOpen={ true }
+					>
+						<SelectControl
+							label={ __( 'Position Mode', 'ls-plugin' ) }
+							value={ attributes.backToTopPositionMode || 'scroll' }
+							options={ [
+								{
+									label: __( 'Inline (Scroll)', 'ls-plugin' ),
+									value: 'scroll',
+								},
+								{
+									label: __( 'Sticky (Fixed, Center)', 'ls-plugin' ),
+									value: 'sticky',
+								},
+								{
+									label: __( 'Fixed (Bottom Right)', 'ls-plugin' ),
+									value: 'fixed',
+								},
+							] }
+							onChange={ ( value ) =>
+								setAttributes( { backToTopPositionMode: value } )
+							}
+							help={ __(
+								'Choose how the button is positioned. Sticky and Fixed modes support scroll-based visibility.',
+								'ls-plugin'
+							) }
+						/>
+						{ ( attributes.backToTopPositionMode === 'sticky' || attributes.backToTopPositionMode === 'fixed' ) && (
+							<RangeControl
+								label={ __( 'Visibility Threshold (%)', 'ls-plugin' ) }
+								value={ attributes.backToTopScrollThreshold ?? 75 }
+								onChange={ ( value ) =>
+									setAttributes( { backToTopScrollThreshold: value } )
+								}
+								min={ 0 }
+								max={ 100 }
+								step={ 5 }
+								help={ sprintf(
+									/* translators: %d: threshold percentage */
+									__(
+										'Button appears after scrolling %d%% of the page.',
+										'ls-plugin'
+									),
+									attributes.backToTopScrollThreshold ?? 75
+								) }
+							/>
+						) }
+					</PanelBody>
+				</InspectorControls>
+			</>
+		);
+	};
+}, 'withBackToTopControls' );
+
+addFilter(
+	'editor.BlockEdit',
+	'ls-plugin/with-back-to-top-controls',
+	withBackToTopControls
+);
 
 /**
  * Add back-to-top data attributes to saved button markup
@@ -79,10 +155,17 @@ addFilter(
 			.filter( Boolean )
 			.join( ' ' );
 
-		return {
+		const props = {
 			...extraProps,
 			className: classes,
 			'data-back-to-top-mode': attributes.backToTopPositionMode || 'scroll',
 		};
+
+		// Add scroll threshold for sticky and fixed modes
+		if ( attributes.backToTopPositionMode === 'sticky' || attributes.backToTopPositionMode === 'fixed' ) {
+			props[ 'data-scroll-threshold' ] = attributes.backToTopScrollThreshold ?? 75;
+		}
+
+		return props;
 	}
 );