| @@ -6,22 +6,15 @@ | ||
| 6 | 6 | SelectControl, |
| 7 | 7 | Button, |
| 8 | 8 | CheckboxControl, |
| 9 | 9 | } from '@wordpress/components'; |
| 10 | -import { useDispatch } from '@wordpress/data'; | |
| 11 | -// eslint-disable-next-line @typescript-eslint/ban-ts-comment | |
| 12 | -// @ts-ignore-next-line - store is not typed | |
| 13 | -import { store as editPostStore } from '@wordpress/edit-post'; | |
| 14 | -import { useEffect, useState } from '@wordpress/element'; | |
| 15 | 10 | import { __ } from '@wordpress/i18n'; |
| 16 | -import { useCanEditHTML } from '../../hooks/useCanEditHTML'; | |
| 17 | 11 | import { useLanguage } from '../../hooks/useLanguage'; |
| 18 | 12 | import { useGlobalStore } from '../../state/global'; |
| 19 | 13 | import { useLanguageStore } from '../../state/language'; |
| 20 | 14 | import { useThemeStore } from '../../state/theme'; |
| 21 | -import { AttributesPropsAndSetter, Lang } from '../../types'; | |
| 15 | +import { AttributesPropsAndSetter } from '../../types'; | |
| 22 | 16 | import { languages } from '../../util/languages'; |
| 23 | -import { ButtonsPanel } from '../components/ButtonsPanel'; | |
| 24 | 17 | import { |
| 25 | 18 | FontSizeSelect, |
| 26 | 19 | FontLineHeightSelect, |
| 27 | 20 | FontFamilySelect, |
| @@ -28,11 +21,9 @@ | ||
| 28 | 21 | } from '../components/FontSelect'; |
| 29 | 22 | import { FooterSelect } from '../components/FooterSelect'; |
| 30 | 23 | import { HeaderSelect } from '../components/HeaderSelect'; |
| 31 | 24 | import { HeightPanel } from '../components/HeightPanel'; |
| 32 | -import { SlotFactory } from '../components/SlotFactory'; | |
| 33 | 25 | import { ThemesPanel } from '../components/ThemesPanel'; |
| 34 | -import { MissingPermissionsTip } from '../components/misc/MissingPermissions'; | |
| 35 | 26 | import { BlurControl } from './BlurControl'; |
| 36 | 27 | import { HighlightingControl } from './HighlightingControl'; |
| 37 | 28 | |
| 38 | 29 | export const SidebarControls = ({ |
| @@ -41,103 +32,24 @@ | ||
| 41 | 32 | }: AttributesPropsAndSetter) => { |
| 42 | 33 | const [language, setLanguage] = useLanguage({ attributes, setAttributes }); |
| 43 | 34 | const { recentLanguages } = useLanguageStore(); |
| 44 | 35 | const { updateThemeHistory } = useThemeStore(); |
| 45 | - const { bringAttentionToPanel } = useGlobalStore(); | |
| 36 | + const { setPreviousSettings } = useGlobalStore(); | |
| 46 | 37 | const { headerType, footerType } = attributes; |
| 47 | - const languagesSorted = new Map( | |
| 48 | - Object.entries(languages).sort((a, b) => a[1].localeCompare(b[1])), | |
| 49 | - ); | |
| 50 | - const canEdit = useCanEditHTML(); | |
| 38 | + | |
| 51 | 39 | const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart']; |
| 52 | - const showHeaderTextEdit = [ | |
| 53 | - 'simpleString', | |
| 54 | - 'pillString', | |
| 55 | - 'stringSmall', | |
| 56 | - ].includes(headerType); | |
| 57 | - const showFooterTextEdit = footersNeedingLinks.includes(footerType ?? ''); | |
| 58 | - const showFooterLinkEdit = footersNeedingLinks.includes(footerType ?? ''); | |
| 59 | - const showFooterLinkTargetEdit = footersNeedingLinks.includes( | |
| 60 | - footerType ?? '', | |
| 61 | - ); | |
| 62 | - const [bringAttention, setBringAttention] = useState<string | false>(false); | |
| 63 | - const { openGeneralSidebar, closeGeneralSidebar } = | |
| 64 | - useDispatch(editPostStore); | |
| 65 | 40 | |
| 66 | - useEffect(() => { | |
| 67 | - if (!bringAttentionToPanel) return; | |
| 68 | - closeGeneralSidebar('edit-post/block').then(() => { | |
| 69 | - setBringAttention(bringAttentionToPanel); | |
| 70 | - openGeneralSidebar('edit-post/block'); | |
| 71 | - }); | |
| 72 | - }, [bringAttentionToPanel, closeGeneralSidebar, openGeneralSidebar]); | |
| 41 | + const showHeaderTextEdit = ['simpleString'].includes(headerType); | |
| 42 | + const showFooterTextEdit = footersNeedingLinks.includes(footerType); | |
| 43 | + const showFooterLinkEdit = footersNeedingLinks.includes(footerType); | |
| 44 | + const showFooterLinkTargetEdit = footersNeedingLinks.includes(footerType); | |
| 73 | 45 | |
| 74 | - if (!canEdit) | |
| 75 | - return ( | |
| 76 | - <InspectorControls> | |
| 77 | - {canEdit ? null : <MissingPermissionsTip />} | |
| 78 | - </InspectorControls> | |
| 79 | - ); | |
| 80 | - | |
| 81 | 46 | return ( |
| 82 | 47 | <InspectorControls> |
| 83 | - <SlotFactory | |
| 84 | - name="CodeBlockPro.Sidebar.Start" | |
| 85 | - attributes={attributes} | |
| 86 | - setAttributes={setAttributes} | |
| 87 | - /> | |
| 88 | 48 | <PanelBody |
| 89 | - title={__('Line Settings', 'code-block-pro')} | |
| 90 | - initialOpen={false}> | |
| 49 | + title={__('Settings', 'code-block-pro')} | |
| 50 | + initialOpen={true}> | |
| 91 | 51 | <div className="code-block-pro-editor"> |
| 92 | - <BaseControl id="code-block-pro-show-line-numbers"> | |
| 93 | - <CheckboxControl | |
| 94 | - data-cy="show-line-numbers" | |
| 95 | - label={__('Line numbers', 'code-block-pro')} | |
| 96 | - help={__( | |
| 97 | - 'Enable line numbers and set a starting number.', | |
| 98 | - 'code-block-pro', | |
| 99 | - )} | |
| 100 | - checked={attributes.lineNumbers} | |
| 101 | - onChange={(lineNumbers) => { | |
| 102 | - setAttributes({ lineNumbers }); | |
| 103 | - updateThemeHistory({ lineNumbers }); | |
| 104 | - }} | |
| 105 | - /> | |
| 106 | - {attributes.lineNumbers && ( | |
| 107 | - <BaseControl id="code-block-pro-line-number-start"> | |
| 108 | - <TextControl | |
| 109 | - id="code-block-pro-line-number-start" | |
| 110 | - spellCheck={false} | |
| 111 | - autoComplete="off" | |
| 112 | - label={__('Start from', 'code-block-pro')} | |
| 113 | - onChange={(startingLineNumber) => { | |
| 114 | - setAttributes({ startingLineNumber }); | |
| 115 | - }} | |
| 116 | - value={attributes.startingLineNumber} | |
| 117 | - /> | |
| 118 | - </BaseControl> | |
| 119 | - )} | |
| 120 | - </BaseControl> | |
| 121 | - <HighlightingControl | |
| 122 | - attributes={attributes} | |
| 123 | - setAttributes={setAttributes} | |
| 124 | - /> | |
| 125 | - <BlurControl | |
| 126 | - attributes={attributes} | |
| 127 | - setAttributes={setAttributes} | |
| 128 | - /> | |
| 129 | - </div> | |
| 130 | - </PanelBody> | |
| 131 | - <ThemesPanel | |
| 132 | - bringAttentionToThemes={bringAttention === 'theme-select'} | |
| 133 | - attributes={attributes} | |
| 134 | - setAttributes={setAttributes} | |
| 135 | - /> | |
| 136 | - <PanelBody | |
| 137 | - title={__('Language', 'code-block-pro')} | |
| 138 | - initialOpen={bringAttention === 'language-select'}> | |
| 139 | - <div className="code-block-pro-editor"> | |
| 140 | 52 | <BaseControl id="code-block-pro-language"> |
| 141 | 53 | <SelectControl |
| 142 | 54 | id="code-block-pro-language" |
| 143 | 55 | label={__('Code Language', 'code-block-pro')} |
| @@ -142,9 +54,9 @@ | ||
| 142 | 54 | id="code-block-pro-language" |
| 143 | 55 | label={__('Code Language', 'code-block-pro')} |
| 144 | 56 | data-cy-cbp="language-select" |
| 145 | 57 | value={language} |
| 146 | - onChange={(v) => setLanguage(v as Lang)} | |
| 58 | + onChange={setLanguage} | |
| 147 | 59 | help={ |
| 148 | 60 | language === 'ansi' |
| 149 | 61 | ? __( |
| 150 | 62 | 'Some code themes may not render ANSI correctly. Control sequences render only on the front.', |
| @@ -151,9 +63,9 @@ | ||
| 151 | 63 | 'code-block-pro', |
| 152 | 64 | ) |
| 153 | 65 | : null |
| 154 | 66 | } |
| 155 | - options={[...languagesSorted.entries()].map( | |
| 67 | + options={Object.entries(languages).map( | |
| 156 | 68 | ([value, label]) => ({ |
| 157 | 69 | label: label.replace( |
| 158 | 70 | 'ANSI', |
| 159 | 71 | 'ANSI (experimental)', |
| @@ -166,12 +78,13 @@ | ||
| 166 | 78 | <> |
| 167 | 79 | <span className="mb-2 block"> |
| 168 | 80 | {__('Recently Used', 'code-block-pro')} |
| 169 | 81 | </span> |
| 170 | - <div className="flex flex-col gap-1"> | |
| 82 | + <div className="flex gap-1"> | |
| 171 | 83 | {recentLanguages?.map((lang) => ( |
| 172 | 84 | <Button |
| 173 | 85 | key={lang} |
| 86 | + className="bg-gray-100 text-black no-underline p-1 px-2 " | |
| 174 | 87 | variant="link" |
| 175 | 88 | onClick={() => setLanguage(lang)}> |
| 176 | 89 | {languages[lang] ?? lang} |
| 177 | 90 | </Button> |
| @@ -179,33 +92,130 @@ | ||
| 179 | 92 | </div> |
| 180 | 93 | </> |
| 181 | 94 | ) : null} |
| 182 | 95 | </BaseControl> |
| 96 | + {showHeaderTextEdit && ( | |
| 97 | + <BaseControl id="code-block-pro-header-text"> | |
| 98 | + <TextControl | |
| 99 | + id="code-block-pro-header-text" | |
| 100 | + spellCheck={false} | |
| 101 | + autoComplete="off" | |
| 102 | + label={__('Header Text', 'code-block-pro')} | |
| 103 | + placeholder={languages[language]} | |
| 104 | + onChange={(headerString) => { | |
| 105 | + setAttributes({ headerString }); | |
| 106 | + }} | |
| 107 | + value={attributes.headerString ?? ''} | |
| 108 | + /> | |
| 109 | + </BaseControl> | |
| 110 | + )} | |
| 111 | + {showFooterTextEdit && ( | |
| 112 | + <BaseControl id="code-block-pro-footer-text"> | |
| 113 | + <TextControl | |
| 114 | + id="code-block-pro-footer-text" | |
| 115 | + spellCheck={false} | |
| 116 | + autoComplete="off" | |
| 117 | + label={__('Footer Text', 'code-block-pro')} | |
| 118 | + placeholder={languages[language]} | |
| 119 | + onChange={(footerString) => { | |
| 120 | + setAttributes({ footerString }); | |
| 121 | + }} | |
| 122 | + value={attributes.footerString ?? ''} | |
| 123 | + /> | |
| 124 | + </BaseControl> | |
| 125 | + )} | |
| 126 | + {showFooterLinkEdit && ( | |
| 127 | + <BaseControl id="code-block-pro-footer-link"> | |
| 128 | + <TextControl | |
| 129 | + id="code-block-pro-footer-link" | |
| 130 | + spellCheck={false} | |
| 131 | + type="url" | |
| 132 | + autoComplete="off" | |
| 133 | + label={__('Footer Link', 'code-block-pro')} | |
| 134 | + placeholder="https://example.com" | |
| 135 | + help={__( | |
| 136 | + 'Leave blank to disable', | |
| 137 | + 'code-block-pro', | |
| 138 | + )} | |
| 139 | + onChange={(footerLink) => { | |
| 140 | + setAttributes({ footerLink }); | |
| 141 | + }} | |
| 142 | + value={attributes.footerLink ?? ''} | |
| 143 | + /> | |
| 144 | + </BaseControl> | |
| 145 | + )} | |
| 146 | + {showFooterLinkTargetEdit && ( | |
| 147 | + <BaseControl id="code-block-pro-footer-link-target"> | |
| 148 | + <CheckboxControl | |
| 149 | + id="code-block-pro-footer-link-target" | |
| 150 | + label={__('Open in new tab?', 'code-block-pro')} | |
| 151 | + checked={attributes.footerLinkTarget} | |
| 152 | + onChange={(footerLinkTarget) => { | |
| 153 | + setAttributes({ footerLinkTarget }); | |
| 154 | + updateThemeHistory({ | |
| 155 | + ...attributes, | |
| 156 | + footerLinkTarget, | |
| 157 | + }); | |
| 158 | + }} | |
| 159 | + /> | |
| 160 | + </BaseControl> | |
| 161 | + )} | |
| 183 | 162 | </div> |
| 184 | 163 | </PanelBody> |
| 185 | 164 | <PanelBody |
| 186 | - title={__('Header Type', 'code-block-pro')} | |
| 165 | + title={__('Line Settings', 'code-block-pro')} | |
| 187 | 166 | initialOpen={false}> |
| 188 | - {showHeaderTextEdit && ( | |
| 189 | - <BaseControl id="code-block-pro-header-text"> | |
| 190 | - <TextControl | |
| 191 | - id="code-block-pro-header-text" | |
| 192 | - spellCheck={false} | |
| 193 | - autoComplete="off" | |
| 194 | - label={__('Header Text', 'code-block-pro')} | |
| 195 | - placeholder={languages[language]} | |
| 196 | - onChange={(headerString) => { | |
| 197 | - setAttributes({ headerString }); | |
| 167 | + <div className="code-block-pro-editor"> | |
| 168 | + <BaseControl id="code-block-pro-show-line-numbers"> | |
| 169 | + <CheckboxControl | |
| 170 | + data-cy="show-line-numbers" | |
| 171 | + label={__('Enable line numbers', 'code-block-pro')} | |
| 172 | + help={__( | |
| 173 | + 'Enable line numbers and set a starting number.', | |
| 174 | + 'code-block-pro', | |
| 175 | + )} | |
| 176 | + checked={attributes.lineNumbers} | |
| 177 | + onChange={(lineNumbers) => { | |
| 178 | + setAttributes({ lineNumbers }); | |
| 179 | + updateThemeHistory({ | |
| 180 | + ...attributes, | |
| 181 | + lineNumbers, | |
| 182 | + }); | |
| 198 | 183 | }} |
| 199 | - value={attributes.headerString ?? ''} | |
| 200 | 184 | /> |
| 185 | + {attributes.lineNumbers && ( | |
| 186 | + <BaseControl id="code-block-pro-line-number-start"> | |
| 187 | + <TextControl | |
| 188 | + id="code-block-pro-line-number-start" | |
| 189 | + spellCheck={false} | |
| 190 | + autoComplete="off" | |
| 191 | + label={__('Start from', 'code-block-pro')} | |
| 192 | + onChange={(startingLineNumber) => { | |
| 193 | + setAttributes({ startingLineNumber }); | |
| 194 | + }} | |
| 195 | + value={attributes.startingLineNumber} | |
| 196 | + /> | |
| 197 | + </BaseControl> | |
| 198 | + )} | |
| 201 | 199 | </BaseControl> |
| 202 | - )} | |
| 200 | + <HighlightingControl | |
| 201 | + attributes={attributes} | |
| 202 | + setAttributes={setAttributes} | |
| 203 | + /> | |
| 204 | + <BlurControl | |
| 205 | + attributes={attributes} | |
| 206 | + setAttributes={setAttributes} | |
| 207 | + /> | |
| 208 | + </div> | |
| 209 | + </PanelBody> | |
| 210 | + <PanelBody | |
| 211 | + title={__('Header Type', 'code-block-pro')} | |
| 212 | + initialOpen={false}> | |
| 203 | 213 | <HeaderSelect |
| 204 | 214 | attributes={attributes} |
| 205 | 215 | onClick={(headerType) => { |
| 206 | 216 | setAttributes({ headerType }); |
| 207 | - updateThemeHistory({ headerType }); | |
| 217 | + updateThemeHistory({ ...attributes, headerType }); | |
| 208 | 218 | }} |
| 209 | 219 | /> |
| 210 | 220 | </PanelBody> |
| 211 | 221 | <PanelBody |
| @@ -210,75 +220,22 @@ | ||
| 210 | 220 | </PanelBody> |
| 211 | 221 | <PanelBody |
| 212 | 222 | title={__('Footer Type', 'code-block-pro')} |
| 213 | 223 | initialOpen={false}> |
| 214 | - {showFooterTextEdit && ( | |
| 215 | - <BaseControl id="code-block-pro-footer-text"> | |
| 216 | - <TextControl | |
| 217 | - id="code-block-pro-footer-text" | |
| 218 | - spellCheck={false} | |
| 219 | - autoComplete="off" | |
| 220 | - label={__('Footer Text', 'code-block-pro')} | |
| 221 | - placeholder={languages[language]} | |
| 222 | - onChange={(footerString) => { | |
| 223 | - setAttributes({ footerString }); | |
| 224 | - }} | |
| 225 | - value={attributes.footerString ?? ''} | |
| 226 | - /> | |
| 227 | - </BaseControl> | |
| 228 | - )} | |
| 229 | - {showFooterLinkEdit && ( | |
| 230 | - <BaseControl id="code-block-pro-footer-link"> | |
| 231 | - <TextControl | |
| 232 | - id="code-block-pro-footer-link" | |
| 233 | - spellCheck={false} | |
| 234 | - type="url" | |
| 235 | - autoComplete="off" | |
| 236 | - label={__('Footer Link', 'code-block-pro')} | |
| 237 | - placeholder="https://example.com" | |
| 238 | - help={__( | |
| 239 | - 'Leave blank to disable', | |
| 240 | - 'code-block-pro', | |
| 241 | - )} | |
| 242 | - onChange={(footerLink) => { | |
| 243 | - setAttributes({ footerLink }); | |
| 244 | - }} | |
| 245 | - value={attributes.footerLink ?? ''} | |
| 246 | - /> | |
| 247 | - </BaseControl> | |
| 248 | - )} | |
| 249 | - {showFooterLinkTargetEdit && ( | |
| 250 | - <BaseControl id="code-block-pro-footer-link-target"> | |
| 251 | - <CheckboxControl | |
| 252 | - id="code-block-pro-footer-link-target" | |
| 253 | - label={__('Open in new tab?', 'code-block-pro')} | |
| 254 | - checked={attributes.footerLinkTarget} | |
| 255 | - onChange={(footerLinkTarget) => { | |
| 256 | - setAttributes({ footerLinkTarget }); | |
| 257 | - updateThemeHistory({ footerLinkTarget }); | |
| 258 | - }} | |
| 259 | - /> | |
| 260 | - </BaseControl> | |
| 261 | - )} | |
| 262 | 224 | <FooterSelect |
| 263 | 225 | attributes={attributes} |
| 264 | 226 | onClick={(footerType) => { |
| 265 | 227 | setAttributes({ footerType }); |
| 266 | - updateThemeHistory({ footerType }); | |
| 228 | + updateThemeHistory({ ...attributes, footerType }); | |
| 267 | 229 | }} |
| 268 | 230 | /> |
| 269 | 231 | </PanelBody> |
| 270 | - <SlotFactory | |
| 271 | - name="CodeBlockPro.Sidebar.Middle" | |
| 232 | + <ThemesPanel | |
| 272 | 233 | attributes={attributes} |
| 273 | 234 | setAttributes={setAttributes} |
| 274 | 235 | /> |
| 275 | - <ButtonsPanel | |
| 276 | - attributes={attributes} | |
| 277 | - setAttributes={setAttributes} | |
| 278 | - /> | |
| 279 | 236 | <PanelBody |
| 280 | - title={__('Font Styling', 'code-block-pro')} | |
| 237 | + title={__('Styling', 'code-block-pro')} | |
| 281 | 238 | initialOpen={false}> |
| 282 | 239 | <div |
| 283 | 240 | className="code-block-pro-editor" |
| 284 | 241 | data-cy="font-size-select"> |
| @@ -286,9 +243,9 @@ | ||
| 286 | 243 | <FontSizeSelect |
| 287 | 244 | value={attributes.fontSize} |
| 288 | 245 | onChange={(fontSize) => { |
| 289 | 246 | setAttributes({ fontSize }); |
| 290 | - updateThemeHistory({ fontSize }); | |
| 247 | + updateThemeHistory({ ...attributes, fontSize }); | |
| 291 | 248 | }} |
| 292 | 249 | /> |
| 293 | 250 | </div> |
| 294 | 251 | <div |
| @@ -300,9 +257,12 @@ | ||
| 300 | 257 | <FontLineHeightSelect |
| 301 | 258 | value={attributes.lineHeight} |
| 302 | 259 | onChange={(lineHeight) => { |
| 303 | 260 | setAttributes({ lineHeight }); |
| 304 | - updateThemeHistory({ lineHeight }); | |
| 261 | + updateThemeHistory({ | |
| 262 | + ...attributes, | |
| 263 | + lineHeight, | |
| 264 | + }); | |
| 305 | 265 | }} |
| 306 | 266 | /> |
| 307 | 267 | </div> |
| 308 | 268 | <div |
| @@ -311,9 +271,12 @@ | ||
| 311 | 271 | <FontFamilySelect |
| 312 | 272 | value={attributes.fontFamily} |
| 313 | 273 | onChange={(fontFamily) => { |
| 314 | 274 | setAttributes({ fontFamily }); |
| 315 | - updateThemeHistory({ fontFamily }); | |
| 275 | + updateThemeHistory({ | |
| 276 | + ...attributes, | |
| 277 | + fontFamily, | |
| 278 | + }); | |
| 316 | 279 | }} |
| 317 | 280 | /> |
| 318 | 281 | </div> |
| 319 | 282 | <div className="code-block-pro-editor" data-cy="clamp-fonts"> |
| @@ -318,9 +281,9 @@ | ||
| 318 | 281 | </div> |
| 319 | 282 | <div className="code-block-pro-editor" data-cy="clamp-fonts"> |
| 320 | 283 | <div className="mt-6"> |
| 321 | 284 | <CheckboxControl |
| 322 | - label={__('Clamp Font Sizes', 'code-block-pro')} | |
| 285 | + label={__('Clamp Values', 'code-block-pro')} | |
| 323 | 286 | help={__( |
| 324 | 287 | 'Check this if your font sizes are unusually large or tiny.', |
| 325 | 288 | 'code-block-pro', |
| 326 | 289 | )} |
| @@ -326,9 +289,12 @@ | ||
| 326 | 289 | )} |
| 327 | 290 | checked={attributes.clampFonts} |
| 328 | 291 | onChange={(clampFonts) => { |
| 329 | 292 | setAttributes({ clampFonts }); |
| 330 | - updateThemeHistory({ clampFonts }); | |
| 293 | + updateThemeHistory({ | |
| 294 | + ...attributes, | |
| 295 | + clampFonts, | |
| 296 | + }); | |
| 331 | 297 | }} |
| 332 | 298 | /> |
| 333 | 299 | </div> |
| 334 | 300 | </div> |
| @@ -339,96 +305,41 @@ | ||
| 339 | 305 | /> |
| 340 | 306 | <PanelBody |
| 341 | 307 | title={__('Extra Settings', 'code-block-pro')} |
| 342 | 308 | initialOpen={false}> |
| 343 | - <BaseControl id="code-block-pro-disable-padding"> | |
| 309 | + <BaseControl id="code-block-pro-show-copy-button"> | |
| 344 | 310 | <CheckboxControl |
| 345 | - data-cy="disable-padding" | |
| 346 | - label={__('Disable Padding', 'code-block-pro')} | |
| 311 | + data-cy="copy-button" | |
| 312 | + label={__('Copy Button', 'code-block-pro')} | |
| 347 | 313 | help={__( |
| 348 | - 'This is useful if you pick a theme that matches your background color, and want the code to line up to the edge of your content. You may need to add your own padding with CSS.', | |
| 314 | + 'If checked, users will be able to copy your code snippet to their clipboard.', | |
| 349 | 315 | 'code-block-pro', |
| 350 | 316 | )} |
| 351 | - checked={attributes.disablePadding} | |
| 352 | - onChange={(disablePadding) => { | |
| 353 | - setAttributes({ disablePadding }); | |
| 354 | - updateThemeHistory({ disablePadding }); | |
| 317 | + checked={attributes.copyButton} | |
| 318 | + onChange={(value) => { | |
| 319 | + setPreviousSettings({ copyButton: value }); | |
| 320 | + setAttributes({ copyButton: value }); | |
| 355 | 321 | }} |
| 356 | 322 | /> |
| 357 | 323 | </BaseControl> |
| 358 | - <BaseControl id="code-block-pro-decode-uri"> | |
| 324 | + <BaseControl id="code-block-pro-disable-padding"> | |
| 359 | 325 | <CheckboxControl |
| 360 | - data-cy="use-decode-uri" | |
| 361 | - label={__( | |
| 362 | - 'Encode special characters', | |
| 363 | - 'code-block-pro', | |
| 364 | - )} | |
| 326 | + data-cy="disable-padding" | |
| 327 | + label={__('Disable Padding', 'code-block-pro')} | |
| 365 | 328 | help={__( |
| 366 | - 'Select this to allow HTML entities such as < and > and others to be displayed. You may need to re-add the code after changing this', | |
| 329 | + 'This is useful if you pick a theme that matches your background color, and want the code to line up to the edge of your content. You maybe need to add your own padding with CSS.', | |
| 367 | 330 | 'code-block-pro', |
| 368 | 331 | )} |
| 369 | - checked={attributes.useDecodeURI} | |
| 370 | - onChange={(useDecodeURI) => { | |
| 371 | - setAttributes({ useDecodeURI }); | |
| 372 | - updateThemeHistory({ useDecodeURI }); | |
| 332 | + checked={attributes.disablePadding} | |
| 333 | + onChange={(disablePadding) => { | |
| 334 | + setAttributes({ disablePadding }); | |
| 335 | + updateThemeHistory({ | |
| 336 | + ...attributes, | |
| 337 | + disablePadding, | |
| 338 | + }); | |
| 373 | 339 | }} |
| 374 | 340 | /> |
| 375 | 341 | </BaseControl> |
| 376 | - <BaseControl id="code-block-pro-escape-shortcodes"> | |
| 377 | - <CheckboxControl | |
| 378 | - data-cy="use-escape-shortcodes" | |
| 379 | - label={__( | |
| 380 | - 'Escape WordPress shortcodes', | |
| 381 | - 'code-block-pro', | |
| 382 | - )} | |
| 383 | - help={__( | |
| 384 | - 'Select this to prevent php shortcodes from executing.', | |
| 385 | - 'code-block-pro', | |
| 386 | - )} | |
| 387 | - checked={attributes.useEscapeShortCodes} | |
| 388 | - onChange={(useEscapeShortCodes) => { | |
| 389 | - setAttributes({ useEscapeShortCodes }); | |
| 390 | - updateThemeHistory({ useEscapeShortCodes }); | |
| 391 | - }} | |
| 392 | - /> | |
| 393 | - </BaseControl> | |
| 394 | - <BaseControl id="code-block-pro-editor-tab-size"> | |
| 395 | - <TextControl | |
| 396 | - spellCheck={false} | |
| 397 | - autoComplete="off" | |
| 398 | - type="number" | |
| 399 | - data-cy="editor-tab-size" | |
| 400 | - label={__('Editor tab size', 'code-block-pro')} | |
| 401 | - help={__( | |
| 402 | - 'The number of spaces to insert when pressing tab key.', | |
| 403 | - 'code-block-pro', | |
| 404 | - )} | |
| 405 | - value={attributes.tabSize} | |
| 406 | - onChange={(size) => { | |
| 407 | - const tabSize = size ? Number(size) : undefined; | |
| 408 | - setAttributes({ tabSize }); | |
| 409 | - updateThemeHistory({ tabSize }); | |
| 410 | - }} | |
| 411 | - /> | |
| 412 | - <CheckboxControl | |
| 413 | - data-cy="use-tabs" | |
| 414 | - label={__('Use real tabs', 'code-block-pro')} | |
| 415 | - help={__( | |
| 416 | - 'Inserts an actual tab character instead of a space. The width defined above.', | |
| 417 | - 'code-block-pro', | |
| 418 | - )} | |
| 419 | - checked={attributes.useTabs} | |
| 420 | - onChange={(useTabs) => { | |
| 421 | - setAttributes({ useTabs }); | |
| 422 | - updateThemeHistory({ useTabs }); | |
| 423 | - }} | |
| 424 | - /> | |
| 425 | - </BaseControl> | |
| 426 | 342 | </PanelBody> |
| 427 | - <SlotFactory | |
| 428 | - name="CodeBlockPro.Sidebar.End" | |
| 429 | - attributes={attributes} | |
| 430 | - setAttributes={setAttributes} | |
| 431 | - /> | |
| 432 | 343 | </InspectorControls> |
| 433 | 344 | ); |
| 434 | 345 | }; |
