| @@ -7,9 +7,8 @@ | ||
| 7 | 7 | Button, |
| 8 | 8 | CheckboxControl, |
| 9 | 9 | } from '@wordpress/components'; |
| 10 | 10 | import { __ } from '@wordpress/i18n'; |
| 11 | -import { Theme } from 'shiki'; | |
| 12 | 11 | import { useLanguage } from '../../hooks/useLanguage'; |
| 13 | 12 | import { useGlobalStore } from '../../state/global'; |
| 14 | 13 | import { useLanguageStore } from '../../state/language'; |
| 15 | 14 | import { useThemeStore } from '../../state/theme'; |
| @@ -21,10 +20,10 @@ | ||
| 21 | 20 | FontFamilySelect, |
| 22 | 21 | } from '../components/FontSelect'; |
| 23 | 22 | import { FooterSelect } from '../components/FooterSelect'; |
| 24 | 23 | import { HeaderSelect } from '../components/HeaderSelect'; |
| 25 | -// import { Notice } from '../components/Notice'; | |
| 26 | -import { ThemeSelect } from '../components/ThemeSelect'; | |
| 24 | +import { HeightPanel } from '../components/HeightPanel'; | |
| 25 | +import { ThemesPanel } from '../components/ThemesPanel'; | |
| 27 | 26 | import { BlurControl } from './BlurControl'; |
| 28 | 27 | import { HighlightingControl } from './HighlightingControl'; |
| 29 | 28 | |
| 30 | 29 | export const SidebarControls = ({ |
| @@ -56,11 +55,22 @@ | ||
| 56 | 55 | label={__('Code Language', 'code-block-pro')} |
| 57 | 56 | data-cy-cbp="language-select" |
| 58 | 57 | value={language} |
| 59 | 58 | onChange={setLanguage} |
| 59 | + help={ | |
| 60 | + language === 'ansi' | |
| 61 | + ? __( | |
| 62 | + 'Some code themes may not render ANSI correctly. Control sequences render only on the front.', | |
| 63 | + 'code-block-pro', | |
| 64 | + ) | |
| 65 | + : null | |
| 66 | + } | |
| 60 | 67 | options={Object.entries(languages).map( |
| 61 | 68 | ([value, label]) => ({ |
| 62 | - label, | |
| 69 | + label: label.replace( | |
| 70 | + 'ANSI', | |
| 71 | + 'ANSI (experimental)', | |
| 72 | + ), | |
| 63 | 73 | value, |
| 64 | 74 | }), |
| 65 | 75 | )} |
| 66 | 76 | /> |
| @@ -148,9 +158,8 @@ | ||
| 148 | 158 | }} |
| 149 | 159 | /> |
| 150 | 160 | </BaseControl> |
| 151 | 161 | )} |
| 152 | - {/* <Notice /> */} | |
| 153 | 162 | </div> |
| 154 | 163 | </PanelBody> |
| 155 | 164 | <PanelBody |
| 156 | 165 | title={__('Line Settings', 'code-block-pro')} |
| @@ -219,20 +228,13 @@ | ||
| 219 | 228 | updateThemeHistory({ ...attributes, footerType }); |
| 220 | 229 | }} |
| 221 | 230 | /> |
| 222 | 231 | </PanelBody> |
| 232 | + <ThemesPanel | |
| 233 | + attributes={attributes} | |
| 234 | + setAttributes={setAttributes} | |
| 235 | + /> | |
| 223 | 236 | <PanelBody |
| 224 | - title={__('Themes', 'code-block-pro')} | |
| 225 | - initialOpen={false}> | |
| 226 | - <ThemeSelect | |
| 227 | - {...attributes} | |
| 228 | - onClick={(slug: Theme) => { | |
| 229 | - setAttributes({ theme: slug }); | |
| 230 | - updateThemeHistory({ ...attributes, theme: slug }); | |
| 231 | - }} | |
| 232 | - /> | |
| 233 | - </PanelBody> | |
| 234 | - <PanelBody | |
| 235 | 237 | title={__('Styling', 'code-block-pro')} |
| 236 | 238 | initialOpen={false}> |
| 237 | 239 | <div |
| 238 | 240 | className="code-block-pro-editor" |
| @@ -296,8 +298,12 @@ | ||
| 296 | 298 | /> |
| 297 | 299 | </div> |
| 298 | 300 | </div> |
| 299 | 301 | </PanelBody> |
| 302 | + <HeightPanel | |
| 303 | + attributes={attributes} | |
| 304 | + setAttributes={setAttributes} | |
| 305 | + /> | |
| 300 | 306 | <PanelBody |
| 301 | 307 | title={__('Extra Settings', 'code-block-pro')} |
| 302 | 308 | initialOpen={false}> |
| 303 | 309 | <BaseControl id="code-block-pro-show-copy-button"> |
