Starting with a New Block Theme for Full Site Editing (FSE)

Block theme is somehow simpler to create. One can just duplicate the default WordPress 2023 theme and change the name to your new theme, as you wish + change to your new theme name through the theme files. There is also a plugin that helps with this process called “Create Block Theme“. It allows automatic cloning of the active block theme (i.e. 2023 theme) with a new name. And you can embed new local fonts with this plugin too.

Caveats

Most of your settings now will reside in your theme.json file. In fact, the 2023 theme doesn’t have any functioning PHP files at all. So be prepared to edit this JSON file a lot. And you can’t put any comments into JSON + no random commas at the end of expressions are allowed. Or everything will fail.

New Editor

Important to know, that default theme template files will be saved into the database once you modify and save them in the editor. So i.e. after everything was set up and ready, we can write it down back to the theme files with the help of the “Create Block Theme” plugin again (needs to be tested yet).

Local Fonts

After you add some local fonts to your theme, they may not display correctly, because the code will look for local fonts on your computer/browser first. To avoid this rename your local font of the theme to some unique name to push the browser to use your uploaded font.

 "typography": {
            "dropCap": false,
            "fluid": true,
            "customFontSize": true,
            "fontFamilies": [{
                "fontFamily": "\"UniqueName Heebo\", sans-serif",
                "slug": "heebo",
                "name": "Heebo",
                "fontFace": [{
                        "fontFamily": "UniqueName Heebo",
                        "fontWeight": "300",
                        "fontStyle": "normal",
                        "fontDisplay": "swap",
                        "src": ["file:./assets/fonts/heebo_300.woff2"]
                    },
                    {
                        "fontFamily": "UniqueName Heebo",
                        "fontWeight": "400",
                        "fontStyle": "normal",
                        "fontDisplay": "swap",
                        "src": ["file:./assets/fonts/heebo_regular.woff2"]
                    }
                ]
            }],

Editor Default Headings Font Not Loading in RTL Mode

Because of a piece of the default RTL editor’s style by WordPress 6.2 Headings are not getting the default font family style. Can be fixed by adding it through editor-style.css which can be loaded into the theme from functions.php

if ( ! function_exists( 'iggy_theme_support' ) ) :
	function iggy_theme_support() {
		// Enqueue editor styles.
		add_editor_style( 'css/editor-style.css' );
    }
endif;
add_action( 'after_setup_theme', 'iggy_theme_support' );

And then in editor-style.css

/* Editor */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}

But better to resolve it from the theme.json in the styles/elements section to overwrite default RTL styles for Headings:

"h1": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "3.625rem",
          "lineHeight": "1.2"
          }
       },
"h2": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)",
          "lineHeight": "1.2"
          }
        },
"h3": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "var(--wp--preset--font-size--x-large)"
          }
        },
"h4": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "var(--wp--preset--font-size--large)"
          }
        },
"h5": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "var(--wp--preset--font-size--medium)",
          "fontWeight": "700",
          "textTransform": "uppercase"
          }
        },
"h6": {
       "typography": {
          "fontFamily": "var(--wp--preset--font-family--heebo)",
          "fontSize": "var(--wp--preset--font-size--medium)",
          "textTransform": "uppercase"
          }
       },

Notice added "fontFamily" value.

Functions.php and CSS files for a block theme

I’ve found it impossible to make my unique theme without CSS files and functions.php additions. But these files are really small compared with a regular wp theme.

Calling CSS Files with Version Timestamp to Avoid Caches

if ( ! function_exists( 'iggy_styles' ) ) :
	function iggy_styles() {

		// Register theme stylesheet.
		wp_register_style( 'iggy-style', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );

		// Enqueue theme stylesheet.
		wp_enqueue_style( 'iggy-style' );
	}

endif;
add_action( 'wp_enqueue_scripts', 'iggy_styles' );

// add version to rtl.css
add_filter( 'locale_stylesheet_uri', function ($localized_stylesheet_uri) {
    $time_ver = filemtime( get_stylesheet_directory() . '/rtl.css' );
    return add_query_arg( array('ver' => $time_ver), $localized_stylesheet_uri );
});

I’ve found it better not to replace the regular stylesheet with the RTL stylesheet, but to add additional RTL styles after the main style.css

Change Viewport Default Meta Tag and Add Color Theme for Mobile Browsers

I like my sites to cover the whole area on the iPhone screen in Landscape mode. So have to replace the viewport meta tag.

add_action('wp_head', function() {
	remove_action('wp_head', '_block_template_viewport_meta_tag', 0);
    echo '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">';
    echo '<meta name="theme-color" content="#050E2A">';
}, PHP_INT_MIN);

WPML Compatibility

Header and Footer Editing

At the time of writing (version 4.5.14 of WPML Multilingual CMS plugin) WPML wasn’t compatible with FSE mode. You can’t translate the header and footer directly in the new FSE editor. Translating the header and footer in another language from the editor won’t have any effect yet.

Create a header and footer in your default language, resave the template into the database, and go to WPML → Translation Management. Then WPML recommends choosing the Template or Template Parts post type from the dropdown menu and selecting the templates. In the WPML new editor, it translated only texts without an option to translate links.

