Plugin Directory

Changeset 3402170


Ignore:
Timestamp:
11/25/2025 03:10:28 AM (4 months ago)
Author:
kasuga16
Message:
  • Added support for limiting code block height by line count.
  • Added a Custom CSS option, allowing users to apply their own CSS to further style the copy button or code blocks.
Location:
stick-copy-button-codeblock
Files:
9 added
5 edited

Legend:

Unmodified
Added
Removed
  • stick-copy-button-codeblock/trunk/languages/stick-copy-button-codeblock-ja.po

    r3396543 r3402170  
    11msgid ""
    22msgstr ""
    3 "Project-Id-Version: Sticky Copy Button for Code Blocks 1.1.0\n"
     3"Project-Id-Version: Sticky Copy Button for Code Blocks 1.2.0\n"
    44"Report-Msgid-Bugs-To: \n"
    5 "POT-Creation-Date: 2025-11-16 10:36:55+0000\n"
    6 "PO-Revision-Date: 2025-11-16 10:37:00+0000\n"
    7 "Last-Translator: myblog <harunotayori@gmail.com>\n"
     5"POT-Creation-Date: 2025-11-25 02:57:38+0000\n"
     6"PO-Revision-Date: 2025-11-25 03:01:12+0000\n"
     7"Last-Translator: Kasuga\n"
    88"Language-Team: \n"
    99"Language: ja\n"
     
    2828msgid "Sticky Copy Button"
    2929msgstr "Sticky Copy Button"
     30
     31msgid "Enter any custom CSS to further style the copy button or code blocks. This CSS will be loaded on the frontend.\n\n* Usable Selectors:\n\n.copy-code-btn          → The copy button\n.copy-code-btn.copied   → The button after copying\n.code-block-wrapper     → Wrapper of the code block (position: relative)\n.code-block-wrapper pre → Inner code text area (the <pre> element)\n\nExample:\n\n.copy-code-btn {\n    font-family: \"Comic Sans MS\", cursive;\n    font-weight: 700;\n}"
     32msgstr "コピー用ボタンやコードブロックのスタイルをさらにカスタマイズするための任意のCSSを入力してください。このCSSはフロントエンドで読み込まれます。\n\n使用可能なセレクタ:\n\n.copy-code-btn          → コピー用ボタン\n.copy-code-btn.copied   → コピー後のボタン\n.code-block-wrapper     → コードブロックのラッパー(position: relative)\n.code-block-wrapper pre → 内部のコード表示領域(<pre> 要素)\n\n例:\n\n.copy-code-btn {\n    font-family: \"Comic Sans MS\", cursive;\n    font-weight: 700;\n}"
    3033
    3134msgid "Adjust button top position (px)"
     
    6568msgstr "有効にする"
    6669
     70msgid "*** Other settings"
     71msgstr "*** ボタン以外の設定"
     72
     73msgid "Code block max lines (lines)"
     74msgstr "コードブロック最大行数(行)"
     75
     76msgid "Set max height in lines. Enter 0 or leave empty for no limit."
     77msgstr "最大行数を設定します。制限なしにする場合は 0 を入力するか空欄のままにしてください。"
     78
     79msgid "Custom Styles (CSS)"
     80msgstr "カスタムスタイル(CSS)"
     81
    6782msgid "Save Changes"
    6883msgstr "変更を保存"
  • stick-copy-button-codeblock/trunk/languages/stick-copy-button-codeblock.pot

    r3396543 r3402170  
    11msgid ""
    22msgstr ""
    3 "Project-Id-Version: Sticky Copy Button for Code Blocks 1.1.0\n"
     3"Project-Id-Version: Sticky Copy Button for Code Blocks 1.2.0\n"
    44"Report-Msgid-Bugs-To: \n"
    5 "POT-Creation-Date: 2025-11-16 10:36:55+0000\n"
     5"POT-Creation-Date: 2025-11-25 02:57:38+0000\n"
    66"PO-Revision-Date: \n"
    77"Last-Translator: \n"
     
    2727
    2828msgid "Sticky Copy Button"
     29msgstr ""
     30
     31msgid "Enter any custom CSS to further style the copy button or code blocks. This CSS will be loaded on the frontend.\n\n* Usable Selectors:\n\n.copy-code-btn          → The copy button\n.copy-code-btn.copied   → The button after copying\n.code-block-wrapper     → Wrapper of the code block (position: relative)\n.code-block-wrapper pre → Inner code text area (the <pre> element)\n\nExample:\n\n.copy-code-btn {\n    font-family: \"Comic Sans MS\", cursive;\n    font-weight: 700;\n}"
    2932msgstr ""
    3033
     
    6568msgstr ""
    6669
     70msgid "*** Other settings"
     71msgstr ""
     72
     73msgid "Code block max lines (lines)"
     74msgstr ""
     75
     76msgid "Set max height in lines. Enter 0 or leave empty for no limit."
     77msgstr ""
     78
     79msgid "Custom Styles (CSS)"
     80msgstr ""
     81
    6782msgid "Save Changes"
    6883msgstr ""
  • stick-copy-button-codeblock/trunk/readme.txt

    r3396543 r3402170  
    55Requires PHP: 7.4
    66Tested up to: 6.8
    7 Stable tag: 1.1.0
     7Stable tag: 1.2.0
    88License: GPLv2 or later
    99License URI: http://www.gnu.org/licenses/gpl-2.0.html
     
    4646It supports code blocks marked up in the `pre > code` format.
    4747
     48= Can I control the height of the code blocks? =
     49Yes, you can set a **maximum height by specifying the number of lines** in the plugin settings. If the content exceeds this height, a **vertical scroll bar** will automatically appear.
     50
     51= Can I add custom styles? =
     52Yes, you can enter custom CSS to further style the copy button or code blocks in the **Custom Styles (CSS)** section of the settings menu.
     53Any CSS added here will be applied on the frontend.
     54
     55- Usable Selectors:
     56**.copy-code-btn** → The copy button
     57**.copy-code-btn.copied**  → The button after Copying
     58**.code-block-wrapper**  → Wrapper of the code block (position: relative)
     59**.code-block-wrapper pre** → Inner code text area (the &lt;pre&gt; element)
     60
     61- Example:
     62&nbsp;`.copy-code-btn {`
     63&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`font-family: "Comic Sans MS", cursive;`
     64&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`font-weight: 700;`
     65&nbsp;`}`
     66
    4867== Screenshots ==
    49681. Plugin settings screen
     
    5170
    5271== Changelog ==
     72= 1.2.0 =
     73* Added support for limiting code block height by line count.
     74* Added a Custom CSS option, allowing users to apply their own CSS to further style the copy button or code blocks.
     75
    5376= 1.1.0 =
    5477* Changed button size adjustment from size selector to numeric input.
  • stick-copy-button-codeblock/trunk/stick-copy-button-codeblock.php

    r3396543 r3402170  
    33 * Plugin Name: Sticky Copy Button for Code Blocks
    44 * Description: This plugin adds a convenient copy button to every code block on your blog posts. Customize the button's position, labels, size, and colors from a dedicated settings page to match your site's design.
    5  * Version: 1.1.0
     5 * Version: 1.2.0
    66 * Author: Kasuga
    77 * License: GPLv2 or later
    8  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
     8 * License URI: http://www.gnu.gnu.org/licenses/gpl-2.0.html
    99 * Text Domain: stick-copy-button-codeblock
    1010 * Domain Path: /languages
     
    4747    register_setting( 'kasuga_scbc-settings-group', 'kasuga_scbc_button_text_color', 'kasuga_scbc_sanitize_hex_color' );
    4848    register_setting( 'kasuga_scbc-settings-group', 'kasuga_scbc_button_bg_transparent', 'kasuga_scbc_sanitize_checkbox' );
     49    register_setting( 'kasuga_scbc-settings-group', 'kasuga_scbc_max_height', 'intval' );
     50    register_setting( 'kasuga_scbc-settings-group', 'kasuga_scbc_custom_styles', 'kasuga_scbc_sanitize_custom_styles' );
    4951}
    5052add_action( 'admin_init', 'kasuga_scbc_register_settings' );
     
    6870function kasuga_scbc_sanitize_checkbox( $input ) {
    6971    return '1' === $input ? '1' : '';
     72}
     73
     74/**
     75 * Sanitizes custom CSS styles input.
     76 *
     77 * This function is designed to sanitize raw CSS input, allowing
     78 * CSS properties and simple class definitions. It attempts to remove
     79 * potentially dangerous scripts or HTML that might be injected.
     80 *
     81 * @param string $input Raw CSS string.
     82 * @return string Sanitized CSS string.
     83 */
     84function kasuga_scbc_sanitize_custom_styles( $input ) {
     85    $input         = wp_strip_all_tags( $input );
     86    $sanitized_css = wp_kses_post( $input );
     87
     88    return $sanitized_css;
    7089}
    7190
     
    7897    $button_size    = get_option( 'kasuga_scbc_button_size', 12 );
    7998    $bg_transparent = get_option( 'kasuga_scbc_button_bg_transparent', false );
     99    $max_lines      = get_option( 'kasuga_scbc_max_height', 0 );
     100    $custom_styles  = get_option( 'kasuga_scbc_custom_styles', '' );
     101
     102    $css_sample_placeholder = __( "Enter any custom CSS to further style the copy button or code blocks. This CSS will be loaded on the frontend.\n\n* Usable Selectors:\n\n.copy-code-btn          → The copy button\n.copy-code-btn.copied   → The button after copying\n.code-block-wrapper     → Wrapper of the code block (position: relative)\n.code-block-wrapper pre → Inner code text area (the <pre> element)\n\nExample:\n\n.copy-code-btn {\n    font-family: \"Comic Sans MS\", cursive;\n    font-weight: 700;\n}", 'stick-copy-button-codeblock' );
     103
    80104    ?>
    81105    <div class="wrap">
     
    127151                            <?php esc_html_e( 'Enable', 'stick-copy-button-codeblock' ); ?>
    128152                        </label>
     153                    </td>
     154                </tr>
     155                <tr>
     156                    <th>
     157                        <h3><?php esc_html_e( '*** Other settings', 'stick-copy-button-codeblock' ); ?></h3>
     158                    </th>
     159                </tr>
     160                <tr>
     161                    <th scope="row"><?php esc_html_e( 'Code block max lines (lines)', 'stick-copy-button-codeblock' ); ?></th>
     162                    <td>
     163                        <input type="number" name="kasuga_scbc_max_height" value="<?php echo esc_attr( $max_lines ); ?>" min="0" step="1" />
     164                        <p class="description"><?php esc_html_e( 'Set max height in lines. Enter 0 or leave empty for no limit.', 'stick-copy-button-codeblock' ); ?></p>
     165                    </td>
     166                </tr>
     167                <tr>
     168                    <th scope="row"><?php esc_html_e( 'Custom Styles (CSS)', 'stick-copy-button-codeblock' ); ?></th>
     169                    <td>
     170                        <textarea name="kasuga_scbc_custom_styles" rows="2" class="large-text code" placeholder="<?php echo esc_attr( $css_sample_placeholder ); ?>"><?php echo esc_textarea( $custom_styles ); ?></textarea>
    129171                    </td>
    130172                </tr>
     
    151193        'text_color'     => esc_js( get_option( 'kasuga_scbc_button_text_color', '#4caf50' ) ),
    152194        'bg_transparent' => ( '1' === get_option( 'kasuga_scbc_button_bg_transparent', false ) ),
     195        'max_lines'      => intval( get_option( 'kasuga_scbc_max_height', 0 ) ),
    153196    );
    154197
    155198    $final_bg = $settings['bg_transparent'] ? 'transparent' : $settings['bg_color'];
     199
     200    $max_height_css = '';
     201    if ( $settings['max_lines'] > 0 ) {
     202        $line_height_em  = 1.5;
     203        $max_height_calc = $line_height_em * intval( $settings['max_lines'] );
     204
     205        $max_height_css = '
     206        .code-block-wrapper pre {
     207            max-height: ' . esc_html( $max_height_calc ) . 'em !important;
     208            overflow-y: auto !important;
     209        }';
     210    }
    156211
    157212    $css = '
     
    159214    .code-block-wrapper { position: relative; padding-right: 50px; margin-bottom: 1em; }
    160215    .code-block-wrapper pre { position: static; padding-top: 0; margin-bottom: 0; }
     216    ' . $max_height_css . '
    161217    .copy-code-btn {
    162218        position: absolute;
     
    187243    }';
    188244
    189     wp_register_style( 'kasuga_scbc-style', false, array(), '1.1.0' );
     245    wp_register_style( 'kasuga_scbc-style', false, array(), '1.3.0' );
    190246    wp_enqueue_style( 'kasuga_scbc-style' );
    191247    wp_add_inline_style( 'kasuga_scbc-style', $css );
     248
     249    $custom_styles_from_options = get_option( 'kasuga_scbc_custom_styles', '' );
     250    if ( ! empty( $custom_styles_from_options ) ) {
     251        wp_add_inline_style( 'kasuga_scbc-style', $custom_styles_from_options );
     252    }
    192253
    193254    $js_script = '
    194255    document.addEventListener("DOMContentLoaded", () => {
    195256        const settings = kasuga_scbc_vars;
    196 
    197         document.querySelectorAll("pre > code").forEach(codeBlock => {
     257        document.querySelectorAll("pre code, pre.wp-block-code code").forEach(codeBlock => {
    198258            const preElement = codeBlock.parentNode;
     259            if (preElement.closest(".code-block-wrapper")) {
     260                return;
     261            }
     262
    199263            const wrapper = document.createElement("div");
    200264            wrapper.className = "code-block-wrapper";
     265
    201266            preElement.parentNode.insertBefore(wrapper, preElement);
    202267            wrapper.appendChild(preElement);
     
    225290    });';
    226291
    227     wp_register_script( 'kasuga_scbc-script', false, array(), '1.1.0', true );
     292    wp_register_script( 'kasuga_scbc-script', false, array(), '1.3.0', true );
    228293    wp_localize_script( 'kasuga_scbc-script', 'kasuga_scbc_vars', $settings );
    229294    wp_add_inline_script( 'kasuga_scbc-script', $js_script );
     
    260325        'kasuga_scbc_button_text_color',
    261326        'kasuga_scbc_button_bg_transparent',
     327        'kasuga_scbc_max_height',
     328        'kasuga_scbc_custom_styles',
    262329    );
    263330
Note: See TracChangeset for help on using the changeset viewer.