Skip to content

Commit dda3894

Browse files
ajaydsouzaajaydsouza
committed
Add font size setting and convert frontend/editor styles to CSS custom properties
1 parent 674087d commit dda3894

10 files changed

Lines changed: 70 additions & 28 deletions

File tree

‎includes/admin/class-settings.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,13 @@ public static function get_registered_settings(): array {
198198
'field_class' => 'ts_autocomplete',
199199
'field_attributes' => self::get_language_field_attributes(),
200200
),
201+
array(
202+
'id' => 'font-size',
203+
'name' => __( 'Font Size (px)', 'webberzone-code-block-highlighting' ),
204+
'desc' => __( 'Font size for code blocks in pixels. Set to 0 to use the active theme default.', 'webberzone-code-block-highlighting' ),
205+
'type' => 'number',
206+
'default' => 0,
207+
),
201208
),
202209
);
203210
}

‎includes/blocks/build/frontend-rtl.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/build/frontend.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('wp-i18n'), 'version' => '977888425be90ca99d7c');
1+
<?php return array('dependencies' => array('wp-i18n'), 'version' => '4036175a2c5b3a5d9092');

‎includes/blocks/build/frontend.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/build/index-rtl.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/build/index.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '15b0c14e3de62fdf928e');
1+
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '898b90cc8da6ecf31634');

‎includes/blocks/build/index.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎includes/blocks/src/css/editor.css‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,28 @@
22
* Editor styles for WebberZone Code Block Highlighting.
33
*/
44

5+
:root {
6+
--wz-cbh-editor-font-family: Hack, 'Fira Code', Consolas, Menlo, Monaco,
7+
'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
8+
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
9+
'Nimbus Mono L', 'Courier New', Courier, monospace;
10+
--wz-cbh-editor-padding: 1em;
11+
--wz-cbh-editor-radius: 0.3em;
12+
--wz-cbh-label-font-size: 0.85rem;
13+
--wz-cbh-label-color: #333;
14+
--wz-cbh-label-bg: #eee;
15+
--wz-cbh-label-spacing: 8px;
16+
--wz-cbh-notice-color: #1e7e34;
17+
--wz-cbh-notice-font-size: 0.85em;
18+
}
19+
520
pre.wp-block-code {
6-
font-family: Hack, 'Fira Code', Consolas, Menlo, Monaco, 'Andale Mono',
7-
'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
8-
'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
9-
'Courier New', Courier, monospace;
10-
padding: 1em;
21+
font-family: var(--wz-cbh-editor-font-family);
22+
padding: var(--wz-cbh-editor-padding);
1123
margin-top: 0.5rem !important;
1224
margin-bottom: 1rem;
1325
overflow: auto;
14-
border-radius: 0.3em;
26+
border-radius: var(--wz-cbh-editor-radius);
1527
}
1628

1729
pre.wp-block-code code,
@@ -35,17 +47,17 @@ pre.wp-block-code.word-wrap .rich-text {
3547
.wz-cbh-block__labels {
3648
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
3749
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
38-
font-size: 0.85rem;
50+
font-size: var(--wz-cbh-label-font-size);
3951
margin-top: 1rem;
4052
margin-bottom: 0;
4153
text-align: left;
4254
}
4355

4456
.wz-cbh-block__labels span {
45-
padding: 8px;
46-
margin: 0 8px 0 0;
47-
color: #333;
48-
background-color: #eee;
57+
padding: var(--wz-cbh-label-spacing);
58+
margin: 0 var(--wz-cbh-label-spacing) 0 0;
59+
color: var(--wz-cbh-label-color);
60+
background-color: var(--wz-cbh-label-bg);
4961
}
5062

5163
.editor-styles-wrapper pre.wp-block-code code[contenteditable='true'] {
@@ -57,11 +69,11 @@ pre.wp-block-code.word-wrap .rich-text {
5769
.wz-cbh-save-default {
5870
display: flex;
5971
align-items: center;
60-
gap: 8px;
72+
gap: var(--wz-cbh-label-spacing);
6173
width: 100%;
6274
}
6375

6476
.wz-cbh-save-default__notice {
65-
font-size: 0.85em;
66-
color: #1e7e34;
67-
}
77+
font-size: var(--wz-cbh-notice-font-size);
78+
color: var(--wz-cbh-notice-color);
79+
}

‎includes/blocks/src/css/frontend.css‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22
* WebberZone Code Block Highlighting — Frontend utilities
33
*/
44

5+
:root {
6+
--wz-cbh-font-size: inherit;
7+
--wz-cbh-toolbar-color: #fff;
8+
--wz-cbh-toolbar-bg: rgba(0, 0, 0, 0.65);
9+
--wz-cbh-toolbar-bg-hover: rgba(0, 0, 0, 0.85);
10+
--wz-cbh-toolbar-outline: rgba(255, 255, 255, 0.6);
11+
--wz-cbh-toolbar-radius: 0.3em;
12+
--wz-cbh-toolbar-padding: 0.1em 0.5em;
13+
}
14+
515
#wz-cbh-copy-live-region {
616
border: 0;
717
clip: rect(1px, 1px, 1px, 1px);
@@ -15,6 +25,11 @@
1525
width: 1px;
1626
}
1727

28+
pre[class*='language-'],
29+
code[class*='language-'] {
30+
font-size: var(--wz-cbh-font-size);
31+
}
32+
1833
pre.word-wrap,
1934
pre.word-wrap code[class*='language-'] {
2035
white-space: pre-wrap;
@@ -32,11 +47,11 @@ pre.word-wrap code[class*='language-'] {
3247
div.code-toolbar > .toolbar > .toolbar-item > a,
3348
div.code-toolbar > .toolbar > .toolbar-item > button,
3449
div.code-toolbar > .toolbar > .toolbar-item > span {
35-
color: #fff;
36-
background: rgba(0, 0, 0, 0.65);
50+
color: var(--wz-cbh-toolbar-color);
51+
background: var(--wz-cbh-toolbar-bg);
3752
box-shadow: none;
38-
border-radius: 0.3em;
39-
padding: 0.1em 0.5em;
53+
border-radius: var(--wz-cbh-toolbar-radius);
54+
padding: var(--wz-cbh-toolbar-padding);
4055
}
4156

4257
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
@@ -45,8 +60,8 @@ div.code-toolbar > .toolbar > .toolbar-item > button:hover,
4560
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
4661
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
4762
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
48-
color: #fff;
49-
background: rgba(0, 0, 0, 0.85);
50-
outline: 2px solid rgba(255, 255, 255, 0.6);
63+
color: var(--wz-cbh-toolbar-color);
64+
background: var(--wz-cbh-toolbar-bg-hover);
65+
outline: 2px solid var(--wz-cbh-toolbar-outline);
5166
outline-offset: 1px;
5267
}

‎includes/frontend/class-styles-handler.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,14 @@ static function ( bool $carry, \WP_Post $post ): bool {
109109
'const cbhSettings = ' . wp_json_encode( $settings ) . ';',
110110
'before'
111111
);
112+
113+
$font_size = (int) wz_cbh_get_option( 'font-size', 0 );
114+
if ( $font_size > 0 ) {
115+
wp_add_inline_style(
116+
'wz-cbh-prism-css',
117+
':root { --wz-cbh-font-size: ' . $font_size . 'px; }'
118+
);
119+
}
112120
}
113121

114122
/**

0 commit comments

Comments
 (0)