block-editor-script.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. window.addEventListener( 'load', function(e) {
  2. astra_onload_function();
  3. });
  4. function astra_onload_function() {
  5. /* Do things after DOM has fully loaded */
  6. var astraMetaBox = document.querySelector( '#astra_settings_meta_box' );
  7. if( astraMetaBox != null ){
  8. var titleCheckbox = document.getElementById('site-post-title');
  9. if( null === titleCheckbox ) {
  10. titleCheckbox = document.querySelector('.site-post-title input');
  11. }
  12. if( null !== titleCheckbox ) {
  13. titleCheckbox.addEventListener('change',function() {
  14. var titleBlock = document.querySelector('.editor-post-title__block');
  15. if( null !== titleBlock ) {
  16. if( titleCheckbox.checked ){
  17. titleBlock.style.opacity = '0.2';
  18. } else {
  19. titleBlock.style.opacity = '1.0';
  20. }
  21. }
  22. });
  23. }
  24. }
  25. wp.data.subscribe(function () {
  26. setTimeout( function () {
  27. // Compatibility for updating layout in editor with direct reflection.
  28. const contentLayout = ( null !== wp.data.select( 'core/editor' ) && undefined !== wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' ) && wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )['site-content-layout'] ) ? wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )['site-content-layout'] : 'default',
  29. bodyClass = document.querySelector('body');
  30. switch( contentLayout ) {
  31. case 'boxed-container':
  32. bodyClass.classList.add('ast-separate-container' , 'ast-two-container');
  33. bodyClass.classList.remove('ast-page-builder-template' , 'ast-plain-container');
  34. break;
  35. case 'content-boxed-container':
  36. bodyClass.classList.add('ast-separate-container');
  37. bodyClass.classList.remove('ast-two-container' , 'ast-page-builder-template' , 'ast-plain-container');
  38. break;
  39. case 'plain-container':
  40. bodyClass.classList.add('ast-plain-container');
  41. bodyClass.classList.remove('ast-two-container' , 'ast-page-builder-template' , 'ast-separate-container');
  42. break;
  43. case 'page-builder':
  44. bodyClass.classList.add('ast-page-builder-template');
  45. bodyClass.classList.remove('ast-two-container' , 'ast-plain-container' , 'ast-separate-container');
  46. break;
  47. case 'default':
  48. if( bodyClass.classList.contains( 'ast-default-layout-boxed-container' ) ) {
  49. bodyClass.classList.add('ast-separate-container' , 'ast-two-container');
  50. bodyClass.classList.remove('ast-page-builder-template' , 'ast-plain-container');
  51. } else if( bodyClass.classList.contains( 'ast-default-layout-content-boxed-container' ) ) {
  52. bodyClass.classList.add('ast-separate-container');
  53. bodyClass.classList.remove('ast-two-container' , 'ast-page-builder-template' , 'ast-plain-container');
  54. } else if( bodyClass.classList.contains( 'ast-default-layout-page-builder' ) ) {
  55. bodyClass.classList.add('ast-page-builder-template');
  56. bodyClass.classList.remove('ast-two-container' , 'ast-plain-container' , 'ast-separate-container');
  57. } else {
  58. bodyClass.classList.add('ast-plain-container');
  59. bodyClass.classList.remove('ast-two-container' , 'ast-page-builder-template' , 'ast-separate-container');
  60. }
  61. break;
  62. }
  63. const editorStylesWrapper = document.querySelector( '.editor-styles-wrapper' );
  64. if( null !== editorStylesWrapper ) {
  65. const editorStylesWrapperWidth = parseInt( editorStylesWrapper.offsetWidth )
  66. if( editorStylesWrapperWidth < 1250 ) {
  67. editorStylesWrapper.classList.remove( 'ast-stacked-title-visibility' );
  68. editorStylesWrapper.classList.add( 'ast-stacked-title-visibility' );
  69. } else {
  70. editorStylesWrapper.classList.remove( 'ast-stacked-title-visibility' );
  71. }
  72. }
  73. /**
  74. * In WP-5.9 block editor comes up with color palette showing color-code canvas, but with theme var() CSS its appearing directly as it is. So updated them on wp.data event.
  75. */
  76. const customColorPickerButtons = document.querySelectorAll( '.components-color-palette__custom-color' );
  77. for ( let btnCount = 0; btnCount < customColorPickerButtons.length; btnCount++ ) {
  78. const colorCode = customColorPickerButtons[btnCount].innerText;
  79. if ( colorCode.indexOf( 'var(--ast-global-color' ) > -1 ) {
  80. customColorPickerButtons[btnCount].innerHTML = '<span class="ast-theme-block-color-name">' + astraColors[ colorCode ] + '</span>';
  81. }
  82. }
  83. // Title visibility with new editor compatibility update.
  84. var titleVisibility = document.querySelector( '.title-visibility' ),
  85. titleBlock = document.querySelector( '.edit-post-visual-editor__post-title-wrapper' );
  86. if( null === titleVisibility && null !== titleBlock ) {
  87. var titleVisibilityTrigger = '';
  88. if( 'disabled' === wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )['site-post-title'] ) {
  89. titleVisibilityTrigger = '<span class="dashicons dashicons-hidden title-visibility" data-tooltip="Enable Title"></span>';
  90. titleBlock.classList.toggle( 'invisible' );
  91. } else {
  92. titleVisibilityTrigger = '<span class="dashicons dashicons-visibility title-visibility" data-tooltip="Disable Title"></span>';
  93. }
  94. titleBlock.insertAdjacentHTML( 'beforeend', titleVisibilityTrigger );
  95. document.querySelector( '.title-visibility' ).addEventListener( 'click', function() {
  96. var titleBlock = document.querySelector( '.edit-post-visual-editor__post-title-wrapper' );
  97. titleBlock.classList.toggle( 'invisible' );
  98. if( this.classList.contains( 'dashicons-hidden' ) ) {
  99. this.classList.add( 'dashicons-visibility' );
  100. this.classList.remove( 'dashicons-hidden' );
  101. this.dataset.tooltip = 'Disable Title';
  102. wp.data.dispatch( 'core/editor' ).editPost(
  103. {
  104. meta: {
  105. 'site-post-title': '',
  106. }
  107. }
  108. );
  109. } else {
  110. this.classList.add( 'dashicons-hidden' );
  111. this.classList.remove( 'dashicons-visibility' );
  112. this.dataset.tooltip = 'Enable Title';
  113. wp.data.dispatch( 'core/editor' ).editPost(
  114. {
  115. meta: {
  116. 'site-post-title': 'disabled',
  117. }
  118. }
  119. );
  120. }
  121. });
  122. }
  123. var responsivePreview = document.querySelectorAll( '.is-tablet-preview, .is-mobile-preview' );
  124. if( responsivePreview.length ) {
  125. document.body.classList.add( 'responsive-enabled' );
  126. } else {
  127. document.body.classList.remove( 'responsive-enabled' );
  128. }
  129. // Adding 'inherit-container-width' width to Group block externally.
  130. let postBlocks = ( null !== wp.data.select( 'core/editor' ) && undefined !== wp.data.select( 'core/editor' ).getCurrentPost() && undefined !== wp.data.select( 'core/editor' ).getBlocks() ) ? wp.data.select( 'core/editor' ).getBlocks() : false,
  131. groupBlocks = document.querySelectorAll( '.block-editor-block-list__layout.is-root-container > .wp-block-group' );
  132. if( postBlocks && groupBlocks ) {
  133. for ( let blockNum = 0; blockNum < postBlocks.length; blockNum++ ) {
  134. if( 'core/group' === postBlocks[blockNum].name && undefined !== postBlocks[blockNum].attributes && undefined !== postBlocks[blockNum].attributes.layout && undefined !== postBlocks[blockNum].attributes.layout.inherit ) {
  135. if( undefined === groupBlocks[blockNum] ) {
  136. return;
  137. }
  138. if( ! postBlocks[blockNum].attributes.layout.inherit ) {
  139. groupBlocks[blockNum].classList.remove( 'inherit-container-width' );
  140. }
  141. if( postBlocks[blockNum].attributes.layout.inherit && ! groupBlocks[blockNum].classList.contains( 'inherit-container-width' ) ) {
  142. groupBlocks[blockNum].classList.add( 'inherit-container-width' );
  143. }
  144. }
  145. }
  146. }
  147. }, 1 );
  148. });
  149. }
  150. document.body.addEventListener('mousedown', function () {
  151. var blockCssMode = document.querySelector('body').classList.contains('ast-block-legacy')
  152. var fontCss = document.getElementById('astra-google-fonts-css');
  153. if(true === blockCssMode){
  154. var blockCss = document.getElementById('astra-block-editor-styles-css');
  155. var inlineCss = document.getElementById('astra-block-editor-styles-inline-css');
  156. }else {
  157. var blockCss = document.getElementById('astra-wp-editor-styles-css');
  158. var inlineCss = document.getElementById('astra-wp-editor-styles-inline-css');
  159. }
  160. var blockFixCss = blockCss.cloneNode(true);
  161. var blockInlineCss = inlineCss.cloneNode(true);
  162. var blockfontCss = null !== fontCss ? fontCss.cloneNode(true) : null;
  163. setTimeout( function() {
  164. let tabletPreview = document.getElementsByClassName('is-tablet-preview');
  165. let mobilePreview = document.getElementsByClassName('is-mobile-preview');
  166. if (0 !== tabletPreview.length || 0 !== mobilePreview.length) {
  167. var googleFontId = 'astra-google-fonts-css';
  168. if(true === blockCssMode){
  169. var styleTagId = 'astra-block-editor-styles-inline-css';
  170. var styleTagBlockId = 'astra-block-editor-styles-css';
  171. } else{
  172. var styleTagId = 'astra-wp-editor-styles-inline-css';
  173. var styleTagBlockId = 'astra-wp-editor-styles-css';
  174. }
  175. var styleTagId = 'astra-block-editor-styles-inline-css';
  176. var styleTagBlockId = 'astra-block-editor-styles-css';
  177. var googleFontId = 'astra-google-fonts-css';
  178. let preview = tabletPreview[0] || mobilePreview[0];
  179. let iframe = preview.getElementsByTagName('iframe')[0];
  180. let iframeDocument = iframe.contentWindow.document || iframe.contentDocument;
  181. let element = iframeDocument.getElementById(
  182. styleTagId
  183. );
  184. let elementBlock = iframeDocument.getElementById(
  185. styleTagBlockId
  186. );
  187. let elementGoogleFont = iframeDocument.getElementById(
  188. googleFontId
  189. );
  190. if ( (null === element || undefined === element)) {
  191. iframeDocument.head.appendChild( blockInlineCss );
  192. }
  193. if ( (null === elementBlock || undefined === elementBlock )) {
  194. iframeDocument.head.appendChild( blockFixCss );
  195. }
  196. if ( (null === elementGoogleFont || undefined === elementGoogleFont ) && null !== fontCss) {
  197. iframeDocument.head.appendChild( blockfontCss );
  198. }
  199. }
  200. }, 1000);
  201. });