Skip to content

Commit 70783ca

Browse files
ArukuenArukuen
committed
fix: line separator only between settings group
1 parent c361ef6 commit 70783ca

File tree

3 files changed

+149
-138
lines changed

3 files changed

+149
-138
lines changed

‎src/components/admin-base-setting/editor.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.ugb-admin-setting:not(:last-child) {
22
padding-bottom: 32px;
3-
border-bottom: 1px solid #eaecf0;
4-
margin-bottom: 32px;
3+
margin-bottom: 16px;
54
&.ugb-admin-setting--small {
65
padding-bottom: 10px;
76
margin-bottom: 10px;

‎src/welcome/admin.js‎

Lines changed: 141 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -480,142 +480,147 @@ const EditorSettings = props => {
480480

481481
return (
482482
<div className="s-editor-settings">
483-
<h2>{ __( 'Blocks', i18n ) }</h2>
484-
<p className="s-settings-subtitle">{ __( 'You can customize the behavior of some blocks here.', i18n ) }</p>
485-
<AdminTextSetting
486-
label={ __( 'Nested Block Width', i18n ) }
487-
searchTerm={ currentSearch }
488-
value={ settings.stackable_block_default_width }
489-
type="text"
490-
onChange={ value => {
491-
handleSettingsChange( { stackable_block_default_width: value } ) // eslint-disable-line camelcase
492-
} }
493-
help={ __( 'The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
494-
/>
495-
<AdminTextSetting
496-
label={ __( 'Nested Wide Block Width', i18n ) }
497-
searchTerm={ currentSearch }
498-
value={ settings.stackable_block_wide_width }
499-
type="text"
500-
onChange={ value => {
501-
handleSettingsChange( { stackable_block_wide_width: value } ) // eslint-disable-line camelcase
502-
} }
503-
help={ __( 'The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
504-
/>
505-
<AdminToggleSetting
506-
label={ __( 'Stackable Text as Default Block', i18n ) }
507-
searchTerm={ currentSearch }
508-
value={ settings.stackable_enable_text_default_block }
509-
onChange={ value => {
510-
handleSettingsChange( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
511-
} }
512-
help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) }
513-
/>
514-
515-
<h2>{ __( 'Editor', i18n ) }</h2>
516-
<p className="s-settings-subtitle">{ __( 'You can customize some of the features and behavior of Stackable in the editor here.' ) } </p>
517-
<AdminToggleSetting
518-
label={ __( 'Design Library', i18n ) }
519-
searchTerm={ currentSearch }
520-
value={ settings.stackable_enable_design_library }
521-
onChange={ value => {
522-
handleSettingsChange( { stackable_enable_design_library: value } ) // eslint-disable-line camelcase
523-
} }
524-
help={ __( 'Adds a button on the top of the editor which gives access to a collection of pre-made block designs.', i18n ) }
525-
/>
526-
<AdminToggleSetting
527-
label={ __( 'Stackable Settings', i18n ) }
528-
searchTerm={ currentSearch }
529-
value={ settings.stackable_enable_global_settings }
530-
onChange={ value => {
531-
handleSettingsChange( { stackable_enable_global_settings: value } ) // eslint-disable-line camelcase
532-
} }
533-
help={ __( 'Adds a button on the top of the editor which gives access to Stackable settings.', i18n ) }
534-
/>
535-
<AdminToggleSetting
536-
label={ __( 'Block Linking (Beta)', i18n ) }
537-
searchTerm={ currentSearch }
538-
value={ settings.stackable_enable_block_linking }
539-
onChange={ value => {
540-
handleSettingsChange( { stackable_enable_block_linking: value } ) // eslint-disable-line camelcase
541-
} }
542-
help={
543-
<>
544-
{ __( 'Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns.', i18n ) }
545-
&nbsp;
546-
<a target="_docs" href="https://docs.wpstackable.com/article/452-how-to-use-block-linking">{ __( 'Learn more', i18n ) }</a>
547-
</>
548-
}
549-
/>
550-
551-
<h2>{ __( 'Toolbar', i18n ) }</h2>
552-
<p className="s-settings-subtitle">{ __( 'You can disable some toolbar features here.', i18n ) } </p>
553-
<AdminToggleSetting
554-
label={ __( 'Toolbar Text Highlight', i18n ) }
555-
searchTerm={ currentSearch }
556-
value={ settings.stackable_enable_text_highlight }
557-
onChange={ value => {
558-
handleSettingsChange( { stackable_enable_text_highlight: value } ) // eslint-disable-line camelcase
559-
} }
560-
help={ __( 'Adds a toolbar button for highlighting text', i18n ) }
561-
/>
562-
<AdminToggleSetting
563-
label={ __( 'Toolbar Dynamic Content', i18n ) }
564-
searchTerm={ currentSearch }
565-
value={ settings.stackable_enable_dynamic_content }
566-
onChange={ value => {
567-
handleSettingsChange( { stackable_enable_dynamic_content: value } ) // eslint-disable-line camelcase
568-
} }
569-
help={ __( 'Adds a toolbar button for inserting dynamic content', i18n ) }
570-
/>
571-
<AdminToggleSetting
572-
label={ __( 'Copy & Paste Styles', i18n ) }
573-
searchTerm={ currentSearch }
574-
value={ settings.stackable_enable_copy_paste_styles }
575-
onChange={ value => {
576-
handleSettingsChange( { stackable_enable_copy_paste_styles: value } ) // eslint-disable-line camelcase
577-
} }
578-
help={ __( 'Adds a toolbar button for copying and pasting block styles', i18n ) }
579-
/>
580-
<AdminToggleSetting
581-
label={ __( 'Reset Layout', i18n ) }
582-
searchTerm={ currentSearch }
583-
value={ settings.stackable_enable_reset_layout }
584-
onChange={ value => {
585-
handleSettingsChange( { stackable_enable_reset_layout: value } ) // eslint-disable-line camelcase
586-
} }
587-
help={ __( 'Adds a toolbar button for resetting the layout of a stackble block back to the original', i18n ) }
588-
/>
589-
<AdminToggleSetting
590-
label={ __( 'Save as Default Block', i18n ) }
591-
searchTerm={ currentSearch }
592-
value={ settings.stackable_enable_save_as_default_block }
593-
onChange={ value => {
594-
handleSettingsChange( { stackable_enable_save_as_default_block: value } ) // eslint-disable-line
595-
} }
596-
help={ __( 'Adds a toolbar button for saving a block as the default block', i18n ) }
597-
/>
598-
599-
<h2>{ __( 'Inspector', i18n ) }</h2>
600-
<p className="s-settings-subtitle">{ __( 'You can customize some of the features and behavior of Stackable in the inspector here.' ) }</p>
601-
<AdminToggleSetting
602-
label={ __( 'Don\'t show help video tooltips', i18n ) }
603-
searchTerm={ currentSearch }
604-
value={ settings.stackable_help_tooltip_disabled === '1' }
605-
onChange={ value => {
606-
handleSettingsChange( { stackable_help_tooltip_disabled: value ? '1' : '' } ) // eslint-disable-line camelcase
607-
} }
608-
help={ __( 'Disables the help video tooltips that appear in the inspector.', i18n ) }
609-
/>
610-
<AdminToggleSetting
611-
label={ __( 'Auto-Collapse Panels', i18n ) }
612-
searchTerm={ currentSearch }
613-
value={ settings.stackable_auto_collapse_panels }
614-
onChange={ value => {
615-
handleSettingsChange( { stackable_auto_collapse_panels: value } ) // eslint-disable-line camelcase
616-
} }
617-
help={ __( 'Collapse other inspector panels when opening another, keeping only one open at a time.', i18n ) }
618-
/>
483+
<div className="s-setting-group">
484+
<h2>{ __( 'Blocks', i18n ) }</h2>
485+
<p className="s-settings-subtitle">{ __( 'You can customize the behavior of some blocks here.', i18n ) }</p>
486+
<AdminTextSetting
487+
label={ __( 'Nested Block Width', i18n ) }
488+
searchTerm={ currentSearch }
489+
value={ settings.stackable_block_default_width }
490+
type="text"
491+
onChange={ value => {
492+
handleSettingsChange( { stackable_block_default_width: value } ) // eslint-disable-line camelcase
493+
} }
494+
help={ __( 'The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
495+
/>
496+
<AdminTextSetting
497+
label={ __( 'Nested Wide Block Width', i18n ) }
498+
searchTerm={ currentSearch }
499+
value={ settings.stackable_block_wide_width }
500+
type="text"
501+
onChange={ value => {
502+
handleSettingsChange( { stackable_block_wide_width: value } ) // eslint-disable-line camelcase
503+
} }
504+
help={ __( 'The width used when a Columns block has its Content Width set to wide. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly. In px, you can also use other units or use a calc() formula.', i18n ) }
505+
/>
506+
<AdminToggleSetting
507+
label={ __( 'Stackable Text as Default Block', i18n ) }
508+
searchTerm={ currentSearch }
509+
value={ settings.stackable_enable_text_default_block }
510+
onChange={ value => {
511+
handleSettingsChange( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
512+
} }
513+
help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) }
514+
/>
515+
</div>
516+
<div className="s-setting-group">
517+
<h2>{ __( 'Editor', i18n ) }</h2>
518+
<p className="s-settings-subtitle">{ __( 'You can customize some of the features and behavior of Stackable in the editor here.' ) } </p>
519+
<AdminToggleSetting
520+
label={ __( 'Design Library', i18n ) }
521+
searchTerm={ currentSearch }
522+
value={ settings.stackable_enable_design_library }
523+
onChange={ value => {
524+
handleSettingsChange( { stackable_enable_design_library: value } ) // eslint-disable-line camelcase
525+
} }
526+
help={ __( 'Adds a button on the top of the editor which gives access to a collection of pre-made block designs.', i18n ) }
527+
/>
528+
<AdminToggleSetting
529+
label={ __( 'Stackable Settings', i18n ) }
530+
searchTerm={ currentSearch }
531+
value={ settings.stackable_enable_global_settings }
532+
onChange={ value => {
533+
handleSettingsChange( { stackable_enable_global_settings: value } ) // eslint-disable-line camelcase
534+
} }
535+
help={ __( 'Adds a button on the top of the editor which gives access to Stackable settings.', i18n ) }
536+
/>
537+
<AdminToggleSetting
538+
label={ __( 'Block Linking (Beta)', i18n ) }
539+
searchTerm={ currentSearch }
540+
value={ settings.stackable_enable_block_linking }
541+
onChange={ value => {
542+
handleSettingsChange( { stackable_enable_block_linking: value } ) // eslint-disable-line camelcase
543+
} }
544+
help={
545+
<>
546+
{ __( 'Gives you the ability to link columns. Any changes you make on one column will automatically get applied on the other columns.', i18n ) }
547+
&nbsp;
548+
<a target="_docs" href="https://docs.wpstackable.com/article/452-how-to-use-block-linking">{ __( 'Learn more', i18n ) }</a>
549+
</>
550+
}
551+
/>
552+
</div>
553+
<div className="s-setting-group">
554+
<h2>{ __( 'Toolbar', i18n ) }</h2>
555+
<p className="s-settings-subtitle">{ __( 'You can disable some toolbar features here.', i18n ) } </p>
556+
<AdminToggleSetting
557+
label={ __( 'Toolbar Text Highlight', i18n ) }
558+
searchTerm={ currentSearch }
559+
value={ settings.stackable_enable_text_highlight }
560+
onChange={ value => {
561+
handleSettingsChange( { stackable_enable_text_highlight: value } ) // eslint-disable-line camelcase
562+
} }
563+
help={ __( 'Adds a toolbar button for highlighting text', i18n ) }
564+
/>
565+
<AdminToggleSetting
566+
label={ __( 'Toolbar Dynamic Content', i18n ) }
567+
searchTerm={ currentSearch }
568+
value={ settings.stackable_enable_dynamic_content }
569+
onChange={ value => {
570+
handleSettingsChange( { stackable_enable_dynamic_content: value } ) // eslint-disable-line camelcase
571+
} }
572+
help={ __( 'Adds a toolbar button for inserting dynamic content', i18n ) }
573+
/>
574+
<AdminToggleSetting
575+
label={ __( 'Copy & Paste Styles', i18n ) }
576+
searchTerm={ currentSearch }
577+
value={ settings.stackable_enable_copy_paste_styles }
578+
onChange={ value => {
579+
handleSettingsChange( { stackable_enable_copy_paste_styles: value } ) // eslint-disable-line camelcase
580+
} }
581+
help={ __( 'Adds a toolbar button for copying and pasting block styles', i18n ) }
582+
/>
583+
<AdminToggleSetting
584+
label={ __( 'Reset Layout', i18n ) }
585+
searchTerm={ currentSearch }
586+
value={ settings.stackable_enable_reset_layout }
587+
onChange={ value => {
588+
handleSettingsChange( { stackable_enable_reset_layout: value } ) // eslint-disable-line camelcase
589+
} }
590+
help={ __( 'Adds a toolbar button for resetting the layout of a stackble block back to the original', i18n ) }
591+
/>
592+
<AdminToggleSetting
593+
label={ __( 'Save as Default Block', i18n ) }
594+
searchTerm={ currentSearch }
595+
value={ settings.stackable_enable_save_as_default_block }
596+
onChange={ value => {
597+
handleSettingsChange( { stackable_enable_save_as_default_block: value } ) // eslint-disable-line
598+
} }
599+
help={ __( 'Adds a toolbar button for saving a block as the default block', i18n ) }
600+
/>
601+
</div>
602+
<div className="s-setting-group">
603+
<h2>{ __( 'Inspector', i18n ) }</h2>
604+
<p className="s-settings-subtitle">{ __( 'You can customize some of the features and behavior of Stackable in the inspector here.' ) }</p>
605+
<AdminToggleSetting
606+
label={ __( 'Don\'t show help video tooltips', i18n ) }
607+
searchTerm={ currentSearch }
608+
value={ settings.stackable_help_tooltip_disabled === '1' }
609+
onChange={ value => {
610+
handleSettingsChange( { stackable_help_tooltip_disabled: value ? '1' : '' } ) // eslint-disable-line camelcase
611+
} }
612+
help={ __( 'Disables the help video tooltips that appear in the inspector.', i18n ) }
613+
/>
614+
<AdminToggleSetting
615+
label={ __( 'Auto-Collapse Panels', i18n ) }
616+
searchTerm={ currentSearch }
617+
value={ settings.stackable_auto_collapse_panels }
618+
onChange={ value => {
619+
handleSettingsChange( { stackable_auto_collapse_panels: value } ) // eslint-disable-line camelcase
620+
} }
621+
help={ __( 'Collapse other inspector panels when opening another, keeping only one open at a time.', i18n ) }
622+
/>
623+
</div>
619624
</div>
620625
)
621626
}

‎src/welcome/admin.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -673,6 +673,13 @@ body.toplevel_page_stk-custom-fields {
673673
}
674674
}
675675
}
676+
677+
.s-setting-group:not(:last-child) {
678+
border-bottom: 1px solid #eaecf0;
679+
padding-bottom: 32px;
680+
padding-top: 32px;
681+
}
682+
676683
.s-side {
677684
h2,
678685
h3 {

0 commit comments

Comments
 (0)