Free Sizzling Sevens slot machines.REGISTER NOW GET FREE 888 PESOS REWARDS!

(@rhand)

I use the following to display three columns on desktop, two on tablet and one on mobile

/* Three columns on desktop */
.drinks .wp-block-columns,
.food .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 20px; /* Adjust the gap between columns as needed */
}

/* Two columns on tablets */
@media (max-width: 1024px) {
  .drinks .wp-block-columns,
  .food .wp-block-columns {
      grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  }
}

/* One column on mobile */
@media (max-width: 767px) {
  .drinks .wp-block-columns,
  .food .wp-block-columns {
      grid-template-columns: 1fr; /* One column (stacked) */
  }
}

And for all I added page classes for specificity and it works. But for the editor preview tablet I still see only one column even though I am using

/* Desktop: Three columns */
.editor-styles-wrapper .wp-block-columns {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 20px; /* Adjust the gap between columns */
  }
  
  .editor-styles-wrapper .wp-block-columns .wp-block-column {
    flex: 1 1 calc(33.333% - 20px); /* Three equal columns */
  }
  
  /* Tablets: Two columns */
  @media (max-width: 1024px) {
    .editor-styles-wrapper .wp-block-columns {
      flex-wrap: wrap; /* Allow wrapping for smaller screens */
    }
    
    .editor-styles-wrapper .wp-block-columns .wp-block-column {
      flex: 1 1 calc(50% - 20px); /* Two equal columns */
    }
  }
  
  /* Mobile: One column */
  @media (max-width: 767px) {
    .editor-styles-wrapper .wp-block-columns .wp-block-column {
      flex: 1 1 100%; /* Full width for single column */
    }
  }

How can I get editor tablet preview to also show two columns?

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter

Rhand

(@rhand)

5 months ago

It seems for iframe display you need to use enqueue_block_editor_assets but when I use

add_action('enqueue_block_assets', function () {
    bundle('editor')->enqueue();
}, 100);

instead of

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
}, 100);

I lose all font styling in the block editor for all views, not just tablet and mobile alone. But the editor.css is enqueued in bud.conf.js

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/sage/docs sage documentation}
 * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/cafejp/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/reference/bud.setUrl}
   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
   * @see {@link https://bud.js.org/reference/bud.watch}
   */
  app
    .setUrl('https://localhost:3000')
    .setProxyUrl('https://cafejpcoen.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress theme.json
   *
   * @note This overwrites theme.json on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.www.ads-software.com/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      background: {
        backgroundImage: true,
      },
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        blockGap: true,
        margin: true,
        padding: true,
        // If custom spacing sizes are not needed, remove or comment out this block
        // spacingSizes: [], 
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      layout: {
        contentSize: '55rem',
        wideSize: '64rem',
        fullSize: '100%',
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

and has

/*---------------------------------------------------
* Fonts
----------------------------------------------------*/
@import 'common/fonts';

/*---------------------------------------------------
* Drinks Menu 
----------------------------------------------------*/

.editor-styles-wrapper .wp-block-group {
    gap: 0.625rem; /* --wp--preset--spacing--30 */
}

/* Desktop: Three columns */
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
    display: flex;
    flex: 1 1 calc(33.333% - 20px);
}

/* Tablets: Two columns */
@media (max-width: 1024px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 calc(50% - 20px);
    }
}

/* Mobile: One column */
@media (max-width: 767px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 100%;
    }
}


  
/*---------------------------------------------------
* Cover Block Extension
----------------------------------------------------*/

.play-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

including font import. So what is going on here?

This reply was modified 5 months ago by Yui.
This reply was modified 5 months ago by Rhand.

Thread Starter

Rhand

(@rhand)

5 months ago

I also tried relative path in fonts.css using resources/fonts instead of @fonts alias but that did not solve the issue. Fonts still do not load for tablet nor mobile. And as said enqueue_block_assets stops loading fonts even for Gutenberg editor view desktop without the frames .

Thread Starter

Rhand

(@rhand)

5 months ago

When I use

add_action('enqueue_block_assets', function () { // enqueue_block_assets
    bundle('editor')->enqueue();
}, 100);

and do wp acorn cache:clear and yarn build I get to see fonts on Gutenberg desktop, tablet and mobile. When I run yarn dev I do not see the fonts displayed on any view. With enqueue_block_editor_assets I did get fonts on desktop right away. Some build issue I guess. The rules for two columns on tablet using

/* Desktop: Three columns */
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
    display: flex;
    flex: 1 1 calc(33.333% - 20px);
}

/* Tablets: Two columns */
@media (min-width: 763px) and (max-width: 1024px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 calc(50% - 20px);
    }
}

/* Mobile: One column */
@media (max-width: 762px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 100%;
    }
}

do work, but I still see one column display with all stacked. So the flex 1 1 calc(50% - 20px) is not working as it should yet. But progress made.

Pioneer Web Design

(@swansonphotos)

4 months, 4 weeks ago

Helping someone with CSS issues is not only impossible but will likely never lead to a response here unless we can see the site’s output (in a browser with dev. tools). Can you please share, if possible, the site URL with us?

Using staging sites, temp sites, if ever needed for collaboration with the community is best.

Here is a helpful link of this topic:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container

Thread Starter

Rhand

(@rhand)

4 months, 3 weeks ago

@swansonphotos thanks for the feedback. Currently developing locally, but will see if I can add a staging site a little later on. Does not seem to be a CSS issue, but more how WordPress editor iframes implement CSS and how

add_action('enqueue_block_assets', function () { // enqueue_block_assets
    bundle('editor')->enqueue();
}, 100);

deals with that. When all CSS is compiled with yarn build I do see the font styling applied in the editor, just not running yarn dev . Looking into option like

app.build.items.precss.setLoader('minicss');
  app.hooks.action('build.before', (bud) => {
    bud.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').enable(true);
  });

For the bud.js compiler to compile on dev. As for columns CSS not being applied, that could be a CSS issue so will see if I can share on staging .. But then access to backend would be required as well of course and access shared to see editor.css changes being applied and how.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

two columns tablet, one mobile, also in editor

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics