Block Theme Integration

  • Resolved itsdavidmorgan

    (@itsdavidmorgan)


    1 year, 7 months ago

    Hello,

    I’m trying to integrate Dokan with a block theme. The dashboard and settings pages display properly in the block theme. However, vendor store pages are not displaying correctly. They appear to load a separate header and footer, and the styles are not translated.

    I’ve tried to replicate the template hierarchy in the theme, creating a “dokan” folder in the theme and adding a store.html file to customize. I used an HTML file since this is a block theme, but I’m not sure if Dokan requires a PHP template file for overriding the Dokan template files.

    Is there another way to ensure that vendor store pages load properly in a block theme?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter itsdavidmorgan

    (@itsdavidmorgan)

    Okay, I resolved this issue.

    The Dokan store.php template is searching for a PHP-based header and footer in the block theme. Since I’m developing a block theme, the template was not finding the files. To resolve this, I added the header.php and footer.php files to my block theme. Then, I called the header and footer block template parts within the PHP.

    Here is my header.php code:

    <?php
/**
* The Header for our theme.
* Displays all of the <head> section and wrapper blocks for PHP templates.
*
* @package Organic Rialto
* @since Organic Rialto 1.0
*/

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<?php

$header = do_blocks( '<!-- wp:template-part {"slug":"header","theme":"organic-rialto","tagName":"header","align":"full","className":"site-header"} /-->' );

$wrapper = do_blocks( '<!-- wp:group {"tagName":"main","align":"full","className":"site-main","layout":{"inherit":true}} --><main class="wp-block-group alignfull site-main"><!-- wp:group {"align":"full","layout":{"inherit":true,"type":"constrained"}} --><div class="wp-block-group alignfull">' );

?>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

if ( function_exists( 'wp_body_open' ) ) {

wp_body_open();

}

?>

<!-- BEGIN .wp-site-blocks -->

<div class="wp-site-blocks">

<?php echo $header; ?>

<?php echo $wrapper; ?>

    Here is my footer:

    <?php
/**
* The Header for our theme.
* Displays all of the <head> section and wrapper blocks for PHP templates.
*
* @package Organic Rialto
* @since Organic Rialto 1.0
*/

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<?php

$header = do_blocks( '<!-- wp:template-part {"slug":"header","theme":"organic-rialto","tagName":"header","align":"full","className":"site-header"} /-->' );

$wrapper = do_blocks( '<!-- wp:group {"tagName":"main","align":"full","className":"site-main","layout":{"inherit":true}} --><main class="wp-block-group alignfull site-main"><!-- wp:group {"align":"full","layout":{"inherit":true,"type":"constrained"}} --><div class="wp-block-group alignfull">' );

?>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php

if ( function_exists( 'wp_body_open' ) ) {

wp_body_open();

}

?>

<!-- BEGIN .wp-site-blocks -->

<div class="wp-site-blocks">

<?php echo $header; ?>

<?php echo $wrapper; ?>

    It’s best to create a variable for the do_blocks function above the <head> tag as outlined in this issue, https://github.com/WordPress/gutenberg/issues/40018#issuecomment-1109370224

    I hope this helps anybody trying to integrate Dokan with block themes.

Viewing 1 replies (of 1 total)
  • The topic ‘Block Theme Integration’ is closed to new replies.

Tags