{"id":3127,"date":"2022-09-06T09:14:45","date_gmt":"2022-09-06T09:14:45","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&#038;p=3127"},"modified":"2024-04-26T03:44:53","modified_gmt":"2024-04-26T03:44:53","slug":"known-issues","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/known-issues\/","title":{"rendered":"Known issues"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"empty-canvas\">When I open the builder I don&#8217;t see the elements on the canvas<\/h2>\n\n\n\n<p>If you open the builder and you don&#8217;t see the elements in the canvas but they are shown in the structure panel, and if you are using Cloudflare, then this is a known problem caused by a conflict between the <a rel=\"noreferrer noopener\" href=\"https:\/\/support.cloudflare.com\/hc\/en-us\/articles\/200168056-Understanding-Rocket-Loader\" target=\"_blank\">Cloudflare Rocket Loader<\/a>\u2122 \/ other performance optimization feature and the Bricks builder JavaScript.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1) Configuration Rules<\/h3>\n\n\n\n<p>Create a configuration rule for builder mode.<\/p>\n\n\n\n<ol>\n<li>Log into the Cloudflare <a rel=\"noreferrer noopener\" href=\"https:\/\/dash.cloudflare.com\/login\" target=\"_blank\">dashboard<\/a>.<\/li>\n\n\n\n<li>Select your account and website.<\/li>\n\n\n\n<li>Go to Rules &gt; Configuration Rules.<\/li>\n\n\n\n<li>Create a new Rule, give a name, and choose Custom filter expression\n<ul>\n<li>Field: URI Query String<\/li>\n\n\n\n<li>Operator: contains <\/li>\n\n\n\n<li>Value: bricks=run<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Leave the rest of the settings empty\/untouch, Save rule.<br><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"264\" height=\"269\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules-01.png\" alt=\"\" class=\"wp-image-4303\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1096\" height=\"771\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules.png\" alt=\"\" class=\"wp-image-4304\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules.png 1096w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules-300x211.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules-1024x720.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2023\/05\/cloudflare_configuration_rules-768x540.png 768w\" sizes=\"(max-width: 1096px) 100vw, 1096px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2) Page Rules to disable performance in builder mode<\/h3>\n\n\n\n<p>Create a custom page rule to disable performance optimization by Cloudflare in builder mode.<\/p>\n\n\n\n<ol>\n<li>Log into the Cloudflare <a href=\"https:\/\/dash.cloudflare.com\/login\" target=\"_blank\" rel=\"noreferrer noopener\">dashboard<\/a>.<\/li>\n\n\n\n<li>Select your account and website.<\/li>\n\n\n\n<li>Go to Rules &gt; Page Rules.<\/li>\n\n\n\n<li>Create a new Page Rule. \n<ul>\n<li>URL: <code>*.yourdomainname\/*bricks=run<\/code><\/li>\n\n\n\n<li>Settings: <code>Disable Performance<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Save and Deploy the page rule.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"594\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/cloudflare-skip-performance-by-cloudflare-1024x594.png\" alt=\"\" class=\"wp-image-3605\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/cloudflare-skip-performance-by-cloudflare-1024x594.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/cloudflare-skip-performance-by-cloudflare-300x174.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/cloudflare-skip-performance-by-cloudflare-768x446.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/cloudflare-skip-performance-by-cloudflare.png 1077w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 3) Disable Rocket Loader<\/h3>\n\n\n\n<p>Disable the Rocket Loader\u2122 in the Cloudflare dashboard:<\/p>\n\n\n\n<ol>\n<li>Log into the Cloudflare <a rel=\"noreferrer noopener\" href=\"https:\/\/dash.cloudflare.com\/login\" target=\"_blank\">dashboard<\/a>.<\/li>\n\n\n\n<li>Select your account and website.<\/li>\n\n\n\n<li>Go to Speed &gt; Optimization.<\/li>\n\n\n\n<li>Scroll down until you find Rocket Loader.<\/li>\n\n\n\n<li>Turn it off.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 4) Disable SiteGround Worker Routes<\/h3>\n\n\n\n<p>If the above 2 methods do not work and you are using SiteGround hosting, please check and disable the Worker created by SiteGround.<\/p>\n\n\n\n<ol>\n<li>Log into the Cloudflare dashboard.<\/li>\n\n\n\n<li>Select your account and website.<\/li>\n\n\n\n<li>Go to Workers Routes.<\/li>\n\n\n\n<li>If sg_worker exists or another suspicious worker is defined without your awareness, you can remove it.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/sg-worker-in-cf-1024x640.png\" alt=\"\" class=\"wp-image-3607\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/sg-worker-in-cf-1024x640.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/sg-worker-in-cf-300x187.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/sg-worker-in-cf-768x480.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/sg-worker-in-cf.png 1076w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"555\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/remove-sg-worker-in-cf.png\" alt=\"\" class=\"wp-image-3608\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/remove-sg-worker-in-cf.png 555w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/remove-sg-worker-in-cf-300x300.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/12\/remove-sg-worker-in-cf-150x150.png 150w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"copy-paste\">Copy\/paste elements or styles not working<\/h2>\n\n\n\n<p>Bricks 1.5.1 uses the Clipboard API to copy and paste elements and styles across different domains. <\/p>\n\n\n\n<p class=\"callout-blue\">Copy\/paste is only supported for pages served over <strong>HTTPS<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using Firefox<\/h3>\n\n\n\n<p>Firefox is more restrictive regarding reading from this API, which prevents the paste action, and therefore it requires the user to manually grant permission to use the API.<\/p>\n\n\n\n<p>To do so, please follow these steps in your Firefox browser:<\/p>\n\n\n\n<ol>\n<li>Enter&nbsp;<code>about:config<\/code>&nbsp;in navigation bar<\/li>\n\n\n\n<li>Click &#8220;Accept the Risk and Continue&#8221;<\/li>\n\n\n\n<li>Search&nbsp;<code>clipboard<\/code>&nbsp; and set <code>dom.events.asyncClipboard.readText<\/code> and <code>dom.events.testing.asyncClipboard<\/code> to &nbsp;<code>true<\/code><\/li>\n\n\n\n<li>Restart Firefox<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"error-500\">Internal server error (500) when trying to edit homepage with Bricks<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3716\" height=\"1747\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500.png\" alt=\"\" class=\"wp-image-3128\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500.png 3716w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500-300x141.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500-1024x481.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500-768x361.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500-1536x722.png 1536w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/08\/internal-server-error-500-2048x963.png 2048w\" sizes=\"(max-width: 3716px) 100vw, 3716px\" \/><\/figure><\/div>\n\n\n<p>If you see a screen similar to the above, showing an internal server error (500) when trying to edit a page with Bricks (often reported as the homepage), you should look at the server logs and adjust the server configuration. This error is most probably caused by a security server configuration that prevents the request to hit WordPress and Bricks.<\/p>\n\n\n\n<p>Some servers do not have the <code>SecResponseBodyLimit<\/code> defined leading to errors like:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>ModSecurity: Output filter: Response body too large (over limit of 1048576, total not specified).<\/code><\/pre>\n\n\n\n<p>(Note: the SecResponseBodyLimit sets the maximum response body size that will be accepted for buffering). <\/p>\n\n\n\n<p>Check this <a href=\"https:\/\/forum.bricksbuilder.io\/t\/solved-internal-server-error\/1711\" target=\"_blank\" rel=\"noreferrer noopener\">forum post<\/a> for possible solutions. If the issue persists, please contact your hosting support for guidance.<\/p>\n\n\n\n<p>For <strong>GoDaddy<\/strong> users, you might need to add this line of code in your .htaccess file (first line)<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>SubstituteMaxLineLength 10M<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blog-template\">My Blog page is not using the posts archive template<\/h2>\n\n\n\n<p>The Blog page (WordPress Posts Page set in the Settings &gt; Reading) is a special WordPress page, and therefore it is not an archive. If you want to set a Bricks template for the Blog page, you would need to set the template condition Individual and select the Blog page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"956\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/bricks-blog-page-template-conditions.png\" alt=\"\" class=\"wp-image-3198\" style=\"width:299px;height:478px\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/bricks-blog-page-template-conditions.png 598w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/bricks-blog-page-template-conditions-188x300.png 188w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"svg-styles\">I&#8217;m using SVG files in Bricks elements but I cannot change their color<\/h2>\n\n\n\n<p>This usually happens when your SVG file contains inline styles which override the styles generated by the Bricks builder. If you want to use these SVG files in combination with the Bricks style&#8217;s controls, you need to remove the inline styles from the SVG file before uploading it to the WordPress installation.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" data-lightbox=\"true\"  src=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-04-at-16.11.20-1024x281.png\" alt=\"\" class=\"wp-image-3200\" style=\"width:1024px;height:281px\" srcset=\"https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-04-at-16.11.20-1024x281.png 1024w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-04-at-16.11.20-300x82.png 300w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-04-at-16.11.20-768x211.png 768w, https:\/\/academy.bricksbuilder.io\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-04-at-16.11.20.png 1340w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An example of an SVG file containing inline styles<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-fonts\">Custom Fonts not working on the frontend<\/h2>\n\n\n\n<p>If your custom fonts are not displayed in the frontend, it is probably because your WordPress website is delivered via HTTPS, but your WordPress URLs are still set to HTTP (WordPress Settings \u00bb General).<\/p>\n\n\n\n<p>Changing the WordPress URLs from <code>http:\/\/<\/code> to <code>https:\/\/<\/code> will fix the problem and your fonts will be displayed correctly from now on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"youtube-mobile-background-video\">YouTube Background Video on Mobile doesn&#8217;t autoplay<\/h2>\n\n\n\n<p>This restriction is imposed by the YoutTube iFrame Player API and cannot be influenced by us. See <a href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference#Mobile_considerations\">https:\/\/developers.google.com\/youtube\/iframe_api_reference#Mobile_considerations<\/a><\/p>\n\n\n\n<p>However, Vimeo and local videos (mp4) should work as long as the mobile device is not in low-battery mode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cpt-404\">Invalid Post Type \/ Custom Post Type 404 Errors<\/h2>\n\n\n\n<p>This problem is probably <a href=\"https:\/\/www.google.com\/search?q=wordpress+404+cpt&amp;sourceid=chrome&amp;ie=UTF-8\" target=\"_blank\" rel=\"noreferrer noopener\">the most common problem<\/a> in WordPress: your custom post type returns a 404 error. In most cases, however, the problem can be solved very easily.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Re-save your permalink settings<\/h3>\n\n\n\n<p>All you have to do is go to WordPress \u00bb Settings \u00bb Permalinks and click on &#8220;Save Changes&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Check for slug conflicts<\/h3>\n\n\n\n<p>The slug refers to the user-friendly and URL-valid name of a post, page, category, tag, or any content (even images) within your website. It is a part of the URL that identifies a specific piece of content.<\/p>\n\n\n\n<p>Let&#8217;s assume you have a &#8220;Portfolio&#8221; page whose slug is &#8220;portfolio&#8221;. Now you create a custom post type called &#8220;Portfolio&#8221;, whose slug is also &#8220;portfolio&#8221;. If you now try to call up a single post from your portfolio (yoursite.com\/portfolio\/your-portfolio-post), there will be a 404 error too. To solve this issue, rename either the page slug, or the custom post type slug to something else. Re-save your permalinks again, and everything should work as expected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>When I open the builder I don&#8217;t see the elements on the canvas If you open the builder and you don&#8217;t see the elements in the canvas but they are shown in the structure panel, and if you are using Cloudflare, then this is a known problem caused by a conflict between the Cloudflare Rocket [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":73,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/3127"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":38,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/3127\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/3127\/revisions\/6077"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=3127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}