From 15a95cfca84ba9a9cfae1d9c7a69bba332410ea0 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 24 Feb 2019 16:18:50 +0100 Subject: [PATCH] Add documentation aboud custom render in Blocks --- docs/.vuepress/public/block-custom-render.jpg | Bin 0 -> 8662 bytes .../.vuepress/public/block-custom-render2.jpg | Bin 0 -> 7956 bytes docs/modules/Blocks.md | 53 ++++++++++++++++++ 3 files changed, 53 insertions(+) create mode 100644 docs/.vuepress/public/block-custom-render.jpg create mode 100644 docs/.vuepress/public/block-custom-render2.jpg diff --git a/docs/.vuepress/public/block-custom-render.jpg b/docs/.vuepress/public/block-custom-render.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1a883d74942f820854cc53ccb5535d680901a486 GIT binary patch literal 8662 zcmch61yr2NvhKiOAwYtM07-C|K?1>Df(<@6gM&0`InIa9FOqT4xBm1D z2VE<#qccq4(;{Vc|UKm+|R z)c`rXyZ0Iba!Anq^2J;{?f^3N)HO#pHQwS2ns)%c-uWe$t@eW)o|=0#UyZuXUqlZU zqeK3%>Q9+J4a8a4Z$5mK$c>Tkue!}^ck%F*b;X~6wB(Z+sXoszVHb-&`VYhZ*&~pt z-eGwC9E*vV0rJ}Yn6Aei9z*u{8YLMfkD(9jT0vs!(o50T^|Z;=9A|~06mv`4u}l@i zQ=+gd>pbe5jTg%RLEmjJF;m?%y8OHE7cB$int~7$TF0&tZFOq z+qVUCJ<2~ac@^jT@`|1~^7ska99LfIE9#Vw%#e6ST7BgZG9fVhX;|z$4hU+4NV}O1 zyS<+bTo=O@FeapUOP=rdwDzI?H9^3$n0E{!41}*zTvt~YV|oqW8hNvJxzIt}E#1ll zH6$S92snd^?+c^?wKL}O}4|-fQNd+VYBy0cYVGHY0-!& z*=I@B_XGVpQnuR;f!xlR3|?*KoGhv!@m15CwD~R3-V3i%P4zjp(WUZMj+J^u^so`~ z4v@9-a^moq@R`lVW-EAvoGkL?vSk57Qa;ztknV;9&Rq|ore3~dfl#=AFsZ;VkAM}qkCO-_`S4oG zcR!K}|Ff!C`*_12Y8m;1%Ay0%Y|aemhw5T zqKwuLOfx*e!U+v=^fdxr^rC=I>a6eB3*BVCd4K!ph03A-W4r$KZ`E7s zVDE=V-4NJm&4^O$Xmk)~Z-R!U+2_x8-bq2Dnzs5z&!66?%?y~fDyxTUD6-mk%114_ z_?x;T_11=M?HyF)K7qw0==U5C2c1`gMd5<0EEmPGNjq5X|iWTBwYV{OZ zm{qGw{m{wKCq08663QsI;~CEE+dc~3zs_zr5~2EC(|D+_p?#KL-YfzeH9jsCU#3(c z8FirwuBw=GZ(QtUaHN1gL?imh!fcG4;7K1v7o>AF?5nj4{+td!*jN&-D+%dludbYyKZ7!k1J0OrheR;Z_MOPSwCp)D)dAcHz9iz}TkXjdz5 zh1|r3AYL59rdylZ6dc9v(|R{>gGcxcKi<*5b9AT5ds{82Fs76=$(4_K02_i%B>=X^ z&~1nv%gWLc1S24^D%GKDl>>YlZ@{{0l-}n)G)IMgasTj{Bv?yDfB8QW?Y+@EKz?($ zUwz`+&GI`yL$B)7MI)ziicO(iFWGfXGzPT!)GeRoxE8M|CCdSKnVX^5{8F+U!#iR5xfZsPO)8-0O{bU{N_)aSc{{hax@Ua}$BAf|;Jf0N%M)#1^*L96w%cT7E)b=E;i-p`cA=9z~9 zCYu%XlRkdpi)=e-Dn!jdF#Z~<7lYSZ8oo&U7$K8RM|RE1ZmjCSm7X+UClv<4J*Cf@ zzPdQ%A;@$e^0*-~baGRi&0iRrq^jYq*Wl*a%$L`o8-vfZZ*{T*3Q$^lz7uY09O+Zv^_YuoP@)fgxG4;S)hAX~tWOI~Xf&hFXRnY;`v+e=!VgaHOB5vU2RabchmKe8e5iQu>={JLUMG z)6|%jnpfxv^4Hd>@x{%uCdi*t(`u`my&peiN&IBIINBC?*KHtOp~32QGV_VpX8p7> z!hk=eeQ0G3nb44q4O0lMpM%fpEkktr!ii$-e8E8~d&Qq5d>!Be0&zbOM|-OrU*bYy1jR->XbZic8eYVvea$!Ni(C;x>lWKgL#ae%UnOnjz1^Tr(Q!iiZI|U%Chx zO#9DRiPGhN$1OFZ=9lGPmbywsVoCipe=%`JRQ%@tuaOFNZI(U!{Il_qZgS;?FZ00q z%b~Q7__UCTuki1hCE9SUAHHT@+UildTm!zS8x_P>RUg&c^#Rh5(v;o$n7&#es~~}= zT+48%MyYm%W;D4zjjZ&52+#OWhlVDCc2uwq6jL^0Y_r1B7X0YFL#Ze|nCgIC)?w@% z`JvvR+7;C5LGwGM7HI zWXETrJ*x_ly((EGcGTuPjaAExmVHRaXzFtFb^OAzmJJ($B{?u5d+h;Mo`0gdaz1S1 zd0<8n)SHpGt_O!(u7{}8Fr}5C1iglynP^^S8F+BR z@?{0j+YQTqh|8(*rEMvUU_o%qFcG8-E@U9>mzWQ~`9XZHfFETfhnLQr>9b$DgR3Te z(17V*d3OZc69LTqx;vty2*UL-1{X=YZjM7wndK3&LBCrF8DnpK%JwBc)AL)o_CXGd*iwM4PxPKEmCM%AmjFBj zh7MI5pRV5E$VkVeDFJy7Ps`unI`F3rdA_^X9tTCb9b4F2;6Y_o_}-enViCfAwE$&P zlZdaUHYBM5Wt%h-!I`Ar8M#pofDVx~&}$o(URmt*SQ1hUyb{DxdtEg||0$HMF4J0f z{Y7BWCuV?Bv1&%X-~nr2kd)*HN20WhUzW6^H8pixZ8<6~-%tHzm7KDa27A3i>rF%i zY9nlzBVA(gLmG1&DjX)er$O2rNz4sK>WjaZD*5r24}!?;IXCiq6~f>_UR-dkkole;?o$ioabh6r_o3aye<4$+gt;r)*NW4`NC1W{x}eER!O zHQ>n4@sSaWPg<;0i5eA42f#`f!84i9FNl%K2%auSn({Gd7Q;QOXjg>({?y57pH!{hcZBS`IE z84-Hi?Hsw7)VZV-3NI-)u?k)aq0o7%!EZQ#5pakL)C=EB0}5|?mw&t|zDKg6{wIfu z<#v$usw6Hhhc8e8X_Jhpw@HJu^R%lv)Y{XZ%Nl$VvgAc)?kBQBW6kN-HJpQ^`K6}^ z_mreQDxM54@n{vCOo1dJt70c{dWg1*TDJnN=Jp6riux|jMd>$0HDL3=1Nn3B0R1pJ z71=q7a?Z74?xAO2Yx~cx%`M7@e;nD#uy+o=TvaKYC9sB!=Vdoo{^rrT1H4R7v_tUM zR~QzW9CEf(oVGJmV51l0Bn0&RC?!s`fd2Ak+i^0dwZro)5lQ85$T@XMfkmP;^FY0d z$)Yw(CHgI+?_UngY*6*UD+E6)S=&EqX?%SdQ-X*Xb~Q80aWDGx{%t9mf)3vUHMy-b zy<2A){ZI>wz9{I_LD<5DFai9Wu4?KgY-*K@NWnHYIm@iCF%%N2%0gW#SAqSZk*vgF zR5{R`zqpu4`*ruf&kbm}<0jcHm}#a&W6K*d`zEh&BCY^4 zuG-qZRkyoNgi*2blbXj>d*fN#w({cGZcBlF0!f~t`C{<4!MKFNcUE+WQu&+W1A@!vL$@x*(GcJONOjaB zpLD7DLtpm-iyPcxxD~C%D|aJl6h$*2+j#hL}>lzb}^y~*FD zv7!*_Cb;tW0o-W8mfp#-I6u?O$%E`v%xq+$;P|&K_N=FnJDgQJ59UhE1x%G!>3|PU zB}qEd4}hTwwM{&N>%ZV%ruBz!^*Kj_E(Ece-MLZ6uBhg3gz53mu|M<#69$^8#wVIh z(~Z<2P;20Lgm9M5dvS5l&sw;_YhL8=&WVv}mW^ZhhBnj~^!5uj6*1R@J4D{rfS;$465_aD%dRP&6ZiCb4 zrurT_y`)G@{Z%L6NxzppP9w7Z~v8^0aT znSV%AWNe#m4T;hsNQmOA@>3JD&*3ThdnBZ+<-;{GJtzK(wd|}IGtBf=){-U}e_^(; z+j7_P8XR~OTDUJZ89N{R9Sv7Z2JC^2Y+cU8Gq^NJP6Xf*-*p3C7o3i5YSldv zvv6C*Wg}+pU%<9Er5_t~jF0XL0~ElxGa?&2@xFgZ2c1VV~XFt~ml+wDEA9>3z2wS?yb;qK-k{b?p| zhQeoru|R7Qn73Mkns~Hh{1>w=S(IvAtcy+leV~lGojdZCc4aR$G>IiolCH71S)eYy zb!|)ceF}s<{F_%6By<>+=~;I`#rWDUq6czG|NFVgg*+DFk>UKA@0-M|DCH-?cF{V=h^x#w3=MIiaR%T0TwS* zml0QIhTUDukHSY$2Vp}KN~$2iW&OK)m7CXs11dbiV#KcU=XMfeY+k;=@ptvBy0?{L zc54n^1JJMPtY*M7_wcPsh`US0WK$%C3FdD4CbQPv-zguE&X=BhHUBc3#TK;lM+pplHUwNTVlm(x7@v)5y^o! zhlGRSR>z|1ZB_XW10J`c^KJY^MP7FR-D!_wM+Li<4pUb}7I)!@xs-M=flab$HD2rR z8e*Ch!)hI=Sw2~yKC#QiqT1V>WIWAcsES^e_3d|BV1;%lhicI9M;JR-uoE_beA-j* z4q$#AN#`F``-o<|RQmP5Ld5?_U!X?K=$k)%e#$x1=!5d}ze2 z)x0Og%`^6E51%J$U?gB~dw$+8aR80D=J)D0iXbC~JlZom9fh-S>5iX!Kc4F5or|QX zWxraYs!PYfhfI{x<${F4qLf`q2TRvQ?Sa`Nx~T}}GOOpcd_%R{9#n-rU(?Ou<{NU+ zOyFn@8!`y(is)bg_q#^U#N1cfM2m?enAU`oQRNK`zm#1o|rFqhZnuv*;mcGtvsIG%!upjuB(1; zg9ZwW!NlvT0)e(H3@@mOHTn!J)(hJesZXm)ygW(!B{k!B6%2@%XWuos9_B)t^V8b& zG=fj5adf8&3UAO}Fs?bLKWakhk;$vo=61Ex{!j55-XC}^)~kk~lbX6L`(pg*%-@P@ zfO7R5k>2G+!%wyu-HM{vVky~)YU-6H8Q~r16C?=Ark~cSofig{8Ya)0}lB5>~j5 zQhu$}tq{jmLC1f@z(=DbI%Q!)tw#ltN5iKtU|?$g3M@v-Y~QxAXOl_Sn%; zJng7HM70zwW}No8;}S6x#S;nQg{W$5cZ>t|2JO0|s#PuN*9Z4M-%#*t){>5f_b%V! zWPPI?R4h_2u*D0n=4@&S*hx6bFxQzV#RWA?@q_32pOJ!=TjZcq-+hJ$?I>c~Z&?=; zW>ew?UW_w1oTY2+UdaVfOZ>X&jn%~YE3E7NLGQ0z z2CxZ3y$ttF60O?OciYeeTY37$_}3^?N))xne^Z>l2jDEX#EYLZpk<1ZbaPueHw(|5 zIwoixQ?QnsT7|!$ zcPT9?I!wzXDy%Kvnw;PNJtYmQH(*h|o$;PBBI`xdBgR5#XFu`hMX zVcZuIET1-{)4%61ib&0^9yL!Yw{abTQ5 z2A#AmgS-fe&%?dhaP7u-MB6!6<*lngV#BdO>ySX7scGdUBRPwudN^$2E&q@_8l7Jw z1j^4qH-{-pFxP`}Sh!yK*2t?MvXSAWbo11R_P}n+AaM9&bjkaQSS-D)zP1{blvM}K zs6>2RJa?HCGrdJig{Ur~s4=24QoP8TElZKv-&Q=XKF_G49iY5cB?EBLWSYJOS+d}}>3sl*_={;QNv z``R}h-v7-RR{W_{36!tmv$vfEo@$-;Tf~!-p_Qa|AFe`_CrpmeSn^+dD*bLC#{?^F zbSz;rSc&x*sUJ<#I=)`Cw0nepyDXDc6Jncwai&RITQV4g_OD9o^EYczDtt%hr`wbL zQ@zc4SLGvWk2hpWy#&=3TmZ8{kPz3%n$@m{8(i=#9#1;Y976i2FYg}IO9ZhmN z&3qO>>+(bXfXTUOaXe&)+a*(|h2IAk+nJ5Azxx1Hl->G~K-$R>4`_`6$Voa)}VnF~Qv} zTrtr?ux7ootDi<%+@)DBj$Qn}9%}v{9h3UHc!RLmVg)p`Nt2@(4Mc5lsEaUkjGT>8D~P6h6x;h1%CS=vF;Mt6qUUxj(bGr zG5iWe@9r>akd%H1zF{Azuhu@!5ra0i%=o8Ta6umq5fq`ol?@R0H_V2Mkoa>|DuGmG znR2%0!#njH!yGcD_fXY|)fVJfLTn_e zM)o+wt>O2;#LT&MrDQR?(9hblN4rr>2{3aWR_^GNhE}>yYPfdG4TLR&S_iHyuyTt@$KA-&zZJzo-QA1?x{?Q^Zb7ie{}cte*vl}AMF4D literal 0 HcmV?d00001 diff --git a/docs/.vuepress/public/block-custom-render2.jpg b/docs/.vuepress/public/block-custom-render2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b9a303a3f7b482e943c2bd899e68ef9f511ea118 GIT binary patch literal 7956 zcmc(DWmH_tvhd*U62XGYFyvrCf(M&HGicD@I=~RzLqc$Ohh%UIGPoqTyAOmwaEIUo z_&6u`oxAS2@5lT1)mpoIud1%@-MhT*X782(59K^;ECB#8m4AP|KMO@Vq)RoVq@cAW8>oE z;@tx-K0e`}a6b|e5fYO936y^W8YUJNE)FgUK0XO0F){Jq`2X|E-4_5EE+7U_hk-^0 zKqo`PAVa(B1eD%?HX0Th8rr{agoS~PgNuiW{wEUSKPUin3`{I+G*SQ>1_nAhCO#ep zCK}eCH@wFK$gs$<87X*~G;pL}##Zt<$5B$@n!w+VRgLq%5s+bikPBsD4g6~Qk(%xP zcyzS;4REk<(J}ry7>x`agOQh98uR5nM{F(=1y|cS;}r-=n`^M zy+MijF#|?RofCf&!$FeuM*O31u9V2&S?F01V1s|2eV!5{W5hb!TAld+NJ6`!vrflC zWRo%lT<1`t2dLv?lu!OOWo3(e1s_OKQue<7^)M6tm-K*nh%vb@@65G_`s16(TWFj8 zWfvOD>`tSPXuus{g#$m~Prg5|0{C;M{EH?YFT^Dl8uT}oxaltb|d6#a-ksw?FD<$3Yqsr6gkwQk&W8t z5d_#v=}0wf78-4b>He^@F&y!CGiW(z$ZWS@YD0@9ZT47dE) zCG?@yxV@gVm49P2-aiuoNi{h`VpRQ%szQj8 z8;UtzfuWRVZ~Ix$BcE(v15;;LY;0j8R%V>43n`gMqCS=ONGt?F1+z$JL5V{m%>w+0 zUYyphWk`MF4p7EDlXZOktA99>wG0vMBSV^3?7cNcg^L5$Ae$6?x~ca?ZPZS@2{9zN zy8tdved^tx8qX@$09_Lr^gIXaO;*C#qeBb;!f3{x&T=48aXh+;Z)~R>AkxV?J}3M+ zI5(IJuE<>qVnt>`z+hTYsUr+3fPA?X zP{_MNbtol76aA{=tC6eQ9)DRj2&T(>J2SudeYKiNOt%L^6n*+t)@kg)%Ngc0^f^dH z{`S!<36@qm?F&J-X5isPvcax`+w3l}=u;nKQeZTnxpnkPJN2?2LilHxu69)dE0Bf2 zm#U)HAMahu-ZXbndHy30lSi?9^k_5YX3PUVGI4wHgJB;D*rm|>k*7LV)%sUaj!tJ{ z2Y%sM#m!Trd{qCk{vG6BPGBQ>SUdXI;i(J+r~QGG%Fr!uT*I{*+5ckaO0Z2y@?o>( z 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 - Block Manager

+[[toc]] + The Block is a group of [Components] and can be easily reused inside templates. The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc). @@ -69,6 +71,57 @@ If you want to check the complete list of available Component's properties, chec [https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js](https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js) + + + + +## Custom render + +If you need to customize the aspect of each block you can pass a `render` callback function in the block definition. Let's see how it works. + +As a first option, you can return a simple HTML string, which will be used as a new inner content of the block. As an argument of the callback you will get an object containing the following properties: + +* `model` - Block's model (so you can use any passed property to it) +* `el` - Current rendered HTMLElement of the block +* `className` - The base class name used for blocks (useful if you follow BEM, so you can create classes like `${className}__elem`) + +```js +blockManager.add('some-block-id', { + label: `
+ +
Label block
+
`, + content: '
...
', + render: ({ model, className }) => `
+ Before label + ${model.get('label')} + After label +
`, +}); +``` + + + + +Another option would be to avoid returning from the callback (in that case nothing will be replaced) and edit only the current `el` block element + +```js +blockManager.add('some-block-id', { + // ... + render: ({ el }) => { + const btn = document.createElement('button'); + btn.innerHTML = 'Click me'; + btn.addEventListener('click', () => alert('Do something')) + el.appendChild(btn); + }, +}); +``` + + + + + + [Component]: [Components]: [Blocks API]: