Merge pull request #41 from KevinBatdorf/add-padding-disable-option

Add option to disable padding

README.md

@@ -6,10 +6,16 @@ View this block plugin [on WordPress.org](https://wordpress.org/plugins/code-blo
 
 ## Features
 - Includes 28 themes built in to choose from.
-- Supports over 140 languages
+- Supports over 140 programming languages
+- Optionally load programming fonts
+- Various header styles (more coming soon)
 - Optionally add a copy button to let users copy the code
+- Native Gutenberg block output - no special requirements
+- No frontend JavaScript required - works in headless mode
+- Supports converting from the default code block
 
 
 ## Example Screenshots
-![alt text](.wordpress-org/screenshot-1.gif "Example")
-![alt text](.wordpress-org/screenshot-2.png "Example 2")
+![alt text](.wordpress-org/screenshot-1.png "Example")
+![alt text](.wordpress-org/screenshot-2.gif "Example 2")
+![alt text](.wordpress-org/screenshot-3.png "Example 3")

php/settings.php

@@ -18,6 +18,8 @@ function code_block_pro_register_settings() {
  'previousFontSize' => [ 'type' => ['string', 'null']],
  'previousLineHeight' => [ 'type' => ['string', 'null']],
  'previousHeaderType' => [ 'type' => ['string', 'null']],
+ 'previousClampFonts' => [ 'type' => ['boolean', 'null']],
+ 'previousDisablePadding' => [ 'type' => ['boolean', 'null']],
  ],
  ],
  ],

readme.txt

@@ -212,13 +212,16 @@ Look under the "Styling" tab and turn on "Clamp Values", which will compute the
 
 == Screenshots ==
 
-1. Choose from more than 25 themes
-2. Customize fonts, themes, and behavior
+1. Choose from more than 25 themes.
+2. Customize fonts, themes, and behavior.
+3. Example showing light theme with padding disabled.
 
 == Changelog ==
 
 = 1.5.1 - 2022-09-05 =
+- Tweak: Allow users to disable padding
 - Fix: Fixes a bug where the header type set to none doesn't persist
+- Fix: Clamp font settings were not being persisted
 
 = 1.5.0 - 2022-09-05 =
 - Feature: Add toggle so users can clamp font sizes to reasonable values.

src/block.json

@@ -20,6 +20,7 @@
  "lineNumbers": { "type": "boolean" },
  "clampFonts": { "type": "boolean", "default": false },
  "headerType": { "type": "string" },
+ "disablePadding": { "type": "boolean", "default": false },
  "startingLineNumber": { "type": "number", "default": 1 },
  "frame": { "type": "boolean" },
  "renderType": { "type": "string", "default": "code" },

src/editor/Edit.tsx

@@ -18,6 +18,7 @@ export const Edit = ({
  code = '',
  bgColor: backgroundColor,
  textColor: color,
+ disablePadding,
  } = attributes;
  const textAreaRef = useRef<HTMLDivElement>(null);
  const handleChange = (code: string) => setAttributes({ code });
@@ -72,7 +73,7 @@ export const Edit = ({
  <Editor
  value={code}
  onValueChange={handleChange}
- padding={16}
+ padding={disablePadding ? 0 : 16}
  style={{ backgroundColor, color }}
  // eslint-disable-next-line
  onKeyDown={(e: any) =>

src/editor/controls/Sidebar.tsx

@@ -151,18 +151,37 @@ export const SidebarControls = ({
  <PanelBody
  title={__('Extra Settings', 'code-block-pro')}
  initialOpen={false}>
- <CheckboxControl
- label={__('Copy Button', 'code-block-pro')}
- help={__(
- 'If checked, users will be able to copy your code snippet to their clipboard.',
- 'code-block-pro',
- )}
- checked={attributes.copyButton}
- onChange={(value) => {
- setPreviousSettings({ copyButton: value });
- setAttributes({ copyButton: value });
- }}
- />
+ <BaseControl id="code-block-pro-show-copy-button">
+ <CheckboxControl
+ label={__('Copy Button', 'code-block-pro')}
+ help={__(
+ 'If checked, users will be able to copy your code snippet to their clipboard.',
+ 'code-block-pro',
+ )}
+ checked={attributes.copyButton}
+ onChange={(value) => {
+ setPreviousSettings({ copyButton: value });
+ setAttributes({ copyButton: value });
+ }}
+ />
+ </BaseControl>
+ <BaseControl id="code-block-pro-disable-padding">
+ <CheckboxControl
+ label={__('Disable Padding', 'code-block-pro')}
+ help={__(
+ '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.',
+ 'code-block-pro',
+ )}
+ checked={attributes.disablePadding}
+ onChange={(disablePadding) => {
+ setAttributes({ disablePadding });
+ updateThemeHistory({
+ ...attributes,
+ disablePadding,
+ });
+ }}
+ />
+ </BaseControl>
  </PanelBody>
  </InspectorControls>
  );

src/front/BlockOutput.tsx

@@ -7,7 +7,11 @@ import './style.css';
 
 export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
  <div
- {...blockProps.save()}
+ {...blockProps.save({
+ className: attributes.disablePadding
+ ? 'padding-disabled'
+ : undefined,
+ })}
  data-code-block-pro-font-family={attributes.fontFamily}
  style={{
  fontSize: maybeClamp(attributes.fontSize, attributes.clampFonts),

src/front/style.css

@@ -19,6 +19,9 @@
  font-family: inherit;
  @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none;
 }
+.wp-block-kevinbatdorf-code-block-pro.padding-disabled pre {
+ padding: 0;
+}
 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
  border: 0;
  background: none;

src/index.tsx

@@ -2,6 +2,7 @@ import { useBlockProps as blockProps } from '@wordpress/block-editor';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { Lang } from 'shiki';
 import blockConfig from './block.json';
 import { Edit } from './editor/Edit';
@@ -34,6 +35,7 @@ registerBlockType<Attributes>(blockConfig.name, {
  clampFonts: { type: 'boolean', default: false },
  lineNumbers: { type: 'boolean' },
  headerType: { type: 'string' },
+ disablePadding: { type: 'boolean', default: false },
  startingLineNumber: { type: 'number', default: 1 },
  frame: { type: 'boolean' },
  renderType: { type: 'string', default: 'code' },
@@ -58,7 +60,9 @@ registerBlockType<Attributes>(blockConfig.name, {
  />
  <div
  {...blockProps({
- className: 'code-block-pro-editor',
+ className: classnames('code-block-pro-editor', {
+ 'padding-disabled': attributes.disablePadding,
+ }),
  style: {
  fontSize: maybeClamp(
  attributes.fontSize,

src/state/theme.ts

@@ -10,6 +10,7 @@ type ThemeType = {
  previousFontSize: string;
  previousHeaderType: string;
  previousClampFonts: boolean;
+ previousDisablePadding: boolean;
  updateThemeHistory: (settings: Partial<Attributes>) => void;
 };
 const path = '/wp/v2/settings';
@@ -29,6 +30,7 @@ export const useThemeStore = create<ThemeType>()(
  previousFontSize: '.875rem',
  previousHeaderType: 'headlights',
  previousClampFonts: false,
+ previousDisablePadding: false,
  updateThemeHistory(attributes) {
  set((state) => ({
  ...state,
@@ -38,6 +40,7 @@ export const useThemeStore = create<ThemeType>()(
  previousFontSize: attributes.fontSize,
  previousHeaderType: attributes.headerType,
  previousClampFonts: attributes.clampFonts,
+ previousDisablePadding: attributes.disablePadding,
  }));
  },
  }),

src/types.ts

@@ -14,6 +14,7 @@ export type Attributes = {
  lineNumbers: boolean;
  clampFonts: boolean;
  headerType: string;
+ disablePadding: boolean;
  startingLineNumber: number;
  frame: boolean;
  renderType: string;