Gutenberg Editor version 5.7 has the button function by default, as well as some shape and color settings. In this article, Weieis notes are shared and added Gutenberg editor button And links.
In the days when there was no Gutenberg editor, when we needed buttons, we either added css code, used button plug-ins, or brought buttons with the theme. If you don't have high requirements for buttons, you can save a button plug-in.
1. Open an article or page at random, add a block, enter "button" as shown in the figure below, and click "multiple buttons".
2. Let's take the example of adding the AliCloud AliCloud website button link. Add text on the button and click the button to add the link.
Click the block where the button is located, set it to be centered, and copy multiple buttons to paste in the appropriate location.
After clicking the button, you can set the style, typesetting>font size, color (solid color and gradient color are optional) and width settings in the editing area on the right. In advanced, you can add the link rel, such as the norreferrer nooopener nofollow tag.
The customized buttons are as follows:
3. Add multiple buttons in the same row
The operation method is very simple. Just click the block on the right side of the current button, and then click the+sign. A button will appear, and then customize the settings as above.
If there are many buttons in the same line, you can set the width one by one to debug a more appropriate layout.
4. Some disadvantages of Gutenberg's editor buttons: In WordPress 5.7, you can also choose whether the button style is rectangular or rounded rectangular, but in WordPress 5.8, there is no such option.
In different language versions of WordPress (Chinese and English), the color and size of buttons may be different. Old Wei doesn't understand why. Fortunately, it does not have much impact on the effect display. Maybe later versions will solve this problem.
Gutenberg editor buttons are very versatile and can set many parameters. For coders, it eliminates the influence of custom CSS and plug-in installation. Interested friends can try it.
