Labeling Layouts, Columns, Areas, and Blocks with Applied Modifications

Developing with Concrete
1

I had a project that relied heavily on the spacing options of areas, columns, and blocks and got tired of clicking through to see what was set on one column in order to set the same on another. So I made a little JS that runs when the page is in edit mode that shows the applied margins and padding, custom layout classes, and custom block classes above or below the particular area. Mine is super hacky (it will only work on an area name ‘Sections’). Is there a better way to do this (of course there is)? Can this be something to include on a future core release?

// JavaScript Document

$(document).ready(function(){
	setTimeout(function(){

		var cscontainers = $("[class*='ccm-custom-style-sections']");

		var $toAppendBlockStyles;
		var $toAppendLayoutStyles;
		var $toAppendColumnStyles;
		var $toAppendWrapperStyles;

		var $toAppendCustomBlockClasses;
		var $toAppendCustomLayoutClasses;
		var $toAppendCustomColumnClasses;
		var $toAppendCustomWrapperClasses;
		
		var $toAppendCustomBlockTemplate;

		var thisThing;
		
		cscontainers.each(function() {
			var el = $(this);
			var classString = el.attr('class');
			var classList = classString.split(/\s+/);
			
			if( el.parent().hasClass('ccm-block-edit')) {
				thisThing = 'block';
			} else if ( el.parent().data('container') == 'block') {
				thisThing = 'layout';
			} else if ( el.data('area-handle').length > 8 ) {
				thisThing = 'column';
				console.log(el.data('area-handle').length)
			} else if ( el.data('area-handle') == 'Sections' ) {
				thisThing = 'wrapper';
			}
			
			$toAppendBlockStyles = '';
			$toAppendLayoutStyles = '';
			$toAppendColumnStyles = '';
			$toAppendWrapperStyles = '';
			
			$toAppendCustomBlockClasses = '';
			$toAppendCustomLayoutClasses = '';
			$toAppendCustomColumnClasses = '';
			$toAppendCustomWrapperClasses = '';
		
			$toAppendCustomBlockTemplate = '';

			var cc = '';
			var cbt = '';

			classList.forEach(function(e){ //Loop Through Classes
				if (!e.includes('ccm-custom-style-container') && !e.includes('container') && !e.includes('ccm-area') && !e.includes('ccm-layout-area') && !e.includes('ccm-parent-menu-item-hover') ) {
				  	if (e.includes('ccm-custom-style-sections')) {

						var mt,mr,mb,ml,pt,pr,pb,pl,bw,bs,bc;
						var sp = '';

						var customEl;
						if (el.hasClass('ccm-custom-style-container')) {
							customEl = '.ccm-custom-style-container.' + e;
						} else {
							customEl = '.' + e;
						}

						const styles = {};
						for (let i = 0; i < document.styleSheets.length; i++) {
							const sheet = document.styleSheets[i];
							try { // Handle cross-origin stylesheet access issues
								const rules = sheet.cssRules || sheet.rules;
								if (rules) {
									for (let j = 0; j < rules.length; j++) {
										const rule = rules[j];
										//if (rule.selectorText && rule.selectorText.includes(customEl)) {
										if (rule.selectorText && rule.selectorText === customEl) {

											// Extract relevant styles from the rule
											// This example extracts all properties, you might want to filter
											for (let k = 0; k < rule.style.length; k++) {
												const propName = rule.style[k];
												styles[propName] = rule.style.getPropertyValue(propName);
											}
										}
									}
								}
							} catch (e) {
								// console.warn("Cannot access stylesheet:", sheet.href, e);
							}
						}
						if(styles['margin-top'] != undefined || styles['margin-right'] != undefined || styles['margin-bottom'] != undefined || styles['margin-left'] != undefined) {
							mt = styles['margin-top'] == undefined ? '0px' : styles['margin-top'];
							mr = styles['margin-right'] == undefined ? '0px' : styles['margin-right'];
							mb = styles['margin-bottom'] == undefined ? '0px' : styles['margin-bottom'];
							ml = styles['margin-left'] == undefined ? '0px' : styles['margin-left'];
							sp += 'margin: ' + mt + ' ' + mr + ' ' + mb + ' ' + ml + ';&nbsp; &nbsp;';
						}
						if(styles['padding-top'] != undefined || styles['padding-right'] != undefined || styles['padding-bottom'] != undefined || styles['padding-left'] != undefined) {
							pt = styles['padding-top'] == undefined ? '0px' : styles['padding-top'];
							pr = styles['padding-right'] == undefined ? '0px' : styles['padding-right'];
							pb = styles['padding-bottom'] == undefined ? '0px' : styles['padding-bottom'];
							pl = styles['padding-left'] == undefined ? '0px' : styles['padding-left'];
							sp += 'padding: ' + pt + ' ' + pr + ' ' + pb + ' ' + pl + ';&nbsp; &nbsp;';
						}
						if(styles['transform'] != undefined) {
							sp += 'transform: ' + styles['transform'] + ';&nbsp; &nbsp;';
						}
						if(styles['box-shadow'] != undefined) {
							sp += 'box-shadow: ' + styles['box-shadow'] + ';&nbsp; &nbsp;';
						}
						if(styles['border-top-width'] != undefined) {
							bw = styles['border-top-width'];
							bs = styles['border-top-style'];
							bc = styles['border-top-color'];
							sp += 'border: ' + bw + ' ' + bs + ' ' + bc + ';&nbsp; &nbsp;';
						}						
						if(styles['border-top-left-radius'] != undefined) {
							sp += 'border-radius: ' + styles['border-top-left-radius'] + ';&nbsp; &nbsp;';
						}
						
						
					} else {
						if(e.includes('ccm-block-custom-template-')) {
							cbt += e.replace('ccm-block-custom-template-', "") + '&nbsp; &nbsp;';
						} else {
							cc += e + '&nbsp; &nbsp;';
						}
					}
						
					if (sp != undefined) {
						if(thisThing == 'block') {
							$toAppendBlockStyles += sp
						} else if(thisThing == 'layout') {
							$toAppendLayoutStyles += sp;
						} else if(thisThing == 'column') {
							$toAppendColumnStyles += sp;
						} else if(thisThing == 'wrapper') {
							$toAppendWrapperStyles += sp;
						}
					}
		
					if (cc != undefined) {
						if(thisThing == 'block') {
							$toAppendCustomBlockClasses = cc
						} else if(thisThing == 'layout') {
							$toAppendCustomLayoutClasses = cc;
						} else if(thisThing == 'column') {
							$toAppendCustomColumnClasses = cc;
						} else if(thisThing == 'wrapper') {
							$toAppendCustomWrapperClasses = cc;
						}
					}
					
					if (cbt != undefined) {
						if(thisThing == 'block') {
							$toAppendCustomBlockTemplate = cbt
						}
					}
					
				}		

			});
			
			if ($toAppendBlockStyles != '') {
				el.after('<div class="hint-blockstyle">Block Styles: ' + $toAppendBlockStyles + '</div>');
			}
			if ($toAppendLayoutStyles != '') {
				el.find('> div:first-child').after('<div class="hint-layoutstyle">Layout Styles: ' + $toAppendLayoutStyles + '</div>');
			}
			if ($toAppendColumnStyles != '') {
				el.find('> .ccm-area-footer').prepend('<div class="hint-columnstyle">Column Styles: ' + $toAppendColumnStyles + '</div>');
			}
			if ($toAppendWrapperStyles != '') {
				el.find('> .ccm-area-footer').prepend('<div class="hint-wrapperstyle">Wrapper Styles: ' + $toAppendWrapperStyles + '</div>');
			}
			
			if ($toAppendCustomBlockClasses != '') {
				el.after('<div class="hint-customblockclasses">Custom Block Classes: ' + $toAppendCustomBlockClasses + '</div>');
			}
			if ($toAppendCustomLayoutClasses != '') {
				el.find('> div:first-child').after('<div class="hint-customlayoutclasses">Custom Layout Classes: ' + $toAppendCustomLayoutClasses + '</div>');
			}
			if ($toAppendCustomColumnClasses != '') {
				el.find('> .ccm-area-footer').prepend('<div class="hint-customcolumnclasses">Custom Column Classes: ' + $toAppendCustomColumnClasses + '</div>');
			}
			if ($toAppendCustomWrapperClasses != '') {
				el.find('> .ccm-area-footer').prepend('<div class="hint-customwrapperclasses">Custom Wrapper Classes: ' + $toAppendCustomWrapperClasses + '</div>');
			}

			if ($toAppendCustomBlockTemplate != '') {
				el.after('<div class="hint-customblocktemplate">Custom Block Template: ' + $toAppendCustomBlockTemplate + '</div>');
			}

		})
					
	},300)
})