I’ve had better results when switched to WPML Classic Edfitor and allowed templates and template parts to be translated in WPML Settings. Then gone to Translation Management, sent the needed translations, like Menus, Header, and Footer to the Translations Queue, and translated the whole header block, footer + all menus. Beware, the editor opens in visual mode, switch to text to see the HTML, copy, and finish the translation job. Also “translate” Image IDs for the logo etc, if they’re different for different languages.

You also should create menus in additional language versions to be able to translate them via Strings Translation or better from the Translations Queue. Beware that not finished translation jobs from the Queue won’t show in the menus, even while fully translated via the String Translation.

Update 13/11/23

I can now edit menus directly in the Editor navigation editing even per language. That’s great! Other parts of template parts are still only editable per the default language and will need a translation through WPML.

Images in Template Parts

Images can be translated from Media Translation under the WPML menu. This is useful if not using some SVG code or image ID. Just upload another image as a translation. It’s replacing the untranslated image and also updating image size and ALT text.

Language Switcher

For now, there is no dedicated language switcher block available, so you have to use a shortcode block to install a language switcher as a shortcode. I.e.:

[wpml_language_switcher flags=0 native=1 translated=0][/wpml_language_switcher]

Update 28/5/23

WPML already has a language switcher block for FSE with many options. But it needs a translation, as other header/footer parts, just duplicate the default language code. Cheers!

Update 8/5/25

Header and footer template parts are no longer editable from strings translation. I need to edit them in a newer WPML editor. But it’s not working well, it’s often duplicating header and footer template parts and leaves them unattached to custom templates for another language. Watch out for duplicated templates, menus, patterns and parts in the editor. I copied them to the default ones, and then they show as needed. Additional items I delete. This case solution helped me to overcome the issue. This is crazy

Woocommerce Compatibility

Woocommerce already has some blocks available, so there are no problems discovered by me yet.

The post Making Full Site Editing Block Theme for WordPress appeared first on Fix CSS Problems.

But then testing on iPhone’s Safari, where we have floating bars, you’ll see that the popup is not following the bottom line smoothly. It’s “jumping” with ugly delays.

Stick to Bottom Fix for Safari

I’ve investigated this issue for a long time. Plugin’s authors are explaining that the bottom position of a popup is always counted from the top. So it’s creating this problem on Mobile Safari.

Here’re my settings for the popup:

Here’s my code to make it smooth for a theme used.

.pum-theme-gdpr.pum-overlay.pum-overlay-disabled {
    position: static;
}
.pum-theme-gdpr .pum-container {
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    transform: translate3d(0, 0, 0) !important;
    transform-style: preserve-3d;
    transition: none !important;
}

.pum-theme-gdpr is my theme class, you can replace it with your theme class.

I’m switching the overlay container to a static position. Otherwise, its default fixed position will influence .pum-container inside.

Accessibility Tip

When the overlay is disabled, disable accessibility settings too, because by default Popup Maker will add aria-hidden="true" to the site content, that is an error, because without overlay site’s content still usable and it will create an accessibility error in the Lighthouse accessibility check.

The post Popup Maker Plugin: Make Popup Stick to Screen’s Bottom in Safari appeared first on Fix CSS Problems.

<?php 
// Display the content of the static Blog Page.
   $post = get_queried_object();
   setup_postdata( $post );
   the_content();
   wp_reset_postdata();
?>

Outputs editor’s content to the front-end. This is needed many times when we’ll need to insert some text or other blocks before the loop.

The post Get Blog Template Content Visible in WordPress appeared first on Fix CSS Problems.

Then I saw new available :focus-within pseudo-class, that is actually can select a parent element, the option that never before existed in CSS. So here’s my code, I’m using both placeholders and labels to show the labels as a tip.

Since we’ll be using absolute position, we need to make input surrounded element position: relative.

.hs-form-field {
	position: relative;
}

Then manipulate the label, show it only on focus with animation:

/* label animation */
.hs-form-field > label {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: 180ms ease-out 200ms;
}
.hs-form-field:focus-within > label {
    opacity: 1;
    top: -1rem;
    transition: 200ms ease-in;
}

The result can be something like below, the label is hidden, and then animates to the top. Make sure you leave enough space for that and for error messages between your form rows. This way you can have both placeholder and label, and they can be different, useful to provide additional tips to fill in the form.

The post Simple Form Labels Animation with CSS appeared first on Fix CSS Problems.

I’ve noticed the class .interface-interface-skeleton__editor is getting too wide on admin screen. I guess wide and full-width blocks are pushing it.

Adding max-width: 100%; is fixing the problem.

Since I use ACF Pro anyway, I’m adding this to functions.php of the theme:

// add some styles to ACF
add_action( 'acf/input/admin_footer', 'add_to_acf_styles' );
function add_to_acf_styles() { ?>
    <style>
        .interface-interface-skeleton__editor {
            max-width: 100%;
        }
    </style>
    <?php
}

It’s fixing the editor overflow of wide blocks.

Here you may read more on the issue.

