String_Prop_Type::make() ->enum( array( 'page', 'article', 'section', 'container' ) ) ->default( 'page' ), 'target_selector' => String_Prop_Type::make()->default( '' ), 'style' => String_Prop_Type::make() ->enum( array( 'bar', 'ring', 'section' ) ) ->default( 'bar' ), 'position' => String_Prop_Type::make() ->enum( array( 'inline', 'fixed' ) ) ->default( 'inline' ), 'thickness' => Number_Prop_Type::make()->default( 12 ), 'label_format' => String_Prop_Type::make() ->enum( array( 'percent', 'none' ) ) ->default( 'percent' ), 'fixed_edge' => String_Prop_Type::make() ->enum( array( 'top', 'bottom', 'left', 'right' ) ) ->default( 'top' ), 'offset' => Number_Prop_Type::make()->default( 0 ), 'aria_label' => String_Prop_Type::make()->default( __( 'Article progress', 'reactwoo-atomic' ) ), // Figma 17:165 visible title above the bar (inline bar / section styles). Empty = no title. 'title' => String_Prop_Type::make()->default( __( 'Article progress', 'reactwoo-atomic' ) ), ); } /** * {@inheritdoc} */ protected function define_content_controls(): array { return array( Select_Control::bind_to( 'target' ) ->set_label( __( 'Track', 'reactwoo-atomic' ) ) ->set_options( array( array( 'value' => 'page', 'label' => __( 'Whole page', 'reactwoo-atomic' ) ), array( 'value' => 'article', 'label' => __( 'Nearest
', 'reactwoo-atomic' ) ), array( 'value' => 'section', 'label' => __( 'Nearest
', 'reactwoo-atomic' ) ), array( 'value' => 'container', 'label' => __( 'Custom selector', 'reactwoo-atomic' ) ), ) ), Text_Control::bind_to( 'target_selector' ) ->set_label( __( 'Custom selector (when Track = Custom selector)', 'reactwoo-atomic' ) ) ->set_placeholder( '.my-scroll-container' ), Select_Control::bind_to( 'style' ) ->set_label( __( 'Style', 'reactwoo-atomic' ) ) ->set_options( array( array( 'value' => 'bar', 'label' => __( 'Bar', 'reactwoo-atomic' ) ), array( 'value' => 'ring', 'label' => __( 'Ring', 'reactwoo-atomic' ) ), array( 'value' => 'section', 'label' => __( 'Section markers', 'reactwoo-atomic' ) ), ) ), Select_Control::bind_to( 'position' ) ->set_label( __( 'Position', 'reactwoo-atomic' ) ) ->set_options( array( array( 'value' => 'inline', 'label' => __( 'Inline', 'reactwoo-atomic' ) ), array( 'value' => 'fixed', 'label' => __( 'Fixed to viewport', 'reactwoo-atomic' ) ), ) ), Select_Control::bind_to( 'fixed_edge' ) ->set_label( __( 'Fixed edge (when Position = Fixed)', 'reactwoo-atomic' ) ) ->set_options( array( array( 'value' => 'top', 'label' => __( 'Top', 'reactwoo-atomic' ) ), array( 'value' => 'bottom', 'label' => __( 'Bottom', 'reactwoo-atomic' ) ), array( 'value' => 'left', 'label' => __( 'Left', 'reactwoo-atomic' ) ), array( 'value' => 'right', 'label' => __( 'Right', 'reactwoo-atomic' ) ), ) ), Number_Control::bind_to( 'offset' ) ->set_label( __( 'Fixed edge offset (px)', 'reactwoo-atomic' ) ) ->set_min( 0 ) ->set_max( 500 ), Number_Control::bind_to( 'thickness' ) ->set_label( __( 'Thickness', 'reactwoo-atomic' ) ) ->set_min( 1 ) ->set_max( 40 ), Select_Control::bind_to( 'label_format' ) ->set_label( __( 'Label', 'reactwoo-atomic' ) ) ->set_options( array( array( 'value' => 'percent', 'label' => __( 'Percent', 'reactwoo-atomic' ) ), array( 'value' => 'none', 'label' => __( 'Hidden', 'reactwoo-atomic' ) ), ) ), Text_Control::bind_to( 'title' )->set_label( __( 'Title', 'reactwoo-atomic' ) ), Text_Control::bind_to( 'aria_label' )->set_label( __( 'Accessible name', 'reactwoo-atomic' ) ), ); } /** * Colour is a native Atomic style prop (Style tab), not a custom setting. * * {@inheritdoc} */ protected function define_base_styles(): array { return array( static::BASE_STYLE_KEY => Style_Definition::make() ->add_variant( Style_Variant::make() ->add_props( array( 'display' => String_Prop_Type::generate( 'block' ), 'color' => Color_Prop_Type::generate( '#6740ff' ), ) ) ), ); } /** * {@inheritdoc} */ protected function get_templates(): array { return array( 'reactwoo-atomic/reactwoo-progress' => __DIR__ . '/template.html.twig', ); } }