LabeledAreas
LabeledAreas1920×1163 232 KB

2

Can you not use CSS for padding and margins with the theme while in edit mode or have I misunderstood the question?

I place mine in the ‘header.php’.
Something like:

<?php if ($c->isEditMode()) { ?> .somearea {padding: 2em; margin: 2em} <?php }?>
3

I am talking about the spacing set in ‘Edit Area Design’ or ‘Design and Block Template’ being displayed without having to click into the area or block.

blockwithspacing
blockwithspacing1862×1042 147 KB

would show up as…

blockwithspacing2
blockwithspacing21508×1046 165 KB

Maybe its less a question and more is this something worth having i guess.

4

Okay, sorry. I do not and will not use bootstrap (and the other cms bloat) so do not know how help you. However cannot you look how the core works to override?

5

Oh wow - that would have saved me a heap of time last week. I had a spectacularly brilliant client who decided to add 200px of padding to a layout in order to centre a series of HR tags among other things and it was murder finding them all. Your solution would have made it obvious what I needed to remove.

Maybe head over to github, and raise and issue, or better yet, put in a pull request and see what the core team has to say about it.

By the looks of it, it would be useful for other frameworks, not just Bootstrap. They all use margin and padding.

6

There’s a useful add-on in the marketplace (Toolbar Block Outline - Toolbar Block Outline :: Concrete CMS Marketplace) that puts a button on the toolbar which launches a dialog showing various block settings, including whether a block has any custom styles set, although it doesn’t state what exactly has been set. Perhaps this could be amended to show the information you’re after as it seems to be halfway there. I would definitely find that a useful addition when clients go rogue within the design settings!