Custom HTML Block Extension
Custom HTML Block Extension extends "Custom HTML block" to evolve into an advanced code editor.
Features
Various color themes
There are 50 different color themes to choose from, and you can select the one that best suits your taste.
Faster coding with Emmet
Emmet allows you to type shortcuts that are then expanded into full pieces of code. Type less, saving both keystrokes.
High customizability
You can change all kinds of settings to create your ideal editor in advanced mode.
More support
Supports the classic editor, the theme/plugin editor, import/export editor settings, and change indentation.
Add custom fonts
You can use your own favorite fonts in addition to the default fonts.
STEP1: Place font files
Place the font files in the public directory of the server where WordPress is installed.
It is recommended to create fonts
folder directly under the theme and place the fonts there.
Like this:
html
└── wp-content
└── themes
└── twentytwentyone
└── fonts
├── FantasqueSansMono-Bold.woff2
├── FantasqueSansMono-BoldItalic.woff2
├── FantasqueSansMono-Italic.woff2
├── FantasqueSansMono-Bold.woff2
└── FantasqueSansMono-Regular.woff2
STEP2: Create CSS file
Create a CSS file in order to load the placed fonts.
It is recommend to place the CSS file in css
folder directly under the theme, just as you did when you placed the font files.
Like this:
html
├── wp-content
│ └── themes
│ └── twentytwentyone
│ └── fonts
│ ├── FantasqueSansMono-Bold.woff2
│ ├── FantasqueSansMono-BoldItalic.woff2
│ ├── FantasqueSansMono-Italic.woff2
│ ├── FantasqueSansMono-Bold.woff2
│ └── FantasqueSansMono-Regular.woff2
└── css
└── cheb-fonts.css
STEP3: Define @font-face
Define the fonts using @font-face
in the CSS file you placed.
In the url
of the src
property, enter the relative path to the font you placed in STEP 1.
Like this:
@font-face {
font-family: "Fantasque Sans Mono";
src: url(../fonts/FantasqueSansMono-Regular.woff2) format("woff2");
font-weight: 300;
}
@font-face {
font-family: "Fantasque Sans Mono";
src: url(../fonts/FantasqueSansMono-Regular.woff2) format("woff2");
font-weight: 700;
}
@font-face {
font-family: "Fantasque Sans Mono Italic";
src: url(../fonts/FantasqueSansMono-Italic.woff2) format("woff2");
font-weight: 300;
}
@font-face {
font-family: "Fantasque Sans Mono Italic";
src: url(../fonts/FantasqueSansMono-BoldItalic.woff2) format("woff2");
font-weight: 700;
}
Note: This plugin does not support font-style: italic
. So name the font-family as a dedicated italic font if you want to use the italic fonts. You do not need to specify font-style: italic
instead.
STEP4: Add filter hook
Use chbe_additional_font_families
filter hook to define a custom font to load.
Fonts are defined individually in each array.
Put the following in functions.php
of your active theme.
function my_chbe_additional_font_families( $font_families ) {
$font_families = array(
// Normal Font
array(
'label' => 'Fantasque Sans Mono',
'name' => 'Fantasque Sans Mono',
'stylesheet' => get_template_directory_uri() . '/css/chbe-fonts.css',
'weight' => array( 300, 700 ),
),
// Italic Font
array(
'label' => 'Fantasque Sans Mono (Italic)',
'name' => 'Fantasque Sans Mono Italic',
'stylesheet' => get_template_directory_uri() . '/css/chbe-fonts.css',
'weight' => array( 300, 700 ),
),
);
return $font_families;
}
add_filter( 'chbe_additional_font_families', 'my_chbe_additional_font_families' );
Property description
Name | Type | Description |
---|---|---|
label | string | The label that appears in the font family pull-down in the plugin settings screen. |
name | string | Enter the value of the font-family property that you defined in the CSS file in STEP3. |
stylesheet | string | Describe the URL of the CSS file you placed in STEP2. We recommend using get_template_directory_uri function if you've placed the CSS file in the theme folder, |
weight | array | Write font weight variations according to the fonts defined in the CSS file. It is recommended to use numeric values 100 to 900 instead of weight names. |
STEP5: Sets custom font
Make sure that the custom font is displayed in the font family pull-down of the settings page. And the font is applied to the preview area when you select it.
How to build
$ npm install
$ npm run build
Resources
monaco-editor
- License: MIT License
- Source: https://github.com/microsoft/monaco-editor
react-notifications-component
- License: MIT License
- Source: https://github.com/teodosii/react-notifications-component
emmet-monaco-es
- License: MIT License
- Source: https://github.com/troy351/emmet-monaco-es
monaco-themes
- License: MIT License
- Source: https://github.com/brijeshb42/monaco-themes
webfontloader
- License: Apache-2.0 License
- Source: https://github.com/typekit/webfontloader
Web Font (Fira Code)
- License: OFL-1.1 License
- Source: https://github.com/tonsky/FiraCode
Web Font (Source Code Pro)
- License: OFL-1.1 License
- Source: https://github.com/adobe-fonts/source-code-pro
Web Font (Ubuntu Mono)
- License: OFL-1.1 License
- Source: https://ubuntu.com/legal/font-licence
Web Font (Anonymous Pro)
- License: OFL License
- Source: https://www.marksimonson.com/fonts/view/anonymous-pro