Load custom styles for the Breakdance editing screen

breakdance-custom-editor-css.php

<?php

// @version->1.1
//  Added the 'id' query arg,
//   because the Breakdance editor is dependant on 'id' (post_id, numeric value)
//   in conjunction with the 'breakdance' query (=='builder') to run
//   id: breakdance=builder&id=82829 (as in Bible->Romans 8:28-29)
//   @reference->https://www.biblegateway.com/passage/?search=Romans%208%3A28-29&version=AMPC,NKJV
//  This just more precisely targets only when the Breakdance editor would load

// @version->1.2
//  Added the 'mode' query arg,
//   because the Breakdance editor loads this when editing the Global Styles from the Admin Page Settings Area

// Load custom styles for the Breakdance editing screen
add_action('breakdance_loaded', function() {
	$thisBuilderQuery = $_GET['breakdance'] ?? false;
	$thisBrowseQuery = $_GET['mode'] ?? false;
	$thisPostIdQuery = $_GET['id'] ?? false;
	if (!is_admin() and ($thisBuilderQuery === 'builder')) {
		if ($thisBrowseQuery === 'browse' or $thisPostIdQuery != '') {
			$thisAsset = plugins_url('/wp3rdBreakdance.css', __FILE__);
			echo '<link href="'.$thisAsset.'" rel="stylesheet">';
		}
	}
}, PHP_INT_MAX);

Example Css

/* Append all classes with :not(.breakdance-iframe-main-wrapper) just to be safe in targeting only the Breakdance editor */
/* Because this loads early, be careful for all css values need to have !important to take effect */
.expanded.conditional-control-display-visible .properties-panel-accordion-titlebar:not(.breakdance-iframe-main-wrapper)  {
  background-color: #cc0000 !important;
  color: #fff !important;
}

Screenshot

Real Example Css

/* Append all classes with :not(.breakdance-iframe-main-wrapper) just to be safe in targeting only the Breakdance editor */
/* Because this loads early, be careful for all css values need to have !important to take effect */
.v-application .v-menu__content:not(.breakdance-iframe-main-wrapper) {
  box-shadow: 0px 0px 15px 1px rgb(0 0 0 / 5%) !important;
  border: solid 1px #ccc !important;
  border-radius: 0px !important
}

.v-menu__content.menuable__content__active:not(.breakdance-iframe-main-wrapper) {
  height: auto !important;
  overflow-y: visible !important;
  min-width: 350px !important;
  max-width: 25% !important;
  min-height: auto !important;
  max-height: 75vh !important;
}

Screenshot

Does this still work? Can't get it working.

Does this still work? Can't get it working.

Hi. Yes. I have it working with the latest version v1.2.1

It's working now thanks. Do you also know how to add some script like this one below? I need to add a custom class to all accordion titlebars of (for example) the section element so I can target those with CSS and hide some for clients.
The code below is not working yet.

add_action('breakdance_loaded', function() {
	$thisBuilderQuery = $_GET['breakdance'] ?? false;
	$thisBrowseQuery = $_GET['mode'] ?? false;
	$thisPostIdQuery = $_GET['id'] ?? false;
	if (!is_admin() and ($thisBuilderQuery === 'builder')) {
		if ($thisBrowseQuery === 'browse' or $thisPostIdQuery != '') {
			$css = plugin_dir_url( dirname(__FILE__) ) . 'assets/css/breakdance.css';
			echo '<link href="'.$css.'" rel="stylesheet">';
			//$js = plugin_dir_url( dirname(__FILE__) ) . 'assets/js/breakdance.js';
			//echo '<script type="text/javascript" src="'.$js.'">';
			echo '<script>'; ?>

				document.addEventListener('DOMContentLoaded', function() {
				const titlebars = document.querySelectorAll('.properties-panel-accordion-titlebar');
				titlebars.forEach((titlebar) => {
				console.log('test123');
				});

				console.log('test');

				});
				<?php echo '</script>';

		}
	}
}, PHP_INT_MAX);