The post Updating to WordPress 5.6 for Blocks Based Theme Fix appeared first on Fix CSS Problems.

‘loading’ => eager worked instead. It goes like this, when I use ACF Pro loaded image with ID option:

<?php
$tab_image = get_sub_field( 'tab_image' );
$size = 'medium';
$loading = ['loading' => 'eager'];

if ( $tab_image ) {
echo wp_get_attachment_image( $tab_image, $size, false, $loading );
}
?>

It’s important to add false before $loading, or it’ll not work either.

Also possible to write it directly:

echo wp_get_attachment_image( $front_image, $size, false, [
'class' => 'some-class some-other-class', 
'loading' => 'eager'
] );

Now it’s stopping lazy loading for wp_get_attachment_image.

As mentioned here.

The post Disable WordPress 5.5 Lazy Loading Image when Using wp_get_attachment_image() appeared first on Fix CSS Problems.

Here I needed to animate from solid color to gradient.

First I’m making background-size: 400% 400%, and then can easily create linear-gradients with initial color and hover color together. Like so:

.nav-menu a {
  color: #3c3d42;
  background-color: #3c3d42;
  background: linear-gradient(80deg, #ff2453 0%, #a21da6 25%, #3c3d42 75%) no-repeat 100% 100%;
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 300ms ease-in-out 5ms;
}
.nav-menu a:hover, .nav-menu a:active, .nav-menu .current-menu-item a {
  background: linear-gradient(90deg, #ff2453 0%, #a21da6 25%, #3c3d42 75%) no-repeat 100% 0%;
  background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% 400%
}

You can play more with gradient angle etc. Works great.

The post Transition Animation of CSS Gradient for background-clip: text appeared first on Fix CSS Problems.

Otherwise, Visual Composer inline CSS will not show when the translated page is published. It will still show on Preview Page. Weird, but true.

I.e. For Hebrew you may need to change alignment and padding of elements. It breaks the page if Page Builder’s inline CSS translation is not enabled

Bonus: Custom XML Configuration

Some, not fully checked yet, WPML “Custom XML Configuration” settings for Yoast SEO and WP Bakery Page Builder. Includes translations of Raw HTML widget + Yoast Breadcrumbs configuration for WPML.

<wpml-config>
    <shortcodes>
        <shortcode>
            <tag encoding="base64">vc_raw_html</tag>
        </shortcode>
    </shortcodes>
    <custom-fields>
        <custom-field action="translate">_yoast_wpseo_title</custom-field>
        <custom-field action="translate">_yoast_wpseo_bctitle</custom-field>
        <custom-field action="translate">_yoast_wpseo_metadesc</custom-field>
        <custom-field action="translate">_yoast_wpseo_metakeywords</custom-field>
        <custom-field action="translate">_yoast_wpseo_focuskw</custom-field>
        <custom-field action="translate">_yoast_wpseo_focuskeywords</custom-field>
        <custom-field action="copy">_yoast_wpseo_meta-robots-noindex</custom-field>
        <custom-field action="copy">_yoast_wpseo_meta-robots-nofollow</custom-field>
        <custom-field action="copy">_yoast_wpseo_meta-robots-adv</custom-field>
        <custom-field action="ignore">_yoast_wpseo_canonical</custom-field>
        <custom-field action="ignore">_yoast_wpseo_redirect</custom-field>
        <custom-field action="translate">_yoast_wpseo_opengraph-description</custom-field>
        <custom-field action="translate">_yoast_wpseo_google-plus-description</custom-field>
        <custom-field action="translate">_yoast_wpseo_twitter-title</custom-field>
        <custom-field action="translate">_yoast_wpseo_twitter-description</custom-field>
        <custom-field action="translate">_yoast_wpseo_opengraph-title</custom-field>
        <custom-field action="copy-once">_yoast_wpseo_opengraph-image</custom-field>
        <custom-field action="copy-once">_yoast_wpseo_twitter-image</custom-field>
    </custom-fields>
    <custom-fields-texts>
        <key name="_yoast_wpseo_focuskeywords">
            <key name="*">
                <key name="keyword"/></key>
        </key>
    </custom-fields-texts>
    <admin-texts>
        <key name="wpseo_titles">
            <key name="title-*"/>
            <key name="metadesc-*"/>
            <key name="metakey-*"/>
            <key name="company_name"/>
            <key name="breadcrumbs-sep"/>
            <key name="breadcrumbs-home"/>
            <key name="breadcrumbs-prefix"/>
            <key name="breadcrumbs-archiveprefix"/>
            <key name="breadcrumbs-searchprefix"/>
            <key name="breadcrumbs-404crumb"/></key>
        <key name="wpseo_rss">
            <key name="rssbefore"/>
            <key name="rssafter"/></key>
        <key name="wpseo_social">
            <key name="og_default_image"/>
            <key name="og_frontpage_title"/>
            <key name="og_frontpage_desc"/>
            <key name="og_frontpage_image"/></key>
    </admin-texts>
</wpml-config>

May not be needed, but may help to some versions of plugin.

The post WP Bakery Page Builder and WPML Manual Translation Settings appeared first on Fix CSS Problems.