Row Layout Background Color
-
Adding a background color to the row layout element seems to render as expected in the editor but on render of the front facing code it does not seem to be included and is not rendering with a background color.
Viewing 11 replies - 1 through 11 (of 11 total)
-
@hannahritner Unfortunately this is a local dev site and does not have a public facing URL at the moment.
I have both cleared WP and browser cache which has not fixed the issue.
As @pagetopixel also mentioned both the padding and margin also seem to be missing.
I could possibly post the static html output here is anyone thinks digging through that might help?
Here are a couple screenshots of how it looks in the editor and how it looks on the front end on a test page. https://imgur.com/a/YdYYsDd
Here is the front facing html from that test page:
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <title>Test Page – Blueprint</title> <link rel='dns-prefetch' href='//fonts.googleapis.com' /> <link rel='dns-prefetch' href='//s.w.org' /> <link rel="alternate" type="application/rss+xml" title="Blueprint » Feed" href="http://removement-v2.local/feed/" /> <link rel="alternate" type="application/rss+xml" title="Blueprint » Comments Feed" href="http://removement-v2.local/comments/feed/" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/removement-v2.local\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}}; !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-theme-css' href='http://removement-v2.local/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1542565089' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='http://removement-v2.local/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1542565089' type='text/css' media='all' /> <link rel='stylesheet' id='buttons-css' href='http://removement-v2.local/wp-includes/css/buttons.min.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='http://removement-v2.local/wp-includes/css/dashicons.min.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='mediaelement-css' href='http://removement-v2.local/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.6-78496d1' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='http://removement-v2.local/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='media-views-css' href='http://removement-v2.local/wp-includes/css/media-views.min.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='block-gallery-frontend-css' href='http://removement-v2.local/wp-content/plugins/block-gallery/dist/blocks.style.build.css?ver=1.0.6' type='text/css' media='all' /> <link rel='stylesheet' id='ugb-style-css-css' href='http://removement-v2.local/wp-content/plugins/stackable-ultimate-gutenberg-blocks/dist/blocks.style.build.css?ver=1.7' type='text/css' media='all' /> <style id='ugb-style-css-inline-css' type='text/css'> :root { --content-width: 640px; } </style> <link rel='stylesheet' id='kadence-blocks-style-css-css' href='http://removement-v2.local/wp-content/plugins/kadence-blocks/dist/blocks.style.build.css?ver=1.1.2' type='text/css' media='all' /> <link rel='stylesheet' id='bodhi-svgs-attachment-css' href='http://removement-v2.local/wp-content/plugins/svg-support/css/svgs-attachment.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='gutenbergtheme-google-fonts-css' href='https://fonts.googleapis.com/css?family=Open+Sans%7CRaleway%3A300%2C400&ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='gutenbergthemeblocks-style-css' href='http://removement-v2.local/wp-content/themes/removement-v2/css/blocks.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='gutenbergtheme-site-css' href='http://removement-v2.local/wp-content/themes/removement-v2/css/style.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='gutenbergtheme-fonts-css' href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C400italic%2C700%2C700italic&subset=latin%2Clatin-ext&ver=4.9.8' type='text/css' media='all' /> <script type='text/javascript' src='http://removement-v2.local/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='http://removement-v2.local/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/plugins/stackable-ultimate-gutenberg-blocks/dist/blocks.frontend.build.min.js?ver=1.7'></script> <link rel='https://api.w.org/' href='http://removement-v2.local/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://removement-v2.local/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://removement-v2.local/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 4.9.8" /> <link rel="canonical" href="http://removement-v2.local/test-page/" /> <link rel='shortlink' href='http://removement-v2.local/?p=211' /> <link rel="alternate" type="application/json+oembed" href="http://removement-v2.local/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fremovement-v2.local%2Ftest-page%2F" /> <link rel="alternate" type="text/xml+oembed" href="http://removement-v2.local/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fremovement-v2.local%2Ftest-page%2F&format=xml" /> <style type="text/css"> .site-title, .site-description { position: absolute; clip: rect(1px, 1px, 1px, 1px); } </style> <link rel="icon" href="http://removement-v2.local/wp-content/uploads/2018/10/cropped-removement-icon-32x32.png" sizes="32x32" /> <link rel="icon" href="http://removement-v2.local/wp-content/uploads/2018/10/cropped-removement-icon-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="http://removement-v2.local/wp-content/uploads/2018/10/cropped-removement-icon-180x180.png" /> <meta name="msapplication-TileImage" content="http://removement-v2.local/wp-content/uploads/2018/10/cropped-removement-icon-270x270.png" /> </head> <body class="page-template-default page page-id-211 logged-in wp-custom-logo"> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#primary">Skip to content</a> <header id="masthead" class="site-header"> <div class="site-branding"> <!-- <a href="http://removement-v2.local/" class="custom-logo-link" rel="home" itemprop="url"><img src="http://removement-v2.local/wp-content/uploads/2018/11/removement-logo-1.svg" class="custom-logo" alt="Blueprint" itemprop="logo" /></a> --> <a href="http://removement-v2.local"> <p class="brand">removement</p> <p class="tag">a web studio</p> </a> </div><!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button> <div class="menu-main-container"><ul id="primary-menu" class="menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://removement-v2.local/work/">Work</a></li> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://removement-v2.local/services/">Services</a></li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://removement-v2.local/about/">About</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://removement-v2.local/digest/">Digest</a></li> </ul></div> </nav><!-- #site-navigation --> <div class="secondary-navigation"> <div class="site-contact"><a href="/contact" class="btn">Contact</a></div> <div class="menu-toggle"> <a class="toggle" href="#0"> <span class="toggle-icon"></span> </a> </div> </div> </header><!-- #masthead --> <main id="primary" class="site-main"> <article id="post-211" class="post-211 page type-page status-publish hentry"> <header class="entry-header"> <h1 class="entry-title">Test Page</h1> </header><!-- .entry-header --> <div class="entry-content"> <div class="wp-block-kadence-rowlayout alignfull"><div id="kt-layout-id_f0f218-9e" class="kt-row-layout-inner kt-row-has-bg kt-layout-id_f0f218-9e"><div class="kt-row-column-wrap kt-has-2-columns kt-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row"> <div class="wp-block-kadence-column inner-column-1"><div class="kt-inside-inner-col"> <h1 id="kt-adv-heading_67cbcb-95" style="color:#444" class="wp-block-kadence-advancedheading">Heading</h1> <p class="has-text-color has-very-dark-gray-color">Cow tenderloin pork, landjaeger venison brisket biltong bacon beef ribs short loin pig shoulder bresaola pork belly. Jowl sirloin kielbasa ball tip flank pork belly ham hock pork chop venison. Biltong t-bone brisket pork, tri-tip bacon pastrami filet mignon strip steak. Ribeye pastrami prosciutto frankfurter pork belly. Boudin kielbasa biltong cow turducken pancetta ham hock swine strip steak ham tri-tip beef ribs shoulder picanha. Cow corned beef drumstick andouille, pig pork loin cupim frankfurter tenderloin chicken turducken jowl.</p> </div></div> <div class="wp-block-kadence-column inner-column-2"><div class="kt-inside-inner-col"> <figure class="wp-block-image"><img src="http://removement-v2.local/wp-content/uploads/2018/11/dave-ruck-1137704-unsplash-842x1024.jpg" alt="" class="wp-image-227" srcset="http://removement-v2.local/wp-content/uploads/2018/11/dave-ruck-1137704-unsplash-842x1024.jpg 842w, http://removement-v2.local/wp-content/uploads/2018/11/dave-ruck-1137704-unsplash-247x300.jpg 247w, http://removement-v2.local/wp-content/uploads/2018/11/dave-ruck-1137704-unsplash-768x934.jpg 768w" sizes="(max-width: 842px) 100vw, 842px" /></figure> </div></div> </div></div></div> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="edit-link"><a class="post-edit-link" href="http://removement-v2.local/wp-admin/post.php?post=211&action=edit">Edit <span class="screen-reader-text">Test Page</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-211 --> </main><!-- #primary --> <footer id="colophon" class="site-footer"> <div class="site-info"> <a href="https://ww.wp.xz.cn/">Proudly powered by WordPress</a> <span class="sep"> | </span> Theme: <a href="https://github.com/WordPress/gutenberg-starter-theme/">Gutenberg</a> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <script type='text/javascript' src='http://removement-v2.local/wp-content/plugins/block-gallery/dist/js/vendors/flickity.min.js?ver=1.0.6'></script> <script type='text/javascript' src='http://removement-v2.local/wp-includes/js/imagesloaded.min.js?ver=3.2.0'></script> <script type='text/javascript' src='http://removement-v2.local/wp-includes/js/masonry.min.js?ver=3.3.2'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/plugins/block-gallery/dist/js//block-gallery-masonry.min.js?ver=1.0.6'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/themes/removement-v2/js/jquery-3.3.1.min.js?ver=20151215'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/themes/removement-v2/js/jquery.easing.1.3.js?ver=20151215'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/themes/removement-v2/js/jquery.parallax-scroll.js?ver=20151215'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/themes/removement-v2/js/main.js?ver=20151215'></script> <script type='text/javascript' src='http://removement-v2.local/wp-content/themes/removement-v2/js/skip-link-focus-fix.js?ver=20151215'></script> <script type='text/javascript' src='http://removement-v2.local/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script> </body> </html>I agree. I started building my own block plugin for a client but moved to ACF for some of the custom blocks they were looking for because I could not keep up with all the moving of core libraries and code.
Have a great holiday and thanks again for the work you’re putting in. I am very excited about Gutenberg and it’s good to see others jumping on board.
Edited: I am marking this one resolved.
Viewing 11 replies - 1 through 11 (of 11 total)
The topic ‘Row Layout Background Color’ is closed to new replies.
