[Naoko]

Hi,

I customized image caption by additional CSS before Gutenberg, as below;

/* Caption */
.wp-caption .wp-caption-text {
	color: black;
	font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	padding-left: 0;
}
/* Caption remove dash */
.wp-caption .wp-caption-text::before {
    content: "";
}

It worked very well before Gutenberg, however, it doesn’t work in Gutenberg block.

After upgrade to Catch Box 4.8.1, my blog’s captions of images in Gutenberg blocks changed to Catch Box’s default.
I expect that my customization works in Gutenberg, but it still doesn’t work.
On the other hand, classic box is OK.
Can I customize caption in Gutenberg block with Catch Box 4.8.1?

Sample of Gutenberg block…not change.
https://chokowalk.sakura.ne.jp/n02/ginkgo-biloba-of-tama-center/

Sample of Classic block…it is OK.
https://chokowalk.sakura.ne.jp/n02/enkakuji-ume/

[sapana]

@naoko-kaku: Go to=>Appearance=> Customize=> Additional CSS and add the following CSS code

.wp-block-image figcaption {
    color: black;
    font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Caption remove dash */
.wp-block-image figcaption:before {
    content: "" !important;
    
}
    
.wp-block-image {
    background-color: #eee;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0.4em;
    margin-bottom: 2em;
    max-width: 100%;
    padding: 9px;
}

.wp-block-image img{
    border: 0;
    padding: 0;
}

Let me know if this helps you out!

Kind Regards,
Sapana

[Naoko]

Hi, Sapana,

Thank you for your reply.
I added your CSS. It works partially.
Dash before caption is removed. Caption’s size becomes bigger.
But font are not changed to my favorite font.
I’d like to change font of caption to the same font of body.

I’ve just added one post to compare captions.
https://chokowalk.sakura.ne.jp/n02/caption-test/

Upper block is Gutenberg. I think that its caption’s font is not “Helvetica Neue.”
Lower block is classic. Classic block’s font are OK for me.

Can I change font of caption in Gutenberg as well?

[sapana]

@naoko-kaku: Go to=> Appearance=> Customize=> Additional CSS and add the following CSS code.

[class^="wp-block-"]:not(.wp-block-gallery) figcaption{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: black;
}

Let me know if this what you are looking for!

Kind Regards,
Sapana

[Naoko]

Hi, Sapana,

Perfect!
I’ve merged your suggestion with the previous one, such as;

[class^="wp-block-"]:not(.wp-block-gallery) figcaption{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: black;
    font-size: 16px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

It works very well. Gutenberg’s image caption’s font turns to “Helvetica Neue”.
https://chokowalk.sakura.ne.jp/n02/caption-test/

Thank you for your support!

[sapana]

@naoko-kaku: Glad to know that we figure it out. Merry Christmas!!

Kind Regards,
Sapana

[Author]

Posts