Skip to content

WordPress plugin to extends "Custom HTML block" to evolve into an advanced code editor

License

Notifications You must be signed in to change notification settings

t-hamano/custom-html-block-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Custom HTML Block Extension

Tests Tests and Deploy

Custom HTML Block Extension

Custom HTML Block Extension extends Custom HTML block to evolve into the advanced code editor.

Features

Various color themes

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

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

High customizability

You can change all kinds of settings to create your ideal editor in advanced mode.

More support

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

react-notifications-component

emmet-monaco-es

monaco-themes

webfontloader

Web Font (Fira Code)

Web Font (Source Code Pro)

Web Font (Ubuntu Mono)

Web Font (Anonymous Pro)

Author

Aki Hamano (Github)