Skip to content

Commit 8b1caa2

Browse files
razwanrazwan
committed
add block index update only on componentDidMount for the time being
1 parent 4a0887c commit 8b1caa2

File tree

7 files changed

+224
-31
lines changed

7 files changed

+224
-31
lines changed

‎dist/js/editor.blocks.js

+143-22
Original file line numberDiff line numberDiff line change
@@ -9999,23 +9999,25 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
99999999
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__scss_editor_scss__ = __webpack_require__(111);
1000010000
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__scss_editor_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__scss_editor_scss__);
1000110001
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__filters_with_block_id__ = __webpack_require__(112);
10002-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__filters_with_font_size_picker__ = __webpack_require__(139);
10003-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__blocks_core_separator__ = __webpack_require__(97);
10004-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__blocks_announcement_bar__ = __webpack_require__(152);
10005-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__blocks_google_map__ = __webpack_require__(153);
10006-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__blocks_header__ = __webpack_require__(187);
10007-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__blocks_headline__ = __webpack_require__(190);
10008-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__blocks_hero__ = __webpack_require__(194);
10009-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__blocks_logo__ = __webpack_require__(212);
10010-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__blocks_media__ = __webpack_require__(213);
10011-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__blocks_slideshow__ = __webpack_require__(218);
10012-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__blocks_navigation__ = __webpack_require__(225);
10013-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__blocks_menu_food__ = __webpack_require__(227);
10014-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__blocks_menu_food_section__ = __webpack_require__(232);
10015-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__blocks_menu_food_item__ = __webpack_require__(236);
10016-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__blocks_opentable__ = __webpack_require__(241);
10017-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__store__ = __webpack_require__(106);
10018-
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__icons__ = __webpack_require__(2);
10002+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__filters_with_block_index__ = __webpack_require__(257);
10003+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__filters_with_font_size_picker__ = __webpack_require__(139);
10004+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__blocks_core_separator__ = __webpack_require__(97);
10005+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__blocks_announcement_bar__ = __webpack_require__(152);
10006+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__blocks_google_map__ = __webpack_require__(153);
10007+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__blocks_header__ = __webpack_require__(187);
10008+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__blocks_headline__ = __webpack_require__(190);
10009+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__blocks_hero__ = __webpack_require__(194);
10010+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__blocks_logo__ = __webpack_require__(212);
10011+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__blocks_media__ = __webpack_require__(213);
10012+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__blocks_slideshow__ = __webpack_require__(218);
10013+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__blocks_navigation__ = __webpack_require__(225);
10014+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__blocks_menu_food__ = __webpack_require__(227);
10015+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__blocks_menu_food_section__ = __webpack_require__(232);
10016+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__blocks_menu_food_item__ = __webpack_require__(236);
10017+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__blocks_opentable__ = __webpack_require__(241);
10018+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__store__ = __webpack_require__(106);
10019+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__icons__ = __webpack_require__(2);
10020+
1001910021

1002010022

1002110023

@@ -10057,10 +10059,10 @@ var novaBlocks = function () {
1005710059
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_createClass___default()(novaBlocks, [{
1005810060
key: 'initialize',
1005910061
value: function initialize(settings) {
10060-
Object(__WEBPACK_IMPORTED_MODULE_6__blocks_core_separator__["a" /* addSeparatorFilters */])(settings);
10061-
dispatch(__WEBPACK_IMPORTED_MODULE_20__store__["a" /* STORE_NAME */]).updateSettings(settings);
10062+
Object(__WEBPACK_IMPORTED_MODULE_7__blocks_core_separator__["a" /* addSeparatorFilters */])(settings);
10063+
dispatch(__WEBPACK_IMPORTED_MODULE_21__store__["a" /* STORE_NAME */]).updateSettings(settings);
1006210064
updateCategory('nova-blocks', {
10063-
icon: __WEBPACK_IMPORTED_MODULE_21__icons__["o" /* nova */]
10065+
icon: __WEBPACK_IMPORTED_MODULE_22__icons__["o" /* nova */]
1006410066
});
1006510067
}
1006610068
}]);
@@ -14909,8 +14911,9 @@ var __ = wp.i18n.__;
1490914911
var InspectorControls = wp.blockEditor.InspectorControls;
1491014912
var _wp$components = wp.components,
1491114913
FocalPointPicker = _wp$components.FocalPointPicker,
14914+
PanelBody = _wp$components.PanelBody,
1491214915
RadioControl = _wp$components.RadioControl,
14913-
PanelBody = _wp$components.PanelBody;
14916+
ToggleControl = _wp$components.ToggleControl;
1491414917
var _wp$element = wp.element,
1491514918
Component = _wp$element.Component,
1491614919
Fragment = _wp$element.Fragment;
@@ -15915,6 +15918,7 @@ var ScrollIndicatorPanel = Object(__WEBPACK_IMPORTED_MODULE_5__with_settings__["
1591515918
* WordPress dependencies
1591615919
*/
1591715920
var InnerBlocks = wp.blockEditor.InnerBlocks;
15921+
var select = wp.data.select;
1591815922

1591915923

1592015924
var HeroPreview = function HeroPreview(props) {
@@ -15932,6 +15936,7 @@ var HeroPreview = function HeroPreview(props) {
1593215936
contentColor = _props$attributes.contentColor,
1593315937
overlayFilterStyle = _props$attributes.overlayFilterStyle,
1593415938
className = props.className,
15939+
clientId = props.clientId,
1593515940
settings = props.settings;
1593615941

1593715942

@@ -15947,6 +15952,16 @@ var HeroPreview = function HeroPreview(props) {
1594715952

1594815953
var minimumHeight = settings.usePostMetaAttributes ? minHeight : minHeightFallback;
1594915954

15955+
var heroBlocks = select('core/block-editor').getBlocks().filter(function (block) {
15956+
return block.name === 'novablocks/hero';
15957+
});
15958+
15959+
var index = heroBlocks.findIndex(function (block) {
15960+
return block.clientId === clientId;
15961+
});
15962+
var scrollIndicatorFallback = index === 0 && minimumHeight === 100;
15963+
var scrollIndicator = settings.usePostMetaAttributes ? scrollIndicatorBlock : scrollIndicatorFallback;
15964+
1595015965
if (!!applyMinimumHeightBlock) {
1595115966
styles.hero.minHeight = minimumHeight + 'vh';
1595215967
}
@@ -15975,7 +15990,7 @@ var HeroPreview = function HeroPreview(props) {
1597515990
{ className: 'novablocks-hero__inner-container novablocks-u-content-width', style: styles.content },
1597615991
wp.element.createElement(InnerBlocks, { template: settings.hero.template })
1597715992
),
15978-
scrollIndicatorBlock && wp.element.createElement('div', { className: 'novablocks-hero__indicator' })
15993+
scrollIndicator && wp.element.createElement('div', { className: 'novablocks-hero__indicator' })
1597915994
)
1598015995
)
1598115996
);
@@ -18248,5 +18263,111 @@ var OpenTableSave = function OpenTableSave(props) {
1824818263

1824918264
/* harmony default export */ __webpack_exports__["a"] = (OpenTableSave);
1825018265

18266+
/***/ }),
18267+
/* 246 */,
18268+
/* 247 */,
18269+
/* 248 */,
18270+
/* 249 */,
18271+
/* 250 */,
18272+
/* 251 */,
18273+
/* 252 */,
18274+
/* 253 */,
18275+
/* 254 */,
18276+
/* 255 */,
18277+
/* 256 */,
18278+
/* 257 */
18279+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
18280+
18281+
"use strict";
18282+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_get_prototype_of__ = __webpack_require__(7);
18283+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_get_prototype_of___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_get_prototype_of__);
18284+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__ = __webpack_require__(4);
18285+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__);
18286+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_createClass__ = __webpack_require__(5);
18287+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_createClass___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_createClass__);
18288+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_possibleConstructorReturn__ = __webpack_require__(8);
18289+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_possibleConstructorReturn___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_possibleConstructorReturn__);
18290+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_babel_runtime_helpers_inherits__ = __webpack_require__(9);
18291+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_babel_runtime_helpers_inherits___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_babel_runtime_helpers_inherits__);
18292+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_babel_runtime_core_js_object_assign__ = __webpack_require__(74);
18293+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_babel_runtime_core_js_object_assign__);
18294+
18295+
18296+
18297+
18298+
18299+
18300+
var createHigherOrderComponent = wp.compose.createHigherOrderComponent;
18301+
var addFilter = wp.hooks.addFilter;
18302+
var Component = wp.element.Component;
18303+
var select = wp.data.select;
18304+
18305+
18306+
var enableBlockIndexAttributeOnBlocks = ['novablocks/hero'];
18307+
18308+
function addBlockIndexAttribute(block) {
18309+
18310+
if (!enableBlockIndexAttributeOnBlocks.includes(block.name)) {
18311+
return block;
18312+
}
18313+
18314+
if (typeof block.attributes !== 'undefined') {
18315+
block.attributes = __WEBPACK_IMPORTED_MODULE_5_babel_runtime_core_js_object_assign___default()(block.attributes, {
18316+
blockIndex: {
18317+
type: 'number',
18318+
default: -1
18319+
}
18320+
});
18321+
}
18322+
18323+
return block;
18324+
}
18325+
addFilter('blocks.registerBlockType', 'novablocks/add-blockIndex-attribute', addBlockIndexAttribute);
18326+
18327+
var withBlockIndexAttribute = createHigherOrderComponent(function (BlockEdit) {
18328+
18329+
return function (_Component) {
18330+
__WEBPACK_IMPORTED_MODULE_4_babel_runtime_helpers_inherits___default()(BetterBlockEdit, _Component);
18331+
18332+
function BetterBlockEdit() {
18333+
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default()(this, BetterBlockEdit);
18334+
18335+
return __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_possibleConstructorReturn___default()(this, (BetterBlockEdit.__proto__ || __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_get_prototype_of___default()(BetterBlockEdit)).apply(this, arguments));
18336+
}
18337+
18338+
__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_createClass___default()(BetterBlockEdit, [{
18339+
key: 'componentDidMount',
18340+
value: function componentDidMount() {
18341+
this.updateIndex();
18342+
}
18343+
}, {
18344+
key: 'updateIndex',
18345+
value: function updateIndex() {
18346+
var _this2 = this;
18347+
18348+
if (enableBlockIndexAttributeOnBlocks.includes(this.props.name)) {
18349+
var oldIndex = this.props.attributes.blockIndex;
18350+
var newIndex = select('core/block-editor').getBlocks().findIndex(function (block) {
18351+
return block.clientId === _this2.props.clientId;
18352+
});
18353+
18354+
if (oldIndex !== newIndex) {
18355+
this.props.setAttributes({ blockIndex: newIndex });
18356+
}
18357+
}
18358+
}
18359+
}, {
18360+
key: 'render',
18361+
value: function render() {
18362+
return wp.element.createElement(BlockEdit, this.props);
18363+
}
18364+
}]);
18365+
18366+
return BetterBlockEdit;
18367+
}(Component);
18368+
}, "withBlockIndexAttribute");
18369+
18370+
addFilter('editor.BlockEdit', 'novablocks/with-blockIndex-attribute', withBlockIndexAttribute);
18371+
1825118372
/***/ })
1825218373
/******/ ]);

‎lib/extras.php

-4
Original file line numberDiff line numberDiff line change
@@ -359,10 +359,6 @@ function novablocks_add_hero_settings( $settings ) {
359359
),
360360
'attributes' => array_merge(
361361
array(
362-
'blockIndex' => array(
363-
'type' => 'number',
364-
'default' => -1
365-
),
366362
'applyMinimumHeightBlock' => array(
367363
'type' => 'boolean',
368364
'default' => false

‎src/blocks/hero/edit.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ const {
2525

2626
const {
2727
FocalPointPicker,
28-
RadioControl,
2928
PanelBody,
29+
RadioControl,
30+
ToggleControl,
3031
} = wp.components;
3132

3233
const {

‎src/blocks/hero/init.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function novablocks_render_hero_block( $attributes, $content ) {
8383

8484
<div class="<?php echo esc_attr( join( ' ', $classes ) ); ?>" style="<?php echo esc_attr( 'color: ' . $attributes['contentColor'] ); ?>">
8585

86-
<?php do_action( 'novablocks_hero:after_opening_tag' ); ?>
86+
<?php do_action( 'novablocks_hero:after_opening_tag', $attributes ); ?>
8787

8888
<div class="novablocks-hero__mask">
8989
<div class="novablocks-hero__parallax" data-rellax-amount="<?php echo novablocks_get_parallax_amount( $attributes ); ?>">
@@ -105,15 +105,15 @@ function novablocks_render_hero_block( $attributes, $content ) {
105105
<div class="novablocks-hero__inner-container novablocks-u-content-width" style="<?php echo esc_attr( $contentStyle ); ?>">
106106
<?php echo $content ?>
107107
</div>
108-
<?php if ( ! empty( $attributes['scrollIndicatorBlock'] ) ) { ?>
108+
<?php if ( $scrollIndicator ) { ?>
109109
<div class="novablocks-hero__indicator">
110110
<?php echo $novablocks_settings['hero']['scrollIndicatorMarkup']; ?>
111111
</div>
112112
<?php } ?>
113113
</div>
114114
</div>
115115

116-
<?php do_action( 'novablocks_hero:before_closing_tag', array( 'blockIndex' => $attributes['blockIndex'] ) ) ?>
116+
<?php do_action( 'novablocks_hero:before_closing_tag', $attributes ) ?>
117117

118118
</div>
119119

‎src/blocks/hero/preview.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import HeroBackground from './background';
88
*/
99
const { InnerBlocks } = wp.blockEditor;
1010

11+
const {
12+
select,
13+
} = wp.data;
14+
1115
const HeroPreview = function( props ) {
1216
const {
1317
attributes: {
@@ -30,6 +34,7 @@ const HeroPreview = function( props ) {
3034
overlayFilterStyle,
3135
},
3236
className,
37+
clientId,
3338
settings,
3439
} = props;
3540

@@ -54,6 +59,14 @@ const HeroPreview = function( props ) {
5459

5560
const minimumHeight = settings.usePostMetaAttributes ? minHeight : minHeightFallback;
5661

62+
const heroBlocks = select( 'core/block-editor' ).getBlocks().filter( ( block ) => {
63+
return block.name === 'novablocks/hero';
64+
} );
65+
66+
const index = heroBlocks.findIndex( ( block ) => block.clientId === clientId );
67+
const scrollIndicatorFallback = index === 0 && minimumHeight === 100;
68+
const scrollIndicator = settings.usePostMetaAttributes ? scrollIndicatorBlock : scrollIndicatorFallback;
69+
5770
if ( !! applyMinimumHeightBlock ) {
5871
styles.hero.minHeight = minimumHeight + 'vh';
5972
}
@@ -75,7 +88,7 @@ const HeroPreview = function( props ) {
7588
<div className="novablocks-hero__inner-container novablocks-u-content-width" style={ styles.content }>
7689
<InnerBlocks template={ settings.hero.template } />
7790
</div>
78-
{ scrollIndicatorBlock && <div className="novablocks-hero__indicator"></div> }
91+
{ scrollIndicator && <div className="novablocks-hero__indicator"></div> }
7992
</div>
8093
</div>
8194
</div>

‎src/editor.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import './scss/style.scss';
22
import './scss/editor.scss';
33

44
import "./filters/with-block-id";
5+
import "./filters/with-block-index";
56
import "./filters/with-font-size-picker";
67

78
import "./blocks/core/separator";

‎src/filters/with-block-index/index.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const { createHigherOrderComponent } = wp.compose;
2+
const { addFilter } = wp.hooks;
3+
const { Component } = wp.element;
4+
const { select } = wp.data;
5+
6+
const enableBlockIndexAttributeOnBlocks = [ 'novablocks/hero' ];
7+
8+
function addBlockIndexAttribute( block ) {
9+
10+
if ( ! enableBlockIndexAttributeOnBlocks.includes( block.name ) ) {
11+
return block;
12+
}
13+
14+
if ( typeof block.attributes !== 'undefined' ){
15+
block.attributes = Object.assign( block.attributes, {
16+
blockIndex: {
17+
type: 'number',
18+
default: -1,
19+
}
20+
});
21+
}
22+
23+
return block;
24+
}
25+
addFilter( 'blocks.registerBlockType', 'novablocks/add-blockIndex-attribute', addBlockIndexAttribute );
26+
27+
const withBlockIndexAttribute = createHigherOrderComponent( ( BlockEdit ) => {
28+
29+
return class BetterBlockEdit extends Component {
30+
constructor() {
31+
super( ...arguments );
32+
}
33+
34+
componentDidMount() {
35+
this.updateIndex();
36+
}
37+
38+
updateIndex() {
39+
if ( enableBlockIndexAttributeOnBlocks.includes( this.props.name ) ) {
40+
const oldIndex = this.props.attributes.blockIndex;
41+
const newIndex = select( 'core/block-editor' ).getBlocks().findIndex( block => {
42+
return block.clientId === this.props.clientId
43+
} );
44+
45+
if ( oldIndex !== newIndex ) {
46+
this.props.setAttributes( { blockIndex: newIndex } );
47+
}
48+
}
49+
}
50+
51+
render() {
52+
return <BlockEdit { ...this.props } />;
53+
}
54+
}
55+
56+
}, "withBlockIndexAttribute" );
57+
58+
addFilter( 'editor.BlockEdit', 'novablocks/with-blockIndex-attribute', withBlockIndexAttribute );
59+
60+
61+

0 commit comments

Comments
 (0)