Skip to content
This repository has been archived by the owner on Jul 28, 2023. It is now read-only.

Nomenclature changes #45

Merged
merged 4 commits into from
Jul 26, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions block-hydration-experiments.php
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function bhe_block_wrapper($block_content, $block, $instance)
$attributes = [];
$sourced_attributes = [];
foreach ($attr_definitions as $attr => $definition) {
if (!empty($definition['frontend'])) {
if (!empty($definition['public'])) {
if (!empty($definition['source'])) {
$sourced_attributes[$attr] = [
'selector' => $definition['selector'], // TODO: Guard against unset.
Expand Down Expand Up @@ -80,25 +80,24 @@ function bhe_block_wrapper($block_content, $block, $instance)

$block_wrapper =
sprintf(
'<gutenberg-block ' .
'data-gutenberg-block-type="%1$s" ' .
'data-gutenberg-uses-block-context="%2$s" ' .
'data-gutenberg-provides-block-context="%3$s" ' .
'data-gutenberg-attributes="%4$s" ' .
'data-gutenberg-sourced-attributes="%5$s" ' .
'data-gutenberg-block-props="%6$s" ' .
'data-gutenberg-hydration="%7$s">',
'<wp-block ' .
'data-wp-block-type="%1$s" ' .
'data-wp-block-uses-block-context="%2$s" ' .
'data-wp-block-provides-block-context="%3$s" ' .
'data-wp-block-attributes="%4$s" ' .
'data-wp-block-sourced-attributes="%5$s" ' .
'data-wp-block-props="%6$s" ' .
'data-wp-block-hydration="%7$s">',
esc_attr($block['blockName']),
esc_attr(json_encode($block_type->uses_context)),
esc_attr(json_encode($block_type->provides_context)),
esc_attr(json_encode($attributes)),
esc_attr(json_encode($sourced_attributes)),
esc_attr(json_encode($block_props)),
esc_attr($hydration_technique)
) . '%1$s</gutenberg-block>';
) . '%1$s</wp-block>';

$template_wrapper =
'<template class="gutenberg-inner-blocks">%1$s</template>';
$template_wrapper = '<template class="wp-inner-blocks">%1$s</template>';

$empty_template = sprintf($template_wrapper, '');
$template = sprintf(
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/interactive-child/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
"textdomain": "block-hydration-experiments",
"editorScript": "file:./index.js",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
"viewScript": "file:./frontend.js"
}
28 changes: 5 additions & 23 deletions src/blocks/interactive-child/frontend.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,8 @@
import CounterContext from '../../context/counter';
import ThemeContext from '../../context/theme';
import { useContext } from '../../gutenberg-packages/wordpress-element';
import { registerBlockType } from '../../gutenberg-packages/frontend';
import View from './view';

const Frontend = ({ blockProps, context }) => {
const theme = useContext(ThemeContext);
const counter = useContext(CounterContext);

return (
<div {...blockProps}>
<p>
Block Context from interactive parent - "bhe/interactive-title":{' '}
{context['bhe/interactive-title']}
</p>
<p>
Block Context from non-interactive parent -
"bhe/non-interactive-title":{' '}
{context['bhe/non-interactive-title']}
</p>
<p>React Context - "counter": {counter}</p>
<p>React Context - "theme": {theme}</p>
</div>
);
};

export default Frontend;
registerBlockType('bhe/interactive-child', View, {
usesContext: [ThemeContext, CounterContext],
});
5 changes: 2 additions & 3 deletions src/blocks/interactive-child/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
import Edit from './edit';
import Frontend from './frontend';
import View from './view';
import './style.scss';

registerBlockType('bhe/interactive-child', {
edit: Edit,
// The Save component is derived from the Frontend component.
frontend: Frontend,
view: View, // The Save component is derived from the View component.
});
4 changes: 2 additions & 2 deletions src/blocks/interactive-child/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
content: 'BHE - Interactive Child';
}

gutenberg-block,
gutenberg-inner-blocks {
wp-block,
wp-inner-blocks {
display: contents;
}
28 changes: 23 additions & 5 deletions src/blocks/interactive-child/view.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@
import CounterContext from '../../context/counter';
import ThemeContext from '../../context/theme';
import { registerBlockType } from '../../gutenberg-packages/frontend';
import Frontend from './frontend';
import { useContext } from '../../gutenberg-packages/wordpress-element';

registerBlockType('bhe/interactive-child', Frontend, {
usesContext: [ThemeContext, CounterContext],
});
const View = ({ blockProps, context }) => {
const theme = useContext(ThemeContext);
const counter = useContext(CounterContext);

return (
<div {...blockProps}>
<p>
Block Context from interactive parent - "bhe/interactive-title":{' '}
{context['bhe/interactive-title']}
</p>
<p>
Block Context from non-interactive parent -
"bhe/non-interactive-title":{' '}
{context['bhe/non-interactive-title']}
</p>
<p>React Context - "counter": {counter}</p>
<p>React Context - "theme": {theme}</p>
</div>
);
};

export default View;
6 changes: 3 additions & 3 deletions src/blocks/interactive-parent/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
"counter": {
"type": "number",
"default": 0,
"frontend": true
"public": true
},
"title": {
"type": "string",
"source": "text",
"selector": ".title",
"frontend": true
"public": true
},
"secret": {
"type": "string",
Expand All @@ -42,5 +42,5 @@
"textdomain": "block-hydration-experiments",
"editorScript": "file:./index.js",
"style": "file:./style-index.css",
"viewScript": "file:./view.js"
"viewScript": "file:./frontend.js"
}
48 changes: 7 additions & 41 deletions src/blocks/interactive-parent/frontend.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,8 @@
import Counter from '../../context/counter';
import Theme from '../../context/theme';
import { useState } from '../../gutenberg-packages/wordpress-element';
import Button from './shared/button';
import Title from './shared/title';
import CounterContext from '../../context/counter';
import ThemeContext from '../../context/theme';
import { registerBlockType } from '../../gutenberg-packages/frontend';
import View from './view';

const Frontend = ({
blockProps: {
className,
style: { fontWeight, ...style },
},
attributes: { counter: initialCounter, title },
children,
}) => {
const [show, setShow] = useState(true);
const [bold, setBold] = useState(true);
const [counter, setCounter] = useState(initialCounter);

return (
<Counter.Provider value={counter}>
<Theme.Provider value="cool theme">
<div
className={`${className} ${show ? 'show' : 'hide'}`}
style={{
...style,
fontWeight: bold ? 900 : fontWeight,
}}
>
<Title>{title}</Title>
<Button handler={() => setShow(!show)}>Show</Button>
<Button handler={() => setBold(!bold)}>Bold</Button>
<button onClick={() => setCounter(counter + 1)}>
{counter}
</button>
{show && children}
</div>
</Theme.Provider>
</Counter.Provider>
);
};

export default Frontend;
registerBlockType('bhe/interactive-parent', View, {
providesContext: [ThemeContext, CounterContext],
});
5 changes: 2 additions & 3 deletions src/blocks/interactive-parent/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
import Edit from './edit';
import Frontend from './frontend';
import View from './view';
import './style.scss';

registerBlockType('bhe/interactive-parent', {
edit: Edit,
// The Save component is derived from the Frontend component.
frontend: Frontend,
view: View, // The Save component is derived from the View component.
});
4 changes: 2 additions & 2 deletions src/blocks/interactive-parent/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
content: 'BHE - Interactive Parent';
}

gutenberg-block,
gutenberg-inner-blocks {
wp-block,
wp-inner-blocks {
display: contents;
}
48 changes: 41 additions & 7 deletions src/blocks/interactive-parent/view.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,42 @@
import CounterContext from '../../context/counter';
import ThemeContext from '../../context/theme';
import { registerBlockType } from '../../gutenberg-packages/frontend';
import Frontend from './frontend';
import Counter from '../../context/counter';
import Theme from '../../context/theme';
import { useState } from '../../gutenberg-packages/wordpress-element';
import Button from './shared/button';
import Title from './shared/title';

registerBlockType('bhe/interactive-parent', Frontend, {
providesContext: [ThemeContext, CounterContext],
});
const View = ({
blockProps: {
className,
style: { fontWeight, ...style },
},
attributes: { counter: initialCounter, title },
children,
}) => {
const [show, setShow] = useState(true);
const [bold, setBold] = useState(true);
const [counter, setCounter] = useState(initialCounter);

return (
<Counter.Provider value={counter}>
<Theme.Provider value="cool theme">
<div
className={`${className} ${show ? 'show' : 'hide'}`}
style={{
...style,
fontWeight: bold ? 900 : fontWeight,
}}
>
<Title>{title}</Title>
<Button handler={() => setShow(!show)}>Show</Button>
<Button handler={() => setBold(!bold)}>Bold</Button>
<button onClick={() => setCounter(counter + 1)}>
{counter}
</button>
{show && children}
</div>
</Theme.Provider>
</Counter.Provider>
);
};

export default View;
2 changes: 1 addition & 1 deletion src/blocks/non-interactive-parent/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"type": "string",
"source": "text",
"selector": ".title",
"frontend": true
"public": true
}
},
"providesContext": {
Expand Down
9 changes: 6 additions & 3 deletions src/blocks/non-interactive-parent/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
import metadata from './block.json';
import edit from './edit';
import frontend from './frontend';
import Edit from './edit';
import View from './view';
import './style.scss';

const { name } = metadata;

registerBlockType(name, { edit, frontend });
registerBlockType(name, {
edit: Edit,
view: View, // The Save component is derived from the View component.
});
4 changes: 2 additions & 2 deletions src/blocks/non-interactive-parent/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
font-size: 10px;
}

gutenberg-block,
gutenberg-inner-blocks {
wp-block,
wp-inner-blocks {
display: contents;
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const Frontend = ({ attributes, blockProps, children }) => (
const View = ({ attributes, blockProps, children }) => (
<div {...blockProps}>
<p className="title">{attributes.title}</p>
{children}
</div>
);

export default Frontend;
export default View;
Loading